webForumDet fria alternativet

Problem med visibility:hidden;

HTML & CSSur HTML, XHTML & CSS

25 svar · 768 visningar · startad av M.Cheraghi

Medlem sedan juli 20015 107 inlägg
Frågan#1

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!

Medlem sedan maj 20021 558 inlägg
#2

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

Medlem sedan juli 20015 107 inlägg
#3

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

Medlem sedan aug. 20039 340 inlägg
#4

display: none vs block

Medlem sedan juli 20015 107 inlägg
#5

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!

Medlem sedan aug. 20039 340 inlägg
#6
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.

Medlem sedan juli 20015 107 inlägg
#7

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>
Medlem sedan okt. 20005 273 inlägg
#8

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

Medlem sedan maj 20021 558 inlägg
#9

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å?

Medlem sedan dec. 20042 245 inlägg
#10
.hidden { display:none; }
Medlem sedan okt. 20005 273 inlägg
#11

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

Medlem sedan juli 20015 107 inlägg
#12

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

10-4

Medlem sedan okt. 20005 273 inlägg
#13

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

Medlem sedan juni 20019 519 inlägg
#14

kan även skrivas:

* html .show{
display.block;
}

i CSS filen för IE hack.

Medlem sedan okt. 20005 273 inlägg
#15

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

mv icaaq

Medlem sedan juni 20019 519 inlägg
#16

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

Medlem sedan mars 20041 505 inlägg
#17

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.

Medlem sedan okt. 20005 273 inlägg
#18

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

Medlem sedan dec. 20042 245 inlägg
#19

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? :)

Medlem sedan okt. 20005 273 inlägg
#20

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

136 ms totalt · 3 externa anrop · v20260731065814-full.b746b907
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)