How do I stop IE from "moving" text inside a <div>?
Humbly asking for help (of course) IE. I have a div that is a simple background color (#greenback) and contains two other divs. The first (#billboard) represents some center of the text, and the second (#picright) contains the image. They are next to each other, text on the left, image on the right.
Looks ok in most FFs, etc., but IE does weird things for the text div like this: (the blue rectangle inside the green box shows the size of the text div, the div image is limited to white.)
IE6 moves the text partially off the right of the text div so that it overlaps the image.
alt text http://www.conservationenterprises.com/staging/jan08/IE6.png
IE7 moves it partially out of bounds to the top of the text div. alt text http://www.conservationenterprises.com/staging/jan08/IE7.png
IE8 at least keeps the text within the div, but ignores any centering within the div that I'm trying to achieve.
alt text http://www.conservationenterprises.com/staging/jan08/IE8.png
I tried hacking the wand in the text div, but that doesn't seem to make any difference (or is it my placing it in css?).
Any help is greatly appreciated ...
Thanks, Patrick.
my css: (please don't laugh, this is still my first stylish line!)
#greenback { position: relative;
width: 800px ;
height: 250px ;
background-color: #7EBB11 ;
border: 3px solid #112D82 ;
}
#picright { position: relative ;
float: right;
display: block;
margin-top: 11px;
margin-right: 11px;
margin-bottom: 11px;
max-width: 50%;
max-height: 218px;
border: 3px solid white;
vertical-align: middle ;
}
#greenback>#billboard {/*display:table for Mozilla and Opera*/
display: table ;
position: static ;
}
#billboard { /* for IE*/
width: 45% ;
height: 99% ;
background-color: #7EBB11 ;
font-family: Optima, Calibri, Candara, Century-Gothic,
Arial, sans-serif;
font-size: 160% ;
color: #ffffff ;
position: relative;
border: 2px solid blue;
}
#billboard div { /*for IE*/
position: absolute;
float: left ;
top: 50%;
}
#billboard>div { /*for Mozilla and Opera*/
display: table-cell ;
vertical-align: middle ;
position: static;
}
#billboard div div {
position: relative ;
top: -50%;
}
/* Hides from IE5-mac \*/
* html .billboard {height: 1%;}
/* End hide from IE5-mac */
and my html:
<div id="greenback">
<img src="kids.jpg" alt="kids" id="picright" />
<div id="billboard"><div><div><p>We help businesses,<br>communities and nature<br>take better care<br>of each other.</p>
</div></div></div></div>
It's hard to tell without HTML, but you shouldn't have position: absolute
it float: left
for the same element either - it really doesn't make sense.
You probably shouldn't use position
anywhere in your stylesheet. This is usually something to steer clear of if you're not using scripts.
Edit: give this move:
<style>
#greenback {
width: 800px ;
height: 250px ;
background-color: #7EBB11 ;
border: 3px solid #112D82 ;
}
#picright {
float: right;
display: block;
margin: 11px 11px 11px 20px;
width: 50%;
height: 218px;
border: 3px solid white;
}
#billboard {
width: 45% ;
height: 99% ;
border: 2px solid blue;
float: right;
}
#billboard p {
text-align: center;
margin: 0;
border: 1px solid red;
margin-top: 50px;
font-family: Optima, Calibri, Candara, Century-Gothic, Arial, sans-serif;
font-size: 160% ;
color: #ffffff ;
}
</style>
<div id="greenback">
<img src="kids.jpg" alt="kids" id="picright" />
<div id="billboard"><p>We help businesses,<br>communities and nature<br>take better care<br>of each other.</p></div>
</div>
source to share