SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using inline font-size - issue with IE7

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

    Code:
     <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    I realize my methods may be out of the html stone-age
    I think technically we're talking Jurassic age, actually.

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

    Code:
    <div class="box1">
    <span class="something">This Is The Headline</span>
    <span class="somethingelse">This is the additional text.</span>
    </div>
    Code:
    .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. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    .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. #4
    Non-Member
    Join Date
    Jul 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post

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

    Thanks again for any additional tips.
    The <font> element is deprecated and should not be used at all nowadays.

    Code:
    .box1 span {display: block;}
    is setting the display style of all the spans contained within any element whose class is box1 to block.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ChrisjChrisj View Post
    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?
    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. #6
    SitePoint Member Ryum's Avatar
    Join Date
    Jul 2012
    Location
    Oslo, Norway
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would throw away the inline styling for the html stone-age ( ) 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>
    Last edited by TechnoBear; Jul 30, 2012 at 07:29. Reason: vBulletin got its smilies confused :)

  7. #7
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    Thanks for all the help


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •