CSS-fejl

Ifølge min Firebug er der en lille smule padding på. Vil lige tjekke hvorfor.

De bruger begge CSS siden global.css som indeholder følgende:

div#content
{
    padding:            8px 9px;
    background:            url(images/content_shadow.png) repeat-x;
    text-align:            justify;
}

Index.html bruger CSS sheetet list.css, og list.css indeholder følgende definering:

div#content
{
    padding:            0px;
}


Det overskriver defineringen i global.css

Du skal enten fjerne

    padding:            0px;

fra list.css eller ændre

    padding:            8px 9px;

i global.css

Hvorfor kan jeg ikke have begge to?

Det kan du sagtens, men du spugte hvorfor den første div er forskydt nedad. Det er pga. linjen:

    padding:            8px 9px;

Du kan (hvis du har lyst) fjerne en af dem for at løse problemet, men du behøver ikke. Troede bare at du skrev her fordi du havde brug for en løsning.

Men HVORFOR får den linje skidtet til at forskydes nedad, når
padding:            0px;
er endegyldig?

Fordi map.html ikke inkluderer link.css, men kun entity.css

link.css? :S

list.css, undskyld.

Okaj, så tillader jeg mig lige at skære problemet ud i pap, så vi ikke misforstår hinanden :)
CSS-filerne er nu opdateret - prøv at kaste et blik på dem nu.

index.html -> list.css  -> padding: 0px;
map.html  -> entity.css -> padding: 8px, 9px;

Samme problem. Hvis du ønsker at fjerne problemet skal du enten indsætte list.css i map.html, entity.css i index.html eller sørge for at list.css og entity.css indeholder den samme definition.

Men hvorfor skal de indeholde samme definition?

For ellers kommer de ikke til at se ens ud.

Skåret helt ud i pap:
Hvis du har to mure, og du maler den ene blå og den anden rød, så har murene forskellige farver.
Ligeledes, hvis du har to sider, og de bruger to forskellige css sheets, så kommer de til at se forskellige ud.

Map.html indeholder definitionen "padding: 8px, 9px;" og er derfor forskudt nedad. Det gør index.html ikke, og er derfor ikke forskudt nedad.

Du kan sagtens have forskelligt css på de to sider, men så kommer de også til at se forskellige ud.

Jeps, men så forstår jeg bare ikke, hvorfor padding:0px resulterer i forskydningen nedad? Der skulle der jo netop ingen forskydning være.

Jeg er ikke sikker på, om vi snakker om det samme.
Se evt. her:

www.ovrkll.com/private/forskydning.jpg

Det er problemet.

Prøv at rette

*.selectable
{
    display:            block;
    margin:                4px;
    padding:            5px;
}

til

*.selectable
{
    display:            block;
    margin:                0 4px 4px 4px;
    padding:            5px;
}

(Du skulle jo nødig have top margin på den første selectable - ret evt. til 0 4px 8px 4px; - d.v.s. dobbel bund margin for at kompensere eller opret adskilt class/id til den første selectable og kast en margin: 0 4px 4px 4px!important; ind i css'en til den id/class)

Jo, der skal være marginer på alle selectables, så jeg ikke skal rette dem individuelt. Som du kan se, er den øverste (og alle de andre) selectable-divs også placeret forkert - det er baggrunden (den øvre skygge) til den omkringliggende content-div, der er problemet.

Hov, der fik jeg vist ikke lige rettet mig selv :) Jeg prøver igen:


Jo, der skal være marginer på alle selectables, så jeg ikke skal rette dem individuelt. Som du kan se, er den øverste (og alle de andre) selectable-div også placeret korrekt - det er baggrunden (den øvre skygge) til den omkringliggende content-div, der er problemet.

Hov, du har ret i, at baggrunden står rigtigt, når padding-top:0px... Men hvorfor påvirkes margin af første indholdselement, og hvordan kan jeg undgå det?

Nøj, hvor kan jeg da ikke skrive i dag. Rettelse:


Hov, du har ret i, at baggrunden står rigtigt, når padding-top:0px... Men hvorfor påvirkes background-placeringen af første indholdselement, og hvordan kan jeg undgå det?

Nu er det margin-top (ikke padding) jeg foreslog til 0, da margin-top netop p.t. rykker content blokken 4px ned - og derfor viser elementets baggrund 4px længere nede ... bemærk margin 4px i toppen rykker ikke baggrunden 4px ned, men hele elementet (incl. baggrunden).

Når et element har margin-top og lægger som det første element i et andet kan margin sommetider påvirkes som var det sat på det omkransende element.

Løsningsmuligheder:

----------------------------------------------------------
*.selectable
{
    display:            block;
    margin:                0 4px 4px 4px;
    padding:            5px;
}

Øg evt. top-padding for at kompensere f.eks. (slet evt. important afhængig af behov)

*.selectable
{
    display:            block;
    margin:                0 4px 4px 4px;
    padding:            9px 5px 5px 5px!important;
}


----------------------------------------------------------

Tilføj en id på det første a element som her:
<a title="Go to Underground: Part I" href="" id="forsteselectable" class="selectable">

og tilføj følgende til css:
#forsteselectable{margin-top:0!important;}

----------------------------------------------------------

Ryk elementerne ned med positionering istedet for margin f.eks. med relative og top:

*.selectable
{
    display:            block;
    position:relative;
    top:40px;
    margin:                0 4px 4px 4px;
    padding:            5px;
}

(ret lige 40 til 4 efter test)

----------------------------------------------------------

Tilføj evt. et element på 0px højde først i content elementet over det første selectable a element (bare 0 px div med &nbsp; som indhold samt overflow:hidden; og uden margin/padding).
- Denne er ikke testet, men burde gøre så de 4px margin bliver sat i forhold til det ovenstående element istedet for at påvirke placeringen af content.

Jeg har lige fået en åbenbaring: Jeg hader CSS :)
Anyway, takker, jeg roder lige med det.

Tro mig, du elsker css*. Det er så meget lettere at redde/rette et
design ved brug af css end at rette hele kilden igennem - ændre
tabel struktur og øge/minimere billeder til at strække celler.
* (Før eller siden gør du sikkert om ikke andet :P)

Omfg...

div#content > a:first-child
{
    position:            relative;
    top:                4px;
    margin-top:            0px;
}

Jo, den er god nok, jeg ville ønske, der fandtes et mere ligefremt konsekvent og umiddelbart logisk stylingsprog end CSS :P

Men smid du bare et svar - ovenstående virker.

Og ja, CSS er et glimrende system - jeg ville bare ønske, det var lidt mere gennemført og ikke varierede mellem browsers :)

Velbekom :)
Ja, forskelle mellem browsere er nu irriterende.
( Har ikke lige IE<7 ved hånden, så jeg kan checke hvad den siger,
men lige en p.s. vedr. forskelle: > og first-child er med fra IE7+
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx )

Curse you, Microsoft x)
Her er point.

Takker for point :)