Using inline font-size - issue with IE7

HTML & CSS
1

When I have a <div> that has different lines of text in it, I use inline font-sizes like this:

 <div class="box1">
<font size="5" color="#000000" face="Tahoma" >This Is The Headline</font><br />
<font size="2" color="#000000" face="Arial" >This is the additional text.</font>
</div>

I realize my methods may be out of the html stone-age, but it seems to work fine, except for in IE7.
I’m not sure why the font doesn’t conform to the size that appears correctly when viewed in IE8 & IE9.
Is there something I can do on the IE7 stylesheet, to make the inline font sizes appear correctly, like they do when viewed in IE8 & IE9?

2

I think technically we’re talking Jurassic age, actually. :lol:

There’s a fair chance you’ll use those styles again, so I’d say use spans with a class instead.

<div class="box1">
<span class="something">This Is The Headline</span>
<span class="somethingelse">This is the additional text.</span>
</div>


.something {font-size: 12px; font-family: tahoma;}
.somethingelse {font-size: 5px; font-family: arial;}
.box1 span {dispaly: block;}

Using inline code like you have is just not viable these days. It’s just so inefficient, with no advantages. CSS also gives you so many more options.

3

Thanks for the enlightening reply. Much appreciated.

I’m using CSS for the div class box1 attributes.

So, the proper way is to span the different font-sized lines of text, and have a coresponding span class in CSS for each different font-sized line of text? Would that bring me closer to the modern era of html?

Also, I’m not familar with this: .box1 span {dispaly: block;} - can you enlighten me on this?

This is what I’m using:


.col_box1 { width: 390px; height: 178px; margin: 5px 0px 4px 0px; padding: 15px 25px 5px 20px; border: 1px solid #000000; border-width: 0px 0px 0px 0px; background-repeat: no-repeat; background: #cccccc; overflow: visible; }

Thanks again for any additional tips.

4

The <font> element is deprecated and should not be used at all nowadays.

.box1 span {display: block;}

is setting the display style of all the spans contained within any element whose class is box1 to block.

5

Certainly it’s one way to do it, and pretty common. It means you can use those same styles across your whole site, and change them in one place (in your style sheet) if you decide to change something later.

Also, I’m not familar with this: .box1 span {dispaly: block;} - can you enlighten me on this?

As tunnil says, it’s setting any span inside box1 to “block” display. I did that just as a way of avoiding the <br> that you have in your HTML. An element det to display: block sits on a line of its own.

If the rule was just span {display: block} it would apply to all spans on your site, but by adding .box1 span {dispaly: block;} it limits the rule just to spans inside a div with a class of “div1”.

6

I would throw away the inline styling for the html stone-age ( :stuck_out_tongue: ) and use spans and mentioned earlier. If you still want to do this inline you could do it this way:

<p style="font: 14pt Tahoma; color:#000;>This is the headline</p>

7

Thanks for all the help