Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with Borders

    Hi I am having some difficulties with borders;

    http://suheal.googlepages.com/index.html

    The border does not display properly with IE6, can anyone help me?

  • #2
    New Coder
    Join Date
    Sep 2004
    Posts
    60
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Try putting the border style inside the li tag.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello fro0ty,
    It looks like IE is cutting off the bottom because your ul is set to height:32px;
    The 2px border makes the height 36px.
    Try this CSS (I'm just guessing as I do not have IE6 running right now):
    Code:
    ul#menu {
    color: #000000;
    width: auto;
    height: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
    }		
    ul#menu li {
    font-size: 25px;
    height: 36px;
    float: left;
    display: inline; /* IE 6 */
    margin: 0 10px 0 0;
    padding: 0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Code:
    ul#menu li {
    font-size: 25px;
    height: 35px;
    float: left;
    display: inline; /* IE 6 */
    margin: 0 10px 0 0;
    padding: 0;
    }
    Inline elements cannot have specified dimensions. Thus, if you want to specify the height, get rid of the display: inline declaration. Fortunately, that declaration doesn’t seem to be doing anything here except wasting space since float: left overrides it; floated elements are block‐level regardless of the display property’s value.

    Code:
    ul#menu li a {
    padding: 2px 5px 5px 5px;
    color: #FF0000;
    text-decoration: none;
    display: inherit;
    height: 32px;
    }
    I’m guessing that this is supposed to be some kind of exploit for Internet Explorer? I would avoid exploits that aren’t forward compatible. Use conditional comments if you have to.

    Anyway, the solution seems to be to float the anchor elements to the left. I’d put a border around the div or ul elements though so that you can see the resulting issue: the height is not large enough to accommodate your text, resulting in different cross‐browser appearances between Firefox and Internet Explorer 6. Internet Explorer 7 looks the same as Firefox, however.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •