Page 1 of 1
I just can't position with CSS!! What am I doing wrong? >_<
Posted: Sun Jul 20, 2008 1:08 pm
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.
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
Re: I just can't position with CSS!! What am I doing wrong? >_<
Posted: Sun Jul 20, 2008 1:24 pm
by Christopher
Re: I just can't position with CSS!! What am I doing wrong? >_<
Posted: Sun Jul 20, 2008 3:54 pm
by omniuni
Hi. I believe this is what you are aiming for?

- page_in_ie6.png (140.39 KiB) Viewed 330 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
Re: I just can't position with CSS!! What am I doing wrong? >_<
Posted: Mon Jul 21, 2008 3:14 am
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)
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
Re: I just can't position with CSS!! What am I doing wrong? >_<
Posted: Mon Jul 21, 2008 1:39 pm
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.
Re: I just can't position with CSS!! What am I doing wrong? >_<
Posted: Mon Jul 21, 2008 4:59 pm
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