[CSS] Margin verschil Firefox onder OSX en XP - Softwareontwikkeling

maandag 29 januari 2007 22:51

Acties:

Topicstarter

Ik ben bezig een <ul> lijstje voor een menu uit te lijnen. Dit is altijd een ramp voor verschillende browsers maar nu zie ik ook verschillen in alleen Firefox onder Windows en OSX. Ik gebruik in beide OS'en de laatste versie van Firefox, 2.0.0.1.

Ik geef een ul een margin-top van bijvoorbeeld 8px. Met Firefox in OSX staat hij dan precies op de goede plek; bij FF in Windows XP staat hij 2 pixels te laag. Uuhh

Moet ik hier nu ook hacks voor gaan gebruiken of zie ik iets helemaal over het hoofd?

dinsdag 30 januari 2007 08:40

Acties:

iworx

Gebruik je een margin-bottom bij het element erboven?

't zou net wat simpeler zijn moest je de code / url erbij plakken.

This space intentionally left blank.

dinsdag 30 januari 2007 16:39

Acties:

Waster

Volgens mij is het onmogelijk om een site in alle browsers er precies hetzelfde uit te laten zien. Of je moet alles in plaatje zetten.

Maar geef anders een link of een code. Kan namelijk aan van alles liggen.

dinsdag 30 januari 2007 19:00

Acties:

Verwijderd

Waster schreef op dinsdag 30 januari 2007 @ 16:39:
Volgens mij is het onmogelijk om een site in alle browsers er precies hetzelfde uit te laten zien. Of je moet alles in plaatje zetten. Maar geef anders een link of een code. Kan namelijk aan van alles liggen.

Op pixelnieveau heb je gelijk omdat een ul die gebruikt wordt door IE en FF niet hetzelfde zijn.maar grosso modo lukt dit als je de standaarden respecteert.
m.a.w. wat de TS wil zal nooit lukken op pixelnieveau tenzij hij images gebruikt als bullets.

woensdag 31 januari 2007 12:03

Acties:

Serenity

Topicstarter

Hier de code waar het om gaat. Ik heb een header-div, en zet het menu onderaan. Vervolgens speel ik wat met de padding van de links totdat ze de goede hoogte krijgen. Is weer net wat anders in IE, maar gaat me hier dus alleen om Firefox.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
    <title>Test</title>
</head>
<body>
    <div id="header">
        <div id="menu">
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>  
</body>
    
</html>

CSS deel hierboven eruit gehaald, hierbij als code:

Cascading Stylesheet:

#header {
    position: relative;
    width: 400px;
    height: 100px;
    border: 1px solid red;
}

#menu {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 400px;
    height: 30px;
    background-color: #d9d9d9;
}

#menu ul {
    margin: 7px 0 0 0;
    padding: 0;
}

#menu li {
    list-style-type: none;
    display: inline;
    margin: 0;
    padding: 0;
}
        
#menu a:link, #menu a:visited {
    color: #ffffff;
     font-size: 13px;
    padding: 9px 10px 8px 10px;
     background-color: #848484;
}

Resultaat: Firefox 2.0.0.1 in XP
Afbeeldingslocatie: http://i18.tinypic.com/2l9r6mq.png

Resultaat: Firefox 2.0.0.1 in OSX
Afbeeldingslocatie: http://i5.tinypic.com/2nlvkap.png

Waar komt het verschil door

woensdag 31 januari 2007 12:08

Acties:

Fuzzillogic

Cool

Misschen ergens de double-margin bug. Geef je a's een display: block, dan heb je van de breedte geen last meer. Eventueel een height: 100% dan, en met line-height gaan spelen om de tekst in het midden te krijgen.

Dat je IE en moderne browsers niet pixel-identiek kunt krijgen is onzin. Het kan wel degelijk.

woensdag 31 januari 2007 12:41

Acties:

BtM909

Watch out Guys...

Is dit niet wat je wilt:

Cascading Stylesheet:

    #header {
        position: relative;
        width: 400px;
        height: 100px;
        border: 1px solid red;
    }
    
    ul {
        position: absolute;
        left: 0;
        bottom: 0;
        width: inherit;
        height: 30px;
        margin: 0;
        padding: 0;
        background-color: #d9d9d9;
    }

    li {
        list-style-type: none;
        display: inline;
        margin: 0;
        padding: 0;
        line-height: 30px;
    }
            
    a:link, a:visited {
        padding: 9px 10px 8px 10px; 
        background-color: #848484;
        color: #fff;
        font-size: 13px;
    }

