Gå til innhold

IE bryter meny uten grunn.

endrebjo

Av endrebjo
i Programmering og webutvikling

Anbefalte innlegg

endrebjo

endrebjo

Skrevet
Skrevet

Jeg har en horisontal meny med fem bokser på 20% bredde hver. Dette tilsier en bredde på 5*20% = 100%, men IE finner likevel ut at den skal bryte menyen og sette siste boks på neste linje (akkurat som om menyen var 101%). Det skjer i både IE6 og IE7.

Margin og padding er satt til null, og bredden generelt (html og body) er satt til 100%.

 

Men hvis jeg setter bredden på boksene til f,eks 19.95% blir det selvfølgelig en liten sprekk på enden i både IE og andre skikkelige nettlesere.

 

Finnes det noen måte å fikse det på.

 

Live eksempel

HTML:

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>IE-ræv-rendring</title>
 <link type="text/css" rel="stylesheet" href="IE-raev.css">
</head>

<body>
 <h1>IE-ræv-rendring</h1>
 <ul id="menu">
 	<li><a href="index.htm">Forside</a></li>
 	<li><a href="side2.htm">Link</a></li>
 	<li><a href="side3.htm">Peker</a></li>
 	<li><a href="side4.htm">Internettpeker</a></li>
 	<li><a href="side5.htm">Verdensveven</a></li>
 </ul>
 
 <div id="main-content">
 	<h2>Velkommen!</h2>
 	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vitae sapien et felis bibendum pharetra. Curabitur volutpat nisl vitae lectus. Phasellus eget risus et leo tristique rutrum. Morbi varius, quam nec tristique lacinia, ante risus semper nisl, et venenatis orci pede vel felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nisi elit, laoreet id, malesuada id, eleifend et, risus. Quisque non lorem. Donec libero pede, tincidunt dictum, posuere id, facilisis sed, tortor. Pellentesque sagittis metus vestibulum odio. Etiam in risus sed nisi luctus laoreet.</p>
 	<p>Duis aliquet mi id tortor hendrerit pellentesque. Curabitur eget mi id elit feugiat blandit. Sed a justo vel tellus lacinia posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas scelerisque arcu ac felis. Cras ac risus ac elit varius condimentum. Sed tincidunt scelerisque tellus. Donec velit. Integer ornare. In neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas gravida odio quis urna. Nunc adipiscing nunc. Sed gravida ligula sed nibh. Nam volutpat elementum massa. Nulla sodales. Nullam luctus.</p>
 </div>
 
 <p id="footer">Kontakt: <a href="mailto:[email protected]">[email protected]</a></p>
</body>
</html>

CSS:

Klikk for å se/fjerne innholdet nedenfor
/* === UNIVERSAL === */
* {
margin: 0;
padding: 0;
}

/* === LAYOUT === */
html {
width: 100%;
font-family: helvetica, arial, sans;
}

body {
width: 100%;
}

div#main-content {
width: 800px;
margin: 0 auto;
padding: 40px 0 10px 0;
font-size: 0.9em;
}


/* ================
===== HEADER ======
=================*/
h1 {
text-align: center;
padding: 20px 0 20px 0;
border-bottom: solid 2px #333399;
color: #333399;
background-image: url('background.png');
}


/* ==================
====== MENU ========
=================== */
ul#menu {

font-weight: bold;
}

ul#menu li {
float: left;
clear: none;
width: 20%;            /*   <======= HER KUKER IE DET TIL */
text-align: center;
list-style-type: none;
border-bottom: solid 2px #333399;
}

ul#menu a {
color: #222299;
text-decoration: none;
display: block;
}

ul#menu a:hover {
color: #fff;
background-color: #333399;
}


/* ====================
======= INNHOLD =======
==================== */
p {
padding: 5px 0 10px 0;
}

p#footer {
text-align: center;
font-size: 0.8em;
border-top: solid 1px #333399;
padding: 10px 0 0 0;
margin: 10px 0 0 0;
color: #999;
}
p#footer a {
color: #999;
text-decoration: none;
}
p#footer a:hover {
color: #555;
text-decoration: underline;
}
.footnote {
font-size: 0.8em;
}
p.error {
color: #f00;
border: dashed 2px #f00;
padding: 7px;
margin-bottom: 2px;
}
p.success {
color: #00f;
border: dashed 2px #00f;
padding: 7px;
margin-bottom: 2px;
}

a {
color: #202099;
}
a:hover {
color: #f90; /*#00f;*/
}
a:active {
color: #0f0;
}


/* ==== OVERSKRIFT ==== */
h2 {
padding: 0 0 10px 0;
}

h3 {
padding: 5px 0 0 0;
}

Videoannonse

Videoannonse
Annonse
Nano-

Nano-

Skrevet
Skrevet (endret)

Prøvde litt i IE7; ved noen oppløsninger funker det, andre ikke. (bare å dra vinduet større og mindre så hopper det frem og tilbake.) Har en teori om at noen pikselverdier blir for vanskelige for IE å dele opp i 5 like store deler, så det rundes av til litt for mye.

Hva med å sette bredden til litt under 100, kanskje 99% (for hele menyen, med 5*20% inni der igjen), og heller ha et bilde i bakgrunnen som repeterer med x-aksen for å dekke over de få pikslene i enden.

 

Edit: Vanskelig forklart :p , altså et bilde med de to blå linjene, eller hva du skal ha som bakgrunn.

Endret av Nano-
endrebjo

endrebjo

Skrevet
  • Forfatter
Skrevet

Jeg kom plutselig på en liten hack. IE skjønner ikke property: value !important;

Så når jeg legger inn denne greien: 

width: 20% !important;
width: 19.96%;

så skjønner ikke IE at det er den første som skal gjelde. Vanligvis er det den nederste som skal gjelde, så IE velger den.

Mens skikkelige nettlesere skjønner at det er den første som skal gjelde, selv om det står en annen lenger nede (som vanligvis skulle vært den gyldige).

 

Så da får dritt-IE en bitteliten glipe på kanten, mens skikkelige nettlesere viser det skikkelig.

Funker denne hacken i IE7 også? Jeg har ikke den tilgjengelig for øyeblikket. Eksempelside ligger her.

 

Takk for tipset om forskjellige vindusbredder. Det hadde jeg ikke lagt merke til. :)

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...