Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12

Thread: CSS mystery

  1. #1
    Member macgruder's Avatar
    Join Date
    Apr 2004
    Location
    Japan
    Posts
    97
    Member #
    5524
    This makes no sense to me. Why is the grey box 12px high. Testing in Safari and Firefox?

    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">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>CSS Test</title>
    </head>
    <body>
    
    <p style='background: #900'>
    <span style ='font-family: geneva;
    line-height: 18px; font-size: 10px; margin: 0; padding:0; border: 0; 
    background: #ddd'>
    
    The line height of this text is 18px, and the font-size is 10px. Margin, Padding and Border are set to Zero.
    Now according to Eric Meyer: "the Inline Box will always be equal to the value of the line height,
    and the content area is the same as the font-size".  Why is this grey box 12px high?
    </span>
    </p>
    </body>
    </html>

    Edit: removed the 'So why then is
    there a gap between these lines?'. That is obvious. The real point is the 12px high bit.

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Always use double-quotes, not single-quotes. Also, unrelated to the problem, #DDD is not a fully-qualified color code. Use #DDDDDD for a moderately light gray, or any other six hex digits.

    Try validating your code to catch any more problems, then reply back: http://validator.w3.org/ .
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    I tested the css you posed and the grey box is 36 pixles heigh in firefox. I think you mean the red box is 12px high. Line height does not define your content area.. it defines where your text will be written, that is why you are getting the gap between the lines.. you have a linehight of 18px but your content area is set according to the text size(witch is smaller). so if you had a lineheight of 10 you would loose the gap. Line height is sorta like adding margin to inline elements. its the difference between two lines of text. If you have ever used a type writer, line height would be how far the roller would feed your paper each time you added a new line.

    So say for instance i had a line height of 36px. Each time the text would wrap to the next line the baseline of the text would jump down 36pixles. but the content area would not change size.

    Filbert1,
    #DDD IS valid shorthand for #DDDDDD the same goes for #FC3 witch is shorthand for #FFCC33.


  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Originally posted by glyakk
    Filbert1,
    #DDD IS valid shorthand for #DDDDDD the same goes for #FC3 witch is shorthand for #FFCC33.
    yep yep!
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    AFAIK, there is no problem using 'Triple Hex' codes; http://www.december.com/html/spec/color3hex1.html has a list of the codes usable.
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Originally posted by justlivyalife
    AFAIK
    what does that mean?!
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  8. #7
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    As Far As I Know
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  9. #8
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I had never seen three-digit hex before this thread. It makes sense, though.

  10. #9
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    ah... good to know! thx
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  11. #10
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Here's the W3C DTD for color data types (for HTML):

    http://www.w3.org/TR/html4/sgml/loosedtd.html#Color

    Here are the notes:

    http://www.w3.org/TR/html4/types.html#h-6.5

    Here's the CSS1.0 spec for colors:

    http://www.w3.org/TR/CSS1#color-units

    As you can see, CSS allows 3-digit colors, while HTML does not.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:55 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com