I just can't position with CSS!! What am I doing wrong? >_<

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

I just can't position with CSS!! What am I doing wrong? >_<

Post by Sindarin »

After my previous layout not being compatible with IE6 and had some problems with printing from IE7, I decided to remake it.
Problem is that it doesn't work properly under IE6 no matter what I do! I'm one step from taking a template and tweaking it to make the site, which I don't really want to do.
Once I've started remaking the template, when I added the white button it appears in the right position in FF2 but not in IE6, but I can't find what's wrong.

Image

Can someone tell me what I am doing wrong so I'll learn not to do it again. By the way I can't comprehend what positioning I should choose for the site.
It's a site centered in the browser, that simple. What I should use? Floats? Relative? Absolute? With each not-working template of mine, I get so confused about them. I will upload the so far template I am testing,

http://www.mediafire.com/?glucjzzmslm
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: I just can't position with CSS!! What am I doing wrong? >_<

Post by Christopher »

(#10850)
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: I just can't position with CSS!! What am I doing wrong? >_<

Post by omniuni »

Hi. I believe this is what you are aiming for?
page_in_ie6.png
page_in_ie6.png (140.39 KiB) Viewed 329 times
Using the same "files" directory, here is the code I came up with:

"index.php.html"

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<!--encoding-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<!--title-->
<title>????? ????????</title>
 
<!--css-->
<link type="text/css" rel="stylesheet" href="screenstyle.css" media="screen" />
 
</head>
 
<body>
 
<div class="centergradient">
<img src="files/images/layout/banner-background.jpg" height="150" border="0" />
</div>
 
<div class="mycontent">
<hr style="visibility: hidden;" width="100%">
Your Page Content Goes Here.<br>
<br>
<br>
More Content...
</div>
 
<div class="toptag">
This is TopTag
</div>
 
</body>
 
</html>

and "screenstyle.css"

Code: Select all

 
body{
background-color: #FFFFFF;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
margin: 0;
padding: 0;
text-align: center;
background-image: url('files/images/layout/background-gradient.jpg');
background-repeat: repeat-x;
}
 
.centergradient{
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
 
.mycontent{
position: absolute;
top: 150px;
left: 10%;
right: 10%;
width: auto;
background-color: gray;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 30px;
padding-bottom: 14px;
}
 
.toptag{
position: absolute;
left: 14%;
top: 140px;
font-size: 12px;
padding: 4px;
padding-left: 12pt;
padding-right: 12pt;
background-color: white;
color: gray;
}
 
 

And don't believe what IE says, I'm running it in WINE on Linux.

Also, http://www.apachefriends.org/en/xampp-windows.html
It's very useful for local testing, and lets you not have to worry about *.php.html stuff.

I hope that helps!
-OmniUni
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: I just can't position with CSS!! What am I doing wrong? >_<

Post by Sindarin »

It shows up okay now with the above code, only problem is now that when the user resizes the browser, the content is no longer centered and there's a huge empty area at the right. I need to add a wrapper for this but it doesn't behave good. Maybe it's the absolute positioning you used?



EDIT: I based off on a template and managed to go far enough, but now there are two problems to tackle:

1. The background image get's cut off when the browser is not maximized. (image below)

Image

2. Should I use the same way to add the content on my page? (using absolute divs)
or should I go with floats etc. (like I tried)

I attach the so far result below, if someone can help, it will be much appreciated.


http://www.mediafire.com/?y4xte9madr4
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: I just can't position with CSS!! What am I doing wrong? >_<

Post by JAB Creations »

Only test your main CSS file with Gecko 1.8+, Opera 9.0+, and Safari 3.0+ which is what most people not using IE use.

Then unless you're testing IE 8.0 (which is in beta so no not worth testing with yet) use conditional comments as I mention on my website here...
http://www.jabcreations.com/web/web-ieccss.php

So again: code correctly, and simply adjust the code for IE using a secondary CSS file as I explain in my tutorial.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: I just can't position with CSS!! What am I doing wrong? >_<

Post by omniuni »

I agree with JAB. Also, in time, you'll be able to learn what works in IE and what doesn't and adjust your coding appropriately. I recommend avoiding templates as anything bug a good reference, as they can be unpredictable when modified. You may have more luck modifying the code I supplied above. As for centering things, it's as easy as changing the alignment in one of the classes.

Either way,
Good Luck.

-OmniUni
Post Reply