bakgrunds bilden vägrar visa sig i Firefox

2 svar · 447 visningar · startad av LULZOR! 23 juli 2008

LULZOR!Medlem sedan juli 20082 inlägg

Frågan23 juli 2008 20:24#1

Hej, jag har ett problem som jag gärna skulle vilja ha hjälp med. Det är så att jag håller på kodar en sida där jag använder s.k.a "Falska spalter(Faux-columns)".

Det är så att bakgrund bilderna (i #contentarea och #footer) vägrar att visa sig i FF2.0. Fast i IE 7 fungerar det perfekt

Då jag inte vet vad jag ska skriva mer postar jag koderna:

<!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>titel</title>
<style type="text/css">
/* CSS Document */

body {margin:0px; padding:0px; font: 1.0em Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; text-align:center; background-color:#000000;
}

* {margin:opx; padding:opx;
}

div#mainwrap {width: 774px; margin-left:auto; margin-right:auto; text-align:left; background-color:#000000;
}

div#header {width: 774px; height: 236px; background-color: #000000; text-align: center; padding-top: 0px;
}

div#column2 p {font-size:.8em; margin:0em 30px;
}

#contentarea {width: 774px; background-color:#000000; background:url (http://i36.tinypic.com/316qav9.gif); background-position:center; background-repeat:repeat-y;
}

div#column1 {width: 44px; background-color: transparent; float:left;
}

div#column2 {width: 774px; background-color: transparent; float:left;
}

div#footer {width: 774px; background-color: #000000; background-image:url(http://i36.tinypic.com/300a0kj.png); background-repeat:no-repeat; text-align:center; padding-top: 6px;
}
</style>

<body>
 <div id="mainwrap">
  <div id="header"><img src="http://i37.tinypic.com/20z9s0z.png" name="head" border="0" usemap="#headMap" id="head" />
<map name="headMap" id="headMap">
  <area shape="poly" coords="580,180,595,181,603,176,615,180,619,192,609,196,599,196,589,196,579,196,576,189" href="index.php" alt="Main" />
<area shape="poly" coords="626,180,637,181,642,173,648,180,658,182,663,184,665,192,659,196,644,196,633,196,623,190" href="rules.php" alt="Rules" />
<area shape="poly" coords="671,176,679,177,690,176,699,180,702,190,692,197,683,196,673,196,670,186" href="info.php" alt="Info" />
<area shape="poly" coords="710,179,723,177,735,177,748,178,754,187,753,195,747,200,733,200,716,200,707,196,707,186" href="apply.php" alt="Apply" />
</map></div>
   <div id="contentarea" class="clearfix">
    <div id="column1"></div>
     <div id="column2">
	 <p>texttexttexttext</p>
	 </div>
   </div>
      <div id="footer">
	  </div>
 </div>
	 

</body>
</html>

Tack på förhand^^

LULZOR!Medlem sedan juli 20082 inlägg

23 juli 2008 20:49#2

Tänkte att det kunde vara bra med bilder så att ni får se hur det ser ut:
IE7:
http://i37.tinypic.com/104ou84.jpg

FF2:
http://i37.tinypic.com/2s6sbxl.jpg

symbolismMedlem sedan mars 2007522 inlägg

10 aug. 2008 15:25#3

satan va mycket skräp det var i den koden.

Lär dig städa upp din css och din html;)

du hade alldeles onödigt många boxar och attribut hit och dit som fackade upp allting.

jag fick ta bort en del boxar och sånt men den kan fortfarande vara buggig. jag har inte kollar om den fungar i IE men i FF fungerar den fint=)

<!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>titel</title>
<style type="text/css">
/* CSS Document */
<!--

body {margin:0px; padding:0px; font: 1.0em Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; text-align:center; background-color:#000000;
}

* {margin:opx; padding:opx;
}

#mainwrap {width: 774px; margin-left:auto; margin-right:auto; text-align:left; background-color:#000000;
}

#header {width: 774px; height: 236px; background-color: #000000; text-align: center; padding: 0px; margin: 0px;
}

#content {margin-top: -12px; margin-bottom: -16px;width: 734px;  background-repeat:repeat-y; background-image: url(http://i36.tinypic.com/316qav9.gif);  padding-left: 20px; padding-right: 20px;
}

#bottom {width: 774px; background-color: #000000; background-image:url(http://i36.tinypic.com/300a0kj.png); background-repeat:no-repeat; height: 31px;
}

-->
</style>

<body>
 <div id="mainwrap">
<!--header-->

  <div id="header"><img src="http://i37.tinypic.com/20z9s0z.png" name="head" border="0" usemap="#headMap" id="head" />
<map name="headMap" id="headMap">
  <area shape="poly" coords="580,180,595,181,603,176,615,180,619,192,609,196,599,196,589,  196,579,196,576,189" href="index.php" alt="Main" />
<area shape="poly" coords="626,180,637,181,642,173,648,180,658,182,663,184,665,192,659,  196,644,196,633,196,623,190" href="rules.php" alt="Rules" />
<area shape="poly" coords="671,176,679,177,690,176,699,180,702,190,692,197,683,196,673,  196,670,186" href="info.php" alt="Info" />
<area shape="poly" coords="710,179,723,177,735,177,748,178,754,187,753,195,747,200,733,  200,716,200,707,196,707,186" href="apply.php" alt="Apply" />
</map></div>

<!-- content-->
   <div id="top"> </div>
    <div id="content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sagittis. Nullam faucibus, augue vitae aliquam ornare, arcu neque convallis nulla, vel sagittis mauris est et augue. Donec interdum. Praesent imperdiet, purus vitae gravida hendrerit, lacus tellus faucibus erat, vitae fermentum dolor nibh eu odio. Donec consequat, neque sed condimentum semper, tortor leo egestas nisi, ut accumsan sem dolor sed sem. Fusce viverra tortor id libero. Nullam adipiscing felis et pede. In a pede pellentesque velit tincidunt condimentum. Aenean ultrices ipsum ac dui. Nam euismod, libero non luctus egestas, risus nulla posuere nunc, sit amet scelerisque erat massa eu enim.</p>

<p>Aliquam ligula lorem, pretium a, porta ac, consectetuer semper, augue. Vivamus euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer adipiscing vehicula dui. Nullam ultricies ultricies lorem. Morbi nec metus eu nibh suscipit placerat. Nullam risus leo, commodo imperdiet, adipiscing ac, sodales eu, enim. Proin dignissim. Ut condimentum commodo ante. Curabitur dignissim aliquam nulla.</p>

<p>Donec sagittis volutpat tortor. Integer sem libero, luctus et, euismod non, tempus a, arcu. Nullam mollis sollicitudin est. Suspendisse massa. Curabitur nunc odio, laoreet eget, scelerisque dictum, cursus vitae, erat. Curabitur sed velit. Vivamus cursus, ligula nec ultricies vestibulum, tortor magna laoreet enim, sit amet volutpat sapien erat sit amet nulla. Suspendisse potenti. Curabitur luctus, tortor vel ultrices lobortis, pede tortor molestie risus, id aliquam dui mauris eleifend nulla. In suscipit ligula non tortor. In eu enim. Aenean consectetuer. Proin cursus interdum lorem. </p></div>
     <div id="bottom"></div>
	 
	

      <div id="footer">
	  </div>
 </div>
	 

</body>
</html>

här är en länk så att du kan se hur det ser ut:

http://www.gitarrkurser.net/test.html