SharkBait Posted September 27, 2007 Share Posted September 27, 2007 Ok I am using this bit of code for an image that sits on top of a div tag to round out the top 2 corners: <div style="margin:0 auto; background-image: url('/images/top.gif'); background-repeat: no-repeat; height: 9px; width: 902px;"></div> <div id="mainContainer"> Now Firefox displays it properly and there is no gap between the top.gif div and the mainContainer div. The image is 902px wide by 9px in height. Now in IE it seems to add padding below the image or a gap between the two div tags and I am not sure why. #mainContainer { width: 900px; margin: 0 auto; text-align: left; padding: 0; border: 1px solid #36c; } What is it I am doing wrong that makes IE place a gap between the 2 elements? Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted September 28, 2007 Share Posted September 28, 2007 Try to add "overflow: hidden;" to the div. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted September 28, 2007 Share Posted September 28, 2007 If you want a way that supports scratchable layouts, then you should play around with the below css. It would be possible to use EM everywhere in the below, then you could even go as far as inserting the "images" as... Images, insted of "background-images", you could then use EM to define width/height on the images aswell. However i dont recommend going that far, since newer browsers seam to include a way of Zooming. The below code should allow the containers to fit as the content grows, ofcause IE will need its own CSS trough conditional comments (http://msdn2.microsoft.com/en-us/library/ms537512.aspx), or hacks. but atleast it dosent use any sort of script/javascript. <html> <head> <style type="text/css"> .SarCenterContent { position: relative; width: 100%; margin: 0 auto; text-align: center; } .SarCenterContent:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .sar_01 { position: relative; width: 100%; height: 9px; background-color: gray; } .sar_02 { position: absolute; left: -11px; width: 11px; height: 9px; background-color: silver; overflow: hidden; } .sar_03 { position: absolute; right: -11px; width: 11px; height: 9px; background-color: gold; overflow: hidden; } .sar_04 { position: absolute; left: -11px; width: 11px; height: 100%; background-color: purple; } .sar_05 { position: absolute; right: -18px; width: 18px; height: 100%; background-color: blue; } .sar_06 { position: relative; width: 100%; height: 9px; background-color: green; } .sar_07 { position: absolute; left: -11px; width: 11px; height: 9px; background-color: yellow; overflow: hidden; } .sar_08 { position: absolute; right: -11px; width: 11px; height: 9px; background-color: brown; overflow: hidden; } </style> <!--[if IE]> <style type="text/css"> .SarCenterContent { height: 1px; } </style> <![endif]--> </head> <body> <div class="sar_06"> <div class="sar_07"></div> <div class="sar_08"></div> </div> <div class="SarCenterContent"> <div class="sar_04"></div> <div class="sar_05"></div> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> </div> <div class="sar_01"> <div class="sar_02"></div> <div class="sar_03"></div> </div> </body> </html> All you need to do is replace "Content Goes Here" with your own, then use a wrapper and define the width of that wrapper. I am using this in a no-hack 3 colomn CSS layout, with images as borders + rounded cornors. And i've tested it to work both in IE6-7, FF, and Safari. Good Luck! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.