IE6 not positioning CSS correctly

Discussion in 'Web Design and Development' started by web_god61, Oct 16, 2008.

  1. web_god61 macrumors regular

    web_god61

    Joined:
    May 14, 2004
    #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>
    
     
  2. montanachad macrumors regular

    montanachad

    Joined:
    Jul 7, 2008
    Location:
    Helena, Montana and Lacey, Washington
    #2
    IE 6 not displaying CSS correct? No surprise there. I don't even bother designing for IE6. Browser updates are free, and if people are too lazy to update than f#ck them.;)
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    I think the negative padding may be contributing. Also, IE6 doesn't understand position: fixed; (http://tagsoup.com/cookbook/css/fixed/) I don't have easy access to IE to try it out any solutions.
     
  4. 66217 Guest

    Joined:
    Jan 30, 2006
    #4
    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.:(
     
  5. wheelhot macrumors 68000

    Joined:
    Nov 23, 2007
    #5
    I don't bother to get my website to work under IE6, too many things to fix. :p
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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.
     
  7. DoFoT9 macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #7
    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!
     
  8. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #8
    Screw 25% of the internet!
     
  9. 66217 Guest

    Joined:
    Jan 30, 2006
    #9
    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:
     
  10. web_god61 thread starter macrumors regular

    web_god61

    Joined:
    May 14, 2004
    #10
    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.
     
  11. thejadedmonkey macrumors 604

    thejadedmonkey

    Joined:
    May 28, 2005
    Location:
    Pa
    #11
    use tables :p

    No, seriously, IE6 handles tables great!
     
  12. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #12
    Sadly, many corporate users are simply not allowed to upgrade.
     
  13. wheelhot macrumors 68000

    Joined:
    Nov 23, 2007
    #13
    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.
     
  14. davethewave macrumors member

    Joined:
    Jul 30, 2007
    Location:
    Trieste, Italy
    #14
    take a look to 960 grid system or blueprint css framework.
    these css frameworks are highly compatible with almost all browser engines.
    they are worth a try.
    you can easily incorporate the framework and have all your positioning well set up.
    bye
    DV
     

Share This Page