My wordpress theme breaks in FF

[gjindancer]

I wonder if anyone can help me with a broken nav bar and "invisible" background in FF?

I needed to separate the header, navbar and main page in appearance for the website www.uk-offer.com (http://www.uk-offer.com). To do this I had to make the usual "page" div blank and add a further div "wrap" to wrap around the main content and sidebar. Originally I just added the css property of background colour to the div and it did not appear in IE until I added a width too - but it still does not show in firefox - also the navigation at the top of the page breaks in firefox.

I have checked the site validator and the only errors are in posts - which I do not write or control (and they are all mainly alt errors and errors with affilliate codes)

Here is my css, it is a modified Wordpress theme: all the php pages are pretty much standard WP with plugins etc, let me know if you need any further info to help me..

body {
font: 75%/150% "Trebuchet MS", Tahoma, Arial;
color: #000000;
background: #ffffff url(images/backg.jpg) repeat-x top fixed;
margin-top: 30px;
margin-bottom: -20px;
padding: 5px 0px 0px 0px;
}
a {
color: #7B7B7B;
text-decoration: none;
}
a:visited {
color: #7B7B7B;
text-decoration: none;
}
a:hover {
color: #9C0000;
text-decoration: underline;
}
img {
border: none;
}
p {
padding: 0px 0px 15px;
margin: 0px;
}
h1 {
margin:0px;
padding-left: 30px;
height: 60px;
font: bold 36px/100% "Trebuchet MS", Tahoma, Arial;
color: #ffffff;
}
h1 a, h1 a:visited{
color: #ffffff;
text-decoration: none;
}
h1 a:hover{
color: #ffffff;
text-decoration: none;
}
h2 {
color: #a40f29;
margin: 0px 0px 2px;
border-bottom: 1px solid #314e54;
letter-spacing: -1px;
font: normal 190%/100% "Trebuchet MS", Tahoma, Arial;
padding-bottom: 3px;
}
h2 a, h2 a:visited {
color: #a40f29;
text-decoration: none;
}
h2 a:hover {
color: #ABABAB;
text-decoration: none;
}
h3 {
font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
color: #424242;
margin: 10px 0px 5px;
}
h4 {
font: normal 130%/100% "Trebuchet MS", Tahoma, Arial;
color: #4D4D4D;
margin: 10px 0px 5px;
}
form {
margin:0px;
padding:0px;
}
.style2 {
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#eform { background:url(images/eform.gif) no-repeat; height: 146px; font: normal 100%/100% "Trebuchet MS", Tahoma, Arial; padding-top: 10px;
color: #6B0410;

}
#rec{ background: url(images/recommend.gif) no-repeat; height: 267px; font: normal 100%/100% "Trebuchet MS", Tahoma, Arial; padding-top: 10px;
color: #6B0410; margin-top:0px;

}
#news{ font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
color: #6B0410;
}
#page {
margin: 0px auto;
width: 810px;
}
/* header area */
#header {
background: url(images/bar.gif) repeat-x bottom;
height: 148px;
position: relative;
}
#headerimg {
background: url(images/headerbkg.jpg); /**/
position: relative;
border-bottom: 1px solid #f17c08;
border-top: 1px solid #f17c08;
border-left: 1px solid #f17c08;
border-right: 1px solid #f17c08;
padding: 8px 0px 0px 10px;
height: 100px;
}
#logo {
margin: 5px 0 0;
position: absolute;
left: -30px;
top: -40px;
}
#headerimg .description{
position: absolute;
left: 60px;
bottom: 5px;
color: #ffffff;
font-size: 14px;
}
#banner {
margin: 5px 0 0;
position: absolute;
right: 10px;
top: 30px;
}
#strapline {
color: #a40f29;
margin: 0px 0px 2px;
letter-spacing: -1px;
font: 22px "Trebuchet MS", Tahoma, Arial;
padding-bottom: 3px;
margin: 5px 0 0;
position: absolute;
right: 33px;
top: 45px;
}
#nav {
list-style: none;
margin: 0px;
position: absolute;
right: 0px;
bottom: 1px; border-right: solid 1px #c58b8b;
}
#nav ul {
list-style-type:none;
}
#nav li {
float: left;
margin-left: 0px;
}
#nav .current_page_item a, #nav .current_page_item a:visited{
color: #000000;
text-decoration: none;
}
#nav .page_item a{
color: #FFFFFF;
text-decoration: none;
background: url(images/bar.gif) repeat-x;
padding: 7px 4px;
border-left: 1px solid #c58b8b;
font: bold 10px/100% Arial, Helvetica, sans-serif;
display: block;
}
#nav .current_page_item a,#nav .page_item a:hover {
color: #FFFFFF;
text-decoration: none;
background: url(images/barover.gif) repeat-x;
padding: 7px 4px;
font: bold 10px/100% Arial, Helvetica, sans-serif;
border-left: 1px solid #c58b8b;
display: block;
}
/* content area */
#wrap { background: #FFFFFF; width: 808px;
border-top: 1px solid #f17c08;
border-left: 1px solid #f17c08;
border-right: 1px solid #f17c08;
margin-top:10px;
}
#content {
margin-top:10px;
padding: 0px 0px 30px 20px;
float: left;
width: 548px;
overflow: hidden;
}
.post {
clear:both;
padding-top: 6px;
}
.post-digg{
width: 58px;
height: 90px;
float:left;
}
.post-date {
width: 45px;
height: 49px;
float:left;
background: url(images/date-bg.gif) no-repeat;
}
.post-month {
font-size: 11px;
text-transform: uppercase;
color: #FFFFFF;
text-align: center;
display:block;
line-height: 11px;
padding-top: 2px;
margin-left: -3px;
}
.post-day {
font-size: 18px;
text-transform: uppercase;
color: #999999;
text-align: center;
display:block;
line-height: 18px;
padding-top: 7px;
margin-left: -3px;
}
.post-title {
float: left;
margin-left: 10px;
width: 430px;
}
.entry {
clear: both;
padding-top: 10px;
padding-bottom: 10px;
}
.post-cat {
background: url(images/mini-category.gif) no-repeat;
padding-left: 20px;
float:left;
font-size: 95%;
color: #999999;
}
.post-comments {
background: url(images/mini-comments.gif) no-repeat;
padding-left: 20px;
float: right;
font-size: 95%;
}
.post-calendar {
background: url(images/mini-calendar.gif) no-repeat;
padding-left: 20px;
float: right;
font-size: 95%;
color: #999999;
}
.mini-add-comment {
background: url(images/mini-down-arrow.gif) no-repeat;
padding-left: 18px;
float: right;
}
.post-content {
clear: both;
padding-top: 10px;
}
.navigation {
clear: both;
padding: 10px 0px;
}
.navigation a, .navigation a:visited {
color: #1a810b;
}
.previous-entries a {
float: left;
padding-left: 18px;
background: url(images/nav-left.gif) no-repeat left center;
}
.next-entries a {
float: right;
padding-right: 18px;
background: url(images/nav-right.gif) no-repeat right center;
}

/* comments area */
#comments, #respond {
border-bottom: 1px dotted #6B0410;
padding: 10px 0 5px 0;
clear: both;
}
.commentlist {
margin: 10px 0px;
padding-left: 20px;
line-height: 130%;
}
.commentlist li{
padding: 5px 10px;
}
.commentlist .alt {
background: #f1fce3;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
font-weight: bold;
font-style: normal;
font-size: 120%;
color: #0E4A01;
}
.commentlist small {
margin-bottom: 5px;
display: block;
font-size: 87%;
}
#commentform {
margin-top: 10px;
font: 110% Arial, Helvetica, sans-serif;
}
#commentform p {
padding: 6px 0px;
margin: 0px;
}
#commentform label{
color: #013B02;
font-size: 87%;
}
#commentform input{
width: 200px;
background:#f5fcfe;
border: 1px solid #383838;
padding: 3px;
margin-top: 3px;
}
#commentform textarea{
width: 485px;
height: 115px;
background:#f5fcfe;
border: 1px solid #383838;
padding: 2px;
margin-top: 3px;
}
#commentform textarea:focus, #commentform input[type="text"]:focus {
background: #ffffff;
}
#commentform #submit{
background:#4da524 ;
font: bold 12px Arial, Helvetica, sans-serif;
color: #FFFFFF;
border: 1px solid #6E6E6E;
float: right;
width: 145px;
height: 28px;
cursor: pointer;
}

/*sidebar */
#sidebar {
background:#FFFFFF;
float: right;
padding: 5px 5px 5px 5px;
width: 200px;
color: #636262;
overflow: hidden;
}
/*sidebar title (h2) */
#sidebar h2, #sidebar .sidebartitle{
font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
color: #6B0410;
margin: 20px 0px 2px;
border-bottom: 1px solid #6B0410;
}
/*sidebar text styles */
#sidebar a, #sidebar a:visited{
color: #a40f29;
text-decoration: none;
}
#sidebar a:hover{
color: #D60E26;
text-decoration: none;
}
/*sidebar list level1 */
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
/*sidebar list level2 */
#sidebar ul li ul {
padding: 0;
margin: 0;
}
#sidebar ul li ul li{
padding: 2px 0 2px 0px;
border-bottom: 1px solid #B9BCB9;
}
/*sidebar list level3 */
#sidebar ul li ul li ul li{
padding: 1px 0 1px 10px;
border: none;
}
/*blogroll */
ul.list-blogroll li{
background: url(images/blogroll.gif) no-repeat !important;
padding-left: 16px !important;
}
/*category */
ul.list-cat li, li.widget_categories li{
background: url(images/tag.gif) no-repeat !important;
padding-left: 20px !important;

}
/*recent */
ul.list-rec li, li.widget_recent li{
background: url(images/recent.gif) no-repeat !important;
padding-left: 20px !important;

}
/*archives */
ul.list-archives li, li.widget_archives li{
background: url(images/arch.gif) no-repeat !important;
padding-left: 20px !important;
}

/*meta */
ul.list-meta li, li.widget_meta li{
background: url(images/meta.gif) no-repeat !important;
padding-left: 20px !important;
}


/*pages */
ul.list-page li, li.widget_pages li, li.widget_recent_entries li{
background: url(images/mini-page.gif) no-repeat !important;
padding-left: 20px !important;
}
/*sub-pages */
ul.list-page li ul li, li.widget_pages li ul li{
background: url(images/pagearrow.gif) no-repeat !important;
padding-left: 20px !important;
}

/*calendar */
li.widget_calendar td {
padding: 1px 7px;
}
/*text */
.textwidget {
padding-top: 5px;
}
/*search form */
#searchform {
width: 292px;
height: 32px;
background: url(images/searchback.gif) no-repeat;
margin: 0px 0 0;
position: absolute;
padding-right: 5px;
padding-top:5px;
right: -3px;
top: 0px;
}
#searchform br {
display: none;
}
#searchform #s {
width: 135px;
height: 18px;
padding: 4px 5px 0px 5px;
border: 1px solid #6B0410;
background: #FFFFFF;
margin-right: 2px;
color: #000000;
font-weight: normal;
}
/* search form button - to specify button only use input[type="submit"] */
#searchform input {
background: url(images/search.png) no-repeat;
width: 25px;
height:25px;
border: 0px solid #6B0410;
font: bold 12px Arial, Helvetica, sans-serif;
color: #FFFFFF;
vertical-align: middle;
}

/* Page Close*/
#close {
clear: both;
background: #ffffff ;
color: #ffffff;
font-size: 95%;
line-height: 130%;
padding-bottom: 0px;

}
/* Footer */
#footer {
margin: 0px auto;
position: relative;
width: 809px;
background: url(images/bar.gif);
height: 26px;
border-left: 1px #c58b8b solid;
border-right: hidden;
font-size: 11px;
line-height: 100%;
color: #ffffff;
}
#copy{
margin: 0px auto;
width: 788px;
height: 26px;
font-size: 11px;
line-height: 100%;
color: #c58b8b;
}
#footer a, #footer a:visited {
margin-top: 8px;
color: #ffffff;
}
.rss {
padding-left: 18px;
padding-bottom: 2px;
margin-left: 8px;

}

/* alignments */
.center {
text-align: center;
}

img.center, img[align="center"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
img.alignleft, img[align="left"] {
float:left;
margin: 2px 10px 5px 0px;
}
.alignright {
float: right;
}
img.alignright, img[align="right"] {
float:right;
margin: 2px 0px 5px 10px;
}
.clear {
clear:both;
}
hr.clear {
clear:both;
visibility: hidden;
margin: 0px;
padding: 0px;
}

Thanks,
Dan

[gjindancer]

I've just been playing about and the background not showing in the main content is due to the height not being specified in the css:

#wrap { background: #FFFFFF; width: 808px;
border-top: 1px solid #f17c08;
border-left: 1px solid #f17c08;
border-right: 1px solid #f17c08;
margin-top:10px;

However, as its a blog I can't specify the height and setting it to inherit or auto doesn't work.

Here are the tags I added in the index page:

<?php get_header(); ?>
<div id="wrap"><div id="content">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('d') ?></span></div>
<div class="post-title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<span class="post-cat"><?php the_category(', ') ?></span> <span class="post-comments"><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></span>
</div>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
Rate this post:<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
</div>
</div><!--/post -->

<?php endwhile; ?>

<div class="navigation">
<span class="previous-entries"><?php next_posts_link('Previous Entries') ?></span> <span class="next-entries"><?php previous_posts_link('Next Entries') ?></span>
</div>

<?php else : ?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>

<?php endif; ?>

</div><!--/content -->

<?php get_sidebar(); ?></div>
<?php get_footer(); ?>
<div id="copy">
<div align="center">
<b>&nbsp;&copy; Copyright UK Offer Media Limited 2007. All rights reserved</b></div>
</div>

[gjindancer]

Right, I fixed the background issue by adding:

overflow: hidden;

Wow! no idea why this works though, I used it as it was in the sidebar css and that was displaying OK :D

OK now all I have to fix is the top menu - again, this is fine in IE - if I set the page with to be too small to contain the navbar, the navbar will break into two rows. However after sorting this in IE - In FF the navbar breaks into two rows no matter what width I make it???

Can anyone help??

[gjindancer]

OK If I increase my page width by 50px then the navbar aligns itself in firefox - which is absurd as the now aligned navbar has a 49px gap of redundant space..

I'm not sure what is happening here as in explorer the nav would break into two if there was not enough width down to the pixel - so if x navbuttons with y padding needed 810px to span accross then that would be it.

Why does firefox need another 50 pixels??? hmmm?

Anyone??

[gjindancer]

Well, I set a width value in the nav section and hey presto it works!!!

Its still a few pixels out though if anyone can help :D