[CSS] afzonderlijk goed renderen, samengevoegd layout niet

[Schonhose]

Na lang proberen heb ik eindelijk iets werkend zoals ik het graag wil hebben. De afzonderlijke file wordt goed in IE en FF weergegeven.

http://www.schonhose.nl/layout/newslayout.html

Vervolgens voegde ik het werkende deel en de CSS file toe aan mijn nieuwe layout sample. Wat schetst mijn verbazing? De footer van de newslayout wordt nu ineens niet goed weergegeven in Internet explorer. Aan beide kanten ineens een marge van ongeveer 3 punten extra.

Toch is er niets veranderd aan de CSS van de newslayout.

Hoe ziet het er uit in IE?


En hoe ziet het er uit in Firefox?


Om de layout te zien: http://www.schonhose.nl/layout/

Ik heb me al verdiept in het boxmodel, maar daar kan het naar mijn idee niet aanliggen.

edit:

[quote]André schreef op 21 oktober 2004 @ 09:48:
[ot]Je plaatjes doen het niet[/][/quote]

Oeps. Ik blok het gebruik van pictures van mijn site op andere sites... even ergens anders heenzetten...

[ Voor 22% gewijzigd door Schonhose op 21-10-2004 09:52 ]

[André]

offtopic:
Je plaatjes doen het niet

[PowerFlower]

Als ik er even snel naar kijk, dan denk ik dat dit komt doordat IE altijd de newlines ziet als karakter; vandaar dat er wat ruimte ontstaat links en rechts, waardoor de middelste achtergrond "uitsteekt" tot onder de hoekjes vandaan.
Boven werkt dat wel goed want daar staat:

code:

<div class="NewsBoxHeaderContainer">
    <div class="NewsBoxHeader"><h2>New layout V2</h2></div>
</div>

Maar onder staat:

code:

<div class="NewsBoxFooterContainer">
    <div class="NewsBoxFooter">
        <div class="NewsLeftFooterHeader"><b>Posted by Dennis on 13-11-2004</b></div>
        <div class="NewsRightFooterHeader"><div class="RightFooterHeaderContent"><b>0 comments</b></div></div>
    </div>

Dus het zou misschien wél goed kunnen gaan als je er van maakt:

code:

<div class="NewsBoxFooterContainer">
    <div class="NewsBoxFooter"><div class="NewsLeftFooterHeader"><b>Posted by Dennis on 13-11-2004</b></div><div class="NewsRightFooterHeader"><div class="RightFooterHeaderContent"><b>0 comments</b></div></div>
</div>

Overigens niet handig om tekst met een relatieve grootte in een imageblokje met harde pixelgrootte te zetten, want aangezien ik 1600x1200 draai en dus de dpi van mijn schermlettertypes aangepast heb, zie ik het lijntje herhalen.

[ Voor 28% gewijzigd door PowerFlower op 21-10-2004 10:12 ]

[André]

Als ik in div.NewsBoxFooterContainer de height: 24px; weghaal gaat het goed, hoe het dan in FF gaat kan ik niet testen.

[Schonhose]

PowerFlower schreef op 21 oktober 2004 @ 10:11:
Dus het zou misschien wél goed kunnen gaan als je er van maakt:

code:

[...]

Dit werkt helaas dus niet. Ik kon geen andere constructie bedenken dan de onderstaande om te doen wat ik wil.

code:

<div class="NewsBoxFooterContainer">
        <div class="NewsBoxFooter">
            <div class="NewsLeftFooterHeader"><b>Posted by Dennis on 13-11-2004</b></div>
            <div class="NewsRightFooterHeader">
                <div class="RightFooterHeaderContent"><b>0 comments</b></div>
            </div>
        </div>
    </div>

code:

div.NewsBoxFooterContainer {
    height: 24px;
    background: url(winter/ftr_news_mid.gif) repeat top left;
}

div.NewsBoxFooter {
    height: 24px;
    background: url(winter/ftr_news_leftcol.gif) no-repeat bottom left;
}
/* IE HACK for positioning image at the left footer */
* html div.NewsBoxFooter {
        margin-left: 4px;
}

div.NewsLeftFooterHeader {
    float: left;
    padding-left: 10px;
    padding-top: 4px;
    height: 16px;
}

div.NewsRightFooterHeader {
    float: right;
    background: url(winter/ftr_news_rightcol.gif) no-repeat bottom right;
    padding-right: 30px;
    height: 24px;
}
/* IE HACK for positioning image at the right footer Header */
* html div.NewsRightFooterHeader {
        margin-right: 2px;
}

