Yikes! Ie 7 Not Displaying Css Properly

Thorned Rose

Jan 11 2007, 05:13 AM

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:
IPB Image

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

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

CODE

<!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" 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="http://www.dream-logic.com">dreamLogic 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

Jan 11 2007, 05:59 AM

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

Jan 11 2007, 08:05 AM

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.

CODE

#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

Jan 11 2007, 11:52 AM

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

CODE

Try making styles like this

CODE

#wrapper {
i won't comment this div
}

but using just this divs like..

CODE

#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

Jan 11 2007, 02:55 PM

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

Jan 11 2007, 08:19 PM

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

Does anyone know the IE absolute positioning hack?

hts

Jan 11 2007, 08:31 PM

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

Jan 11 2007, 09:56 PM

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:

CODE

#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://testsite.mainmenu.trap17.com/ 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

Jan 11 2007, 10:05 PM

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

CODE

<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

Jan 12 2007, 08:16 PM

Thanks Matak! Unfortunately I can't lay claim to the design. It's from http://www.dream-logic.com/ 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:

CODE

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

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute your information that might help someone here. Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

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

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