[RESOLVED] DIV text is overflowing in different browsers?

[Barton68]

Hi,
I'm used to using tables, but have recently seen how bad things can become in other browsers. I'm switching my site to DIVs now.

my Website (http://www.moretoninmarshtaxis.com/)

I have noticed that in some browsers text over-runs the container DIV. (BrowserShots.org)
8867
How can I stop this action?

Thanks,

Barton.

HTML:
<div class="content">
<div id="headerline"></div>
<div id="footertext">
<div>
<h3>Cotswold Taxi, Taxi Moreton in Marsh, Cotswold Airport Taxi,<br />
Private Hire Gloucestershire, Airport Transfers Gloucestershire,<br />
Anthonys Cotswold Taxis, Airport Taxi Heathrow,<br />
Airport Taxis Birmingham, and Cotswold Tours.</h3><br />
<div class="border-text">
~ Airport taxi East Midland ~ Airport transfer Birmingham ~ Airport transfer Gloucester ~
</div></div></div>
<div class="footerline"></div>
</div>

CSS:
.content {
background-image:url(images/content_bg.gif);
width:717px;
}
#headerline {
clear:both;
background-image:url(images/header_bg.gif);
font-size:1px;
height:10px;
}
#footertext {
height:30px;
margin-top:2px;
margin-left:auto;
margin-right:auto;
padding:10px 0;
font-size:8pt;
color:#999;
text-align:center;
}
#footertext a:link, #footertext a:visited, #footertext a:active
{
text-decoration: none; color:#999;
}
#footertext a:hover {
text-decoration: none; color:#ff9900;
}
.footertext {
clear: both;
background:#fff;
color:inherit;
height:1px;
}
h3 {
font-size: 10pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: silver;
letter-spacing: 2px;
}

[WebJoel]

By making the DIV be 'fluid'. It looks at first glance that the div is a 'background-image' with text overtop of it. Problems arise if you cannot get the text to be 'the same' in different browsers. You can try re-sizing the text to "100%" and then sizing it to the size you really want... like this:

p {font-size:100%; font-size:1.0em;}

what happens here, you make the fonts be "one hundred percent", -full-sized, -and then re-size them to a normal acceptible size. -Sounds weird I know, but browsers render font-sizes differently and any size is going to be slightly different in every browser unless you pull a sneeky on 'em.

Another trick is get the margins and the paddings under control too:

* {padding:0; margin:0;}

Above, should be the FIRST statement in your CSS. You just stripped ALL padding & margin from everything ( " * " is "universal selector", means "everything"). You will be forced to re-state a margin and a padding for every element, e.g.,

p {font-size:100%; font-size:1.0em; margin:12px 0 0 4px;}
h1, h2, h3, h4, h5, h6 {margin:15px 0 6px 0;}

(and etc. -Doubtful that you require "padding" on "p" or "h").

-A bit of work, but in the end you get a more consistant, x-browser font-size on every font.

I usually begin my STYLEs with this:

<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style> and have far fewer probs with font-sizes than before (still this is not perfect, -but there are better quantities. This is just a jumping-in point). :)