absolument positionné DIV n'apparaissant pas sur IE

Ceci est le style simplifié pour un blog hébergé sur wordpress.com. Le code est validé CSS, mais IE ne le montrera pas correctement (ce ne sont pas vraiment des nouvelles, sont-ils?). En particulier, le menu supérieur (#primary div) ne peut pas être vu dans IE, rendant le blog assez inutilisable.absolument positionné DIV n'apparaissant pas sur IE

La solution facile serait de changer les ordres div, mais comme le style est donné par wordpress, la restriction sur ce problème est que vous pouvez seulement changer le code CSS, pas le code HTML.

Pouvez-vous trouver un moyen de contourner facilement les bizarreries de présentation d'IE? J'ai lu que ceci peut être lié par des propriétés de hasLayout, mais je ne suis pas compétent sur la conception de Web.

<HTML><HEAD > 

<style type="text/css"> 

div#wrapper { 
width:1000px; 
background:#fff url('http://embolsados.files.wordpress.com/2009/03/bg.png') repeat-y 50% 0; 
margin:0 auto; 
} 

div#header { 
text-align:center; 
background:#ddd; 
color:#eee; 
width:980px; 
height:333px; 
position:relative; 
left:10px; 
margin:0; 
} 

div#container { 
float:left; 
position:relative; 
left:10px; 
top:0; 
width:630px; 
font-size:.9em; 
line-height:1.8em; 
padding:30px; 
} 

#primary { 
background:#32a855; 
width:980px; 
position:absolute; 
top:333px; 
text-indent:15px; 
border:0; 
margin:0 0 0 10px; 
padding:0; 
} 

#secondary { 
float:right; 
overflow:hidden; 
width:270px; 
position:relative; 
left:-10px; 
top:0; 
padding:10px; 
} 

div#footer { 
background:#32a855 url('http://embolsados.files.wordpress.com/2009/05/footer.png') no-repeat; 
color:#fff; 
text-align:center; 
clear:both; 
height:40px; 
padding-top:25px; 
position:relative; 
} 

div#footer a { 
color:#fff; 
} 
</style> 

</HEAD> 


<BODY> 
<DIV id=wrapper> 

<DIV id=header>Title</DIV> 

<DIV id=container> 

    <DIV id=content>Content.</DIV> 
</DIV> 

<DIV class=sidebar id=primary>Upper menu.</DIV> 

<DIV class=sidebar id=secondary>Side menu.</DIV> 

<DIV id=footer>Footer</DIV> 

</DIV> 
</BODY> 
</HTML>

Source

2009-11-01 AticusFinch

note sans rapport, mais la syntaxe non-xhtml rend tristes chatons – marcgg

Mais devant servir XHTML comme text/html et d'avoir à danser autour des directives de compatibilité rend bunnies triste. Ensuite, les canetons s'attristent du pouvoir moins expressif des DTD XML, ce qui réduit l'utilité des validateurs. Dans l'ensemble, XHTML conduit à plus de tristesse parmi les animaux mignons que le HTML. – Quentin

J'évite de coder pour IE jusqu'à ce que je sois heureux avec le design de Firefox. Je fais une feuille de style séparée pour IE. Je ne réponds pas, car il est difficile de savoir exactement pourquoi IE fait ce qu'il fait. Je crois qu'il y a une barre d'outils pour IE comme Firefox Firebug. –

AFAIK il n'y a aucun autre moyen que d'enlever la propriété flotteur sur les éléments frères ou vous avez déclaré, modifiez l'ordre source .. peut envelopper un div autour du point d'accès.

Source

2009-11-01 16:30:48

Il semble qu'il n'y ait pas de solution pour cela. Je serai très heureux de passer à une autre réponse plus correcte si ce n'est pas le cas !! – AticusFinch

Il ressemble à ceci est votre problème

http://www.brunildo.org/test/IE_raf3.html

En bref ajouter un <div></div> vide entre l'élément flottant et l'abs élément positionné. C'est moche mais c'est la seule chose que j'ai trouvée qui a fonctionné.

Source

2009-11-02 02:09:22 Galen

Il ne peut pas éditer le HTML, seulement le CSS. – sfarbota

oh, je devrais lire toute la question je suppose. – Galen

+1 pour résoudre ce problème pour moi, j'ai eu l'avantage de pouvoir modifier la source. –

Vous pouvez essayer d'ajouter la ligne suivante à la section de styles #primary:

*display: expression(style.display='block', 0);

Source

2011-08-16 17:08:47 jslayer

Emballage l'élément absolument positionné dans un div non flotta fait l'affaire.

http://www.daharsh.net/tech/2008/10/ie6-or-ie7-position-absolute-not.htm

Source