Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

IE6 not positioning CSS correctly

web_god61

web_god61

macrumors regular
Original poster
May 14, 2004
111
1
hello, i spent a good while trying to figure this out and final gave up. The issue is this page displays correctly in every browser i tried, except IE6.

Th problem is that the content starts below the header (which is transparent to show the error). This pushes the whole page down causing the scrollbar to appear.

I cant figure this out and i really hate microsoft right now. Any advise will be very appreciated. thanks.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<style type="text/css">
*{padding: 0;margin: 0;}
img{border-style: none;}
html, body{
	height: 100%;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}        

#header{
	z-index: 5;
	height: 75px;
	width: 100%;
	position:fixed;
	top: 0px;
	left: 0px;
	
	border-bottom-color: #13279a;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	}
		
#container{
	z-index: 1;
	height: 100%;
	background-image: url(images/background.png);
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	padding-bottom: -55px;
	}
	
#main{
	padding-top: 75px;
	width: 650px;
	margin-left: auto;
	margin-right: auto;
	}

#footer{
	margin-left: 25px;
	background-repeat: no-repeat;
	color: white;
	width: 650px;
	height: 55px;
	background-image: url(images/footer.png);
	font-size: small;
	text-align: center;
	position: absolute;
   bottom: 0px;
}

	</style>
	</head>
	<body>
	
	<div id="header">
		<h1>HEADER</h1>
	</div>

	<div id="container">
		<div id="main">
		<br />
		<img src="images/about.png" alt="image" width="175" height="30"/>
		<hr />
		<br />
		<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		
		<div id="footer">
		<br />
		<p>copyright</p>
		</div>
	</div>
	</body>
</html>
 
Fixed and absolute positions should never be used. I haven't got but problems when using them. I normally use float instead.

What is it with "z-index: 5;"? It just doesn't looks right.:)

The negative padding is also meaning of something going wrong. You shouldn't need to use it. Also, as far as I know z-index only works when you have something with "absolute" position.

I'm also currently checking my webpage works correctly in IE, and it has been a burden to change so many things.:(
 
Roco said:
Fixed and absolute positions should never be used. I haven't got but problems when using them. I normally use float instead.

What is it with "z-index: 5;"? It just doesn't looks right.:)

The negative padding is also meaning of something going wrong. You shouldn't need to use it. Also, as far as I know z-index only works when you have something with "absolute" position.

I'm also currently checking my webpage works correctly in IE, and it has been a burden to change so many things.:(
Click to expand...

You have a problem with absolute positioning, but fine with floats? Floats tend to be much more problematic. Absolute positioning has its place and fixed positioning would be fine if IE supported it as it's a nice feature. The z-index he's using is fine as well, and also works on non-absolutely positioned elements.

On my personal web site I've stopped going out of my way to support IE, though do make sure the site is functional at least, just not as pretty. I make sure there's support for IE though when doing sites for others as they usually care about that.
 
having the same problem with a web project. IE completely sucks some serious balls..too bad they will mark the project using IE.

hope you get your issue resolved, IE is VERY picky about the formatting, goodluck!
 
angelwatt said:
You have a problem with absolute positioning, but fine with floats? Floats tend to be much more problematic. Absolute positioning has its place and fixed positioning would be fine if IE supported it as it's a nice feature. The z-index he's using is fine as well, and also works on non-absolutely positioned elements.

On my personal web site I've stopped going out of my way to support IE, though do make sure the site is functional at least, just not as pretty. I make sure there's support for IE though when doing sites for others as they usually care about that.
Click to expand...

I'm always having some kind of trouble with Absolute position. Besides, I find myself typing more code doing it that way because I have to format text and other things surrounding the image. Regarding z-index I was under the impression that it doesn't has any effect when you don't absolute position something, since when you use float or something else it would normally don't let you put things overlapped. Tho, this is coming from a not very experienced user.:eek:

The current site I am doing is for a business, and most users (above 90%) use IE.:eek:
 
Update: Still no solution but i found a compromise.

To remove the space between header and text i used this,
HTML: 
<!--[if IE 6]>
<style type="text/css">#main{font-size: medium;padding-top: 0px;width: 650px;margin-left: auto;margin-right: auto;}#container{height:100%;}</style>
<![endif]-->

Looks like the empty space at the bottom will stay for IE6 users, to bad.
 
Yeah, that the suck part, there are still many users using IE6 especially for companies. So if your website is meant to be viewed by business people, then you might have a problem because you have to deal with the possibility of IE6 users.

Lets hope Microsoft forces people to upgrade to IE7 or IE8 ASAP. And I find it hard to imagine that IE8 is on the horizon, yet majority of the people using IE is still on IE6.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back