[Fikset] Bug i footer under visning i IE

Sono Juventino · 5. oktober 2007

Nok en gang et IE-relatert problem. Sliter med at listepunktene forsvinner under hverandre i IE, mens de egentlig skal ligge på linje.

Mulige problemer:

1. Har hørt at IE ofte legger på feilmargin når et element har float: left;, men dette er løst med display: inline;

2. Feilbredde på listepunker. Denne er litt tvilsom siden jeg har regnet ut nøyaktig sammenlagt bredde i en kalkulator og i tillegg har lagt på 30px for å sjekke om det har vært feilregning.

3. Nå bruker jeg en selvlaget "hack" for å få borderen i ul til å skifte ved :hover. Denne bruker blant annet litt negative margin, men dog bare horisontalt. Noen kjente feil der?

4. Andre forslag?

Trenger virkelig hjelp med dette problemet. Siden er et betalt oppdrag og skal helst være ferdig på søndag. Veit dette ikke er deres problem, men ville bare tipse om dette i tilfellet dere er litt usikre på om dere gidder å svare.

Takker for all hjelp.

Link: http://musikkprat.com/pcm_beta/footer.html#

Du kan også se koden nedenfor.

Endret 6. oktober 2007 av Sono

Magnus Holm · 5. oktober 2007

Vel, det hjelper alltid med et kodeeksempel

Sono Juventino · 5. oktober 2007

Altså. all kode som trengs ligger på siden. Css er lagt rett i kildekoden for enklere å kunne hjelpe.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="no">
<head>
 <title>Pcmnorge.com · Forside</title>
 <meta http-equiv="Author" content="www.2dropsdesign.com">
 <meta http-equiv="Description" content="-">
 <meta http-equiv="Keywords" content="-">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style type="text/css" media="all">

 * {margin: 0; padding: 0; list-style-type: none; border: none; } 

 html { font-size: 62.5%; font-family: helvetica, arial, sans-serif; }
 body { background: url('graphic/design/gradient_header.png') repeat-x top center white; color: black; line-height: 1.3; }
 html, body { min-height: 100%; width: 99.98%; height: 100%; }	
 html>body { height: auto; }
 	
 	div#footer { 
   width: 100%;  
   margin: 20px 0 0 0;  
   float: left;
   height: 35px;
   display: inline;
   background-color: #ededed;
   border-top: 3px solid #b0d1e2;
 	}
 	
 	ul#footer { 
   width: 550px;   
   margin: -3px auto;
   text-align: center;
 	}
 	
 	#footer li a { 
   color: #585656; 
   font-size: 1.4em; 
   text-align: center; 
   width: auto; 
   padding: 10px 10px 0 10px;
   height: 25px; 
   float: left; 
   display: inline;
   border-top: 3px solid #b0d1e2; 
 	}
 	
 	#footer li a:hover { 
   background-color: #D3E1E8;
   border: 0; 
   border-top: 3px solid #98BDD0;
 	}
 </style>

</head>
<body>
<div id="footer">
 <ul id="footer">
 	<li><a href="#">System: Wordpress</a></li>
 	<li><a href="#">Html & Css</a></li>
 	<li><a href="#">Kontakt</a></li>

 	<li><a href="#">2dropsdesign.com</a></li>
 	<li><a href="#">Til Toppen</a></li>
 </ul>
</div>
</body>
</html>

Dumme meg. Link hadde jeg glemt ja.

Endret 5. oktober 2007 av Sono

Bolson · 5. oktober 2007

Her er virkende kode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="no">
<head>
 <title>Pcmnorge.com · Forside</title>
 <meta http-equiv="Author" content="www.2dropsdesign.com">
 <meta http-equiv="Description" content="-">
 <meta http-equiv="Keywords" content="-">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style type="text/css" media="all">

 * {margin: 0; padding: 0;  border: none; list-style-type: none;} 

 html { font-size: 62.5%; font-family: helvetica, arial, sans-serif; }
 body { background: url('graphic/design/gradient_header.png') repeat-x top center white; color: black; line-height: 1.3; }
 html, body { min-height: 100%; width: 99.98%; height: 100%; }	
 html>body { height: auto; }
 	
 	div#footer {
   margin-top: 20px;
   height: 35px;
   background-color: #ededed;
   border-top: 3px solid #b0d1e2;
 	}
 	
 	#footer ul { 
   width: 550px;
   margin: -3px auto 0 auto;   

   text-align: center;
   display: block;
 	}
 	
 	#footer li {
   float: left;
 	}
 	
 	#footer ul li a { 
   color: #585656; 
   font-size: 1.4em; 
   padding: 10px 10px 0 10px;
   height: 25px;
   display: block; 
   border-top: 3px solid #b0d1e2; 
 	}
 	
 	#footer ul li a:hover { 
   background-color: #D3E1E8;
   border-top: 3px solid #98BDD0;
 	}
 </style>

</head>
<body>
<div id="footer">
 <ul>
 	<li><a href="#">System: Wordpress</a></li>
 	<li><a href="#">Html & Css</a></li>
 	<li><a href="#">Kontakt</a></li>
 	<li><a href="#">2dropsdesign.com</a></li>
 	<li><a href="#">Til Toppen</a></li>
 </ul>
</div>
</body>
</html>

Så litt om hvilke feil, dårlig koding du har gjort.

Du har brukt samme id to ganger, noe som er fy fy (men det var ikke feilen)
Du hadde ikke brukt float: left på li-elementet, det er dette elementet, og ikke a-elementet som gir den horisontale effekten av liste. FF/Opera gjør likt uansett men ikke IE. Og trolig er IE mest rett her. Har ikke sjekket W3C.
Å bruke inline gjelder kun blokkelementer med margin-left, for å unngå dobbelt-margin i IE6 i strict-mode. Du har ingen slike, så unødvendig. A-elementet er inline uansett, gjelder også li, p etc. Div er standard block.
Du trenger ikke å bruke %-width på blokkelementer som div. De er standard 100%. Det finnes avvik.

Du ser jeg har fikset litt til.

Sono Juventino · 6. oktober 2007

Takker veldig for hjelpen. Takk for tipsene også.

Edit: ble nødt til å legge til "float: left; og width: 100%;" i div#footer. Dette for å få footeren til å legge seg under de andre divene som brukes.

Endret 6. oktober 2007 av Sono

Bolson · 6. oktober 2007

Takker veldig for hjelpen. Takk for tipsene også.

Edit: ble nødt til å legge til "float: left; og width: 100%;" i div#footer. Dette for å få footeren til å legge seg under de andre divene som brukes.

9648515[/snapback]

Du kan heller bruke clear: both for å sikre at en ny div kommer under de andre. clear attributten (har valgene both, left og right), nullstiller effekten av tidligere float (nå begynner vi på nytt). Meget hendig for å unngå at elementer som er brukt float på lager for mye kluss.

Sono Juventino · 6. oktober 2007

Jeg har faktisk brukt clear: both; på div#content på min hovedside, men det gir ikke utslag av en eller annen grunn. Så lenge det funker, så ser jeg ingen grunn til å lete etter grunnen.

Takk igjen for tipset btw.

Logg inn

[Fikset] Bug i footer under visning i IE

Anbefalte innlegg

Sono Juventino

Lenke til kommentar

Videoannonse

Magnus Holm

Lenke til kommentar

Sono Juventino

Lenke til kommentar

Bolson

Lenke til kommentar

Sono Juventino

Lenke til kommentar

Bolson

Lenke til kommentar

Sono Juventino

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer