-
Are there comments, or other non-displayed elements such as hidden <input> fields, in the page? If so it could be one of the old IE duplicate characters bugs: IE6 Duplicate Characters Bug - CSS fixes and workarounds The IE Word Wrap Doppelganger Bug - SitePoint
Try adding display: inline; to the rules for the two floated elements. This won't break anything else, but will bring older versions of IE to heel.Leave a comment:
-
Cheers durbs. That fragment displays ok. I was trying to illustrate general problem and get general theories rather than post entire long webpage and expect somebody trawl through code. Ran page through a checker and all the previous elements open/close matched ok.
Sorted problem by sticking totally unecessary div around it. With CSS what's one more unecessary bit of stuff matter?Last edited by xoggoth; 24 January 2013, 11:20.Leave a comment:
-
Cant replicate that here on IE 9, displays ok. What does your DOCTYPE declaration say?
So does the below display wrong in your IE:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> <head> <style type="text/css"> .content-last {float:left; width:992px; height:175px; margin-left:0px; background-color:Red; background-repeat:no-repeat;} .content-lastbox {float:left; width:248px; height:175px;} .content-lastbox p {float:none; padding-left:20px; font-size:16px; font-weight:normal; padding-top:5px;} </style> </head> <body> <div class="content-last"> <div class="content-lastbox"> <p>Line 1<br>garbage</p> </div> <div class="content-lastbox"> <p>Line 2<br>tripe here</p> </div> <div class="content-lastbox"> <p>Line 3<br>things</p> </div> <div class="content-lastbox"> <p>Line 4<br>Rubbish<br>More rubbish</p> </div> </div> </body> <html>Leave a comment:
-
Wierd CCS problem. Part of text outside containing DIVS
Cut it down a bit to make it clearer but have a four column thing with a background image on an HTML page. I have cut and pasted (three times just to be sure!) the style and HTML from another page that works in all browsers.
style:
.content-last {float:left; width:992px; height:175px; margin-left:0px; background-image:url('images/main_lower.png'); background-repeat:no-repeat;}
.content-lastbox {float:left; width:248px; height:175px;}
.content-lastbox p {float:none; padding-left:20px; font-size:16px; font-weight:normal; padding-top:5px;}
HTML:
<div class="content-last">
<div class="content-lastbox">
<p>Line 1<br>garbage</p>
</div>
<div class="content-lastbox">
<p>Line 2<br>tripe here</p>
</div>
<div class="content-lastbox">
<p>Line 3<br>things</p>
</div>
<div class="content-lastbox">
<p>Line 4<br>Rubbish<br>More rubbish</p>
</div>
</div>
This page works in all browsers except IE when the last four letters "bish" also appears below the box. The last column is a line taller but the div and the containing div are of sufficient height so why would just a small part of one line somehow overflow them? Much ta for any brill ideas.
Leave a comment: