[CSS] IE, height auto geeft toch een hoogte...

[Sjoerd]

Ik heb dus een div:

HTML:

<div id="txtHint">
</div>

Deze div is standaard leeg omdat deze pas wordt opgevuld vanaf het moment dat iemand in een tekstkader begint te typen (div wordt gevuld met ajax)

de css

Cascading Stylesheet:

#txtHint {
    background-color:white; 
    color:#22145F;
    font-size:12px;
    position:absolute; 
    width:180px; 
    height:auto;
    z-index:3;
    margin-top:20px;
    margin-left:599px;
    filter:alpha(opacity=85);
    opacity:0.85;
}

Het probleem is dat de div soieso zichtbaar is in IE, ook zonder data, in Firefox, Safari niet.

Wie weet hier de oplossing voor?

[MueR]

Cascading Stylesheet:

display:none;

[bop]

Volgens mij ligt het probleem bij:

code:

    margin-top:20px;

Dit wordt door IE binnen je div gedaan, dus de div in IE is 20 px hoog en doet Firefox/Safari dit buiten de div en is deze dus niet zichtbaar.

[Sjoerd]

MueR schreef op donderdag 29 mei 2008 @ 11:02:

Cascading Stylesheet:

display:none;

Vergeten te vermelden dit had ik ook al geprobeerd op volgende manier:

aan de tekstbox waar tekst in wordt getype een onKeyUp naar de javascript functie 'check()' die er zo uitziet:

JavaScript:

    <script type="text/javascript">
        function check(){
                var lengte=document.getElementById('field').value.length;       
                if(lengte==0){
                    document.getElementById('txtHint').style.display="none"
                }else{
                    document.getElementById('txtHint').style.display='block';
                }
        
        }
    </script>

Dit werkt vervolgens perfect in IE maar in FF krijg ik de firebug melding

document.getElementById("field") has no properties
[Break on this error] var lengte=document.getElementById('field').value.length;

FLeSH schreef op donderdag 29 mei 2008 @ 11:05:
Volgens mij ligt het probleem bij:

code:

    margin-top:20px;

Dit wordt door IE binnen je div gedaan, dus de div in IE is 20 px hoog en doet Firefox/Safari dit buiten de div en is deze dus niet zichtbaar.

Zonder de margin-top heeft hij nog altijd een hoogte helaas

[ Voor 18% gewijzigd door Sjoerd op 29-05-2008 11:07 ]

[bop]

Is het trouwens niet gewoon mogelijk om de height helemaal weg te laten?

Sjoerd schreef op donderdag 29 mei 2008 @ 11:06:
[...]

JavaScript:

    <script type="text/javascript">
        function check(){
                var lengte=document.getElementById('field').value.length;       
                if(lengte==0){
                    document.getElementById('txtHint').style.display="none"
                }else{
                    document.getElementById('txtHint').style.display='block';
                }
        
        }
    </script>

var lengte=document.getElementById('field').value.length;
Moet die dikgedrukte FIELD niet gewoon txtHint zijn?

[ Voor 83% gewijzigd door bop op 29-05-2008 11:11 ]

[Sjoerd]

FLeSH schreef op donderdag 29 mei 2008 @ 11:09:
Is het trouwens niet gewoon mogelijk om de height helemaal weg te laten?


[...]

var lengte=document.getElementById('field').value.length;
Moet die dikgedrukte FIELD niet gewoon txtHint zijn?

Height weg laten biedt ook geen oplossing,
nee txtHint is de div die wordt gevuld, maar ik kijk of het tekstveld waarin wordt getypt een lengte heeft

[P.O. Box]

volgens mij hangt het af van welk doctype je gebruikt (weet ik niet zeker) maar soms wordt de enter die je nu binnen je div /div tags hebt staan door IE geinterpreteerd als inhoud van het element... en daarom heeft je element een hoogte... probeer eens <div></div>

[swiv98]

Is er een kans dat je wellicht meerdere divs op je pagina hebt die allen dezelfde ID hebben? Dat vinden niet alle browsers even leuk. En het mag ook gewoon niet.

[ Voor 31% gewijzigd door swiv98 op 29-05-2008 11:22 . Reden: Spuit elf refreshed niet vaak genoeg... ]

[Sjoerd]

swiv98 schreef op donderdag 29 mei 2008 @ 11:21:
Is er een kans dat je wellicht meerdere divs op je pagina hebt die allen dezelfde ID hebben? Dat vinden niet alle browsers even leuk. En het mag ook gewoon niet.

Aha post aangepast maar de div ID is echt uniek...

[Bosmonster]

Sjoerd schreef op donderdag 29 mei 2008 @ 11:06:
[...]

Dit werkt vervolgens perfect in IE maar in FF krijg ik de firebug melding

document.getElementById("field") has no properties
[Break on this error] var lengte=document.getElementById('field').value.length;

Je kunt je het beste focussen op dit simpele probleem op te lossen. Firefox kan namelijk ook best een element opvragen via ID Dus kijk je code nog eens na en kom erachter waarom dit niet goed werkt.

Gebruik je bijvoorbeeld niet per ongeluk name ipv id?

[Sjoerd]

Bosmonster schreef op donderdag 29 mei 2008 @ 11:32:
[...]


Je kunt je het beste focussen op dit simpele probleem op te lossen. Firefox kan namelijk ook best een element opvragen via ID Dus kijk je code nog eens na en kom erachter waarom dit niet goed werkt.

Gebruik je bijvoorbeeld niet per ongeluk name ipv id?

held!!! __O__ name veranderen naar ID bij txtHint deed het hem!