SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast wburke's Avatar
    Join Date
    Jan 2006
    Location
    Saint Charles, IL
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question border-top not working in IE7

    Hi guys,

    Again it has been months since I have had to code with CSS/HTML and I am feeling it so please keep the tomatoes in your pockets.



    I am coding this site from my design, and I am able to get the border-top to display correctly in firefox, but on IE it is invisible? or not displaying correctly?

    My CSS is validated, and I am sort of scratching my head... Ideas?

    W
    Last edited by wburke; Jul 31, 2008 at 09:50. Reason: Wanted to keep the url somewhat private after the problem as been resolved.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where is this border you speak of? Can you please point out which element on the page has the border? Kind of hard to figure out on our own..

  3. #3
    SitePoint Enthusiast wburke's Avatar
    Join Date
    Jan 2006
    Location
    Saint Charles, IL
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - yah I am sorry for that. It is on the navigation on the top right. The container CSS is named: navcontainer

    I will work to post the actual code as well.

    W

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi wburke,

    The obvious top border difference I see is that IE7 does not give the top border on the top navbar.

    In that case add float:left and margin-right:3px to your li.

    Code:
    #navlist li
    {
    display: inline;
    float:left;
    margin-right:3px;
    list-style-type: none;
    border-top: 4px solid #619516;
    line-height: 35px;
    }

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It looks like it will work better using margin-left:3px instead

    Also, remove the margin-top:3px on the # navcontainer and it will pull everything back like your original location.

    #navcontainer {
    width:630px;
    float:left;
    margin-left:40px;
    margin-top:3px; /*remove this*/
    }

    Code:
    #navcontainer {
    width:630px;
    float:left;
    margin-left:40px;
    }
    ul#navlist
    {
    margin-left: 0;
    padding-left: 0;
    margin-right:0px;
    white-space: nowrap;
    }
    
    #navlist li
    {
    display: inline;
    float:left;
    margin-left:3px;
    list-style-type: none;
    border-top: 4px solid #619516;
    line-height: 35px;
    }

  6. #6
    SitePoint Enthusiast wburke's Avatar
    Join Date
    Jan 2006
    Location
    Saint Charles, IL
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Rayzur for the response and assistance. So by not having the float constantly throughout, IE was not displaying the border correctly? I just want to make sure I learn from my mistakes.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    So by not having the float constantly throughout, IE was not displaying the border correctly?
    Yes, it just seems to be another one of IE's buggy behaviors with display:inline. Setting a float on it triggers it to follow all of the styles. Then we've just gone back and replaced the default margins that the float took away from display:inline.


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
  •