WN - CSS frågor

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

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

- - CSS frågor (https://www.wn.se/forum/showthread.php?t=2956)

Jag håller på att lära mig css och div. Men skulle behöva lite hjälp.

I Internet Explorer får jag ett mellanrum under mina bilder. Det är på ungefär 4 px. Varför?

Sen har jag ett problem i Mozilla. Jag har gjort 2 "div-kolumner" som ska ha gemensam bakgrund (eftersom de ska "sitta ihop" oberoende om den ena kolumnen är längre). Men bakgrunden visas inte i Mozilla, bara i IE. Här kommer ett exempel på hur jag gjort:

Kod:

<div id="bakgrund">



   <div id="kolumn1">

 text

   </div>



   <div id="kolumn2">

        text

   </div>



</div>

Hoppas att ni förstår även om det låter lite (!) flummigt. :)

Det borde fungera om du inte anger någon bakgrund till kolumnerna utan endast anger den för "bakgrund" förutsatt att kolumnerna positioneras med "static".

Jag la in position: static; på de två kolumnerna om det var d du menade. Och ingen av dem har någon bakgrund i koden...men det funkar fortfarande inte =\\

Om jag skriver in Height i bakgrund-taggen så ser jag bakgrunden. Men jag vill ju att den ska ändra höjd beroende på textinnehållet.

Citat:

Originally posted by Sittplats@Jul 31 2004, 20:38
Jag la in position: static; på de två kolumnerna om det var d du menade. Och ingen av dem har någon bakgrund i koden...men det funkar fortfarande inte =\\

Om jag skriver in Height i bakgrund-taggen så ser jag bakgrunden. Men jag vill ju att den ska ändra höjd beroende på textinnehållet.

Om jag förstått dig korrekt så är det du måste göra:
Fejka en bakgrund med flytande div-lager ovanpå:
hem.festiz.com/new/ <-- lite svajjig då den ligger på en laptop, ska leta reda på en riktig guide.
D.v.s är att du vill skapa så kallade faux-kolumner. Detta innebär att du lägger en bakgrund som illustrerar att divlagren går hela vägen, rekommenderat 1x[sidbredd] pixlar stor bild som du repeterar längs y-axeln, därefter låter du bara dina divlager flyta antingen höger eller vänster med:

Kod:

float: left;

Den enda riktiga nackdel jag hittat med denna typ av flytande design är att huvudinnehållet flyttar på sig om man förändrar storleken på fönstret eller har en för liten bredd på den, så länge man är en 20-40 pixlar under 800 så bör dock de flesta klara det utmärkt.

EDIT:
Hittade guiden som jag följde, återigen från alistapart.com:
alistapart.com/articles/fauxcolumns/ <--- underbar guide

Tack. jag har fått det att fungera nu.

Men vad ska jag göra åt det andra problemet?

Citat:

Originally posted by Sittplats@Aug 2 2004, 16:55
Tack. jag har fått det att fungera nu.

Men vad ska jag göra åt det andra problemet?

Bilden bör ha attributen "margin: 0;" .

IE 3px-buggen är inte helt okänd
positioniseverything.net/explorer/threepxtest.html

har en lösning

Jag har försökt hur mycket som helst nu men får inte det att fungera.

Citat:

Bilden bör ha attributen "margin: 0;" .

Hur gör jag det? Typ style="margin: 0;" i bildtaggen eller?

Citat:

Originally posted by Sittplats@Jul 31 2004, 20:02
I Internet Explorer får jag ett mellanrum under mina bilder. Det är på ungefär 4 px. Varför?

Har du provat att använda <span> istället ?

Citat:

Originally posted by Sittplats@Jul 31 2004, 20:02
I Internet Explorer får jag ett mellanrum under mina bilder. Det är på ungefär 4 px. Varför?

Eftersom jag inte kan se hur din kod ser ut just nu så finns det två alternativ,

Antingen har du gjort som jag gjort(följt faux-guiden) och har därmed divlager som det ska räcka med att du sätter en klass på, infogar detta i ditt css-dokument:

Kod:

.____DINKLASSHÄR____{

        /* IE5 hack */

        \margin: 0px 0px -3px 0px;

        ma\rgin: 0px 0px 0px 0px;

}

Det ovan kan se lite skummt ut men det fungerar faktiskt.

Om det inte är problemet vilket det faktiskt borde vara så kan du testa detta men jag tror inte det är detta:

Kod:

img {

        margin: 0px;

        padding: 0px;

}