Yikes! Ie 7 Not Displaying Css Properly - Help! Someone please tell me how you make absolute positioning work in IE pl

Thorned Rose · January 11, 2007

Sorry if this has been answered before (I looked and couldn't find anything). I am building a site off a template using css however I'm sure as many of you already know, Internet Explorer 7 (and below?) is not displaying the site properly. It's fine in Firefox (no surprises there) but in IE, the menu is waaay off. I've read that this is to do with the css position:absolute but I can't for the life of me find the work around/hack to make it display correctly in IE.

Help would be very much welcome and appreciated!

Here is the page in Firefox:

Posted Image

Here it is in IE and as you can see the menu is too far to the right and over the text:

Posted Image

Here's the index.html (style.css is attached below)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;<html xmlns="http://www.w3.org/1999/xhtml&%2334; lang="en" xml:lang="en"><head><title>Fashionista v2.0</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="dreamLogic" /><meta name="description" content=" " /><link rel="stylesheet" href="style.css" type="text/css" /></head><body><div id="wrap"><div id="navcontainer"><ul id="navlist"><li><a href="#">home</a></li><li><a href="#">blog</a></li><li><a href="#">portfolio</a></li><li><a href="#">links</a></li><li><a href="#">contact</a></li><li><a href="http://validator.w3.org/check?uri=referer">xhtml</a></li></ul></div><div id="header"></div><div id="content"><h3>Welcome!</h3><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis. Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante, sagittis vel, rutrum at, fringilla pulvinar, nunc.</p><h3>About the Designer</h3><p>dreamLogic has been creating custom web designs and applications for over 9 years. For more templates, web applications, and our portfolio, visit <a href="dream-logic.com/index.html Web Design</a>.</p><h3>About this Design</h3><p>This template is released as an open source web design, which means that you are free to use it in any way you want, and edit it in any way you want to. We ask that you leave the "Web design by dreamLogic" link in the footer as a friendly gesture, we would appreciate it very much. But there are no obligations so go ahead if you really want to remove it. </p></div></div></body></html>

truefusion · January 11, 2007

The division labeled "header" is what is causing the problem. Since it is floating to the left, it takes up space in IE. Either remove that division, don't float it, use a table for the structure of the layout, or something. I'd go with removing it.

Saint_Michael · January 11, 2007

I concur with what truefusion says I would go head and remove the header div, since any text you put into that div will push the menu over.

Also another method would be to set your margin-left at -1000 and margin-right at 0. It will do the same thing as well. But in both browsers the text will disappear.

#header{background:url(headerbg.gif) no-repeat #552A00 top left;width:364px;height:574px;margin-left:-1000px;margin-right:0px;margin-bottom:0;float:left;overflow:hidden}

But like truefusion said go ahead remove that div and you are set.

matak · January 11, 2007

You don't even need to use positioning for that site...

Cut your picture in two parts, and use one for content background and one for header background

Try making divs like this

<div id="wrapper"> <!-- OPtional><div id="header> </div><div id="navigation> </div><div id="content> </div></div>

Try making styles like this

#wrapper {   i won't comment this div}

but using just this divs like..

#header { margin-left: 100px; background: url(your_image) or just widht: (your image width)#navigation {  margin-left: 100+yourimagewidth}#content {  margin-left: 100+yourimagewidth+yournavigationwidth  background: url (other part of image) center left no-repeat}

i think that should work..

wrapper comment..

you could plobably use margin-left, and margin-right: auto to align it to center, then you wouldn't need that first margin-left: 100, but IE couses conflicts when using that auto..
i dunno why, ask bill gates

fffanatics · January 11, 2007

Also you could change the z-value of the floating menu so that it has a higher value than the header and therefore wont be pushed out of the way but would float ontop of the header.

Thorned Rose · January 11, 2007

Thanks so much for everyone's input! Ok, to the nitty gritty.I can't just remove the header - the header is the space for the graphic so by deleting that, I have no image. (If I do, it does fix it however )Tables are icky and I don't want to have wasted a whole lot of my time learning css to turn around and give up by going back to tables (and yes that would be the easiest solution )Setting margin-left to -1000 still has the same problem although in IE, it has moved slightly more to the right. On a side note, I experimented with setting the margin-left and margin-right with negative values and could get it to the right spot in IE but in FF, it was way off. I've seen 'If' statements use to affect only one browser so maybe someone knows how to apply margin settings using an 'If' in this situation? (I think it might be a hack of some type?)matak, I have considered just chopping the image into two parts and doing that (which I will do as a last resort) because it's such a pain in the bumbum.I tried z-index and unfortunately nada :DDoes anyone know the IE absolute positioning hack?

hts · January 11, 2007

http://www.positioniseverything.net/

try searching here, it is a very interesting site related to css bugs
I sincerely don't know whether your problem has a solution there, haven`t searched, but you can give it a try

Thorned Rose · January 11, 2007

Thanks hts! It's a very good site.

In an interesting update, I came across a hack known as the Star Hack or Star HTML bug. At any rate this is what I have changed:

#navcontainer{background:url(bg.gif) #B89482;width:134px;height:574px;position:absolute;margin-top:0px;margin-left:207px;* margin-left:-157px; /* Interpreted only by IE */margin-right:0px;margin-bottom:0px;}

And it now displays correctly in IE7. However I believe the CSS now won't validate but I would much rather have something viewable than validating perfectly.

What would be great is if you could check it out at http://forums.xisto.com/no_longer_exists/ and tell me if it displays correctly in your browsers (it works fine for me in FF 2.0.1 and IE 7.05) just to confirm that it does indeed work ok.

matak · January 11, 2007

I really liked your design so i think this could help...

<html><head><title>Try This</title><style type="text/css">body {	margin: 0;	padding: 0;}#wrapper {	width: 600px;	height: 400px;	background: url(img/header.jpg);	display: compact;}#menu {	float: left;	display: inline;	margin-left: 150px;}#menu_1 {	width: 150px;	height: 400px;	border: 1px solid #000;}#content {	float: left;	display: inline;}#content_1 {	width: 290px;	border:	2px solid blue;}</style></head><body><div id="wrapper"><div id="menu"><div id="menu_1">Leave this transparent</div></div><div id="content"><div id="content_1">Here goes content</div></div></div></body></html>

Here is the demo!

Now you have to be careful when changing those widths, your sum must be a bit smaller than image size...
Hope you understand this code, if you don't feel free to ask

Oh and, any further divs you must place in those marked as _1..

Thorned Rose · January 12, 2007

Thanks Matak! Unfortunately I can't lay claim to the design. It's from http://www.dream-logic.com/index.html although I downloaded it from OSWD which has open source css templates. I usually download open source templates for inspiration or for a nice layout. After I'm done with this one, only the layout will be the similar.

Anyways, I will give this a go and let you know how it turns out Thank you so much for taking the time to do it! (and yes I'm sure you are very pretty )

In the meantime, I found another interesting workaround:

<!--[if IE]><link rel="stylesheet" type="text/css" href="iehacks.css" /><![endif]-->

And could people (particularly those with IE) still go http://forums.xisto.com/no_longer_exists/ and let me know if it displays correctly as there are other people interested in knowing if the Star Hack still works.

matak · January 13, 2007

thanks, it really wasn't much of a problem. Well using hacks is for noobs , but it works just fine..
oh, and another goodie i found is align..
instead of using margin(left,right):auto, just put all divs between

<center></center>

Sign In

Yikes! Ie 7 Not Displaying Css Properly - Help! Someone please tell me how you make absolute positioning work in IE pl

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information