Jump to content

css issue with FF - Background image wont display

michaelguild13

By michaelguild13
in CSS

Recommended Posts

michaelguild13 Newbie

michaelguild13

Posted
Posted

This is my Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Asia Consultancy Group - ACG</title><link href="css.css" rel="stylesheet" type="text/css" /><!--[if IE]><style type="text/css">@import "css_ie.css";</style> <![endif]--><script type="text/javascript" src="js/functions.js"></script></head><body><div id="wrapper"><div id="banner"><script language="javascript" src="js/banner_left.js"></script><script language="javascript" src="js/banner_right.js"></script></div><div id="content"><div id="topmenu"><div id="block"><script language="javascript" src="js/top_menu.js"></script></div></div><div id="leftcol"><script language="javascript" src="js/left_menu.js"></script></div>  <!--[if IE]><table><tr><td><![endif]--><div id="rightcol"><div id="block"><h1>Photo Gallery </h1><div id="thumbnailbox"><table width="100%" border="0" cellspacing="0" cellpadding="0">  <tr>    <td><a href="img/gallery/ACG Guided Mast office building.jpg" rel="thumbnail" style="background-image: url(img/gallery/ACG Guided Mast office building_s.jpg)" title="caption 1djflkajflkjsakj <br />fjdkjaslk dfkjsl jdkjfl s <br />ajkfdjasl askj dskljf lkajlk jklsdj <br />klasjlj  sdklajf lak"><img src="img/rounded_edges.png" /></a></td>    <td><a href="img/gallery/ACG Herndon.jpg" rel="thumbnail" style="background-image: url(img/gallery/ACG Herndon_s.jpg);" title="caption 2"><img src="img/rounded_edges.png" /></a></td>    <td><a href="img/gallery/ACG Kabul office.jpg" rel="thumbnail" style="background-image: url(img/gallery/ACG Kabul office_s.jpg);" title="caption 3"><img src="img/rounded_edges.png" /></a></td>    <td><a href="img/gallery/ACG Tower Construction.jpg" rel="thumbnail" style="background-image: url(img/gallery/ACG Tower Construction_s.jpg);" title="caption 4"><img src="img/rounded_edges.png" /></a></td>    <td><a href="img/gallery/Asmayi Hill Ground Breaking.jpg" rel="thumbnail" style="background-image: url(img/gallery/Asmayi Hill Ground Breaking_s.jpg);" title="caption 5"><img src="img/rounded_edges.png" /></a></td>  </tr>  <tr>    <td>Caption 1 </td>    <td>Caption 2 </td>    <td>Caption 3 </td>    <td>Caption 4 </td>    <td>Caption 5 </td>  </tr>  <tr>    <td><a href="img/gallery/Dining Hall (2).jpg" rel="thumbnail" style="background-image: url(img/gallery/Dining Hall (2)_s.jpg);" title="caption 6"><img src="img/rounded_edges.png" /></a></td>    <td><a href="img/gallery/Dining Hall.jpg" rel="thumbnail" style="background-image: url(img/gallery/Dining Hall_s.jpg);" title="caption 7"><img src="img/rounded_edges.png" /></a></td>    <td><a href="img/gallery/Teaming1.jpg" rel="thumbnail" style="background-image: url(img/gallery/Teaming1_s.jpg);" title="caption 8"><img src="img/rounded_edges.png" /></a></td>    <td><a href="img/gallery/Teaming.jpg" rel="thumbnail" style="background-image: url(img/gallery/Teaming_s.jpg);" title="caption 9"><img src="img/rounded_edges.png" /></a></td>    <td></td>  </tr>  <tr>    <td>Caption 6 </td>    <td>Caption 7 </td>    <td>Caption 8 </td>    <td>Caption 9 </td>    <td> </td>  </tr></table></div></div><!--[if IE]></table></tr></td><![endif]--></div></div><div id="footer"><p> </p><p> </p><p> </p><p> </p><p> </p><script language="javascript" src="js/copyright.js"></script></div></div></body></html>

this is my CSS

