[css-d] ie problem with text going over graphic
Hi, How do I fix this ie problem with the text being spread out over the flower? http://www.designhosting.biz/newsite/intro.html I have a style with a blank.gif in it which works with mozilla and netscape but not ie. If I take the gif off the div and put it directly on the page with a right alignment I get the same problem with ie with the text going over the flower. I would prefer to use the gif in the div rather than put it on the page. The styles are: body { background-image: url(assets/bg_intro.jpg); background-repeat: repeat-x; background-color: #163647; margin: 0px; padding: 0px; } #container { width: 100%; background-image: url(assets/bg_flower.jpg); background-repeat: no-repeat; height: 500px; } #introHead { background-image: url(assets/intro_logo.jpg); background-repeat: no-repeat; background-position: left bottom; height: 120px; width: 200px; } #bgLine { background-image: url(assets/bg_line.jpg); background-repeat: no-repeat; background-position: left top; height: 20px; width: 460px; } #introLinks { float: left; width: 200px; background-image: url(assets/bg_intro_links.jpg); background-repeat: no-repeat; background-position: left top; height: 100%; margin-left: 20px; margin-top: 40px; clear: both; margin-right: 10px; } #mainContent { font-size: 11px; line-height: 1.5; color: #FF; margin-top: 40px; width: 700px; } #blank { background-image: url(assets/bg_intro_blank.gif); background-repeat: no-repeat; height: 310px; width: 270px; float: right; } Thanks! Sincerely, Melinda Odom Design Hosting, Inc. www.designhosting.biz 479-471-0891 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.432 / Virus Database: 268.16.5/616 - Release Date: 1/4/2007 1:34 PM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie problem with text going over graphic
Melinda Odom wrote: > How do I fix this ie problem with the text being spread out over the > flower? http://www.designhosting.biz/newsite/intro.html The 'hasLyout'[1] bug (yes, it is a bug) is taking over, triggered by the width on #mainContent. The result is that the entire #mainContent is lining up alongside #introLinks, thus is shifted 230px over to the right side - in IE/win. So, #blank also ends up 230px too far to the right, and the paragraphs are 230px too wide. There's no easy way to avoid that IE bug without adding more elements, so you may as well play along with it. Changing styles on #mainContent to... #mainContent { font-size: 11px; line-height: 1.5; color: #FF; margin-top: 40px; width: 470px; float: left; } ...will correct the width to a more suitable one, and make other browsers line up that element like IE6 does, but in accordance with standards and not depending on bugs. BTW: no need to have a background-image on #blank - not even a transparent one. It'll stay transparent anyway. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/