...

View Full Version : Css Image Won't Display In Firefox



SarahB
02-05-2007, 06:44 PM
Hi There,

I wondered if anyone can help?

A CSS Banner Image won't display in Firefox on a PC (it seems fine on firefox on a mac & on all other browsers). I'd be grateful if there's anyone that can offer some advice, it would be hugely appreciated.

Link:
http://www.urbancomms.com/home.html

See: #wrapper2

Code:
body {
font: 62.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
color:#888;
margin:0;
background:url(../images/body.jpg) top repeat-x #121212;
background-attachment:fixed;
}

* {
margin:0;
padding:0;
}

#wrapper1 {
background:#FFFFFF;
padding:0 0px 0px 0px;
width:760px;
margin:0 auto;
}

#wrapper2 {
width:740px;
background: url("../images/common/wrapper2.jpg") bottom repeat-x #fff;
border-left:1px solid #999999;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
padding:0 10px 10px 10px;
}

#nav {
float:rleft;
border:none;
padding:0;
margin:0;
}

#nav li {
float:left;
list-style:none;
margin:0 4px 0 0;
padding:0;
}

#nav li a {
display:block;
padding:130px 5px 9px 10px;
background:#fff;
color:#444;
text-decoration:none;
text-transform:uppercase;
margin:0 1px 0 0;


}
#nav li a:hover {
background: url("../images/common/nav_a_hover3.jpg") top center no-repeat #fff;
color:#B68066;

}

#header h1 {
float:right;
padding:50px 20px 34px 120px;
background: url("../images/common/uc_logo.gif") left bottom no-repeat;
}
#header h1 a {
color:#000000;
text-decoration:none;
border:none;
}
#header h1 a:hover {
color:#000;
}
#header h1 span {
font-size:.5em;
color:#ccc;
text-transform:uppercase;
}

#container {
clear:both;
padding:20px 0 0 0;
}

p.description {
background: url("../images/banners/description1.jpg") left bottom no-repeat #FFFFFF;
padding:120px 30px 40px 10px;
color:#FFFFFF;
}

p.description a {
color:#fff;
text-decoration:none;
font-weight:bold;
border-bottom:1px dotted #8CD1FF;
}
p.description a:hover {
border-bottom:1px solid #8CD1FF;
}

#sidebar {
width:230px;
float:right;
padding:0px 20px 10px 10px;
margin:0 0 0 0;
}

#content {
margin:0 260px 0 5px;
padding:10px 20px 0 0;
background: url("../images/common/content.jpg") top right no-repeat;
}

#content h2 {
font:2.0em Arial;
color:#B68066;
letter-spacing:-1px;
margin:10px 0;
border-bottom:2px solid #eee;
background: url("../images/common/h2.jpg") bottom left no-repeat;
clear:left;
}
#content h2 a {
color:#B68066;
text-decoration:none;
}
#content p {
margin:15px 0;
font-size:110%;
line-height:21px;
}
ol.subnav {
margin:-10px 0 0 -5px;
padding:0;
}
ol.subnav li {
float:left;
list-style:none;
margin:0;
padding:0;
}
ol.subnav a {
font-weight:bold;
color:#555;
border-top:2px solid #fff;
display:block;
padding:5px;
text-decoration:none;
margin:0 5px 0 0;
border-bottom:none;
}
ol.subnav a:hover {
border-top:2px solid #005A97;
color:#121212;
border-bottom:none;
}

#sidebar h2 {
color:#333;
margin:10px 0;
font-size:1.3em;
}

p.news {
background:#f4f4f4;
padding:10px;
margin:0 0 10px 0;
border-left:5px solid #f0f0f0;
}

p.news a.more {
display:block;
color:#333;
text-decoration:none;
text-align:right;
border:none;
}

#sidebar ul {
list-style:none;
border-top:1px solid #eee;
border:none;
padding:0;
margin:0;
}
#sidebar ul li {
border-bottom:1px solid #eee;
padding:5px;
margin:0;
}
#sidebar ul li a {
color:#0066dd;
text-decoration:none;
}
#sidebar ul li a:hover {
color:#0033aa;
}

input {
padding:5px;
border:1px solid #eee;
color:#555;
width:220px;
}

#content h3 {
font:1.8em Trebuchet MS;
color:#555;
margin:10px 0;
}
blockquote {
padding:0 0 0 10px;
border-left:5px solid #eee;
}

ul {
margin:10px 10px 10px 0;
padding:0 0 0 15px;
border:1px solid #eee;
}
li {
margin:0 0 0 10px;
padding:5px;
}
#content img {
padding:px;
border:0px solid #eee;
}
a {
color:#222;
border-bottom:1px dotted #ccc;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #ccc;
}
#footer {
font:9px Trebuchet MS, Arial, Helvetica, sans-serif;
text-align:center;
border-top:0px solid #FFFFFF;
padding:10px;
margin:30px 0 0 0;
color:#ACACAC;
width:760px;
margin:0 auto;
}
#footer a {
color:#666666;
}

#monthformat {
border-bottom: 1px dashed #B68066;
}

#dateformat {
font:11px Arial, Helvetica, sans-serif;
font-weight:bold;
color: #B68066;
}

#dateformat a {
font:11px Arial, Helvetica, sans-serif;
color: #B68066;
font-weight:bold;
text-decoration:none;
}

#dateformat a:hover {
color: #B68066;
}

.copyblock { text-align:right; margin-top:20px;font: 62.5%/1.6em "Lucida Grande";color: #666;text-decoration: none }

Excavator
02-05-2007, 06:57 PM
Hello SarahB,
common/wrapper2.jpg is displaying fine here. I looked at it with IE7 and FF2 on a Vista machine.
Check your site with the validator.

SarahB
02-05-2007, 08:55 PM
Thanx alot for having a look for me, it's appreciated.

I haven't used validation before. I tested the css file and it caused certain elements to come out of position.

Any tips on how's best to re-write the code so that it works in FF? This is all fairly new to me :-)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum