WN - Problem med Height

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Problem med Height (https://www.wn.se/forum/showthread.php?t=25988)

Hejsan, har ett litet problem på menyn när man kör sidan på InternetExplorer 6.

Såhär ser det ut med dom olika webbläsarna.
Är det någon som vet vad det kan bero på?

Firefox 2.0 - ok
http://www.onlinefaktura.se/menu/menu_ff.jpg

Internet Explorer 7 - ok
http://www.onlinefaktura.se/menu/menu_ie7.jpg

Internet Explorer 6 - problem
http://www.onlinefaktura.se/menu/menu_ie6.jpg

Sidans url: http://www.onlinefaktura.se

Css, klassen som strular .topImg

Kod:

    #topLine

    {

      height: 8px;

      background-color: #939393;

      margin-bottom: 1px;

    }



    #botLine          /*style line for the menu*/

    {

      margin-top: 1px;

      padding-top: 2px;

      /*height: 2px;  using padding insted of Height, bug in internet explorer 6*/

      background-color: #4d4d4d;

    }



    .topImg         /*must be a class ID is used by asp.net serverside*/

    {

      height: 230px;

      vertical-align: top;

      margin: 1px 0px 1px 0px;

    }

Html

Kod:

<!--pageTop-->

<div id="pageTop">

        <div id="logo"><img src="Images/logo.jpg" width="170" height="35" alt="OnlineFaktura Logo" /></div>

        <div id="topLine"></div>

        <div id="pageTop_topImg" class="topImg"><img src="Images/TopImg/spara_dina_pengar.jpg" width="800" height="230" alt="Spara dina pengar med oss!" title="Spara dina pengar med oss!" /></div>

        <!--menu-->

        <div id="pageTop_pageMenu_divMenu" class="menu">

 <!--mainMenu-->

 <div id="menuLeft"></div>

 <div id="menuContent">

         <div id="navmenu">

  <ul>

          <li id="pageTop_pageMenu_liDefault" class="menuItemOn"><a href="default.aspx">Online Faktura</a></li>

          <li id="pageTop_pageMenu_liRegister"><a href="register.aspx">Beställ konto</a></li>

          <li id="pageTop_pageMenu_liContactUs"><a href="contactus.aspx">Kontakta oss</a></li>

  </ul>

         </div>

         <div id="login">

  <table id="pageTop_pageMenu_pageLogin_tblLogin">

          <tr>

   <td><input name="pageTop$pageMenu$pageLogin$txtLogin" type="text" value="Login" maxlength="15" id="pageTop_pageMenu_pageLogin_txtLogin" class="Login" style="width:75px;" /></td>

   <td><input name="pageTop$pageMenu$pageLogin$txtPassword" type="password" maxlength="15" id="pageTop_pageMenu_pageLogin_txtPassword" class="Password" style="width:75px;" /></td>

   <td><input type="submit" name="pageTop$pageMenu$pageLogin$btnLogin" value="Login" id="pageTop_pageMenu_pageLogin_btnLogin" /></td>

          </tr>

  </table>

         </div>

 </div>

 <div id="menuRight"></div>

 <!--mainMenu//s-->

 <div style="clear: both;"></div>

 <!--submenus-->

 <!--submenus//s-->

        </div>

        <!--menu//s-->

        <div id="botLine"></div>

</div>

<!--pageTop//s-->

Var ligger problemet? Jag tycker alla bilderna ser extremt lika ut.

Under "huvudbilden" är det ett litet vitt streck på 1px, men på IE6 så är strecket ca 3-4px och det förstör designen.

Att sätta både Height och Margin i samma block blir väl problem i IE6, right?

Prova ta bort padding-top: 2px;

Padding fungerar inte lika i IE och FF

Eller testa på bilden du har där:
[img]Images/TopImg/spara_dina_pengar.jpg[/img]

Det är nog den berömda 3px-förskjutningsbuggen i IE6. Jag skulle inte bry mig om en så marginell detalj, låt IE6-användarna leva med det!

(Om det är så att hela sidans design blir förstörd genom denna lilla förskjutning så har du nog inte så genomtänkt design. Den skulle i så fall braka ihop lika lätt om man förstorade texten eller av liknande små skillnader i Opera eller Safari.)

Föreslår dessutom att du tar ut tabellen ur login-divven och ersätter den med korrekta label-element.

Här är lösningen, fungerar helt perfekt på alla webbläsarna.
Fast vågar inte prova på safari nu ;)

satte Display: block; på bilden och satte istället padding på den.

Kod:

    #botLine          /*style line for the menu*/

    {

      margin-top: 1px;

      padding-top: 2px;

      /*height: 2px;  using padding insted of Height, bug in internet explorer 6*/

      background-color: #4d4d4d;

    }



    .topImg         /*must be a class becoze ID is used by asp.net serverside*/

    {

      height: 231px;

      vertical-align: top;

    }

    .topImg img

    {

      display: block;

      padding: 0px 0px 1px 0px;

    }

Ett tips ni hittar Internet Explorer Standalones här, om ni skulle vilja testa era webbsajter med olika webbläsare. (krav, ni måste köra XP)

http://browsers.evolt.org/?ie/32bit/standalone

Citat:

Originally posted by martine@Jan 3 2008, 18:55

Föreslår dessutom att du tar ut tabellen ur login-divven och ersätter den med korrekta label-element.

Ska fixa till den snart, har inte haft tid att mecka med just den kontrollen.