Problem med CSS i IE.

Hejsan!
Jag har sökt men hittade inte direkt det jag sökte.

Det är så att jag har gjort en sida helt i CSS och XHTML. Den validerar osv.
Jag har hört att Firefox ska vara hårdare "typat" när det gäller CSS. Så därför använde jag mig av FF för att kolla på sidan under arbetets gång. Men när jag kollade på sidan i IE såg den ut som en katastrof.

Så den ska se ut!

Så den ser ut i IE

Jag har fått den att se lite bättre ut men då måste jag skriva dit style="float:left;" i nästan varje <div>-tagg. Vilket jag inte vill. När jag skrev det i CSS-filen funka det inte ska tilläggas.

Tack på förhand //Dirre

Utan att se någon kod kan jag bara föreslå att du testar att trigga hasLayout här och var (med tex zoom:1)...

När jag tänker efter kan man säga att det är HTML och CSS :e

Men här har du koden:

<div class="sidebar_left"><img src="_gfx/border_leftside.png" alt="" width="8" height="600" /></div>
<div class="sidebar_right"><img src="_gfx/border_rightside.png" alt="" width="8" height="600" /></div>
<div style="float:left;"><img src="_gfx/top_overlogo.png" alt="" width="548" height="15" /></div>
<div style="float:left;"><img src="_gfx/gross_logo.png" alt="" width="548" height="106" /></div>
<div style="float:left;"><img src="_gfx/over_menu.png" alt="" width="548" height="12" /></div>
<div style="float:left;"><img src="_gfx/menu_leftside.png" alt="" /><img src="_gfx/menu_button1.png" alt="" /><img src="_gfx/menu_button2.png" alt="" /><img src="_gfx/menu_button3.png" alt="" /><img src="_gfx/menu_button4.png" alt="" /><img src="_gfx/menu_button5.png" alt="" /><img src="_gfx/menu_button6.png" alt="" /><img src="_gfx/menu_rightside.png" alt="" /></div>
<div style="float:left;"><img src="_gfx/under_menu.png" alt="" /></div>

<div class="news">
  <div><img src="_gfx/news_header.png" alt="" width="196" height="18" /></div>
  <div class="sidebar_left"><img src="_gfx/news_leftborder.png" alt="" width="18" height="90" /></div>
  <div class="sidebar_right"><img src="_gfx/news_rightborder.png" alt="" width="12" height="90" /></div>
  <div class="news1">test</div>
  <div class="news2">test</div>
  <div class="news3">test</div>
  <div class="news4">test</div>
  <div class="news5">test</div>
</div>
<div class="match">
  <div><img src="_gfx/match_header.png" alt="" width="189" height="18" /></div>
  <div class="sidebar_left"><img src="_gfx/match_leftborder.png" alt="" width="13" height="90" /></div>
  <div class="sidebar_right"><img src="_gfx/match_rightborder.png" alt="" width="10" height="90" /></div>
  <div class="match1">test</div>
  <div class="match2">test</div>
  <div class="match3">test</div>
  <div class="match4">test</div>
  <div class="match5">test</div>
</div>
<div class="players">
  <div><img src="_gfx/players_header.png" alt="" width="163" height="13" /></div>
  <div class="sidebar_left"><img src="_gfx/players_leftborder.png" alt="" /></div>
  <div class="sidebar_right"><img src="_gfx/players_rightborder.png" alt="" /></div>
  <div style="float:left;"><img src="_gfx/players_player1.png" alt="" /><img src="_gfx/players_divider1.png" alt="" /><img src="_gfx/players_player2.png" alt="" /><img src="_gfx/players_divider2.png" alt="" /><img src="_gfx/players_player3.png" alt="" /></div>
  <div style="float:left;"><img src="_gfx/players_middle_divider.png" alt="" /></div>
  <div style="float:left;"><img src="_gfx/players_nopic.png" alt="" /><img src="_gfx/players_divider1.png" alt="" /><img src="_gfx/players_nopic.png" alt="" /><img src="_gfx/players_divider2.png" alt="" /><img src="_gfx/players_nopic.png" alt="" /></div>
  <div style="float:left;"><img src="_gfx/players_bottom.png" alt="" /></div>
</div>
<div style="float:left;"><img src="_gfx/dot_border.png" alt="" /></div>
<div class="main">
<div><img src="_gfx/main_newsheader.png" alt="" /></div>
<div class="sidebar_left"><img src="_gfx/main_leftborder.png" alt="" /></div>
<div class="sidebar_right"><img src="_gfx/main_rightborder.png" alt="" /></div>
<div class="main_bg">Välkommen till #Gross Online!</div>
</div>

<div><img src="_gfx/main_bottom.png" alt="" /></div>

Som du ser där har jag fått använda style="float:left" vilket jag inte vill!.

Här är min otroligt snygga!? CSS-fil :e

body,td,th {
	background-color: #12335b;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-align: center;
	margin: 0px auto 0;
    width: 564px;
}
a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #FFFFFF;
}
a:active {
	color: #000000;
}

#body {
    width: 564px;
	text-align: center;
}

.sidebar_left {
	float: left;
}

.sidebar_right {
	float: right;
}

.middle_info {
	padding: 0px;
	text-align: left;
	vertical-align: top;
	margin: 0px;
}

.middle_tabel {
	padding: 0px;
	margin: 0px;
	text-align: left;
	vertical-align: top;
}

.main {
	width: 548px;
	margin-left: 8px;
	text-align: left;
	vertical-align: top;
}

.main_bg {
	background-image: url(../_gfx/main_bg.png);
	width: 529px;
	height: 252px;
	margin-left: 9px;
}

.main_header {
	vertical-align: top;
}

.news {
	width: 196px;
	margin-left: 0px;
	text-align: left;
	float: left;
}

.news1 {
	background-image: url(../_gfx/news_bg1.png);
	width: 166px;
	height: 18px;
	margin-left: 18px;
}
.news2 {
	background-image: url(../_gfx/news_bg2.png);
	width: 166px;
	height: 18px;
	margin-left: 18px;
}
.news3 {
	background-image: url(../_gfx/news_bg3.png);
	width: 166px;
	height: 18px;
	margin-left: 18px;
}
.news4 {
	background-image: url(../_gfx/news_bg4.png);
	width: 166px;
	height: 18px;
	margin-left: 18px;
}
.news5 {
	background-image: url(../_gfx/news_bg5.png);
	width: 166px;
	height: 18px;
	margin-left: 18px;
}

.match {
	width: 189px;
	margin-left: 0px;
	text-align: left;
	float: left;
}

.match1 {
	background-image: url(../_gfx/match_bg1.png);
	width: 166px;
	height: 18px;
	margin-left: 13px;
}
.match2 {
	background-image: url(../_gfx/match_bg2.png);
	width: 166px;
	height: 18px;
	margin-left: 13px;
}
.match3 {
	background-image: url(../_gfx/match_bg3.png);
	width: 166px;
	height: 18px;
	margin-left: 13px;
}
.match4 {
	background-image: url(../_gfx/match_bg4.png);
	width: 166px;
	height: 18px;
	margin-left: 13px;
}
.match5 {
	background-image: url(../_gfx/match_bg5.png);
	width: 166px;
	height: 18px;
	margin-left: 13px;
}

.players {
	width: 163px;
	padding: 0px;
	float: left;
}

satt o läste om zoom grejen men vart inte klokare direkt.. :(

spontan reaktion - din html ser förj*vlig ut. hua. vilken röra!

du har lagt in bilder istället för rubriker, du har ingen alternativ text
på vilket sätt tycker du att det underlättar för läsbarheten?
ett sätt är att använda bakgrundsbilder på ett effektivare sätt och texter istället för de rubriker som nu står på bilderna.

problemlösning - jag tror att din nyhetsbilds bredd helt enkelt krockar med den bredd som är angedd i css'en

Haha okej.. först å främst är det inte jag som gjort själva designen.
Jag kodar den bara åt en polare och han ville ha de så.. :/ Alternativ text tänkte jag skriva dit senare.. :P

Själv tycker jag att det är lätt att läsa koden.. sen vet jag självklart inte vad andra tycker... Jag får väl lägga in den i nån editor o formatera det eller något då... har skrivit den i notepad...

nyhetsbilden är i rätt bredd i css:en... 196*18px.

Ingen som har nån bra lösning??? Vill fixa det o slipa style="float:left;" dyngan... :/

okej, då omformulerar jag mig då
ta bort bilderna från koden och jag tror problemet är löst.
lägg bilderna i css'en istället
har du nollställt marginalerna? har du brutit av med en clear:both?

nej, jag tycker inte det är lätt att läsa koden. det ser ut som ett gäng divar med bilder i, så det får samma funktion som en tabell med en massa bilder i.
det går att lösa mycket snyggare.

ibland brukar jag roa mig med att rensa andras koder, men det där var bara för mycket ;)

Detta är väl inte särskilt konstruktivt, men helvete mina ögon bokstavligen BLÖDER.

:( :( :( :( :( :(

okej jag lägger dom som bakgrunder eller? eller är det jag som är trög nu.. :/
jag själv är ganska ny på div-ar osv så nollställt marginaler o clear:both för du gärna utveckla om du vill...

Du vill alltså att bilderna heldre ska ligga i css filen som bakgrund då eller?
Men det konstiga i det hela är att vi fick läa oss ungefär så här på högskolan...

hjälp mig nu.. :D

åh hjälp har du lärt dig det där på högskolan?

återkommer med lite mer konstruktivt, nu är det frukost och jag "skulle bara" knäppa på datorn ;)

En liten avlastning för caya...:-)
Din design ser inte svårare ut än att denna html-kod skulle räcka en bit på väg

<body>
<div id="wrapper">
<div id="banner"></div>
<div id="menu">en meny med knapparna som bakgrund</div>
<div id="news">
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</div>
<div id="match">
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</div>
<div id="players">
 <p><img src="_gfx/players_player1.png" alt="" /><img src="_gfx/players_player2.png" alt="" /><img src="_gfx/players_player3.png" alt="" />
  <img src="_gfx/players_nopic.png" alt="" /><img src="_gfx/players_nopic.png" alt="" /><img src="_gfx/players_nopic.png" alt="" />
</p>
</div>
<div id="main">
<h1>Välkommen till #Gross Online!</h1></div>
<div id="botten"></div></div>
</body>
</html>

Men det är lite svårt att se hur du splittrat sönder bilderna.
Ta fram ditt bildprogram och sätt ihop alla delar igen, så mycket det går.
Lägg "stora" bakgrunder i de divar som inte kommer ändra storlek.
Gör smala bakgrundsbilder som täcker hela bredden till de ställen där innehållet kommer förändras, så bakgrunden växer med innehållet. Som jag ser det nu så är det i main-divven du ska göra det i...
Hur du ska skriva css tror jag löser sig efter hand... nu är det himla svårt att se det eftersom det egentligen inte finns några mått att gå efter.
float:left är en himla bra "grej" så var inte så hatisk mot den... :)

Lycka till!
Tanten

tack då mycket!!!! :) ska testa mig fram o hoppas att det blir toppen :D
jo tyckte float:left verka smart.. men tydligen förstog jag inte fullt ut hur den skulle hanteras. men får göra som med allt annat läsa på..

men vad tycker ni ska jag använda float:left för att få dom där två sidosakerna???

evigt tacksam.. så ni slipper hata min kod :P hahaha

Hatar inte din kod... :)
Alla har vi varit nya...
Litet tips på css för dina players... i html-koden jag tipsgav dig
Jag drog en grov gissning på hur stora dina bilder är...
Gör nu inget i html-koden mer än att skriva i alt="".
Fixa allt annat med css

#players {
	background-image: url(bakgrundsbild.jpg);/*om du inte har en redan som syns igenom*/
	width: 163px;
	height: xxx;/*måste du sätta för att bakgrunden ska synas hela vägen ner förbi dina bilder*/
	padding: 0px;
	float: left;
}
#players img{ float: left;
padding: 4px; width: 45px; height: 30px }

tack tanten, jag skulle dock bygga den såhär

<body>
<div id="wrapper">
<div id="logo">
<h1>#Gross Online</h1>
<h2>Fyndig slogan med relevanta sökord</h2>
</div>
<div id="menu">en meny med knapparna som bakgrund</div>

<div id="news">
<h3>Nyheter</h3>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div id="match">
<h3>Matcher</h3>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div id="players">
<h3>Spelare</h3>
 <p><img src="_gfx/players_player1.png" alt="" />
<img src="_gfx/players_player2.png" alt="" />
<img src="_gfx/players_player3.png" alt="" />
<img src="_gfx/players_nopic.png" alt="" />
<img src="_gfx/players_nopic.png" alt="" />
<img src="_gfx/players_nopic.png" alt="" /></p>
</div>
<div id="main">
<h2>Välkommen till #Gross Online!</h2>
<p>Bla bla bla</p>
</div>
<div id="botten"></div>
</div>
</body>
</html>

av anledningarna

1. banner har en negativ klang, bara en sån sak ;)
2. glöm inte rubrikerna
3. listorna kan stilas listigare än p
   p är för stycken, ett uppradande av nyheter liknar mer en lista och bör företrädesvis kodas som en sådan.

cheers
c

hehehe tack så mycket.. nu fick jag mycket nytt att testa :D
lika glad blir jag för det.. vill som sagt lära mig :) så slipper jag "ful koda" ;)

men "wrapper" omsluter den allt det andra? kan använda den tex för att centrera? som jag hade en id-tag som hette body..

tack igen!! :D

Så rätt så caya :) headers glömde jag i farten...
Men blir lite nyfiken på vad man kan göra med lista som man inte kan med p? :OO
Men det kan vi ägna tid och plats åt i en annan tråd, så vi inte stjäl den här... :P

Dirre skrev:

men vad tycker ni ska jag använda float:left för att få dom där två sidosakerna???

Vad då för sidosaker?

stjäl hur mycket ni vill då lär jag mig oxå..
men iaf sidorsakerna :P är sidebars som jag hade till höger och vänster.. men det borde jag nog fixa själv.. :D

Ett tips igen... Att försöka sätta bilder som kräver milimeterprecision så får man ofta ett litet h-e i IE... som inte vill räkna på samma sätt som de andra. Då är det bättre att fösöka få in dem i den andra bakgrundsbilden i stället. Men skär av bilden precis utanför. Mycket lättare för dig sedan att kunna placera divar i förhållande till den kanten än till något som ligger utanför och inte syns...
Blev det begripligt?
Är lite stressad, men kommer tillbaka i kväll för att se hur det går...