HTML showing adversely in Firefox and Netscape only

Hello,
this issue relates to the pages on www.cableboxtv.com You will be able to detect the align error from Firefox and Netscape only, since the pages in IE show properly. On the left top of every site page, the code causes the inaccurate position of menu links HOME ! CONTACT US ! ABOUT US ! FAQ. The white separator is a part of the image (no font). In the source code there are several space characters to balance the position of the menu items. I tried to make a table for the items in the menu, but it did not work. The change of CSS had also no effect. My colleagues have no clue... Any help would be thus greatly appreciated. Thanks!

 

What do you mean CSS did not work? Did you try to give each menu item an absolute position in the page?
In general using spaces is a very bad way to position items. IE7 doesn't look that aligned either, and if a user tries to increase or reduce the size of the font it'll get all screwy.

 

Hello,
This is the concerned part of the html code:

<td width="100%" height="45">
<a class="meniu" href="index.html">&nbsp;&nbsp;&nbsp;HOME </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="meniu" href="contact_us.html">CONTACT US
</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="meniu" href="about_us.html">ABOUT US</a>&nbsp;&nbsp;&nbsp;<a class="meniu" href="faq.html">&nbsp;&nbsp;FAQ</a><td>

and here is the related part of the CSS:

a.meniu:link {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-decoration: none;

One colleague advised to add 'text-align: center' to this CSS. But it did not correct the layout. I know, that this page is everything else than the HTML standard, but the spaces are currently the only measure to show the menu a bit aligned. Hopefully giving absolute position can make this? Would you please suggest how (via PM perhaps)? Thank you for your attention.

 

Absolute positioning should work. Your html could look a bit like this:

<div id="menuhome">
<a class="meniu" href="index.html">HOME </a>
</div>
<div id="menucontact">
<a class="meniu" href="contact_us.html">CONTACT US</a>
</div>

etc. Then in the css add:

#menuhome {
position:absolute;
top: 50px;
left: 20px;
}
#menuabout {
position:absolute;
top: 50px;
left: 70px;
}

etc. You'll have to work out the actual values for top and left. The w3schools explains it more fully: http://www.w3schools.com/css/css_positioning.asp

 

Hello,
I tried to implement the absolute positioning. However, it functions only if you watch the site on the same screen size as you did the absolute positioning. If the screen size changes, the absolute position of an element not. (This whole site is aligned to the centre.) So this is unfortunately not the solutionin this case ...