PDA

View Full Version : CSS in Firefox: Background not showing up



hpluver88
Oct 12th, 2009, 02:42 AM
I know everyone here has heard their fair share of questions about CSS and Firefox, but this one has me slightly perplexed.

This is the site: http://www.rupertgrint.net/cherrybombfanlisting

The thick black line on the left is supposed to carry down as a background and frame the rest of the content (http://www.rupertgrint.net/cherrybombfanlisting/bkgd.jpg)

As you can see, it doesn't seem to want to do that and i can't figure out why!

This is the CSS:



body {
background-image: url(sqbkgd.jpg);
margin-top:0px;
font-family: Trebuchet MS, Tahoma, "sans serif";
font-size:11px;
color:#000;
text-align:center;}


a:link, a:active, a:visited{
color:#202020;
text-decoration:none;}

a:hover{
color:#FF0000;
text-decoration:none;}


#top {
width:617px;
height:auto;
margin:auto;
background-image: url(bkgd.jpg);
background-repeat:repeat-y;
text-align:justify;}

#header {
width:617px;
height:436px;
background-image:url(header2.jpg);
background-repeat: no-repeat;}

#content {
width:505px;
margin-top:15px;
margin-left:70px;
height:auto;
float:left;}


#sidemenu {
width : 100%;
margin-top: 15px;
margin-left: 100px;
padding:0 0;
}


#sidemenu li {
display : inline;
text-align:center;
margin:0 1px;
padding:0 0;
}

#sidemenu ul {
list-style-type : none;
margin:0 auto;
padding:0;
}

#sidemenu ul li a {
background-color: #202020;
text-decoration: none;
font: normal normal 90%/normal arial, verdana, tahoma, sans-serif, monospace;
text-transform: lowercase;
padding: 8px 13px;
}

#sidemenu ul li a {
color : #ffffff;
}

#sidemenu ul a:hover {
color : #FFF;
background-color : #FF0202;
}





h1 {
text-align: left;
font-family: Trebuchet MS, Tahoma, "sans serif";
font-size: 18px;
font-style: italic;
color: #FF0000;
text-transform: lowercase;
padding-left: 5px;}

drhowarddrfine
Oct 12th, 2009, 06:24 AM
I know everyone here has heard their fair share of questions about CSS and FirefoxDon't know what you mean by that. Most issues lie with IE but validate your html for that list of errors. Missing end tags, etc.

As always, the problem here is with IE and not Firefox. IE is incorrectly expanding the parent element to contain the floated child. This is a bug in IE. To get Firefox to imitate IEs bug, add overflow:auto to the 'top' div.

Never, ever use IE as a reference for how things should work. It is the worst browser on the planet. Always, always test your page in a modern browser first (ANYTHING but IE). Do so and you would have noticed all the modern browsers show your site the same. Even IE8 looks the same as Firefox and the others.

hpluver88
Oct 12th, 2009, 10:15 PM
Thank you! That did seem to solve part of the problem.

However, now there is a horizontal scrollbar on the bottom. Any advice on how to get rid of it? Here is my updated CSS coding:

Nevermind! Problem resolved