SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Member lplatz's Avatar
    Join Date
    Feb 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    H1 rendering b/t MSIE and Firefox

    I have noticed that each time I define and utilize <Hn> tags, that Firefox places padding across the top of the line of copy enclosed in the <Hn> tag. MSIE renders the tag w/out issue. The following is the <div> created for this section of copy on my page:

    #pageTitle {
    position: absolute;
    visibility: visible;
    z-index: auto;
    width: 100%;
    top: 10px;
    text-align: center;
    left: 0px;
    }
    #pageTitle h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    color: #FFFFFF;
    }

    Any ideas on what can correct this rendering difference with Firefox?

    Thanks in advance for all help provided.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    h1 {
      padding: 0;
      margin-top: 0;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member lplatz's Avatar
    Join Date
    Feb 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just what the Dr. ordered - thank you!!

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Huh?

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lplatz, you're welcome

    drhowarddrfine, you've never heard that saying before?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    It's not an issue. If you're going to rely on browser-default styling, expect differences like this to pop up.

    I recommend setting the margin/padding to 0 for all elements at the top of your style-sheet:

    Code:
    * {
      margin: 0;
      padding: 0;
    }
    I usually throw list-style: none; in as well.

  7. #7
    SitePoint Member lplatz's Avatar
    Join Date
    Feb 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Speaking of lists - the outcome of adding
    * {
    margin: 0;
    padding: 0;
    }
    to my css, is that my indent for <ul> items has adjusted left.

    I attempted to counter and adjust the <ul> by adding
    ul {
    padding: 10;
    margin-left: 0:
    }

    No luck - Firefox and MSIE continue to render the list differently.

    Thanks in advance. Les

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    USA
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps you should be controlling the <li> element instead with your CSS?
    Just a thought.

  9. #9
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lplatz
    Speaking of lists - the outcome of adding
    * {
    margin: 0;
    padding: 0;
    }
    to my css, is that my indent for <ul> items has adjusted left.

    I attempted to counter and adjust the <ul> by adding
    ul {
    padding: 10;
    margin-left: 0:
    }

    No luck - Firefox and MSIE continue to render the list differently.

    Thanks in advance. Les
    Like the other guy said try:

    Code:
    ul li {
    padding: 10;
    }
    Padding: 10; will make a 10px box around every li element, you can define it specifically by doing:

    Code:
    padding: 5px 0px 5px 10px; 
    /* In English (Clockwise)- Padding: Top Right Bottom Left */
    Also you dont need margin-left if you have it at 0 since * {margin: 0; padding: 0} is in your main CSS file, its automatically set to every element unless defined.

  10. #10
    SitePoint Member lplatz's Avatar
    Join Date
    Feb 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Path of least resistence

    incorporating everyones input led me to discover that using the universal
    * {
    padding: 0px;
    margin: 0px;
    }
    somehow had an uncorrectable impact on list items (<ul><li>). The margin for list items in MSIE and Firefox were not even close.

    I commented out the universal css, and added
    ul li {
    margin-left: 0px;
    }
    This provided the cross-browser consistency I was aiming for.

    Thanks for all your input, it definately shortened my research time on this cross-browser inconsistency - - Les


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
  •