PDA

View Full Version : FF positioning problem



rndilger
Jul 21st, 2009, 04:32 AM
The site I'm working on can be viewed at www.622cards.com. The positioning looks correct in IE, but is broken in FF. I was hoping someone could take a quick look at the CSS to help me diagnose the problem.

Here is the relevant CSS:


body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
height: 100%;
width:100%;
text-align:center;
background-image:url(../images/page_bg.png);
}

#container {
width:777px;
margin: 0 auto;
clear:both;
}

#header {
height:175px;
padding:0px;
background-image:url(../images/header.png);
}

#logo {
position:relative;
left:15px;
top:40px;
}

#specials {
position:relative;
right:15px;
top:40px;
}

#content_container {
width: 777px;
clear:both;
}

#sidebar {
min-height:200px;
width: 258px;
float:left;
background-image:url(../images/nav_bg.png);
background-repeat:repeat-y;
}

#main {
min-height:200px;
width: 519px;
float:right;
background-image:url(../images/main_bg.png);
background-repeat:repeat-y;
}

#footer {
clear: both;
width:777px;
}

As always, thanks for all the great support on this forum!

Ryan

drhowarddrfine
Jul 21st, 2009, 05:32 AM
How did it ever get the way it is if you used Firefox to create the site?

SB65
Jul 21st, 2009, 10:18 AM
Well, the only thing I can see is that there's a gap between #header and #content-container in FF3.5, caused by img #logo.

Try making the following changes:



#header {
height:175px;
padding:0px;
background-image:url(../images/header.png);
position:relative;
}

#logo {
/*position:relative;*/
position:absolute;
left:15px;
top:40px;
}

rndilger
Jul 21st, 2009, 03:40 PM
Thanks, that did the trick. This is really the first time that I've used div's to create a layout. I understand this is the most efficient way to create layouts, but I keep running into these little issues. Thank goodness for this forum and all the gracious contributors!

Ryan