div.NewsRightFooterHeaderContent {
    padding-top: 4px;
    width: 200px;
    height: 16px;
    text-align: right;
}

De div.NewsRightFooterHeaderContent zit er alleen maar in de om de beide teksten op 1 lijn te brengen.

Overigens niet handig om tekst met een relatieve grootte in een imageblokje met harde pixelgrootte te zetten, want aangezien ik 1600x1200 draai en dus de dpi van mijn schermlettertypes aangepast heb, zie ik het lijntje herhalen.

Kun je me daar een screendump van geven?

[ Voor 24% gewijzigd door Schonhose op 21-10-2004 10:38 ]

[X-Lars]

Schonhose schreef op 21 oktober 2004 @ 10:27:
[...]

De div.NewsRightFooterHeaderContent zit er alleen maar in de om de beide teksten op 1 lijn te brengen.

Kun je daar dan niet beter gewoon een span (= inline) van maken:

code:

<div class="NewsBoxFooterContainer">
        <div class="NewsBoxFooter">
            <div class="NewsFooterHeader"><b>Posted by Dennis on 13-11-2004</b>
            <span class="NewsFooterNogwat">0 comments</span></div>
        </div>
    </div>

[crisp]

Gebruik geen paddings maar margins en geef je floats een display: inline om de double-margin bug van IE te omzeilen; die hacks kunnen er dan uit

[ Voor 11% gewijzigd door crisp op 21-10-2004 10:39 ]

[Schonhose]

André schreef op 21 oktober 2004 @ 10:19:
Als ik in div.NewsBoxFooterContainer de height: 24px; weghaal gaat het goed, hoe het dan in FF gaat kan ik niet testen.

Dan ben ik mijn afbeelding kwijt in FF aan de linkerkant.

Wel grappig idd... in FF moet ik de height dus expliciet opgeven en in IE dus niet om het te laten werken.

Cascading Stylesheet:

div.NewsBoxFooterContainer {
        height: 24px;
    background: url(winter/ftr_news_mid.gif) repeat top left;
}
/* IE HACK (don't know why but it works? */
* html div.NewsBoxFooterContainer {
        height: auto;
}

@X-Lars.. dat is wel een goed idee eigenlijk. Ik zal dat wel even verder proberen uit te werken.

crisp schreef op 21 oktober 2004 @ 10:39:
Gebruik geen paddings maar margins en geef je floats een display: inline om de double-margin bug van IE te omzeilen; die hacks kunnen er dan uit

Zijn paddings en margins onderling uitwisselbaar?

[ Voor 18% gewijzigd door Schonhose op 21-10-2004 10:42 ]

[PowerFlower]

Schonhose schreef op 21 oktober 2004 @ 10:27:
[...]
Kun je me daar een screendump van geven?

Sure...

[Schonhose]

PowerFlower schreef op 21 oktober 2004 @ 10:44:
[...]
Sure...

[afbeelding]

Thanks, ik zal dat in de uiteindelijke versie maar even aanpassen.

[crisp]

Schonhose schreef op 21 oktober 2004 @ 10:40:
[...]
Zijn paddings en margins onderling uitwisselbaar?

Nee, niet altijd.
In jouw geval heb je zie ik toch wel paddings nodig, echter begrijp ik de "IE HACKS" niet in je CSS; als ik die weglaat ziet het er bij mij goed uit...

[Schonhose]

crisp schreef op 21 oktober 2004 @ 10:48:
[...]

Nee, niet altijd.
In jouw geval heb je zie ik toch wel paddings nodig, echter begrijp ik de "IE HACKS" niet in je CSS; als ik die weglaat ziet het er bij mij goed uit...

Als ik die IE hacks weghaal dan is mijn div.NewsBoxFooterContainer voor IE aan beide kanten 4 pxs te groot. In Firefox is dit niet het geval. De afbeeldingen worden goed weergeven in FF, maar in IE dus niet

Ik heb even die nieuwe newslayout CSS geupload, met nog een IE hack (height: auto) en nu doet alles het wel in de layout:

http://www.schonhose.nl/layout/
en in de losse file
http://www.schonhose.nl/layout/newslayout.html

Toch ben ik wel zeer benieuwd naar jouw oplossing zonder IE hacks, Crisp....

[ Voor 7% gewijzigd door Schonhose op 21-10-2004 11:06 ]