Gå til innhold

Trolig en bug i CSS eller HTML-en

Frank James Lampard jr.

Anbefalte innlegg

Frank James Lampard jr.

Frank James Lampard jr.

Skrevet
Skrevet (endret)

Hei

Jeg holder på å mekke en side for et IT prosjekt på soklen, og siden ser helt grei ut etter min mening, men har et problem. Både i FF og Chrome vises siden perfekt, akkurat slik jeg vil ha den! MEN! Skolen derimot bruker bare IE 7/8 og siden vises ikke slik jeg vil den skal vises!

 

Under har dere både CSS og HTML, håper noen skjønner feilen, legger også ved et bilde av hvordan den ser ut i Chrome VS. IE:

 

IE bildet er foresten litt zoomet ut for at dere skal få med dere at menyer blir satt langs top, og sidebar helt til høyre. Tror det er noe galt med CSS-en.

 

Chrome:

post-162799-1257457308_thumb.jpg

 

IE:

post-162799-1257457330_thumb.jpg

 

Koden har dere her:

/*
CSS by Anders Gill
*/

/* Menu */

#menu {
width: 100%;
padding: 0;
height: 50px;
background: url(images/img01.gif)  no-repeat left top;
margin-top: auto;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
height: 34px;
margin: 0;
padding: 16px 30px 0 30px;
background: url(images/img14.gif) no-repeat right 7px;
text-decoration: none;
text-transform: capitalize;
font-size: 13px;
font-weight: bold;
color: #04283B;
}

#menu a:hover {
color: #04283B;
}

#menu .current_page_item a {
color: #04283B;
}

 

&

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Anders Gill
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Anders Gill</title>
<!-- TemplateEndEditable -->
<meta name="keywords" content="" />
<meta name="random" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<!-- start header -->
<table width="1000" border="0" align="left" cellpadding="0" cellspacing="0">
 <tr>
<td><div id="logo"><img src="images/logo.png" alt="logo" width="1000" height="280" />
 </tr>
</table>
<table width="1000" border="0" align="left" cellpadding="0" cellspacing="0">
 <tr>
<td width="1000" valign="left"><div id="menu">
	<ul>
		<li><a href="#" class="current_page_item">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Photos</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
</td>
 </tr>
</table>

 <p>
 <!-- end header -->
</p>
<table width="1000" border="0" cellpadding="0" cellspacing="0">
 <tr>
<td width="176" height="600" valign="top"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
 <tr>
<td><img src="images/images/skateboard_01.gif" alt="top" width="176" height="55" /></td>
 </tr>
 <tr>
<td><img src="images/images/skateboard_02.jpg" alt="longboard" width="176" height="41" /></td>
 </tr>
 <tr>
<td><img src="images/images/skateboard_03.gif" alt="bg" width="176" height="28" /></td>
 </tr>
 <tr>
<td><img src="images/images/skateboard_04.jpg" alt="skateboard" width="176" height="41" /></td>
 </tr>
 <tr>
<td><img src="images/images/snowboard_05.gif" alt="bg2" width="176" height="24" /></td>
 </tr>
 <tr>
<td><img src="images/images/snowboard_06.jpg" alt="snowboard" width="176" height="41" /></td>
 </tr>
 <tr>
<td><img src="images/images/Windsurfing_07.gif" alt="bg3" width="176" height="24" /></td>
 </tr>
 <tr>
<td><img src="images/images/Windsurfing_08.jpg" alt="windsurfing" width="176" height="41" /></td>
 </tr>
 <tr>
<td><img src="images/images/Windsurfing_09.gif" alt="bg4" width="176" height="305" /></td>
 </tr>
</table>
</td>
<td width="808"> </td>
 </tr>
</table>
<table width="1000" border="0">
 <tr>
<td><img src="images/footer.jpg" alt="footer" width="1000" height="40" align="top" /></td>
 </tr>
</table>

</body>
</html>

 

Håper noen finner en bug som gjør at den vises slik i IE men ikke i Chrome f.eks...

Og foresten, hvis jeg zoomer ut i Chrome også, så blir den satt på samme måte som i IE uten zoom.

 

Håper på svar.

 

EDIT: ZIP FIL; majestic.rar

Endret av .GiLL
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
dTd

dTd

Skrevet
Skrevet (endret)

har hatt samme problem par ganger, men husker ikke hva jeg gjorde for å fikse det :p

