SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Shifing in IE8

  1. #1
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Shifing in IE8

    I know that there is a simple fix, but can't seem to find it.

    My site (Spokane Area Classic Chevy Club looks good in Firefox and Chrome, but IE8 messes up the menu and the main content block.

    Any advice would be great
    F

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I couldn't see what you meant about the main content block as it looks the same in Firefox and IE8 as far as I could see (a bit weird in both).

    If you are talking about the position of the text in the left menu then the problem is that you have just left it to chance and used vertical padding on an inline element to line things up. Vertical padding on inline elements has no effect to the line height and browsers will vary in how it is represented.

    You need to first set the anchor to display:block then set a height to match the image height and then adjust line-height to move the text into position.

    Code:
    .mainNav li a {
        background-position: 50% 80%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8em;
        font-stretch: normal;
        font-style: normal;
        font-weight: bold;
        display: block;
        height: 42px;
        line-height: 39px;
        /* padding: 15px 0;*/
      text-align: center;
        text-decoration: none;
    }

  3. #3
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks

    This is what I have presently in my AllPages.css file for your "example":

    PHP Code:
    .mainNav li a {
        
    padding-top15px;
        
    padding-right0px ;
        
    padding-bottom15px;
        
    padding-left0px;
        
    font-familyArialHelveticasans-serif;
        
    font-weightbold;
        
    font-stylenormal;
        
    font-stretchnormal;
        
    text-decorationnone;
        
    font-size.8em;
        
    colorblue;
       
    /* changing from 75x33 per request */
        
    background-imageurl(images/ChevySACCCr100x43.gif);
        
    background-repeatno-repeat;
        
    background-position5080%;
        
    display: list-item;
        
    text-aligncenter;
        
    padding-left: -30px;
        
    margin-left; -0px;

    So, do I just change ALL of this to what you suggest? Or... well, need some further explanation if possible.

    Thanks
    F

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by fredep57 View Post
    Paul,

    Thanks

    This is what I have presently in my AllPages.css file for your "example":
    Yes the rules I gave you are the shorthand versions and the nonsenical negative padding remove. It's exactly the same as what you have but without all the unnecessary stuff ijn that rule. The background-image for example is already supplied in a separate rule somewhere else.

    Just use my code instead of the code you just posted.


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
  •