Synook Posted December 26, 2007 Share Posted December 26, 2007 Hello all,I'm working on one of those CSS fluid-width two-column layouts with equal height columns, and I'm almost there! However, as usual, IE is not displaying it correctly. The left column is rendered in IE 7 with less space at the top of the text then there should be, and as a result the menu goes over the body-top section, which it shouldn't. All other browsers display it correctly. HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>RoundedDesign Technology</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div id="container"> <div id="header"> <div id="header-left"> <div id="header-right"></div> </div> </div> <div id="body-top"> <div id="content-top"> <div id="content-top-left"> <div id="content-top-right"></div> </div> </div> </div> <div id="body"> <div id="body-right"> <div id="menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Products</a> <a href="#">Design</a> <a href="#">Contact</a> </div> <div id="content"> <p>Lorem ipsum dolor sit amet consectetuer id et cursus Curabitur hendrerit. Id ante eu hac Donec Donec Vestibulum elit Nullam ut id. Sit mollis leo Donec pulvinar sagittis pretium vitae urna vitae facilisis. Ac et nibh dui pede leo Nam pretium id enim mauris. Ac adipiscing Vivamus ut orci ligula enim Sed vitae elit auctor. Justo id tellus tortor ut nec.</p> <p>Sociis vestibulum Maecenas Morbi dui sed tempus eu Ut eget ullamcorper. Malesuada congue libero Pellentesque libero tempus ac consequat turpis orci sem. Condimentum Lorem felis euismod nunc lorem eu sapien malesuada dui et. Laoreet natoque ac tempus orci vel sed vitae dis Sed rhoncus. Felis Curabitur Morbi et pretium volutpat Aliquam ipsum Morbi Nullam urna. </p> <p>Leo orci pellentesque auctor metus Nam vitae quis Sed lobortis interdum. Diam elit Aenean id enim natoque nibh convallis sed Integer convallis. Nulla lobortis condimentum ut malesuada aliquam hendrerit Vestibulum porta wisi libero. Suspendisse Proin dis sem risus accumsan sed ac wisi fringilla lacinia. Malesuada Nam justo gravida tellus pede Vestibulum Vestibulum lacus.</p> <p>Laoreet metus eu nibh pellentesque Nulla enim euismod lobortis felis morbi. Nibh nulla congue wisi orci metus tempus dignissim laoreet id Suspendisse. Vel ac tellus lorem ipsum velit ipsum adipiscing pretium sit Curabitur. Tellus velit Aenean malesuada Sed ligula Maecenas lorem eros Aenean Aenean. Eu non interdum id Suspendisse non et magnis at pharetra.</p> </div> <div id="clear"></div> </div> </div> <div id="body-bottom"> <div id="content-bottom"> <div id="content-bottom-left"> <div id="content-bottom-right"></div> </div> </div> </div> <div id="footer"> <div id="footer-right"> <div id="footer-left"> <span style="float:left; ">Design Copyright © RoundedDesign 2007</span> <span style="float:right; ">Valid XHTML | CSS</span> </div> </div> </div> </div> </body></html> CSS body { margin:0px; padding:0px; font-family:verdana, arial, san-serif; font-size:10pt; background-color:#FFFFDD; } div#container { margin:20px; background:url(images/menubar_middle.png) repeat-y left top; } div#header { background:url(images/banner_middle.png) #FFFFDD repeat-x left top; } div#header, div#header div { height:164px; } div#header-left { background:url(images/banner_left.png) no-repeat left top; } div#header-right { background:url(images/banner_right.png) no-repeat right top; } div#body-top { background:url(images/menubar_top.png) no-repeat left top; } div#body-top, div#body-top div, div#body-bottom, div#body-bottom div { height:15px; } div#content-top { background:url(images/body_topmid.png) repeat-x left top; margin-left:185px; } div#content-top-left { background:url(images/body_topleft.png) no-repeat left top; } div#content-top-right { background:url(images/body_topright.png) no-repeat right top; } div#body { margin-top:-16px; /* Why???!!! */ margin-left:185px; background:#FFFFFF url(images/body_midleft.png) repeat-y left top; } div#body-right { background:url(images/body_midright.png) repeat-y right top; } div#menu { display:inline; float:left; width:140px; position:relative; /*left:-180px;*/ margin-left:-180px; padding:0px 8px; } div#menu a { display:block; height:30px; width:145px; line-height:30px; font-weight:bold; color:#333333; text-decoration:none; border-top:1px dashed #A3A3A3; border-bottom:1px dashed #A3A3A3; padding-left:2px; } div#menu a:hover { background-color:#999999; border-color:#888888; /*padding-left:2px;*/ /*width:145px;*/ } div#menu a:hover:before { content:""; } div#content { /*background-color:#FFFFFF;*/ padding:0px 15px; } div#clear { clear:both; height:1px; } div#body-bottom { background:url(images/menubar_bottom.png) no-repeat left top; height:15px; margin-top:-15px; margin-bottom:-1px; clear:both; } div#content-bottom { background:url(images/body_bottommid.png) repeat-x left top; margin-left:185px; } div#content-bottom-left { background:url(images/body_bottomleft.png) no-repeat left top; } div#content-bottom-right { background:url(images/body_bottomright.png) no-repeat right top; } div#footer { background:url(images/footer_middle.png) #FFFFDD repeat-x left bottom; padding-top:11px; } div#footer, div#footer div { height:54px; } div#footer-left { background:url(images/footer_left.png) no-repeat left bottom; color:#FFFFFF; line-height:54px; padding:0px 15px; } div#footer-right { background:url(images/footer_right.png) no-repeat right bottom; } Link: http://www.roundeddesign.com/rdtech/ Link to comment Share on other sites More sharing options...
Ingolme Posted December 26, 2007 Share Posted December 26, 2007 Well, that does seem like some problem.I wonder what would happen if you removed this:div#body {margin-top:-16px; /* Why???!!! */margin-left:185px;background:#FFFFFF url(images/body_midleft.png) repeat-y left top;}And if it doesn't work, then you could try to add a CSS hack for internet explorer that tells it to add some margin at the top of the #menu div. Link to comment Share on other sites More sharing options...
jlhaslip Posted December 26, 2007 Share Posted December 26, 2007 IE conditional for the spacing you need at the top of what should be an Unordered List of links in the Menu? Link to comment Share on other sites More sharing options...
Synook Posted December 30, 2007 Author Share Posted December 30, 2007 I suppose if nothing else works, then I'll have to use conditional comments I wonder what would happen if you removed this:It then works in IE, but all other browsers shift the body away from the body-top, creating a gap. Hmm... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.