Geen menu div als je dat ook op je UL kan doen

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 31 januari 2007 12:43

Acties:

Arnold

begin je css eens met:

Cascading Stylesheet:

* {
margin: 0px;
padding: 0px;
}

woensdag 31 januari 2007 13:18

Acties:

BtM909

Watch out Guys...

GS2K1 schreef op woensdag 31 januari 2007 @ 12:43:
begin je css eens met:
Cascading Stylesheet:
1
2
3
4
* {
margin: 0px;
padding: 0px;
}

En waarom zou je dat willen

En wat lost dat hier op?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 31 januari 2007 14:24

Acties:

Fuzzillogic

Cool

BtM909 schreef op woensdag 31 januari 2007 @ 13:18:
[...]

En waarom zou je dat willen En wat lost dat hier op?

Meer ellende dan het waard is inderdaad. Niet doen dus. Bovendien is de 'px' hier overbodig

woensdag 31 januari 2007 15:03

Acties:

daniëlpunt

monkey's gone to heaven

GS2K1 schreef op woensdag 31 januari 2007 @ 12:43:
begin je css eens met:
Cascading Stylesheet:
1
2
3
4
* {
margin: 0px;
padding: 0px;
}

Waarom niet 0cm?

Ik zou dat niet doen, heel misschien wel

Cascading Stylesheet:

#menu * {
margin: 0;
padding: 0;
}

Dat bespaart een hoop rommel in de rest van je document.

woensdag 31 januari 2007 17:37

Acties:

Serenity

Topicstarter

BtM909 schreef op woensdag 31 januari 2007 @ 12:41:
Is dit niet wat je wilt:
Cascading Stylesheet:
1
2
3
4
5
6
7
<knip>
    a:link, a:visited {
        padding: 9px 10px 8px 10px; 
        background-color: #848484;
        color: #fff;
        font-size: 13px;
    }
Geen menu div als je dat ook op je UL kan doen

Dat werkt ook inderdaad

Ik krijg nu alleen nogsteeds een verschil. In OSX pas ik de link-padding aan zodat hij netjes in de hoogte van de ul past, maar dat is in XP weer 1px boven en onder teveel... Ik snap nogsteeds niet waarom dit tussen beide OS'en verschil uitmaakt. Kan ook niet echt OS-CSS-hacks vinden ofzo

woensdag 31 januari 2007 18:13

Acties:

Verwijderd

Het lettertype verschilt. Maar pixel-precies layouts bouwen is toch niet mogelijk zonder plaatjes te gebruiken. Het is ook helemaal niet de bedoeling.

woensdag 31 januari 2007 18:30

Acties:

Fuzzillogic

Cool

Serenity schreef op woensdag 31 januari 2007 @ 17:37:
[...]

Dat werkt ook inderdaad Ik krijg nu alleen nogsteeds een verschil. In OSX pas ik de link-padding aan zodat hij netjes in de hoogte van de ul past, maar dat is in XP weer 1px boven en onder teveel... Ik snap nogsteeds niet waarom dit tussen beide OS'en verschil uitmaakt. Kan ook niet echt OS-CSS-hacks vinden ofzo

Gebruik dan geen padding, maar geef het ding een vaste hoogte. Fonts zijn onbetrouwbaar omdat niet iedereen dezelfde fonts heeft. (Windows, OSX, Linux, etc)

offtopic:
En fonts een vaste grootte opgeven, zoals pixels, is eigenlijk niet nietjes.

Verwijderd schreef op woensdag 31 januari 2007 @ 18:13:
Het lettertype verschilt. Maar pixel-precies layouts bouwen is toch niet mogelijk zonder plaatjes te gebruiken. Het is ook helemaal niet de bedoeling.

Afgezien van teksten lukt het zeker wel. Veel designers snappen de ballen van CSS en denken nog in tables (als ze al denken

) Maar ze verwachten wel dat hun designs exact zo zijn als de PSD.

[ Voor 43% gewijzigd door Fuzzillogic op 31-01-2007 18:34 ]

donderdag 1 februari 2007 03:31

