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 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation CSS issue on mainlinks

    Hello,

    We are having an issue on our CSS. Basically when we Zoom out or in with FireFox, the last Contact Us link appears below the first Web Hosting link but is half on the web hosting link. Meaning the contact us link box starts in the middle of the web hosting link box and finishes after the web hosting link box. One half on top of the other. in IE it does not do this, it zooms fine

    HTML is:

    <table border="0" cellpadding="0" cellspacing="0" id="headerMainLinks">
    <tr>
    <td><ul id="MainLinks" class="MenuBarHorizontal">
    <li><a href="http://www.xxxxxx.com/hosting">Web Hosting</a> </li>
    <li><a href="http://www.xxxxxx.com/servers" title="Dedicated Servers">Dedicated Servers</a></li>
    <li><a href="http://www.xxxxxx.com/domains">Domain Names</a></li>
    <li><a href="http://www.xxxxxx.com/reseller">Reseller</a></li>
    <li><a href="http://www.xxxxxx.com/support">Support Center</a></li>
    <li><a href="http://www.xxxxxx.com/about">About Us</a></li>
    <li><a href="http://www.xxxxxx.com/contact">Contact Us</a></li>
    </ul>
    </td>
    </tr>
    </table>

    CSSs:

    #headerMainLinks {
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    margin: 0px;
    height: 40px;
    background-image: url(https://www.xxxxxx.com/images/bg_main_links.gif);
    background-repeat: repeat-x;
    }

    ul.MenuBarHorizontal
    {
    padding: 0;
    cursor: default;
    width: 850px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0px;
    margin-left: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    }

    ul.MenuBarHorizontal a
    {
    cursor: pointer;
    background-color: #425D84;
    color: #FFFFFF;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    border-right-width: 0px;
    border-right-style: solid;
    border-right-color: #4A75B5;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #4A75B5;
    border-bottom-color: #4A75B5;
    font-weight: bold;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #4A75B5;
    height: 20px;
    background-image: url(https://www.xxxxxx.com/images/bg_main_links.gif);
    background-repeat: repeat-x;
    margin: 0px;
    padding-top: 11px;
    padding-right: 17px;
    padding-bottom: 11px;
    padding-left: 18px;
    }

    ul.MenuBarHorizontal ul li
    {
    width: 8.2em;
    }

    ul.MenuBarHorizontal li
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    white-space: nowrap;
    position: relative;
    }

    Can someone please help me with this?

  • #2
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Sounds like a width issue.

    Try increasing the width of the headerMainLinks

    Hope this helps
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    And why are you using tables there for your layout? Get inspired from http://www.hotdesign.com/seybold/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by technica View Post
    Sounds like a width issue.

    Try increasing the width of the headerMainLinks

    Hope this helps
    I tried that, it is still not working. Still showing under.

    Any other recommendations please?

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by technica View Post
    Sounds like a width issue.

    Try increasing the width of the headerMainLinks

    Hope this helps
    Anyone can help me with this please?

  • #6
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hi

    Time to wear your fashionable watches,collect here

  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by technica View Post
    Sounds like a width issue.

    Try increasing the width of the headerMainLinks

    Hope this helps
    Anything on this please to help me out?

  • #8
    New Coder
    Join Date
    Oct 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anyone on this please? I really need to make it work and it seems like I tried everything, can't figure it out


  •  

    Posting Permissions

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