 Yikes! Ie 7 Not Displaying Css Properly - Help!, Someone please tell me how you make absolute positioning work in IE pl |
|
|
|
|
  |
 Jan 11 2007, 05:13 AM
Post
#1
|
|
|
Super Member  Group: Members Posts: 223 Joined: 16-January 06 From: New Zealand Member No.: 17,178  |
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:  Here it is in IE and as you can see the menu is too far to the right and over the text:  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> |
 |
 
|
|
Jan 11 2007, 05:59 AM
Post
#2
|
|
|
Ephesians 6:10-17  Group: [MODERATOR] Posts: 1,918 Joined: 22-June 05 From: The World of Gentoo Member No.: 8,528 |
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.
|
|
|
|
|
Jan 11 2007, 08:05 AM
Post
#3
|
|
|
$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3 Group: [HOSTED] Posts: 6,565 Joined: 21-September 04 From: 9r33|\| 399$ 4|\|D 5P4/\/\ Member No.: 1,218  |
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. |
|
|
|
|
Jan 11 2007, 11:52 AM
Post
#4
|
|
|
Super Member Group: Members Posts: 413 Joined: 4-October 06 From: Psychedelic Realms Member No.: 31,079 |
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 <div id="wrapper"> <!-- OPtional> <div id="header> </div> <div id="navigation> </div> <div id="content> </div> </div> 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 
|
|
|
|
|
Jan 11 2007, 02:55 PM
Post
#5
|
|
|
Privileged Member Group: [HOSTED] Posts: 936 Joined: 14-April 05 From: West Chester, PA Member No.: 5,636 |
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.
|
|
|
|
|
Jan 11 2007, 08:19 PM
Post
#6
|
|
|
Super Member Group: Members Posts: 223 Joined: 16-January 06 From: New Zealand Member No.: 17,178 |
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? |
|
|
|
|
Jan 11 2007, 08:31 PM
Post
#7
|
|
|
Advanced Member Group: Members Posts: 138 Joined: 30-September 06 From: Iasi, Romania Member No.: 30,851 |
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 
|
|
|
|
|
Jan 11 2007, 09:56 PM
Post
#8
|
|
|
Super Member Group: Members Posts: 223 Joined: 16-January 06 From: New Zealand Member No.: 17,178 |
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. |
|
|
|