[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/
