CSS FF <P> Quirk - help please

[burns]

Hi,

If you go to here ("") you will see that their is a gap at the top of the page. Basically, it only appears when viewing in FF, IE looks fine. I believe that it something to do with the way FF renders the <P> tag? maybe by default? It seems to be overlapping the top and bottom of the containing div.

CSS


/* Layout */



body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #efeade;
background-image: url(../images/bg.jpg);
background-position: left top;
background-repeat: repeat-x;
}

#container {
width: 710px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #container {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

#header {
text-align: center;
width: 780px;
height: 200px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}

#menu {
text-align: center;
width: 780px;
height: 45px;
margin: auto;


}

#title {
text-align: center;
width: 780px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
padding: 0px;
}

#content {
text-align: center;
width: 780px;
background-image: url(../images/body.jpg);
background-position: bottom;
background-repeat: no-repeat;
height: auto;
}

#contentcontainer {
text-align: center;
width: 780px;
background-image: url(../images/bgtiled.jpg);
background-repeat: repeat-y;
background-position: top;

}

#footer {
text-align: center;
width: 780px;
height: 100px;

}

/* Text & Formatting */

.footertext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #bd817e;
}

.homepagetitle {
font-family: Pristina;
font-size: 18px;
color: #bd817e;
font-weight: bold;
float: left;
padding-left: 60px;

}
p {
margin-left: 59px;
margin-right: 59px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #b0995f;
}
a:link {
color: #bd817e;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #DBB9B7;
}
a:hover {
text-decoration: underline;
color: #bd817e;
}
a:active {
text-decoration: none;
color: #bd817e;}

.clear {
clear:both;
}

h3 {
margin-left: 59px;
margin-right: 59px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #b0995f;
margin-bottom: 0px;
margin-top: 0px;

}
.UP {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #999900;
float: right;
margin-right: 59px;
margin-bottom: 0px;

}
ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CC9933;
font-weight: bold;
line-height: 25px;
text-align: left;
width: auto;
margin-left: 69px;
padding: 0px;
float: left;
display: inline;
}
.buybutton {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #CC3333;
height: 25px;
width: 100px;
border: 2px solid #FFFFFF;
margin-left: 59px;
float: left;
text-align: center;
vertical-align: middle;
background-color: #CCCC99;
font-weight: bold;
padding-top: 8px;
}
#container #contentcontainer #content h3 {
color: #CC9933;
}
#container #contentcontainer #content strong {
}


I could just set the CSS P top-margin/bottom-margin attribute to 0 but this will colapse all the paragraphs, so i'm a bit confused.

Thanks

[ratherblue]

what if you just add "margin-top: 0px;" w/o the bottom part?

[burns]

yes but this would be more of a 'fudge' then a proper solution, their must be a proper way of fixing this?

[burns]

why are you spamming?

[simplistik]

why are you spamming?
eh? :lol:

Anyway, actually the proper way is to clear the margin... when I do a site i always do.


p { margin: 0 0 1.6em 0; }

which standardizes all my paragraphs things you know act differently cross browser it's always best to reset them and then define them things like ul, ol, li.. etc. Since they display differently on different browsers clear it's default styling and apply your own properly.