HTML & CSSur HTML, XHTML & CSS
10 svar · 525 visningar · startad av Web-Tor
Testa den här koden IE 6 (kanske ser likadant ut i tidigare versioner också).
<style>
table {height:100%;width:100%;border:1px solid #F00;}
.high {height:100%;}
.tab {border:1 solid #FFF;background-color:#CCC;white-space:nowrap;}
.last {border:1 solid #FFF;width:100%;white-space:nowrap;}
</style>
<table cellspacing="0">
<tr>
<td class="tab">Claim job information</td>
<td class="tab">Assessment</td>
<td class="tab">Other costs</td>
<td class="tab">Remarks</td>
<td class="last">&nbsp;</td>
</tr>
<tr class="high">
<td colspan="5">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</td>
</tr>
</table>
Ställ in fönsterstorleken på 600 pixlars bredd genom att skriva följande i adressraden (utan mellanslag i "java script"):
javascript:resizeTo(600,400)
Det blir då en helt onödig horisontell scroll.
Tar man bort tre stycken w så försvinner scrollen. Varför?
har väl inget riktigt svar på din fråga men tar du bort width:100% i classen last så försvinner scrollen.
och vad betyder detta då?
tja, att man inte ska ange en kolumn till 100% när den aldrig får vara det kanske!
borde det inte finnas ett bättre sätt att justera kolumnbredder på än med ditt exempel ovan (som även jag själv brukar använda), eller?
width:100%;border:1px
Säger enligt box modellen att bredden av containing block är 100% plus 2px. Därav scrollen.
zcorpan skrev:
Säger enligt box modellen att bredden av containing block är 100% plus 2px. Därav scrollen.
Nope. Det blir inte någon skillnad om jag tar bort alla borders.
Felet uppkommer när texten (här visad som en massa "w") blir bredare än den dom övre flikarna (se bild).
När vi nu har uteslutit att det är box modellen som strular - vad kan det vara då?
Det är precis som att det finna en osynlig ram runt flikarna som sträcker sig över hela sidan. :q
Det faktum att .last är 100% bred kan orsaka problem...kanske... :l
Hur som helst är det onödigt att grubbla över det här och istället använda CSS för layout.
<ul id="tabs">
<li>Claim job information</li>
<li>Assessment</li>
<li>Other costs</li>
<li>Remarks</li>
</ul>
<div id="content">
<p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
</div>
Positionera det där med CSS så ska du se att du slipper scrollen ;)
Tyvärr så sitter jag med kod som skrivits av någon annan än mig själv. Projektet är såpass långt gånget att en re-design på den nivån tyvärr inte är något alternativ. ;)
Hmm...
Det verkar finnas en kopping mellan fenomenets uppträdande och bredden på "de fyra första" kolumnerna...
Jag testade att mäta lite med en linjal på skärmen, och kom fram till att det verkar vara så att "kolumn 5" (.last) ges bredden av innehållet i colspan-cellen när bredden av innehållet i colspan-cellen överstiger bredden av "de fyra första" när man krymper fönstret i sidled.
Testa följande:
ta bort två w - fenomenet försvinner.
Ta sedan bort ett par tecken ur en av flikarna - fenomenet återkommer...
Mät därefter bredden av "wwww"-texten och jämför med bredden på ".last" när fönstret krympts så att scrollen precis framträder... oavsett bredd på wwwww-raden, verkar de två måttten överensstämma varje gång "wwww"-raden är "bredast"
Jag testade även att minska och öka teckenstorleken och därefter lägga till/ta bort tecken i wwww-raden...
Det verkar som om måtten hänger ihop även om man kör på inställningen "largest" eller "smallest" - och fenomenet verkar alltså även uppkomma oavsett inställningen av teckenstorlek...
Min gissning? bugg i MSIE red: MSIE verkar väl helt enkelt tolka den "width:100%" som du ger .last som "100% av den bredd din colspan-kolumn får när det blir den som blir "bredast" av de fem i tabellen (kanske inte helt logiskt med tanke på att 100% av en del av tabellen i det läget kan anses bli 100% av hela tabellen ...) - inte mycket att göra åt antagligen (utom att ta bort "100%"-breddangivelsen och klura ut ett annat sätt att göra flikarna på skulle jag tro ;) )
Men men...
Vad i koden har du förresten kontroll över? kanske kan man hitta en workaround om det finns någon frihetsgrad någonstans ;)
jarvklo skrev:
Det verkar finnas en kopping mellan fenomenets uppträdande och bredden på "de fyra första" kolumnerna...
Jo, det var det jag försökte beskriva med
min bild. :)
jarvklo skrev:
mycket att göra åt antagligen (utom att ta bort "100%"-breddangivelsen och klura ut ett annat sätt att göra flikarna på skulle jag tro
Det var något åt det hållet jag hade hoppats på...
jarvklo skrev:
Vad i koden har du förresten kontroll över? kanske kan man hitta en workaround om det finns någon frihetsgrad någonstans
Att gå ändra ganska mycket men problemet är att varje liten ändring får följdeffekter för andra funktioner, frames, lager, marginaler, bilder o.s.v.
Jag testade att bryta ur navigeringen och lägga den i en egen tabell. Mitt grundproblem försvinner men istället så blir det problem att få till höjden. En mycket förenklad version av koden ser ut så här:
<html>
<head>
<style>
table {height:100%;width:100%;}
.tab {border:1 solid #FFF;background-color:#CCC;white-space:nowrap;}
.last {border:1 solid #FFF;width:100%;white-space:nowrap;}
</style>
</head>
<body>
<table cellspacing="4">
<tr>
<td>
<table cellspacing="0" style="height:0%;">
<tr>
<td class="tab">Claim job information</td>
<td class="tab">Assessment</td>
<td class="tab">Other costs</td>
<td class="tab">Remarks</td>
<td class="last"> </td>
</tr>
</table>
<table cellspacing="3" style="background:#3C6A84;">
<tr>
<td>
<table cellspacing="0" style="background-color:#f4f4f4;">
<tr>
<td>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Som ni kan se så försvinner ramen i botten av sidan. Jag vet att det är mycket tabeller i tabeller men koden är bara en mycket begränsad del av koden så jag kan inte skippa någon av tabellerna. Någon som vet hur jag kan få fram ramen i botten?
Hmm..
Läste den här: http://www.autisticcuckoo.net/arkiv.php?id=2004/12/07/relativt-absolut
Är det fortfarande det där MSIE-only-projektet ?
<html>
<head>
<style>
html,body {margin:0;padding:0;}
.tab {border:1 solid #FFF;background-color:#CCC;white-space:nowrap;}
</style>
</head>
<body>
<div style="height:100%;width:100%;position:relative;padding:10px 10px 40px 10px;">
<table cellspacing="0" style="position:absolute;top:10px;">
<tr>
<td class="tab">Claim job information</td>
<td class="tab">Assessment</td>
<td class="tab">Other costs</td>
<td class="tab">Remarks</td>
</tr>
</table>
<table cellspacing="3" style="background:#3C6A84; width:100%;height:100%; position:absolute;top:30px;">
<tr>
<td>
<table cellspacing="0" style="background-color:#f4f4f4;width:100%;height:100%;">
<tr>
<td>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Positionering kanske inte är så dumt iallafall (även om just detta exempel enbart funkar i MSIE pga Quirks-strul, men iallafall... ;) )
Är det fortfarande det där MSIE-only-projektet?
Japp, kommer att sitta i detta projekt i minst ett halvår till. Aldrig tidigare har jag gjort så mycket IE-hack! ;)
Din kod ser ut att funka. Vi får se hur det går när jag ska få in det på den nuvarande sidan.
Tack och god jul! :)