mener det var noe med det du la inn fra photoshop, for du har brukt slice og save for web right?

Tror det var noe med borders osv i tabellen din... muligens du må legge border = "0" i alle td dine...

var ikke store hjelpen men er 99% sikker på at feilen ligger i tabellen din fra photoshop : P

 

edit:

muligens så kan det være at du også har oversett par områder når du slica, så du får par "tomme" ommråder...

Endret av dTd
Lenke til kommentar
Frank James Lampard jr.

Frank James Lampard jr.

Skrevet
  • Forfatter
Skrevet (endret)

haha, takk for en kjept svar dTd, og ja, jeg brukte bare slice på sidebar, altså om de forskjellige aktivitetene, deretter save for web and device.

 

En ting er at vi MÅÅÅ bruke tabeller gjennomgående gjennom hele web-en og CSS, så da blir det litt feil på en måte... Tabell synes jeg er litt utdatert, men jeg er nødt til å bruke det. Alle Cellpad, Cellspace og border er satt til 0, og det er derfor den vises så bra i Chrome og FF, men ikke i IE.

 

Så nå vet jeg ikke hva jeg skal gjøre, har jobba mye med den her, og skal ende med at jeg må lage en ny en? nei, tror ikke det, da skriver jeg heller i dokumentasjonen at IE er udugelig til denne siden... Så får de heller trekke meg på det.

 

Uansett, håper noen vet hva som er galt, og hvis de virkelig vil, kan jeg sende alle bilder og hele root mappa til dem, bare gi beskjed.

 

EDIT: Det eneste som er skrevet i CSS er den menyen der hvor det står contactx5

Endret av .GiLL
Lenke til kommentar
dTd

dTd

Skrevet
Skrevet (endret)

hehe ;P

jaja, du kan jo alltids legge ut en zip av filene og om jeg har tid i morgen kan jeg se på det, så sant du eller noen andre finner ut av det før da : P jeg er ingen guru på dette men husker jeg har hatt samme problemet før

Endret av dTd
Lenke til kommentar
cruzader

cruzader

Skrevet
Skrevet
skal ende med at jeg må lage en ny en? nei, tror ikke det, da skriver jeg heller i dokumentasjonen at IE er udugelig til denne siden... Så får de heller trekke meg på det.

ville være overrasket fikk du over 2 da tbh, poenget er vel vise at du mestrer lage en nettside som blir solid trekk om du skriver at du ikke mestrer lage noe for IE.

Lenke til kommentar
Frank James Lampard jr.

Frank James Lampard jr.

Skrevet
  • Forfatter
Skrevet (endret)

• Eksternt CSS-Stilark skal benyttes, men dere bør gjøre egen tilpasninger av stilarket (endre html-kodene)

• Sidene skal baseres på egenutviklet mal.

• Bruk tabeller gjennomgående i hele weben.

 

Det sier det meste... <___<

 

Edit; stikker nå, kommer tilbake og mekker mer på den imorgen, skal se om jeg kan mekke en ny toolbar/menubar i javascript, husk at kreativitet belønnes :)

Endret av .GiLL
Lenke til kommentar
cruzader

cruzader

Skrevet
Skrevet (endret)

tror feilen ligger i at det er mer tabeller enn resten av internett totalt i ei mørje :D

 

lest litt mer gjennom koden og sett på tabellene, så har du bare en rekke små tabeller som er alignet mot forige.

koden med noe unødvendig stæsj fjernet samt litt mer etter min smak :p

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Anders Gill
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anders Gill</title>
<meta name="keywords" content="" />
<meta name="random" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>


<!-- start header -->
<table width="1000" border="0" align="left" cellpadding="0" cellspacing="0">
 <tr>
<td>
  <div id="logo">
	<img src="images/logo.png" alt="logo" width="1000" height="280" />
</td>
 </tr>
</table>
<!-- slutt header -->


<!-- start toppmeny -->
<table width="1000" border="0" align="left" cellpadding="0" cellspacing="0">
 <tr>
<td width="1000" valign="left">
  <div id="menu">
	<ul>
	  <li><a href="#" class="current_page_item">Home</a></li>
	  <li><a href="#">Blog</a></li>
	  <li><a href="#">Photos</a></li>
	  <li><a href="#">Links</a></li>
	  <li><a href="#">Contact</a></li>
	  <li><a href="#">Contact</a></li>
	  <li><a href="#">Contact</a></li>
	  <li><a href="#">Contact</a></li>
	  <li><a href="#">Contact</a></li>
	</ul>
  </div>
