SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot ThetaWaveRider's Avatar
    Join Date
    Aug 2004
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE and Firefox/Safari block text spacing differences

    Hello,

    I currently have a label element that contains text (as it normally does). In IE7, there is too much space between the label's text and the top of the label compared to the same label/text in Firefox and Safari. This is a problem for me, since I need the text to be equally distant from the top of the label's parent element in all of these browsers.


    Here is the CSS for the label:

    Code:
    #comment_info label {
    	font-size: 9px;
    	height: 9px;
    	padding: 0;
    	border: 1px solid red;
    }
    I set the height to make the difference more obvious between IE7 and Firefox 2.0. Any ideas?

    IE 7


    Firefox 2


    Thanks,
    TWR


    p.s. Sorry about the wacky sizes. I had my Mac screen zoomed when I took one of them
    Last edited by ThetaWaveRider; Dec 15, 2006 at 19:57. Reason: Addition of [IMG]s

  2. #2
    SitePoint Zealot ThetaWaveRider's Avatar
    Join Date
    Aug 2004
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Screenshots are now attached (see above)...

  3. #3
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It varies from each of the respective browsers rendering engines, the only way to get them "exactly" the same would be to use "px" but, even then you would still have to do with margin and padding issues and problems among the browsers.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I set the height to make the difference more obvious between IE7 and Firefox 2.0. Any ideas?
    We would need to see an example. Setting a height on a label makes no difference unless you have set it to display:block somewhere as a label is an inline element and dimensions don't apply.

    You could try setting the line height to the height you want the line to be and the text should automatically be aligned to the middle of the line-height by default.

  5. #5
    SitePoint Zealot ThetaWaveRider's Avatar
    Join Date
    Aug 2004
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, I forgot to include the style stating that the label is a block element. It always was, just to be clear.

    The line-height idea sounds promising. I'll post my results once I try it.

    Thanks,
    TWR


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
  •