Problem with css in firefox

[derange]

I have a small but troubelsome problem.....

 

I get this spaces in firefox that i do not get i IE6

( http://www.flytillbrasilien.se/blipor/index.html )

How do i rewrite it so it will work on both?

I have walidated it so there is no problems there ( http://jigsaw.w3.org/css-validator/#validate-by-input )

 

This is the code today

 

/** BASIC */

 

body {

margin: 0px 0px 0px 0px;

background-image: url(images/blibackground.jpg);

text-align: justify;

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

font-size: 11px;

color: #274690;

 

}

 

h1 {

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

font-size: 32px;

font-weight: normal;

letter-spacing: 0px;

text-transform: none;

}

h2, h3, h4, h5, h6 {

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

font-size: 22px;

font-weight: normal;

color: #274690;

text-transform: none;

letter-spacing: 0px;

}

 

ul {

margin-left: 0px;

padding-left: 0px;

list-style-type: none;

}

 

a {

color: #274690;

}

 

a:hover {

text-decoration: none;

}

 

/** HEADER */

 

#header {

width: 950px;

height: 143px;

margin: 0px auto;

background: #ffffff url(images/logga.jpg);

}

 

 

/** MENU */

 

#menu {

width: 950px;

height: 30px;

margin: 0px auto;

background: url(images/img03.jpg) repeat-x left top;

}

 

#menu ul {

margin: 0px;

padding: 0px;

list-style: none;

}

 

#menu li {

display: none;

}

 

 

/** CONTENT */

 

#content {

width: 950px;

margin: 0px auto;

background: url(images/img04.gif) repeat-y left top;

}

 

#columnA {

float: right;

width: 440px;

padding: 20px;

}

 

#columnB {

float: left;

width: 180px;

padding: 20px 20px 0px 20px;

}

 

#columnB h2 {

font-size: large;

}

 

/** FOOTER */

 

#footer {

width: 950px;

margin: 0px auto;

background: #ffffff url(images/fot.jpg);

}

[squeezedjuicybits]

Remove the margin on your p elements.

[derange]

sorry not following you now.....

[PicnicTutorials]

These are all the rules that should fix that. Pick which ever one applies to your code. Each work in some situations while each don't work in others. I just messed with it in firebug - font-size:0; on the menu seems to fix the menu, and overflow:hidden on the footer seems to fix the footer. But test all in each.

 

img {

vertical-align:bottom;

}

img {

display:block;

}

div {

font-size:0;

}

div {

overflow:hidden;

}

[squeezedjuicybits]

Or:

 

p { margin:0; padding:0; } // reset margins & padding on all paragraphs

 

Sometimes it can be beneficial to reset all margins and padding for the whole document so you have a 'blank' canvas to start with:

 

* { margin:0; padding:0; }

 

Either method would work for you.

[derange]

the menu and the footer worked fine thanx.... just messing with the top now..... i want it to start from the very top of the page to in firefox....

[squeezedjuicybits]

body {
   margin: 0;
   padding:0;
   background-image: url(images/blibackground.jpg);
   text-align: justify;
   font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #274690;
}

 

Should do it.

[derange]

sorry did not see the last post... it works great now..... thanx