SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spurious Padding in IE8 ... why?

    Hi all, I have this in a style sheet:

    Code:
    h1 {font: 150% Arial, Helvetica, Georgia, Times, serif;
    text-align: left;
    margin-bottom: -18px;
    color: #9900CC;
    border: solid 1px red;}
    The border is there so I can see what's going on. In IE7, the text within the HTML H1 tag is hard up against the left border (as I'd expect) In IE8 (and Firefox I have just realised), the text is much nearer to the centre - sitting well away from the left border.

    That seems to imply that IE8 is "seeing" some left padding which IE7 is not. There are no explicit "padding" statements anywhere in the CSS.

    Anyone seen this before and have any clues?

    Thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, it's possible that IE7 is the wrong one here yes . Good browsers are displaying how it is supposed to.

    IF you post a link to the site in question we can give you the complete rundown on what is happening.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    My suspicions are that IE7 is the culprit too - but I'm still struggling. The site is "www mangospice co uk" - excuse the strange formatting, but as I have less than five posts, the forum doesn't let me post a proper link....

    You'll see the challenge (minus the red border) near the top where it says "Welcome to Mango Spice".

    Cheers and all clues welcome!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, IE7 is behaving correctly, but it's not actually correct. It's clearing the <h1> (which FF nad IE8 need) so you need to set clear:both; for the <h1>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan,

    Brilliant - thank you!

    I'm still bemused as to what was actually going on though.....

    I think I missed the point because the whole H1 "block" was where I'd have expected it to be - in other words, the red border was taking up the full available width. It was just the text within the H1 block that was in the "wrong" place.

    So, that didn't inituitively point me to look at floating!

    Methinks I need to unravel the mists of time and do some CSS tidying up to make it all a lot less complex....

    Thanks again for the prompt pointer.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your welcome .

    I must admit I was a bit confused as I first put a border around it, then I noticed it was the same width in both brwosers, then I set text-align:center (FF went over to the right about 20px) and then I noticed a float above it, tried clear:both; and bingo.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •