SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with navigation placement in Opera and IE

    Hello,

    Perhaps someone here can lend a hand with this small issue I am having with this site in Opera and IE. The site looks as it should in Safari, Firefox and Chrome but in Opera 10.5 and IE 8, the button labeled "CONTACTO" in the top navigation moves down a little bit and creates a gap between the navigation and the main banner that shouldn't be there.

    It is odd as both the XHTML and CSS validate and there are no problems that I could discern.

    Here is the link to the site: http://bit.ly/cHsJU9

    Here is the link to the CSS file: http://bit.ly/9Ecuw7

    I am also attaching the screenshots showing the problem and the site as it should look.

    Any help would be greatly appreciated.

    Thanks
    Attached Images Attached Images

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I suspect that it's a haslayout issue with IE, but don't have any details to hand on fixing it for you.

    The people in the CSS Forum will though.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks pmw57.

    I fixed this small issue. It was something with the margin and padding of the UL element and that I was assigning the list-style rule to the list items instead to unordered list itself. I added the following code:

    #navigation {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    Removing the list-style from the rule for the list items and it's fixed. Now looks fine in IE 8 and Opera 10.5 too.

    Thanks

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

    Glad you sorted it

    Browsers apply either left margin or left padding to the ul by default to allow for the bullet to show. Therefore you need to address both to make it consistent between browsers as you found out

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Browsers apply either left margin or left padding to the ul by default to allow for the bullet to show. Therefore you need to address both to make it consistent between browsers as you found out
    Yep, thanks. I also noted that IE 7 was adding some extra pixels to the right sidebar and was pulling it down, even while it looked fine in all the other browsers (sans IE6, which I am kind of ignoring).

    Thanks again for the tip.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Something was probably pushing it wide, and thus IE was adding a few pixels.

    I'd need to see code to be sure but that's what it probably is.

    Either way you got it all sorted
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •