WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   CSS-problem i IE (https://www.wn.se/forum/showthread.php?t=9253)

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.

guran 2005-09-12 17:59

Nu hittade jag en lösning på detta problem. Det är en bugg som är känd under namnet "Peekaboo".

Köpte en bok "101 Essential Tips, Tricks & Hacks" av Rachel Andrew för några månder sedan. Började läsa den men det blev bara ett 50-tal sidor. I förra veckan bläddrade jag i den då jag letade efter en annan sak och hittade då en beskrivning av mitt problem (och tusentals andra webbutvecklares problem förmodligen).

I alla fall så går det att lösa det hela med följande lilla CCS-regel:

* html h1
{
height: 1%;
}

koala 2005-09-12 18:02

Citat:

Originally posted by guran@Sep 12 2005, 17:59
Nu hittade jag en lösning på detta problem. Det är bugg som är känd under namnet Peekaboo.
Köpte en bok 101 Essential Tips, Tricks Hacks av Rachel Andrew för några månder sedan. Började läsa den men det blev bara ett 50-tal sidor. I förra veckan bläddrade jag i den då jag letade efter en annan sak och hittade då en beskrivning av mitt problem (och tusentals andra webbutvecklares problem förmodligen).
I alla fall så går det att lösa det hela med följande lilla CCS-regel:
* html h1
{
height: 1%;
}

Ojoj, det var nog nåt av det mest komiska jag läst idag :) Men det är bra att det går att lösa i alla fall. Synd att det inte kan finnas en fungerande standard istället, så man slipper hålla på med magi, alkemi och liknande när man skapar html. ;)


Alla tider är GMT +2. Klockan är nu 12:48.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson