probably very simple but i cannot see it. in IE8 the text flows around the image which is floted to the right. in IE7 this text seems to be pushed under the image. have tried various combinations of margin and padding, width and height, but still the same. what am i missing here?
also, where is the best site for browser compatibility in relation to css among IE browsers?
many thanks
Screen Grabs:
http://img15.imageshack.us/i/ie7paddingincorrect.png/
http://img232.imageshack.us/i/ie8paddingcorrect.png/
HTML
<div class="bodyText">
<h1>WEB DESIGN</h1>
<img src="images/satisfaction.png" alt="Guarantee" width="100px" height="100px" />
</div>
CSS
bodyText {
width: 700px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
font-weight: normal;
padding: 10px 20px 0 20px;
line-height: 22px;
text-align:justify;
clear:left;
}
.bodyText h1 {
float:left;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #666;
font-weight: normal;
clear:right;
}
.bodyText h1 img {
float:right;
clear:both;
}
*UPDATED CODE*****
HTML
<div id="containerLeft">
<div class="bodyText">
<h1>WEB DESIGN</h1>
<img src="images/satisfaction.png" alt="Guarantee" width="100" height="100" class="guarantee" />
</div>
</div>
CSS
.bodyText img.guarantee {
float:right;
margin: 0 0 10px 10px;
}
.bodyText {
width: 700px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
font-weight: normal;
padding: 10px 20px 0 20px;
line-height: 22px;
text-align:justify;
}
/* Bodt text area with img layout */
.bodyText h1 {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #666;
font-weight: normal;
}
COMPLETE CSS FOR DEBUG
*{margin:0;padding:0;}
body
{
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: small;
background-image: url(../images/bg.gif);
}
h1,h2,h3,h4,h5,h6,span
{
margin:0px;
padding:0px;
}
/* header section starts here */
#headertop {
width: 999px;
height:51px;
margin: 0 auto;
background-image: url(../images/headertop.gif);
background-position: center center;
background-repeat: no-repeat;
}
#headermid {
width: 999px;
height:190px;
margin: 0 auto;
background-image: url(../images/headermid.gif);
background-position: center center;
background-repeat: no-repeat;
}
#headermenu {
width: 999px;
height:51px;
margin: 0 auto;
/*background-image: url(../images/headermenu.gif);*/
background-position: center center;
background-repeat: no-repeat;
}
/* header section ends here */
/* content section ---------------------------------------- starts here */
/* holding container for content */
#container {
width: 999px;
margin: 0 auto;
background-image: url(../images/container-bg.gif);
background-position: center center;
background-repeat: repeat-y;
overflow: hidden;
}
/* container for left page content */
#containerLeft {
width: 750px;
margin: 5px 0 0 5px;
float:left;
background-image: url(../images/container-left-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
/* container for right page content */
#containerRight {
width: 230px;
margin: 5px 5px 0 0;
float:right;
background-image: url(../images/container-right-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
/* container for 3 column display */
.containerBlock {
float:left;
width: 750px;
padding: 10px 0 0 0;
clear:both;
}
#timedate {
font-family: arial;
font-size: 13px;
float:left;
padding: 18px 0 0 50px;
}
/* styling for text in the content block */
.bodyText {
width: 700px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
font-weight: normal;
padding: 10px 20px 0 20px;
line-height: 22px;
text-align:justify;
}
/* Bodt text area with img layout */
.bodyText h1 {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #666;
font-weight: normal;
}
.bodyText h2 {
float:left;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #666;
font-weight: normal;
padding: 0 0 0 0;
clear:both;
}
.bodyText h3 {
float:left;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
font-weight: normal;
padding: 16px 0 0 0;
clear:both;
}
.bodyTextabout {
width:220px;
float:left;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #666;
font-weight: normal;
padding: 1px 0 0 20px;
background-image: url(../images/vline.jpg);
background-position: 235px;
background-repeat: repeat-y;
}
.bodyTextabout img {
float:left;
padding:10px 0 5px 0;
}
.bodyText img.guarantee {
float:right;
margin: 0 0 10px 10px;
}
/* used for 3 column display with img */
.bodyTextContent {
width: 203px;
margin-top: 10px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: justify;
color: #000;
font-weight: normal;
line-height: 20px;
clear:left;
}
.bodyTextContent img {
padding-top: 10px;
}
.bodyText span{
font-family: arial;
font-size: 12px;
color: #000;
font-weight: bold;
clear:left;
}
.bodyText ul{
width:500px;
float:left;
font-family: arial;
font-size: 12px;
color: #000;
font-weight: normal;
padding: 10px 0 0 60px;
list-style-image:url('../images/tick.jpg');
line-height: 34px;
clear:left;
}
.bodyTextQuote {
width: 680px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: #dea508;
font-weight: normal;
padding: 16px 0 0 90px;
line-height: 20px;
background-image: url(../images/quote_bg.gif);
background-position: 45px;
background-repeat: repeat-y;
clear:left;
}
CSS
HTML
This is working…. Remove clear both from img also that call is not right . Use .bodyText img