WN - Problem med DIV och bakgrund

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

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

- - Problem med DIV och bakgrund (https://www.wn.se/forum/showthread.php?t=32016)

mephisto73

2008-09-19 13:29

Jag försöker lösa följande problem. I min "container div" har jag två "column div" som med float. I FF och Opera så bryter det bakgrundsbilden i min "container div", medan det "fungerar" i IE7, se bild.

http://daglig.info/browserwoes.PNG

Så här ser CSS-en ut:

Kod:

.box_body_480 {

        background:url('pics/box_body_480.png') repeat-y;

 border: none;

        clear: both;

        margin 0;

        width: 480px;

}



.box_column {

    display:inline;

    float:left;

    width: 46%;

        margin: 0px;

        padding: 0 0 0 10px;

}

Nån som kan upplysa mig om vad jag gör fel?

jgabor

2008-09-19 14:04

Kan man få se ett "live" exempel? Hur ser HTML-koden ut?

Men det ser ut som om

(eller vad det nu än som är runt texten) har en vit bakgrund... Pröva att sätta background till transparent.

Och av ren nyfikenhet; Varför har du repeat-y på boxen? Den ska väl inte repeteras?

mephisto73

2008-09-19 14:59

Markupen ser ut så här:

Kod:

         <div class="box_top_blue_480"><h2 class='box_header'>Title</h2></div>

           <div class="box_body_480"> 

           

             <div class="box_column">

          At vero...

  </div>

 

  <div class="box_column">

          At vero...

  </div> 



           </div>

           <div class="box_footer_480"></div>

Begriper inte vad det är som strular.

mephisto73

2008-09-19 15:01

Citat:

Originally posted by jgabor@Sep 19 2008, 14:04

Och av ren nyfikenhet; Varför har du repeat-y på boxen? Den ska väl inte repeteras?

Jo den är en 12px hög png som repeteras så att boxen blir flexibel på höjden. Är iden i alla fall.

tartareandesire

2008-09-19 15:09

Testat att sätta en tom clear-div efter de floatade?

mephisto73

2008-09-19 15:46

Jag hittade svaret!

Man måste/kan göra en enclose på container diven med overflow:hidden.

Så denna fungerar

Kod:

.box_body_480 {

        background:url('bilder/box_body_480.png') repeat-y;

 border:none;

 [COLOR=red]overflow: hidden;[/COLOR]

        clear: none;

        margin: 0;

        width: 480px;

}

Kanske kan vara till hjälp för någon annan nybörjare som mig.

ledstrom

2008-09-22 10:55

Jag tror om du sätter height:auto också hjälper...

mforsberg

2008-09-22 12:17

Problemet, som du säkert förstått är att du float:ar elementen inom div:en. Du behöver således clear:a floaten. Jag brukar använda mig av "Overflow: auto;" lösningen, du kan således tabort "clear: none;" och ändra Overflow till auto istället för hidden.

Mer information om "Overflow: auto;" finns att läsa här:
http://annevankesteren.nl/2005/03/clearing-floats

Alla tider är GMT +2. Klockan är nu 19:32.