...

View Full Version : CSS issue on mainlinks



lazouche
10-28-2009, 06:38 AM
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?

technica
10-28-2009, 08:48 AM
Sounds like a width issue.

Try increasing the width of the headerMainLinks

Hope this helps

abduraooft
10-28-2009, 08:51 AM
And why are you using tables there for your layout? Get inspired from http://www.hotdesign.com/seybold/ :)

lazouche
10-28-2009, 06:56 PM
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? :)

lazouche
10-29-2009, 06:36 AM
Sounds like a width issue.

Try increasing the width of the headerMainLinks

Hope this helps

Anyone can help me with this please?

webworld1
10-29-2009, 08:59 AM
Time to wear your fashionable watches,collect here (http://www.replicawatchesindia.info)

lazouche
11-03-2009, 02:07 AM
Sounds like a width issue.

Try increasing the width of the headerMainLinks

Hope this helps

Anything on this please to help me out?

lazouche
11-23-2009, 07:47 PM
anyone on this please? I really need to make it work and it seems like I tried everything, can't figure it out



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum