Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: Fire Fox Compatibility  (Read 3047 times)

0 Members and 1 Guest are viewing this topic.

rockstar4cs

    Topic Starter


    Intermediate

    Fire Fox Compatibility
    « on: May 25, 2009, 09:31:54 PM »
    I created a menu using Divs and basic CSS. While testing my code in diffrent browers I keep running into the problem that my width property for the menu isnt working on firefox. I'm guessing firefox doesnt support width so my question is whats the best way to fix this problem?

    Code: [Select]

    #lmenu {position: absolute; top: 150px; left: 150px;}
    #lmenu ul li {display:inline; list-style:none}
    #lmenu ul li a:link, #lmenu ul li a:visited{text-decoration: none; font-family: sans-serif;
    background-color: white; width: 150px; padding:10px; text-align:center;
    border:2px solid black; font-variant: small-caps; color:blue}
    #lmenu ul li a:hover{border-right: 1px solid black; border-bottom:1px solid black; color:white;
    background-color: blue;}
    HTML
    Code: [Select]
    <div id="lmenu">
    <ul>
    <li><a href="#">Home Page</a></li>
    <li><a href="#">Information</a></li>
    <li><a href="#">Hours</a></li>

    <li><a href="#">Contact</a></li>
    </ul>
    </div>

    Rob Pomeroy



      Prodigy

    • Systems Architect
    • Thanked: 124
      • Me
    • Experience: Expert
    • OS: Other
    Re: Fire Fox Compatibility
    « Reply #1 on: May 26, 2009, 04:36:22 AM »
    You've already set #lmenu ul li to display inline, therefore you can't set the width of that element.  Any browser that complies with your width specification is breaking CSS; Firefox is behaving as it should.  Set the width at the DIV level, not at the LI level.
    Only able to visit the forums sporadically, sorry.

    Geek & Dummy - honest news, reviews and howtos