<?xml version="1.0"?>html, body {background-image: url(img/patternwall_bg.jpg);background-repeat: repeat;padding:0;margin:0;height: 100%; }#wrapper{padding:0;margin:0;width:940px;background: #fff;position:relative;}#banner{float:left;width:100%;}#content{float:left;width:940px;background-color:#fff;}#topmenu{background-image:url(img/bottom.jpg);background-repeat:no-repeat;width:719px;height:30px;float:right;}#topmenu #block{padding:10px 30px;}#topmenu, #topmenu a:link, #topmenu a:visited{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px;font-weight:bold;color:#fff;text-align:right;text-transform:uppercase;vertical-align:middle;text-decoration:none;}#topmenu a:hover{color:#ACBC73;}#content #leftcol{float:left;width:210px;}#content #rightcol{float:right;width:719px;left:220px;vertical-align:top;text-align:justify;padding:30px 0;}#rightcol #block{padding:0 30px 0 0;}#rightcol p{color:#666666;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;padding:0;margin:0;}#rightcol ul{color:#666666;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}#rightcol li{padding:5px 0;list-style-type:circle;}#rightcol h1{color:#666666;font-family:Myriad, Verdana, Arial, Helvetica, sans-serif;font-size:20px;font-weight:bold;}#rightcol h2{color:#ACBC73;font-family:Myriad, Verdana, Arial, Helvetica, sans-serif;font-size:15px;font-weight:bold;padding:0;margin:0;}#rightcol h4{background-color:#ACBC73;color:#FFF;font-family:Myriad, Verdana, Arial, Helvetica, sans-serif;font-size:15px;font-weight:bold;padding:0 5px;margin:0;display:block;}#rightcol h3{color:#ACBC73;font-family:Myriad, Verdana, Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;padding:0;margin:0;}#rightcol ul li a:link, #rightcol ul li a:visited{color:#7B8B42;font-family:Myriad, Verdana, Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;padding:0;margin:0;}#rightcol ul li a:hover{background-color:#ACBC73;color:#fff;}#rightcol p a:link, #rightcol p a:visited{color:#7B8B42;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;text-decoration:none;}#rightcol p a:hover{color:#ACBC73;}#footer{float:left;width:940px;text-align:center;color:#666666;font-size:9px;background-color:#fff;}#footer a:link, #footer a:visited{font-family:Verdana, Arial, Helvetica, sans-serif;color:#666666;font-size:9px;text-decoration:none;}#footer a:hover{color:#7B8B42;}/* menu */#leftcol ul{width:155px;list-style:none;background-color:#ACBC73;padding:0;margin:0;}#leftcol li{border-bottom:#fff dotted thin;padding:0;margin:0;position:relative;}#leftcol .corners_top{position:absolute;right:-1px;z-index:100;top:0;}#leftcol .corners_bottom{position:absolute;right:0;z-index:100;}#leftcol a.menu:link, a.menu:visited{background-color:#ACBC73;color:#fff;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px;font-weight:bold;text-decoration:none;text-transform:uppercase;padding: 5px 0;display:block;width:155px;position:relative;text-indent:22px;margin:0;}#leftcol a.menu:hover, a:hover li{background-color:#7B8B42;}#leftcol .c1{width:9px;height:1px;font-size:1px;background-color:#fff;position:absolute;top:0;right:-1px;}#leftcol .c2{width:7px;height:2px;font-size:1px;background-color:#fff;position:absolute;top:0;right:-1px;}#leftcol .c3{width:5px;height:4px;font-size:1px;background-color:#fff;position:absolute;top:0;right:-1px;}#leftcol .c4{width:3px;height:6px;font-size:1px;background-color:#fff;position:absolute;top:0;right:-1px;}#leftcol .c5{width:2px;height:8px;font-size:1px;background-color:#fff;position:absolute;top:0;right:-1px;}#leftcol .c6{width:1px;height:10px;font-size:1px;background-color:#fff;position:absolute;top:0;right:-1px;}#leftcol .c7{width:10px;height:1px;font-size:1px;background-color:#fff;position:absolute;bottom:0;right:-1px;}#leftcol .c8{width:8px;height:2px;font-size:1px;background-color:#fff;position:absolute;bottom:0;right:-1px;}#leftcol .c9{width:6px;height:3px;font-size:1px;background-color:#fff;position:absolute;bottom:0;right:-1px;}#leftcol .c10{width:4px;height:5px;font-size:1px;background-color:#fff;position:absolute;bottom:0;right:-1px;}#leftcol .c11{width:2px;height:7px;font-size:1px;background-color:#fff;position:absolute;bottom:0;right:-1px;}#leftcol .c12{width:1px;height:9px;font-size:1px;background-color:#fff;position:absolute;bottom:0;right:-1px;}#leftcol .c13{width:100%;height:4px;font-size:1px;background-color:#fff;position:absolute;bottom:-4px;right:-1px;}#thumbBox{ /*Outermost DIV for thumbnail viewer*/position: absolute;left: 0;top: 0;width: auto;padding: 10px;padding-bottom: 0;background: #313131;visibility: hidden;z-index: 10;cursor: hand;cursor: pointer;}#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */font: bold 9px Tahoma;letter-spacing: 5px;line-height: 1.1em;color:#fff;padding: 5px 0;text-align: right;}#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */background-color: white;}#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/position: absolute;visibility: hidden;border: 1px solid black;background-color: #EFEFEF;padding: 5px;z-index: 5;}#thumbnailbox a{background:no-repeat center fixed;width:100px;height:100%;min-height:100%;}#thumbnailbox img{border:none;padding:1em;}#thumbnailbox table td{text-align:center;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;}a:link img, a:visited img{border:#7B8B42;}a:hover img{border:#ACBC73;}

here is a link as well : http://trivision.tv/acg/

Link to comment
Share on other sites
Kingy Member

Kingy

Posted
Posted

Turn this:<?xml version="1.0"?>html, body {background-image: url(img/patternwall_bg.jpg);background-repeat: repeat;padding:0;margin:0;height: 100%; }into thisbody {background-image: url(img/patternwall_bg.jpg);background-repeat: repeat;padding:0;margin:0;height: 100%; }

Link to comment
Share on other sites
Guest FirefoxRocks

Guest FirefoxRocks

Posted
Posted

Actually, you can just remove the <?xml version="1.0"?> from your CSS.I HIGHLY RECOMMEND KEEPING THE html ELEMENT THERE AS YOU HAVE IT! Even if Kingy says to take it out. This is because if you later upgrade to XHTML serving with the application/xhtml+xml mime type, you need it there to show the background on the html page.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...