[CSS] positionering in IE6

[X-trace]

Ik heb een div (relative) met daarin een div (absolute). De absolute staat bovenaan in de code (beter voor Google), maar moet buiten de relative div worden geplaatst.De relative div is 161px hoog en de absolute plaats ik op top:201px. Firefox en IE7 slikken dit wel, maar in IE6 krijg ik helemaal niets. Ook niet als ik de absolute op top:100px zet. Na het aanmaken van de absolute div staat er tussen de relative-div tags nog meer code.

Heb al lang lopen zoeken...iemand een idee?

[disjfa]

Glazen bol zegt: nee geen idee.

Heb je een code voorbeeldje?

[BasieP]

een code voorbeeld? dit is net een puzzel

[X-trace]

ok, dacht dat het in eerste instantie niet nodig was, maar hier de code:

HTML:

<div id="branding">
  <div id="taglineTop">Hier staat een regel met tekst</div>
  <div id="headings">
    <h1>Site titel</h1>
    <h2>onder titel</h2>
  </div>
  <div id="topgames">
    <h2>Box rechts met titel</h2>
      <ul>
        <li>Lijst met korte elementen</li>
      </ul>
  </div>
</div>

Cascading Stylesheet:

/* dit is de absolute welke erbuiten moet vallen*/
#taglineTop {
    position:absolute;
    width:764px;
    text-align:center;
    top:201px;
    left:0px;
}
/* rest van css */
#branding {
    width: 764px;
    margin: 0 auto;
    padding: 0;
    height: 161px;  
    margin: 1px auto 0 auto;
    padding: 0;
    background-image: url(../img/header.gif);
    background-position: top left;
    background-repeat: no-repeat;
    position:relative;
}
#branding #headings {
    margin: 0;
    width: 380px;
    height: 160px;
    float: left;
    text-indent: -20000px;
    cursor: pointer;
}
#branding #headings h1, #branding #headings h2 {
    height: 80px;
    margin: 0;
    padding: 0;
    display: block;
}
#topgames {
    float: left;
    width: 370px;
    margin-left: 14px;
    margin-top: 17px;
}

Hoop dat ik alle nodige info heb geplaatst

[BasieP]

Cascading Stylesheet:

            margin: 0 auto;
            padding: 0;
            height: 161px;
            margin: 1px auto 0 auto;
            padding: 0;

boeiende constructie.. wat doet het?


ook heerlijk voor screen-readers:

Cascading Stylesheet:

            text-indent: -20000px;

ow en wat is het nut van het opmaken van je H1 en H2 in je #headings div, wanneer je ze toch niet ziet?

[ Voor 56% gewijzigd door BasieP op 07-09-2007 14:41 ]

[Padschild]

X-trace schreef op vrijdag 07 september 2007 @ 12:41:
ok, dacht dat het in eerste instantie niet nodig was, maar hier de code:

HTML:

<div id="branding">
  <div id="taglineTop">Hier staat een regel met tekst</div>
  <div id="headings">
    <h1>Site titel</h1>
    <h2>onder titel</h2>
  </div>
  <div id="topgames">
    <h2>Box rechts met titel</h2>
      <ul>
        <li>Lijst met korte elementen</li>
      </ul>
  </div>
</div>

Cascading Stylesheet:

/* dit is de absolute welke erbuiten moet vallen*/
#taglineTop {
    position:absolute;
    width:764px;
    text-align:center;
    top:201px;
    left:0px;
}
#branding {
    width: 764px;
    margin: 0 auto;
    padding: 0;
    height: 161px;  
    margin: 1px auto 0 auto;
    padding: 0;
    background-image: url(../img/header.gif);
    background-position: top left;
    background-repeat: no-repeat;
    position:relative;
}

Wat wil je doen met branding? Je zet hem relatief, maar je doet niks met de positie?

Zou je een schets kunnen maken met wat je bedoeling is? Ik volg je verhaaltje niet echt? Je zet iets erboven neer, maar toch weer niet of iets dergelijks?

[ Voor 5% gewijzigd door Padschild op 07-09-2007 14:38 ]

[BasieP]

@padschild, door het relatief zetten worden absoluut gepositioneerde divjes herleid adhv de positie van die div ipv door je body.

dus door die position: relative; staat '#taglinetop' gerelateerd aan '#branding', ipv aan 'body'

@TS:
is het je opgevallen dat wanneer je of #headings of #topgames weghaalt het wel werkt?

[ Voor 17% gewijzigd door BasieP op 07-09-2007 14:46 ]

[Padschild]

BasieP schreef op vrijdag 07 september 2007 @ 14:43:
@padschild, door het relatief zetten worden absoluut gepositioneerde divjes herleid adhv de positie van die div ipv door je body.

dus door die position: relative; staat '#taglinetop' gerelateerd aan '#branding', ipv aan 'body'

@TS:
is het je opgevallen dat wanneer je of #headings of #topgames weghaalt het wel werkt?

Ah, had even de HTML niet goed bekeken.. Dacht dat branding in #taglinetop stond, aan de hand van de tekst van de TS.

[X-trace]

een wat late reactie...

Ik heb je style geprobeerd BasieP, maar helaas zonder resultaat. En inderdaad, na het verwijderen van of #heading óf #topgames werkt het wel ja, dus daar ga ik eens even naar kijken.

edit: Ik heb een oplossing gevonden. Of deze ook netjes is...niet echt, maar het werkt! Enige wat ik heb gedaan is de float van #topgames verwijderd en vervangen door een absolute position. Dit kon nu #branding een relative is geworden.

[ Voor 36% gewijzigd door X-trace op 10-09-2007 10:49 . Reden: oplossing ]