Internet Explorer css layout bug, need css advices and help

  • Cenobite
  • Born
  • Born
  • Cenobite
  • Posts: 1

Post 3+ Months Ago

I got a problem with my layout in internet explorer 6.0(surprise) :wink: ,
All browsers (opera/mozilla/netscape) render my page correctly but not internet explorer 6.0 , the margins and spacing seem different, and i dont know why.

here is my css code

Code: [ Select ]

/* ----------------------------------------------- */

#navigation {
        position: absolute;
        top: 198px;
        padding:0px 0px 6px 0px;
        width:168px;
}

#liens {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
}

/* Titres des sections de la navigation */

h3.outils {
        margin: 11px 0px 0px 12px;
        background: url(img/titreoutil.gif) no-repeat bottom left;
}

h3.calendrier {
        margin: 1px 0px 0px 12px;
        background: url(img/titrecalendrier.gif) no-repeat bottom left;
        border-bottom: 1px solid #A5A5A5;
}

h3.bulletin {
        background: url(img/titrebulletin.gif) no-repeat;
        margin: 1px 0px 0px 12px;
        border-bottom: 1px solid #A5A5A5;
}

h3.cht {
        background: url(img/titrecht.gif) no-repeat;
        margin: 1px 0px 0px 12px;
}

h3.outils, h3.calendrier, h3.bulletin, h3.cht {
        width: 156px;
        height: 24px;
}

h3.outils span, h3.calendrier span, h3.bulletin span, h3.cht span {
        display:none;
}

/* Liens outils */

#loutils ul {
        margin: 0px 0px 0px 12px;
        padding: 0px 0px 0px 0px;
}

#loutils li {
        line height: 2.5ex;
        list-style-type: none;
        display: block;
        padding: 3px 0px 3px 7px;
        margin: 0px 0px;
        border-top: 1px solid #A5A5A5;
}

#loutils li a {
        white-space: wrap;
        display: block;
        font-weight: bold;
        text-decoration: none;
        font: bold 12px "Arial", sans-serif;
        color: #7B7777;
}

/* Liens calendrier */

#lcalendrier ul {
        margin: 0px 0px 0px 12px;
        padding: 0px 0px 0px 0px;
        font: 11px "Arial", sans-serif;
}

#lcalendrier li {
        list-style-type: none;
        display: block; 
        padding: 0px 0px 0px 13px; 
        margin: 5px 0px;
        background: transparent url(img/pucedem.gif) no-repeat 0px 2px;
}

#lcalendrieroptions ul {
        margin: 0px 0px 0px 12px;
        padding: 0px 0px 0px 0px;
        font: 11px "Arial", sans-serif;
}

#lcalendrieroptions li {
        list-style-type: none;
        display: block; 
        padding: 0px 0px 0px 13px; 
        margin: 5px 0px;
        background: transparent url(img/puceliens.gif) no-repeat 0px 2px;
}

/* Liens bulletin d'information */

#bulletin {
        position: relative;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
}

#inscription {
        position: relative;
        margin: 0px 0px 0px 0px
        padding: 0px 0px 0px 0px;
        left: 12px;
        /*width: 143px;*/
}

#etiquettebulletin {
        position: relative;
        padding: 0px 0px 0px 0px;
        margin: 5px 0px 5px 0px;
        left: 7px;
        font: 11px "Arial", sans-serif;
        color: #7B7777;
}

#boitebulletin {
        position: relative;
        left: 7px;
}

#lbulletinoptions ul {
        position: relative;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        font: 11px "Arial", sans-serif;
}

#lbulletinoptions li {
        list-style-type: none;
        display: block; 
        padding: 0px 0px 0px 13px; 
        margin: 5px 0;
        background: transparent url(img/puceliens.gif) no-repeat 0px 2px;        
}

/* Liens site cht */

#lcht ul {
        margin: 0px 0px 0px 12px;
        padding: 0px 0px 0px 0px;
}

#lcht li {
        line height: 2.5ex;
        list-style-type: none;
        display: block;
        padding: 3px 0px 3px 7px;
        margin: 0px 0px;
        border-top: 1px solid #A5A5A5;
}

#lcht li a {
        white-space: wrap;
        display: block;
        font-weight: bold;
        text-decoration: none;
        font: bold 12px "Arial", sans-serif;
        color: #7B7777;
}

  1. /* ----------------------------------------------- */
  2. #navigation {
  3.         position: absolute;
  4.         top: 198px;
  5.         padding:0px 0px 6px 0px;
  6.         width:168px;
  7. }
  8. #liens {
  9.         margin: 0px 0px 0px 0px;
  10.         padding: 0px 0px 0px 0px;
  11. }
  12. /* Titres des sections de la navigation */
  13. h3.outils {
  14.         margin: 11px 0px 0px 12px;
  15.         background: url(img/titreoutil.gif) no-repeat bottom left;
  16. }
  17. h3.calendrier {
  18.         margin: 1px 0px 0px 12px;
  19.         background: url(img/titrecalendrier.gif) no-repeat bottom left;
  20.         border-bottom: 1px solid #A5A5A5;
  21. }
  22. h3.bulletin {
  23.         background: url(img/titrebulletin.gif) no-repeat;
  24.         margin: 1px 0px 0px 12px;
  25.         border-bottom: 1px solid #A5A5A5;
  26. }
  27. h3.cht {
  28.         background: url(img/titrecht.gif) no-repeat;
  29.         margin: 1px 0px 0px 12px;
  30. }
  31. h3.outils, h3.calendrier, h3.bulletin, h3.cht {
  32.         width: 156px;
  33.         height: 24px;
  34. }
  35. h3.outils span, h3.calendrier span, h3.bulletin span, h3.cht span {
  36.         display:none;
  37. }
  38. /* Liens outils */
  39. #loutils ul {
  40.         margin: 0px 0px 0px 12px;
  41.         padding: 0px 0px 0px 0px;
  42. }
  43. #loutils li {
  44.         line height: 2.5ex;
  45.         list-style-type: none;
  46.         display: block;
  47.         padding: 3px 0px 3px 7px;
  48.         margin: 0px 0px;
  49.         border-top: 1px solid #A5A5A5;
  50. }
  51. #loutils li a {
  52.         white-space: wrap;
  53.         display: block;
  54.         font-weight: bold;
  55.         text-decoration: none;
  56.         font: bold 12px "Arial", sans-serif;
  57.         color: #7B7777;
  58. }
  59. /* Liens calendrier */
  60. #lcalendrier ul {
  61.         margin: 0px 0px 0px 12px;
  62.         padding: 0px 0px 0px 0px;
  63.         font: 11px "Arial", sans-serif;
  64. }
  65. #lcalendrier li {
  66.         list-style-type: none;
  67.         display: block; 
  68.         padding: 0px 0px 0px 13px; 
  69.         margin: 5px 0px;
  70.         background: transparent url(img/pucedem.gif) no-repeat 0px 2px;
  71. }
  72. #lcalendrieroptions ul {
  73.         margin: 0px 0px 0px 12px;
  74.         padding: 0px 0px 0px 0px;
  75.         font: 11px "Arial", sans-serif;
  76. }
  77. #lcalendrieroptions li {
  78.         list-style-type: none;
  79.         display: block; 
  80.         padding: 0px 0px 0px 13px; 
  81.         margin: 5px 0px;
  82.         background: transparent url(img/puceliens.gif) no-repeat 0px 2px;
  83. }
  84. /* Liens bulletin d'information */
  85. #bulletin {
  86.         position: relative;
  87.         margin: 0px 0px 0px 0px;
  88.         padding: 0px 0px 0px 0px;
  89. }
  90. #inscription {
  91.         position: relative;
  92.         margin: 0px 0px 0px 0px
  93.         padding: 0px 0px 0px 0px;
  94.         left: 12px;
  95.         /*width: 143px;*/
  96. }
  97. #etiquettebulletin {
  98.         position: relative;
  99.         padding: 0px 0px 0px 0px;
  100.         margin: 5px 0px 5px 0px;
  101.         left: 7px;
  102.         font: 11px "Arial", sans-serif;
  103.         color: #7B7777;
  104. }
  105. #boitebulletin {
  106.         position: relative;
  107.         left: 7px;
  108. }
  109. #lbulletinoptions ul {
  110.         position: relative;
  111.         margin: 0px 0px 0px 0px;
  112.         padding: 0px 0px 0px 0px;
  113.         font: 11px "Arial", sans-serif;
  114. }
  115. #lbulletinoptions li {
  116.         list-style-type: none;
  117.         display: block; 
  118.         padding: 0px 0px 0px 13px; 
  119.         margin: 5px 0;
  120.         background: transparent url(img/puceliens.gif) no-repeat 0px 2px;        
  121. }
  122. /* Liens site cht */
  123. #lcht ul {
  124.         margin: 0px 0px 0px 12px;
  125.         padding: 0px 0px 0px 0px;
  126. }
  127. #lcht li {
  128.         line height: 2.5ex;
  129.         list-style-type: none;
  130.         display: block;
  131.         padding: 3px 0px 3px 7px;
  132.         margin: 0px 0px;
  133.         border-top: 1px solid #A5A5A5;
  134. }
  135. #lcht li a {
  136.         white-space: wrap;
  137.         display: block;
  138.         font-weight: bold;
  139.         text-decoration: none;
  140.         font: bold 12px "Arial", sans-serif;
  141.         color: #7B7777;
  142. }



here is my html code:

Code: [ Select ]

<!-- Navigation portail -->

<div id="navigation">
    <div id="liens">
        <div id="loutils">
            <h3 class="outils"><span>Outils</span></h3>
                <ul>
                    <li><a href="#" title="Marché des technologies" class="ignore">Marché des technologies</a></li>
                    <li><a href="#" title="Marché des inventeurs et investisseurs" class="ignore">Marché des inventeurs et investisseurs</a></li>
                    <li><a href="#" title="Aides à l'innovation" class="ignore">Aides à l'innovation</a></li>
                    <li><a href="#" title="Trucs et astuces" class="ignore">Trucs et astuces</a></li>
                    <li><a href="#" title="Veille technologique" class="ignore">Veille technologique</a></li>                
                </ul>        
        </div>
        
        <div id="lcalendrier">
            <h3 class="calendrier"><span>Calendrier</span></h3>
                <ul>
                    <li><a href="#" title="Conférence sur l'innovation" class="ignore">Conférence sur l'innovation</a></li>
                    <li><a href="#" title="Visite de l'exposition" class="ignore">Marché des inventeurs et investisseurs</a></li>
                    <li><a href="#" title="Réunions pour les PME" class="ignore">Réunions pour les PME</a></li>
                    <li><a href="#" title="Colloque sur l'industries du TIC" class="ignore">Colloque sur l'industries du TIC</a></li>            
                </ul>
            <div id="lcalendrieroptions">
                <ul>
                    <li><a href="#" title="Autres activités" class="ignore">Autres activités</a></li>
                </ul>    
            </div>                    
        </div>
        
        <div id="bulletin">
            <h3 class="bulletin"><span>Bulletin d'information</span></h3>
                <div id="inscription">
                    <div id="etiquettebulletin">
                    inscrire votre courriel :
                    </div>
                    <div id="boitebulletin">
                    <form id="bulletindinformation">
                    <input type="text" size="20" name="query" value=""/>
                    <input type="image" name="submit" src="css/img/btn_ok.gif" width="36" height="16"/>
                    </form>
                    </div>                    
                    <div id="lbulletinoptions">
                        <ul>
                            <li><a href="#" title="Consulter le bulletin" class="ignore">Consulter le bulletin</a></li>
                            <li><a href="#" title="Se désabonner" class="ignore">Se désabonner</a></li>                        
                        </ul>                    
                    </div>
                </div>
        </div>
        
        <div id="lcht">
            <h3 class="cht"><span>Site web du cht</span></h3>
                <ul>
                    <li><a href="#" title="Profil">Profil</a></li>
                    <li><a href="#" title="Services">Services</a></li>
                    <li><a href="#" title="Portfolio">Portfolio</a></li>
                    <li><a href="#" title="Partenaires">Partenaires</a></li>        
                </ul>        
        </div>
    </div>
