WN - Javascript rubbar margin...

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

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

- - Javascript rubbar margin... (https://www.wn.se/forum/showthread.php?t=33418)

Har problem med att, som det verkar, js-kod taggen rubbar hela leftColumn boxen och tar bort margin-left. Eller så lägger sig bilden av någon anledning utanför diven och kant i kant med boxen utanför.

Problemet infinner sig enbart i IE7, fungerar till och med i IE6. FF, Opera och Safari visar också korrekt.

Kod:

#content {

        background:#FFFFFF;

        position:relative;

}

#leftColumn {

        float:left;

        width:280px;

        margin-left:10px;

        position:relative;



}

<div id="content">

<div id="leftColumn">

     <img src="image_layout/image_kvinna.jpg" alt="Bild" width="280" height="507" id="imageslide"/>

     <script type="text/javascript">

         //imageslide('imageslide', 'image_layout', ':image_kille.jpg:image_kvinna.jpg:image_tjej.jpg:', 0);

             </script>

   </div>

</div>

Vad som står i Js koden är oväsentligt då det sker samma sak även om jag inte anropar funktionen (se ovan).

Frågan är, hur kan js-taggen påverka layouten?

Finns det någon anledning till att du kör position:relative? Funkar det som du tänkt om du tar bort det?

Citat:

Originally posted by HMH@Nov 20 2008, 10:32
Finns det någon anledning till att du kör position:relative? Funkar det som du tänkt om du tar bort det?

Tar jag bort det så försvinner bilder i IE6 och det förändrar inget för IE7, bilden ligger fortfarande kant i kant, alltså utan 10px marginal till vänster.

Annars finns det ingen direkt anledning för att köra relative.

Men som sagt, märkliga är att tar jag bort:

Kod:

<script type="text/javascript">

 *        //imageslide('imageslide', 'image_layout', ':image_kille.jpg:image_kvinna.jpg:image_tjej.jpg:', 0);

 * * * * *        </script>

Så fungerar det, även i IE7.

Även om jag skalar bort ALLT annat på sidan så att hela källkoden ser ut såhär;

Kod:

body {

        background:#FFFFFF url(../../image_layout/layout_bg_1650.jpg) no-repeat 50% top;

        width:auto;

        height:100%;

        position:relative;

        font-family:Arial, Helvetica, sans-serif;

        font-size:10px;

}

#site {

        width:840px;

        margin:0 auto;

        margin-top:20px;

        position:relative;

}

#top {

        background:url(../../image_layout/layout_png24_topbot.png) 0 0;

        height:13px;

}

#bot {

        background:url(../../image_layout/layout_png24_topbot.png) 0 -13px;

        height:13px;

}

#content {

        background:#FFFFFF;

        position:relative;

}

#leftColumn {

        float:left;

        width:280px;

        margin-left:10px;

        position:relative;

}

<body>

<div id="site">

        <div id="top"></div>

 * *<div id="content">

 * * *<div id="leftColumn">

 * * * * *<div>

 * * * * *<img src="image_layout/image_kvinna.jpg" alt="Bild" width="280" height="507" id="imageslide"/> * * * * * *</div>

 * * * * *<script type="text/javascript">

 *        //imageslide('imageslide', 'image_layout', ':image_kille.jpg:image_kvinna.jpg:image_tjej.jpg:', 0);

 * * * * *        </script>

 * * *</div>

 * *<div id="bot"></div>

</div>

</body>

</html>

Så sker samma sak i IE7.

(css ligger självklart i en egen css fil)

Känns som att css:en är överkomplicerad i onödan. Float kombinerat med marginaler och relativ positionering känns dömt att misslyckas.

Borde inte vara något större problem att rätta till, men svårt då det inte finns någon sida att testa mot. Kan du lägga upp?

Bör dessutom kunna lösas på något alternativt sätt, som t ex padding på leftcolumn istället för margin... eller margin på bilden... eller left: 10px om du nu ändå har position:relative... osv.

Följande kan kanske förklara dina försvinnande bilder: http://www.satzansatz.de/cssd/rpfloat.html

Citat:

Originally posted by HMH@Nov 20 2008, 11:15
Känns som att css:en är överkomplicerad i onödan. Float kombinerat med marginaler och relativ positionering känns dömt att misslyckas.

Borde inte vara något större problem att rätta till, men svårt då det inte finns någon sida att testa mot. Kan du lägga upp?

Bör dessutom kunna lösas på något alternativt sätt, som t ex padding på leftcolumn istället för margin... eller margin på bilden... eller left: 10px om du nu ändå har position:relative... osv.

Följande kan kanske förklara dina försvinnande bilder:http://www.satzansatz.de/cssd/rpfloat.html

Precis som du säger, så gjorde jag nogd et svårare för mig själv änn nödvändigt.

Kod:

body {

        background:#FFFFFF url(../../image_layout/layout_bg_1650.jpg) no-repeat 50% top;

        width:auto;

        height:100%;

        position:relative;

        font-family:Arial, Helvetica, sans-serif;

        font-size:10px;

}

#site {

        width:840px;

        margin:0 auto;

        margin-top:20px;

}

#top {

        background:url(../../image_layout/layout_png8_topbot.png) 0 0;

        height:13px;

}

#bot {

        background:url(../../image_layout/layout_png8_topbot.png) 0 -13px;

        height:13px;

}

#content {

        background:#FFFFFF;

}

#leftColumn {

        float:left;

        width:280px;

        margin-left:10px;

}

Verkar lösa problmet.

I IE6 får jag av någon anledning ändra #leftColumn

Kod:

#leftColumn {

        float:left;

        width:280px;

        margin-left:5px;

}

Varför?

Hur som helst tack! :)

Citat:

Originally posted by grinditwp@Nov 20 2008, 11:56
I IE6 får jag av någon anledning ändra #leftColumn

Kod:

#leftColumn { float:left; width:280px; margin-left:5px; }

Varför?

IE6:s fördubblad-marginal-vid-float-bugg… ;)
(Finns mycket skrivet om det men det är inte mycket mer än att marginalen fördubblas i IE6 vid float ibland - det börjar ju bli mindre och mindre viktigt att hålla reda på detta.)

Citat:

Originally posted by martine@Nov 20 2008, 20:05
IE6:s fördubblad-marginal-vid-float-bugg… ;)
(Finns mycket skrivet om det men det är inte mycket mer än att marginalen fördubblas i IE6 vid float ibland - det börjar ju bli mindre och mindre viktigt att hålla reda på detta.)

Löses enkelt med att sätta display:inline enligt:

Kod:

#leftColumn {

  display: inline;

  float:left;

  width:280px;

  margin-left:5px;

}

...detta ska egentligen inte ha någon verkan då floatade element skall hanteras som block, men på magiskt vis så fixar det buggen med dubbla marginaler i ie6.

Det var nog helt enkelt alla dina galna position:relative som ställde till det...

Men jag brukar iallafall försöka lyfta ur mina <script></script> utanför själva designen. Kanske är en sån lösning som hade fungerat för dig i det läget också. Jag gillar inte när dom ligger där och "stör"... Om du ändå länkar in css-filen så kan du ju lika gärna ha en inlänkning av en js-fil...

Men jag gillar också att lägga koden så nära det den ska utföra som möjligt. Men inte inuti div:ar som kräver att dom ligger "rätt".