Acties:

bRight

digitaal

Ik weet niet hoe je totale css eruit ziet, maar heb je een line-height ingesteld?
Vaak helpt het om de juiste line-height in te stellen ipv paddings ivm boxmodel verschillen tussen browsers.

donderdag 1 februari 2007 10:35

Acties:

Verwijderd

probleem zit hem in het font. als je ook kijkt naar het plaatje zie je dat het 2 verschillende lettertype's zijn. dit heeft te maken met dat microsoft de nodige patenten en copyrights heeft op een aantal fonts waardoor appel maar ook linux/*bds etc, deze fonts niet kunnen gebruiken en dus een klein verschil onvermijdelijk is.

ook geef je in je CSS helemaal geen font op en dus valt elke browser terug naar zijn eigen default font. wat je dus zult moeten doen is of je links veranderen in images of een font selecteren wat op beide OS'en even hoog is. ik zou voor optie 1 gaan en gewoon een simpele desnoods transparente gif of png gebruiken.

donderdag 1 februari 2007 11:40

Acties:

Fuzzillogic

Cool

Verwijderd schreef op donderdag 01 februari 2007 @ 10:35:
ook geef je in je CSS helemaal geen font op en dus valt elke browser terug naar zijn eigen default font. wat je dus zult moeten doen is of je links veranderen in images of een font selecteren wat op beide OS'en even hoog is. ik zou voor optie 1 gaan en gewoon een simpele desnoods transparente gif of png gebruiken.

Sorry, maar dat is overbodig en echt ranzig. Laat je <a>'s gewoon als block renderen. Eventueel zet je de tekst er als een <span> in. Dan heb je meer dan genoeg controle om het in alle hedendaagse browsers (zelfs IE) goed te krijgen.

vrijdag 2 februari 2007 00:30

Acties:

Serenity

Topicstarter

Met display:block kan ik inderdaad gewoon een hoogte in pixels opgeven en hoef ik niet met padding te werken. Maar dan worden die block's toch altijd op een nieuwe regel geplaatst? Daarom doe ik 't bij horizontale menu's altijd met padding. Of is dat te verhelpen?

vrijdag 2 februari 2007 03:53

Acties:

Niakmo

Ik gebruik altijd line-height, zo weet ik ook namelijk zeker dat de tekst ook netjes in het midden staat.

vrijdag 2 februari 2007 09:28

Acties:

Serenity

Topicstarter

Niakmo schreef op vrijdag 02 februari 2007 @ 03:53:
Ik gebruik altijd line-height, zo weet ik ook namelijk zeker dat de tekst ook netjes in het midden staat.

Alleen met line-height vergroot je het 'oppervlak' van de link niet, waardoor je er niet echt een 'blokje' van kan maken die je met :hover mooi van kleur kan laten veranderen...

vrijdag 2 februari 2007 09:49

Acties:

daniëlpunt

monkey's gone to heaven

Je kan ook display: block; en line-height: ..px op een element doen hoor

vrijdag 2 februari 2007 11:27

Acties:

Fuzzillogic

Cool

Serenity schreef op vrijdag 02 februari 2007 @ 00:30:
Met display:block kan ik inderdaad gewoon een hoogte in pixels opgeven en hoef ik niet met padding te werken. Maar dan worden die block's toch altijd op een nieuwe regel geplaatst? Daarom doe ik 't bij horizontale menu's altijd met padding. Of is dat te verhelpen?

Jawel hoor, met float: left. Of je gebruikt absolute positionering, met de <ul> als referentiepunt (position: relative). Maar dat is alleen als je een vast aantal items hebt en de breedte bekend is.

vrijdag 2 februari 2007 13:25

Acties:

Serenity

Topicstarter

Hm inderdaad, je hebt helemaal gelijk

Cascading Stylesheet:

li {
    list-style-type: none;
    display: inline;
    margin: 0;
    padding: 0;
    line-height: 30px;
}

a:link, a:visited {
    background-color: #848484;
    padding: 0 10px 0 10px;
    display: block;
    float: left;
    color: #fff;
    font-size: 13px;
}

Dit werkt perfect! IE6-7, Opera7-9, Safari, FF2.0 (zowel OSX als XP), ziet er overal exact hetzelfde uit. Dank! $_/-\o_$