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
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross-browser nested DIV width issues.

    Well I started working on this menu for a website. It is supposed to have horizontal link bars (no images, just text and the hover attribute) that span the width of the navigation table, but that is not so. I had it working in IE and I must have changed the wrong thing and now it doesn't work correctly in IE, Firefox, or Opera.

    Code:
    div.menu a {
    color: #E4E3E3; 
    background: #80864E; 
    text-decoration: none; 
    font-size: 11px; 
    line-height: 20px; 
    font-family: serif;
    padding: 2px 1px;
    width: 100%;
    }
    
    div.menu a:link {
    color: #E4E3E3; 
    background: #80864E;
    border: 1px solid #797F4A; 
    width: 100%;
    }
    
    div.menu a:active { 
    color: #E4E3E3;
    background: #80864E;
    border: 1px solid #797F4A; 
    width: 100%; 
    }
    
    div.menu a:visited {
    color: #E4E3E3; 
    background: #80864E;
    border: 1px solid #797F4A; 
    width: 100%;
    }
    
    div.menu a:hover {
    color: #E4E3E3;
    background: #4E5801; 
    border: 1px solid #000000;
    width: 100%;
    
    }
    I tried doing width: 206px and that was working in IE but not for Firefox or Opera.

    So the usual three options, I have misplaced something, I have left something out, or it's not possible.

    Any help at all would be greatly appreciated, I've been trying to fix this all day with no luck. Thanks!

  • #2
    Regular Coder
    Join Date
    May 2007
    Location
    UK
    Posts
    180
    Thanks
    0
    Thanked 18 Times in 18 Posts
    It can be time consuming to get CSS menus to work as you want. Rather than reinventing the wheel each time I prefer to use one of the menus from the excellent Listamatic site.

    See http://css.maxdesign.com.au/listamatic/horizontal20.htm for details.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SouthwaterDave View Post
    It can be time consuming to get CSS menus to work as you want. Rather than reinventing the wheel each time I prefer to use one of the menus from the excellent Listamatic site.

    See http://css.maxdesign.com.au/listamatic/horizontal20.htm for details.

    Thank you very much. I'm sort of new to CSS and I was trying to make my own menu so I could learn how to do it instead of copying and pasting, but its more frustrating obviously to try it myself. I'm thinking I'm using the wrong method anyhow...

    Thanks again!

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Missing View Post
    Well I started working on this menu for a website. It is supposed to have horizontal link bars (no images, just text and the hover attribute) that span the width of the navigation table, but that is not so. I had it working in IE and I must have changed the wrong thing and now it doesn't work correctly in IE, Firefox, or Opera.
    What does your HTML look like? This doesn't look like a drop-down menu. Drop-down menus are the ones that are hard to get working cross-browser.

    Maybe you can show us a link and explain what is 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
    •