webForumDet fria alternativet

IE reagerar fel på rowpan

HTML & CSS

14 svar · 353 visningar · startad av danii

Medlem sedan sep. 2004215 inlägg
Frågan#1

Kolla på de bofogade filerna. I firefox ser den ut som den ska. Första delen i IE ser ut som det ska, men varför blir den konstig på andra delen?

<table id="tabell" border="1">
<tr>
<td class="tabellBild" rowspan="2"><img src="bilder/2.jpg" /></td><td class="text">Text...
</td>
</tr>
<tr><td><b>Författare</b>: Dan Brown</td></tr>
<tr><td><a href="#"><img src="bilder/glas.gif" /></a></td></tr>

<tr>
<td class="tabellBild" rowspan="2"><img src="bilder/2.jpg" /></td><td class="text">Text...
</td>
</tr>
<tr><td><b>Författare</b>: Dan Brown</td></tr>
<tr><td><a href="#"><img src="bilder/glas.gif" /></a></td></tr>
</table>
table#tabell tr{
position: relative;
}

table#tabell td{
position: relative;
padding: 10px;
}

table#tabell td.text{
position: relative;
width: 580px;
}

table#tabell td.text a{
font-family:  Verdana, Helvetica, Arial;

font-size: 11px;
color: black;
text-decoration: none;
}

table#tabell td.text a:hover{
text-decoration: underline;
}
ff.png
Medlem sedan sep. 2004215 inlägg
#2

Här är bilden som visar hur det ser ut i Internet Explorer.

ie.png
Medlem sedan apr. 200312 679 inlägg
#3

Du får gärna redigera bort den onödiga texten, så man slipper scrolla i sidled.

Varför har du satt

table#tabell tr{
position: relative;
}

Kan du inte ta bort det?

Medlem sedan sep. 2004215 inlägg
#4

Så enkelt?! Konstigt att den bara påverkade halva delen? men tack! :)

Medlem sedan apr. 200312 679 inlägg
#5

danii skrev:

Så enkelt?! Konstigt att den bara påverkade halva delen? men tack! :)

I och med att allt skulle placeras relativt så krånglade väl det till det. IE är inte så bra på att tolka CSS, det har vi ju kommit underfull med för länge sen. :) Men varför det bara påverkar en del överlåter jag åt någon annan. :bire

Medlem sedan sep. 2004215 inlägg
#6

En annan fråga. När jag sätter <tr bgcolor="#FBFBFB"> på alla tr så blir det ett tunnt vit mellanrum mellan alla tr och alla td. Hur fixar man detta (så att även den färgas)? Det är samma kod.

Jag ska inte ha färgen på hela tabellen. Utan på varannan vara så därför ska jag inte lägga in det på table.

Tackar

Medlem sedan juli 20013 378 inlägg
#7

Hmm..

Hjälper CSS-koden

#tabell {border-collapse:collapse}

?

Medlem sedan sep. 2004215 inlägg
#8

jarvklo skrev:

Hmm..

Hjälper CSS-koden

#tabell {border-collapse:collapse}

?

Absolut! Tackar :D

Medlem sedan sep. 2004215 inlägg
#9

Hehehe, det här är sista frågan :r

Jag skapade en td som har värdet:

background-color: #dddddd;
height: 1px;

I IE så är den 1px hög. Men i Firefox är den ca 20px och det verkar inte som om man kan göra den mindre, utan endast större. :q Finns det någon "omväg"?

Medlem sedan juli 20013 378 inlägg
#10

Hmm

*gissar nu*

Om du bara har tomrum i cellen, kanske det hjälper med någonting i stil (sorry - no pun intended ;) ) med

height:1px; overflow:hidden

i CSS:en för cellen (förutsatt att cellen är ensam på raden förståss) ?

Hjälper inte det, får du nog visa upp lite mer av koden så att man slipper gissa ;)

Medlem sedan sep. 2004215 inlägg
#11

Tyvärr fungerade det ingte. Här är lite kod ;)

<table id="tabell">
<tr bgcolor="#FBFBFB">
<td class="tabellBild" rowspan="3"
 bgcolor="#FBFBFB"><img src="bilder/2.jpg" /></td><td class="text"><a href="#">Text...</a>
</td>
</tr>
<tr bgcolor="#FBFBFB"><td bgcolor="#FBFBFB"><b>Författare</b>: Dan Brown</td></tr>
<tr bgcolor="#FBFBFB"><td bgcolor="#FBFBFB"><b>Utgiven</b>: 2004</td></tr>
<tr><td class="tabellUnder"></td></tr>
</table>

...

table#tabell{
font-family:  Verdana, Helvetica, Arial;
font-size: 11px;
color: black;
text-decoration: none;
border-collapse:collapse;
}
/* Färg, ljusgrått = #FBFBFB */
table#tabell td{
position: relative;
padding: 10px;
}

table#tabell td.text{
position: relative;
width: 580px;

}

table#tabell td.text a{
color: black;
text-decoration: none;
}

table#tabell td.text a:hover{
text-decoration: underline;
}

/*Tomma raden */
table#tabell td.tabellUnder{
background-color: #dddddd;
height: 1px;
overflow:hidden;
}

Jag trodde overflow hade med scrollern att göra?

Medlem sedan feb. 2003774 inlägg
#12

Du har padding:10px; på alla td:s, sätt padding:0; i tabellUnder så blir den td:n en pixel hög.

Sen förstår jag inte varför du har position:relative i tabellen...

Medlem sedan juli 20013 378 inlägg
#13

Lägg till en

padding:0;

för table#tabell td.tabellUnder så verkar det fixa sig i Mozilla ;)

Förresten - du saknar en "colspan="2" på td.tabellUnder - men det visste du väl redan ;)

Jag trodde overflow hade med scrollern att göra?

Yep - det har den...
overflow:hidden betyder att webläsaren aldrig skall visa någon scroll för det element som får den CSS-egenskapen... Det funkar bl.a. på div, td, m.fl förutom html och body...

I det här fallet sätter jag höjden till en pixel och säger åt "td:n" att den skall ignorera allt som hamnar nedanför den första pixeln istället för att (som den gör som default) sträcka ut sig nedåt så att allt får plats... :birp

Medlem sedan sep. 2004215 inlägg
#14

Det funkade perfekt :)

Medlem sedan juli 20013 378 inlägg
#15

hihi - det är lättare när man har tillgång till hela koden så att man kan testa sig fram istället för att gissa ;)

Hursomhelt - kul att det löste sig :birp

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