</div>

<!-- Fin Navigation portail -->
  1. <!-- Navigation portail -->
  2. <div id="navigation">
  3.     <div id="liens">
  4.         <div id="loutils">
  5.             <h3 class="outils"><span>Outils</span></h3>
  6.                 <ul>
  7.                     <li><a href="#" title="Marché des technologies" class="ignore">Marché des technologies</a></li>
  8.                     <li><a href="#" title="Marché des inventeurs et investisseurs" class="ignore">Marché des inventeurs et investisseurs</a></li>
  9.                     <li><a href="#" title="Aides à l'innovation" class="ignore">Aides à l'innovation</a></li>
  10.                     <li><a href="#" title="Trucs et astuces" class="ignore">Trucs et astuces</a></li>
  11.                     <li><a href="#" title="Veille technologique" class="ignore">Veille technologique</a></li>                
  12.                 </ul>        
  13.         </div>
  14.         
  15.         <div id="lcalendrier">
  16.             <h3 class="calendrier"><span>Calendrier</span></h3>
  17.                 <ul>
  18.                     <li><a href="#" title="Conférence sur l'innovation" class="ignore">Conférence sur l'innovation</a></li>
  19.                     <li><a href="#" title="Visite de l'exposition" class="ignore">Marché des inventeurs et investisseurs</a></li>
  20.                     <li><a href="#" title="Réunions pour les PME" class="ignore">Réunions pour les PME</a></li>
  21.                     <li><a href="#" title="Colloque sur l'industries du TIC" class="ignore">Colloque sur l'industries du TIC</a></li>            
  22.                 </ul>
  23.             <div id="lcalendrieroptions">
  24.                 <ul>
  25.                     <li><a href="#" title="Autres activités" class="ignore">Autres activités</a></li>
  26.                 </ul>    
  27.             </div>                    
  28.         </div>
  29.         
  30.         <div id="bulletin">
  31.             <h3 class="bulletin"><span>Bulletin d'information</span></h3>
  32.                 <div id="inscription">
  33.                     <div id="etiquettebulletin">
  34.                     inscrire votre courriel :
  35.                     </div>
  36.                     <div id="boitebulletin">
  37.                     <form id="bulletindinformation">
  38.                     <input type="text" size="20" name="query" value=""/>
  39.                     <input type="image" name="submit" src="css/img/btn_ok.gif" width="36" height="16"/>
  40.                     </form>
  41.                     </div>                    
  42.                     <div id="lbulletinoptions">
  43.                         <ul>
  44.                             <li><a href="#" title="Consulter le bulletin" class="ignore">Consulter le bulletin</a></li>
  45.                             <li><a href="#" title="Se désabonner" class="ignore">Se désabonner</a></li>                        
  46.                         </ul>                    
  47.                     </div>
  48.                 </div>
  49.         </div>
  50.         
  51.         <div id="lcht">
  52.             <h3 class="cht"><span>Site web du cht</span></h3>
  53.                 <ul>
  54.                     <li><a href="#" title="Profil">Profil</a></li>
  55.                     <li><a href="#" title="Services">Services</a></li>
  56.                     <li><a href="#" title="Portfolio">Portfolio</a></li>
  57.                     <li><a href="#" title="Partenaires">Partenaires</a></li>        
  58.                 </ul>        
  59.         </div>
  60.     </div>
  61. </div>
  62. <!-- Fin Navigation portail -->


if you have any questions about classes and the text ask me (its written in french)

thx
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • lioness
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1615

Post 3+ Months Ago

I'm not 100% sure about this one but I think I read earlier in another post by rtm223 that IE doubles the margins specified for some obscure reason... :roll:

So (for example) one of your margins is 11px, this will display as an 11px margin in everything else, but in IE it displays as 22px...

:scratchhead:

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 85 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.