Alignment driving me nuts - help

[rodd1000]

This page (http://www.cnsdemo.co.uk/) displays perfectly fine in IE but in firefox the alignment of the bottom two thumbnails on the left are too low although they look ok in dreamweaver and in IE

Also the link menu at the bottom is too low. Although they also look fine in dreamweaver and IE.

Could anyone please spare me my sanity and help.. be much appreciated.

Thankyou.


Rodd

[Centauri]

For some reason, the first 3 thumbnails have divs around the <a>s, whilst the 5th thumbnail has a <p> around the <a> - the <p> will add extra top and bottom margins, and neither it or the divs are needed and should be removed.

Removing ALL default margins from the menu_bar <ul> should resolve the footer issue.

[rodd1000]

Hi Centauri, thanks for the reply,

On the "menu_bar ul" there doesnt seem to be any margins set, i always thought a default margin was when it is set to "auto"?

or have i mis-understood you. ( not difficult for me ...lol)

#menu_bar {
height: 34px;
width: 800px;
padding-top: 0px;
padding-bottom: 0px;
text-align: center;
font-family: "Century Gothic";
margin-right: auto;
margin-left: auto;
margin-top: -38px;
}
#menu_bar ul {
font-size: 16px;
list-style-type: none;
height: 16px;
padding-right: 0px;
padding-left: 0px;
}
#menu_bar li {
display: inline;
margin-right: 25px;
margin-left: 25px;
}
#menu_bar a {
color: #FFFFFF;
text-decoration: none;
}
#menu_bar a:hover {
color: #666666;
text-decoration: none;



Thanks again!

[Centauri]

Browsers apply default margins and/or padding to a lot of things, especially <ul>s and <ol>s, and the amount varies cross browser. To get an even known start point, I usually start the css with the universal selector to zero ALL default margins and padding, and then add what I want where I want :* {
margin: 0;
padding: 0;
}

[rodd1000]

Hi Centauri, thanks again for your help, i've managed to resolve the issues using the method you described.


Many thanks!!!