webForumDet fria alternativet

DIV-assistans önskas + funkar i IE men inte i Firebird :-(

HTML & CSS

2 svar · 212 visningar · startad av sabbacus

Medlem sedan juli 2002630 inlägg
Frågan#1

Tjipp.
Sitter här med en liten design som jag inte får att fungera, och paradoxalt nog så är det Firebird som strular och IE som fungerar, tvärtemot gällande praxis vad gäller DIV:ar :)

Vi börjar med två skärmdumpar, Ie och Firebird, där IE är den design jag vill ha medan Firebidr är den design jag _inte_ vill ha.

IE - önskad design
Firebird - "oönskad" design

Som ni ser så lägger sig "mainBody" till höger om det gråa menyfältet i IE men nedanför i Firebird. Det är inte riktigt så jag vill ha det :) Förslag?

Länkar:
Själva sidan det hela handlar om:
http://home.vxu.se/mkand99/wtf/testdiv.html

Stilmallen:
http://home.vxu.se/mkand99/wtf/style.css

Sedan har jag två småproblem också, vilka också kan ses på IE-skärmdumpen:

  1. Jag vill att den gråa ytan ska vara lika stor som "mainBody". Har inte klurat ut hur man gör detta.

  2. Jag skulle vilja att "MainBody" är lika bred som "header" och "copyright", men i nuläget anpassar den sin bredd efter innehållet :-(.

  3. kan i och för sig lösas genom att lägga en div runt "menu" och "mainBody" och fylla denna med 1):s bakgrundsfärg, men då måste problem 2) lösas först, annars får man en oönskad färgklick på höger sida.

Något mer... Jo, jag har kollat både stilmall och HTML-kod (xhtml 1.0 strict) och de är felfria.

Hoppas att ni kan hjälpa mig :D

Medlem sedan feb. 2001197 inlägg
#2

Det är mer elle minder omöjligt att få den där designen som du vill ha den och få den att så crozzbrowser vänlig som möjligt.

Jag har själv försökt, jag höll nog på en månad innan jag gav upp.

Sätt aningen en fast bredd på sidan, då de blir mycket mycket lättare att leka med divar på de sättet du gör, eller lek med flytande ramar och strunta i den understa diven, copyright.
Något av de skulle jag göra, beroende på hur sidan ska fundera.

Medlem sedan juli 20013 378 inlägg
#3

Pezzen skrev:

Det är mer elle minder omöjligt att få den där designen som du vill ha den och få den att så crozzbrowser vänlig som möjligt.

Hmm....

Kolla in http://realworldstyle.com/ - där finns en smidig lösning eller två på just detta problem som är hyfsat crossbrowser ;)

Hursomhelst - det minsta du behöver göra för att få koden i exemplet att funka i de webbläsare du nämner är att skriva om CSS:en för #mainBody såhär:

#mainBody {
	border: 1px solid black;
[i]/*  float: left;  */[/i]
	line-height: 1.3;
	width: auto;
[b]  margin-right:0;
  margin-left:220px;[/b]
}

Sedan kan du passa på att läsa http://realworldstyle.com/2col.html och eventuellt "tweaka" din CSS på något ställe till för att få den att funka ända tillbaka i NN4 (om du har tid/lust/ork ;) )

Alltså:

  • "floata" bara menyn.
  • Lägg en vänstermarginal på mainBody som motsvarar bredden på menyn med lite råge.
  • Lägg på en högermarginal med ett fixt värde på #mainBody så att "width:auto" blir det värde som "expanderas" till att fylla ut bredden vid beräkningen av mainBody:s box.

Lycka till!

257 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
124 ms — hämta tråd, inlägg och bilagor (db)
130 ms — ändringar (db)