[Chidori]

Hej!
Sitter och nu försöker reda ut alla småbuggar som uppkommer i diverse olika browsers så att designen ser lika ut oavsett webläsare. Nu har jag stött på ett litet problem som finns i IE6.

Här är felet.


Eftersom det är relativt mycket kod så länkar jag till filerna som har koden i sig.
http://stylingwebben.se/test/index.html
http://stylingwebben.se/test/stylesheet/default.css

Hur fixar jag denna IE6 bugg? (använder IETester för att testa olika IE versioner)

[KarlRoos]

#topMenuBox3 table tr td
{float: left;}

Borde fungera!

[Jonas]

Eller ja, fixa inte det. Varför lägga ned tid på en klient som är 8år gammal? Uppmana alla till att uppdatera istället med anvisningar.

[Chidori]

Originally posted by Jonas@Jun 3 2009, 22:55
Eller ja, fixa inte det. Varför lägga ned tid på en klient som är 8år gammal? Uppmana alla till att uppdatera istället med anvisningar.

Visst det är bar att uppmana men det finns dom som sitter på gamla system och helt enkelt inte kan bokstavligt talat uppgradera av olika anledningar. Och i fall designen på min hemsida gör att dom får ett osäkert intryck av min butik så köper dom inte. Jag försöker göra så att IE 6.0 och framåt kan använda.

[Chidori]

Originally posted by KarlRoos@Jun 3 2009, 22:34

#topMenuBox3 table tr td
{float: left;}

Borde fungera!

Nepp inte det. Vad är vitsen med att floata en td?

#headerRightset fyller upp hela toppen med sitt utrymme, förutom "logodiven". Är det något element i #headerRightset som fyller ut den?

[kw_wasabi]

Det var väldigt svårt att se på din bild, svårt att skilja de båda skärmdumparna åt, om det nu var två stycken. En för IE6 och en för de andra.

Hur som helst så brukar jag lösa fel med felpositionering genom att sätta en negativ margin för IE6. Vet inte om det är rätt div jag använder i exemplet nedan men hoppas du förstår vad jag menar.

<!--[if IE 6]>
<style type="text/css">
#topMenu {margin-top: -8px;}
</style>
<![endif]-->

[Magnus_A]

Du har tre områden (<div>) innanför varandra som vad jag kan se inte tillför något, sen har du en tabell längst in och i tabellcellerna har du ytterligare en serie områden. Lite för mycket vad jag kan se.
IE&, om man nu ska ägna någon uppmärksamhet åt den, har en notorisk oförmåga att ärva bredd från det överordnade området, medan firefox och nyare IE klarar av att hålla innehållet på plats.
Mitt tips är att skippa alla dessa nästade områden och tabellen och bara rada upp flikarna antingen som områden med float eller som lista med display:inline.

[Chidori]

Alla nestade divar har med bakgrunden att göra, en div för mitten som repeterar sig i xled, och sen var sin div på sidorna för att göra en kant effekt.

Jag förstår inte vad ni menar men margin med negativt värde, hur ska man tänka näm man använder sig av det tricket?

Altså den har inte lagt sig dåligt utan problemet är att den sträcker ut sig maximalt, ungefär som witdth:100%, fast eftersom detta är en float med ingen width angett så ska den ha minsta möjliga värde. I alla utom IE6 har den minsta möjliga bredd.

[Hjalmarsson]

ojoj! vet knappt vart jag ska börja, skulle va jävligt lätt för mig att bara säga gör om och gör rätt men det skulle inte vara så givande.

I vilket fall så verkar du ha missat skillnaderna mellan id och klasser, id ska vara unikt i din kod är det inte många id'n som är unika

Det verkar också som att du försöker göra allt flexibelt åt alla håll och kanter, skulle i vilket fall gå att korta ner koden markant. Sen kan man ju överväga semantisk markup, css sprites och få lite mindre request's på servern.

Menyn här är också katastrof.. använt tabell bara för det vart bekvämt i någon wysiwyg editor? känns som det. gör om till en vanlig lista, hårdkoda inte in uhm 5? nestlade divvar för att få länken active (blå). skulle kunna lösas med descendent selector från bodyn, bah slänga in en klass på bodyn beroende på sida man är på.

Använd meningsfulla namn i markupen, ibland är det camelCase ibland alla lowercase ibland cameClase_1 ibland lower-case, bestäm dig för en och håll dig till det. Döp också elementen till vad de är och inte vart de är placerade eller hur det ser ut/är positionerade på skärmen.

Hel del mer jag skulle kunna tillägga men, tyvärr så måste jag säga att börja om från början och gör rätt! för det där kommer inte hålla i längden ändå, kan nästan garantera att någon/du kommer börja om från början i framtiden för att uppdatera det där. heh tror jag inte någon vill ge sig på.

Menar absolut inget illa med det jag skriver, du får gärna kontakta mig privat om det är något som känns luddigt eller om du bara vill ha hjälp eller helt enekelt bara vill tjöta lite html/css.

[Martin Boström]

Hej,

ser att du använt ”quirksmode”, kanske dags att bita huvudet av det gamla trollet och ta klivet in i strict mode? Nu erbjuder ju inte IE6 standard ens i strict mode, men man kommer i alla fall närmare ett konsekvent beteende mellan IE6 och ”vuxna” webbläsare som FF, Safari, Chrome etc. Så byt detta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

…mot detta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Det kommer säkert temporärt förstöra hela din design sedd i IE6, men du har igen det i längden. Jag lovar. För övrigt är ju IE6 predestinerad att så småningom helt dö ut, och då är det ju bättre att din design är byggt för framtiden istället.

/m