SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Rollover Issue

    Hi everyone...ok...I have to do a quick website for a class project....here is the link: www.cianflonestudio.com/pshopper .... all the buttons are done using CSS for the rollover effect....it works fine in IE and it looks like crap in firefox....any ideas on how to get it working in both browsers?

    here is the css:
    body {
    background-color: #333366;
    font-family: arial;
    }
    h2 {
    width: 99.9%;
    padding-left: 5px;
    font-size: 145%;
    font-weight: normal;
    font-style: italic;
    background-color: #d6d6d6;
    color: black;
    letter-spacing: 2px;
    border-bottom: 1px solid #a5b5c6;
    border-top: 1px solid #a5b5c6;
    }
    a {
    color: maroon;
    }
    ul#mainNav {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #d6d6d6;
    }
    ul#mainNav li a:link, ul#mainNav li a:visited {
    padding: 10px;
    text-decoration: none;
    display: block;
    width: 88%;
    }
    ul#mainNav li {
    border-bottom: 1px solid #a5b5c6;
    }
    ul#mainNav li a:hover {
    background-color: #43616b;
    color: #eee;
    }
    table#main {
    position: absolute;
    top: 0px;
    font-weight: bold;
    font-size: 80%;
    border: 1px solid black;
    background-color: white;
    margin-left: 10%;
    width: 80%;
    }
    table#innerTable {
    font-weight: bold;
    font-size: 100%;
    width: 100%;
    }
    #header {
    border-bottom: 1px solid black;
    background: url(topLogo.jpg);
    height: 87px;
    }
    #links {
    width: 22%;
    border-left: 1px solid black;
    background-color: #d6d6d6;
    }
    #footer {
    border-top: 1px solid black;
    font-weight: normal;
    text-align: center;
    color: #777;
    font-size: 89%;
    }
    #formStyle {
    text-align: center;
    }
    .mainArea {
    padding: 2px;
    }

    and here is the html:
    <html>
    <head>
    <title>
    Personal Shopper
    </title>
    <link rel="stylesheet" type="text/css" href="pshoppercsss.css" />
    </head>
    <body>
    <table cellpadding="0" cellspacing="0" id="main">
    <tr>
    <td id="header">
    &nbsp;
    </td>
    </tr>
    <tr>
    <td>
    <table id="innerTable" cellpadding="0" cellspacing="0">
    <tr>
    <td class="mainArea" valign="top">
    <h2>
    Contact Us
    </h2>
    </td>
    <td id="links" valign="top">
    <ul id="mainNav">
    <li><a href="index.htm">Home</a></li>
    <li><a href="login.htm">Login</a></li>
    <li><a href="register.htm">Register Now</a></li>
    <li><a href="about.htm">Who Are We?</a></li>
    <li><a href="services.htm">What Do We Do?</a></li>
    <li><a href="works.htm">How It Works</a></li>
    <li><a href="contact.htm">Contact Us</a></li>
    <li><a href="faqs.htm">FAQ's</a></li>
    </ul>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td id="footer">
    Copyright &copy; 2004-2005 PShopper Ltd. All Rights Reserved.
    </td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have added an overflow:hidden; to the ul#mainNav. I tested in mozilla and IE on my computer and worked just fine.
    ul#mainNav {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #d6d6d6;
    overflow: hidden;
    }

  3. #3
    SitePoint Zealot ChestRockwell's Avatar
    Join Date
    Nov 2003
    Location
    New Jersey
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awsome....thanks a lot for that one


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
  •