hi every one, i have made a few websites for my own pearsonal use and college work which was marhed in IE 6 and 7,i now want to get my website looking good in fire fox aswel i have started to build it in dreamweaver and its not put to a server yet as i only got the go ahead tonight and he hasent decided on a domain name.

 

the planning is to have a .swf banner followed by 11 simple box links this i have done with 3px pading top and bottom and 1 argin bottom it is as how i want it to work in IE but in firefox there is no margin,any ideas this is the imported .CSS thanks chris

 

px m@charset "utf-8";

body/* CSS Document */

 

{

background: #0000FF;

}

#container {

background: #66CC66;

height: 2000px;

width: 780px;

margin-left: 100px;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav li {

font: 86% Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

text-align: left;

list-style: none;

}

#nav a {

list-style: none;

background: #993333;

display: block;

padding-top: 3px;

width: 120px;

padding-left: 3px;

}

#nav a:link, #nav a:visited {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #FFFFFF;

text-decoration: none;

text-align: center;

padding-top: 3px;

padding-bottom: 3px;

}

#nav a:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #000000;

background: #00FF00;

display: block;

}

#nav a:active {

color: #333333;

background: #0000FF;

}

#image {

width: 120px;

}

#sidebar {

text-align: center;

display: inline;

}

i have haded a 1 px border with th same colour as the background this gives me the required effect in firefox now but its to much space between the buttons in IE any ideas thanks chris

Hard to say without seeing the site or code, but try checking your margins/padding. They work differently in Firefox and IE and are one of the most common sources of problems when it comes to cross browser stuff. If it's the two browsers handling things differently, use a seperate stylesheet for IE.