CSS-problem i IE

guran · 2005-08-09, 10:01

Jag har ett problem med CSS i IE. Kör följande kod:

Kod:

<html>
<head>
</head>
<body>
<?php
echo '
 <div style="border: 1px solid gray; b_ackground-color: #F8F6F2;">
  <h1>Test</h1>
  <div>
 ';
 
for ($n = 0; $n < 30; $n++)
 echo '
   <div style="clear: both; border: 1px solid green; margin: 0 0 5px 0;">
    <div style="float: left; width: 150; border: 1px solid red;">
     Vänster
    </div>
    <div style="float: right; width: 150; border: 1px solid red;">
     Höger
    </div>
    <div style="clear: both;">
     Lite text
    </div>
   </div>
  ';
 
echo '
  </div>
 </div>
 ';
?>
</body>
</html>

Notera att jag har skrivit b_ackground-color i första div-taggen. Som koden är ovan är det inga problem, men det är när jag lägger på en bakgrundsfärg (ändra b_ackground till background) som problemet uppstår.

Helt plöstsligt vill IE inte skriva ut h1-taggen och en massa andra saker. Det är svårt att beskriva utan måste ses.

Det fungerar utmärkt på FF och Opera.

Det är otroligt frustrerande och jag vore mycket tacksam om någon kan säga vad som är fel och om det finns någon lösning.

festiz · 2005-08-09, 12:48

testa background: istället för background-color:

koala · 2005-08-09, 13:40

avsluta <div style=".."> ... <div> korrekt så löser det sig kanske. (</div>)

EDIT: Läste nog lite för snabbt. Men det ser ut som att du skapar en tabell, så varför inte bara använda <table>?

Charlie · 2005-08-09, 15:09

Visserligen ogillas tables för layouter. Men när de används till det som de faktiskt är till för, att redovisa tabulär data, är de helt okey

- även om det existerar drösvis med CSS-kod där ute som försöker efterhärma tables med divs.

guran · 2005-08-09, 16:04

Avsikten är inte att skapa en tabell. Det kodexempel jag lämnat ovan är inte såsom det kommer att bli utan bara en rekonstruktion av problemet.

En lösning på problemet är att sätta bakgrundsfärgen med hjälp av en bakgrundsbild. Det löser problemet på ett ställe men det finns kvar på ett annat ställe.

festiz · 2005-08-09, 16:15

Testat att lägga en doctype? Detta kan ta IE ur "quirks mode"... vilket brukar hjälpa mot en del besynnerliga fel.

Och om det är svårt att beskriva och måste ses kanske du kan ge oss en Uniform Resource Identifier?

koala · 2005-08-09, 18:48

Provade att göra korrekt kod men det hjälper inte:

Kod:

<!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" xml:lang="se" lang="se">
<head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<?php
echo '
 <div style="border: 1px solid gray; background-color: #F8F6F2;">
  <h1>Test</h1>
  <div>
 ';
 
for ($n = 0; $n < 30; $n++)
 echo '
   <div style="clear: both; border: 1px solid green; margin: 0 0 5px 0;">
    <div style="float: left; width: 150; border: 1px solid red;">
     Vänster
    </div>
    <div style="float: right; width: 150; border: 1px solid red;">
     Höger
    </div>
    <div style="clear: both;">
     Lite text
    </div>
   </div>
  ';
 
echo '
  </div>
 </div>
 ';
?>
</body>
</html>

Men scrollar man ner på sidan och sedan upp igen så är rubriken plötsligt där! Mycket märkligt, helt klart.

EDIT: Buggar såsom dessa har fått mig att överge div-layout på mitt senaste projekt... mycket beklagligt förvisso, men jag orkar inte spendera 20 timmar extra på att reda ut såna här märkligheter när en simpel tabell går att fixa på ett par minuter med samma önskade utseende, och inte särskilt mycket mer extra kod jämfört med alla nästlade div-taggar som annars behövs.

Lindahl · 2005-08-09, 19:06

IE har ju ett antal mer eller mindre kända buggar, bland annat brukar layouten på blocket.se bugga ur rätt rejält för mig ibland och den återställs inte förrän jag scrollar. Har även hittat buggar i tabelluppritning och en massa andra grejer. Det enda är nog att hoppas på att det funkar bättre i IE7.

matlin · 2005-08-19, 10:18

Kodar du lite smartare så behöver du inte en massa extra div:ar

guran · 2005-08-19, 10:41

Citat:

Originally posted by matlin@Aug 19 2005, 09:18
Kodar du lite smartare så behöver du inte en massa extra div:ar

Matlin! Naturligtvis vill vi ha exempel på smartare kodning.

Angående problemet jag startade denna tråd med, så blev den enda lösningen till slut att skicka olika kod för olika webbläsare. Orkade inte sitta och försöka lista ut.

För "normala" webbläsare skickar jag float:right på den 3:e div-taggen i for-satsen. För IE skickar jag utan float:right.

Av någon anledning funkar det på IE men inte på Opera och FF, dvs. att ta bort float:right. Med float:right på IE så försvinner h1-taggen i IE.

Med ingen float:right på Opera och FF så blir det helt fel, dvs. blir det som det ska bli enligt korrekt tolkad CSS.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

CSS-problem i IE