Problem med visibility:hidden;

Hello!

Jag försöker dölja några delar av min tabell. Dock går det bara halvbra, tabellerna syns inte, dock är en yta "reserverad" för den. Hur gör jag för att det inte ska finnas någon yta reserverad för den, när den är osynlig.

Sen undrar jag hur jag kan "anropa" den för att visa den dolda tabellen?
Är det samma princip för att visa/dölja en DIV?
Och hur gör jag för att använda samma link för både visa/dölja.

    <tr style="visibility:hidden;">
    <td colspan="2" style="background-color:#CCCCCC;">Hej hej! :)</td>
  </tr>
    <tr style="visibility:hidden;">
    <td colspan="2" style="height:2px;"></td>
  </tr>

10-4 over and out!

Alltså är det javascript du ska göra detta med eller ska det vara serverscript (alltså att sidan får laddas om) ?

oskob skrev:

Alltså är det javascript du ska göra detta med eller ska det vara serverscript (alltså att sidan får laddas om) ?

Det ska vara Klientbaserat! JavaScript eller inte, det kvittar!
Jag trodde det skulle gå att lösa mha CSS.

10-4

display: none vs block

nitro2k01 skrev:

display: none vs block

Det där fungerar utmärkt!
Då återstår bara hur jag anropar via vanlig länk att få den synlig, och kunna använda samma länk för att få den osynlig igen!

onclick="document.getElementById('bla').style.display=(document.getElementById('bla').style.display=='block')?'hidden':'block';"

Denna länk togglar mellan synlig och osynlig. bla är förstås nåt lämpligt id på din tabellcell.

nitro2k01 skrev:

onclick="document.getElementById('bla').style.display=(document.getElementById('bla').style.display=='block')?'hidden':'block';"

Denna länk togglar mellan synlig och osynlig. bla är förstås nåt lämpligt id på din tabellcell.

Jag försökte mig på det!

Men den verkar inte vilja visa tabellen! :(

    <tr id="bla" style="display:none;">
    <td colspan="2" style="background-color:#CCCCCC;">Hej hej! </td>
  </tr>
    <tr id="bla" style="display:none;">
    <td colspan="2" style="height:2px;"></td>
  </tr>
  
  <tr>
  	<td colspan="2" style="height:2px;"></td>
  </tr>
  <tr>
    <td colspan="2" class="content" style="height:20px; background-color:#CCCCCC"><div align="center">Copyright 2005 - <a href="#" onclick="document.getElementById('bla').style.display=(document.getEl  ementById('bla').style.display=='block')?'hidden':'block';">Cookies</a> </div></td>
  </tr>

nitro2k01 skrev:

display: none vs block

Jag skulle vilja säga display: none vs table-row(för typ alla webbläsare än IE)/block(för IE)

mv icaaq

onclick="document.getElementById('bla').style.display=(document.getElementById('bla').style.display=='block')?'hidden':'block';"

ska det väl vara? Det hade krupit in två mellanslag i andra element by id.

R: vad händer om man sätter en table-row till block i andra läsare än ie då?

.hidden { display:none; }

oskob skrev:

... ... R: vad händer om man sätter en table-row till block i andra läsare än ie då?

Det kan bli problem att använda tex. colspan i de celler där den <tr> sätts till display: block;

En tr har som default värde i Geckoläsare(och kanske andra) display:tablerow;
IE har display: block;

mv icaaq

Och hur ska man göra för att få det att fungera i både geckoläsare samt IE?

10-4

Jag skulle lösa ditt problem genom att sätta en class på tr och byta den classen till en visande class på onclick. Det får du dock kolla med någon annan om hur man ändrar... sedan har du en regel för show i en css för alla läsare.

.show{
display: table-row;
}

och en för IE i ett hack eller i ett Conditional Commented block, typ

<!--[if IE]>
.show{
display: block;
}
<![endif]-->

Typ ;)

mv icaaq

kan även skrivas:

* html .show{
display.block;
}

i CSS filen för IE hack.

Vilket dock kan bli ett problem i IE 7
http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

mv icaaq

Men IE 7 kommer väl ha liknande firefox tolkning av CSS om inte jag minns helt fel.

voigtann1, det där lät lite konstigt.
IE7 kommer ha bättre tolkning av CSS som följer uppsatta standarder, vilket Firefox redan gör.

icaaq skrev:

Vilket dock kan bli ett problem i IE 7
http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx
mv icaaq

Som jag sa, det kan bli ett problem....

http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx skrev:

Call to action: Please check your pages

Here is a list of common CSS hacks to look out for (please also consider their variations):

html > body - http://css-discuss.incutio.com/?page=ChildHack
* html - http://css-discuss.incutio.com/?page=StarHtmlHack
head:first-child + body - http://centricle.com/ref/css/filters/tests/owen/
head + body - http://www.dithered.com/css_filters/css_only/head_adjacent_sibling_body.html
body > element - http://css-discuss.incutio.com/?page=ChildHack

We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments .

mv icaaq

Jag vet inte om mitt förra inlägg gav ljus i tunneln eller inte...

Vad webbläsaren har för 'display' på tabellceller per default är inte intressant. Vi använder bara ett klassnamn, "hidden". Därefter byter vi mellan det klassnamnet och inget klassnamn. Varför göra det svårare än det är? :)

Ok, det var ju en lösning som jag inte tänkt på :)
Men anledningen av att jag gav mitt förslag var att jag för ett tag sedan sprang på det problemet när jag lekte med :target på en tr, och med :target kan jag ju inte ta bort classnamnet, utan då fick jag helt enkelt byta display-värde.

Men som sagt, använd zcorpan´s lösning :) om ni inte använder :target ;)

mv icaaq