</td>
 </tr>
</table>
<!-- slutt toppmeny -->

<table width="1000" border="0" cellpadding="0" cellspacing="0">
 <tr>
<td width="176" height="600" valign="top">

<!-- start sidemeny -->
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
 <tr>
<td>
  <img src="images/images/skateboard_01.gif" alt="top" width="176" height="55">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/skateboard_02.jpg" alt="longboard" width="176" height="41">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/skateboard_03.gif" alt="bg" width="176" height="28">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/skateboard_04.jpg" alt="skateboard" width="176" height="41">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/snowboard_05.gif" alt="bg2" width="176" height="24">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/snowboard_06.jpg" alt="snowboard" width="176" height="41">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/Windsurfing_07.gif" alt="bg3" width="176" height="24">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/Windsurfing_08.jpg" alt="windsurfing" width="176" height="41">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/Windsurfing_09.gif" alt="bg4" width="176" height="305">
</td>
 </tr>
</table>
<!-- slutt sidemeny -->


</td>
<td width="808"> </td>
 </tr>
</table>

<!-- start footer -->
<table width="1000" border="0">
 <tr>
<td>
  <img src="images/footer.jpg" alt="footer" width="1000" height="40" align="top">
</td>
 </tr>
</table>
<!-- slutt footer -->


</body>
</html>

Endret av cruzader
Lenke til kommentar
cruzader

cruzader

Skrevet
Skrevet

skrevet om fra ørten tabeller til hele siden i en gjennomgående tabell.

la med bilder av hvordan siden ser ut for meg i både firefox og IE nå.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Anders Gill
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Anders Gill</title>
<meta name="keywords" content="">
<meta name="random" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>

<table width="1000" border="0" cellpadding="0" cellspacing="0" valign="left">
 <tr>
<td colspan="3" width="1000" height="280" background="images/logo.png">
</td>
 </tr>
 <tr>
<td width="1000" height="5" colspan="3">
</td>
 </tr>
 <tr>
<td width="1000" height="50" colspan="3">
  <div id="menu">
	<ul>
	  <li><a href="#" class="current_page_item">Home</a></li>
	  <li><a href="#">Blog</a></li>
	  <li><a href="#">Photos</a></li>
	  <li><a href="#">Links</a></li>
	  <li><a href="#">Contact</a></li>
	  <li><a href="#">Contact</a></li>
	  <li><a href="#">Contact</a></li>
	  <li><a href="#">Contact</a></li>
	  <li><a href="#">Contact</a></li>
	</ul>
  </div>
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/skateboard_01.gif" alt="top" width="176" height="55">
</td>
<td rowspan="9" valign="top" width="5">
</td>
<td rowspan="9" valign="top" width="819">
en ny forbedret verden...
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/skateboard_02.jpg" alt="longboard" width="176" height="41" valign="top">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/skateboard_03.gif" alt="bg" width="176" height="28" valign="top">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/skateboard_04.jpg" alt="skateboard" width="176" height="41" valign="top">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/snowboard_05.gif" alt="bg2" width="176" height="24" valign="top">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/snowboard_06.jpg" alt="snowboard" width="176" height="41" valign="top">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/Windsurfing_07.gif" alt="bg3" width="176" height="24" valign="top">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/Windsurfing_08.jpg" alt="windsurfing" width="176" height="41" valign="top">
</td>
 </tr>
 <tr>
<td>
  <img src="images/images/Windsurfing_09.gif" alt="bg4" width="176" height="305" valign="top">
</td>
 </tr>
 <tr>
<td colspan="3" width="1000" height="40" background="images/footer.jpg">
</td>
 </tr>
</table>
</body>
</html>

post-175846-1257463757_thumb.png

post-175846-1257463765_thumb.png

Lenke til kommentar
iqlizer

iqlizer

Skrevet
Skrevet
Tusen tusen takk Cruzader! Det fikset siden i både FF og IE! :D

 

Har lest gjennom koden og ser at det var en del buggs, men slik er det bare.

 

Takker og bukker, og nå kan jeg endelig sette siden som løst :)

 

Har du sjekket siden i andre nettlesere enn FF og IE?

Lenke til kommentar
  • 1 måned senere...

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...