[css]probleem met divs

[paragon]

Ik ben met een simpele pagina bezig, maar toch wil ik dat het perfect werkt in IE6.x Moz 1.x en Opera 7.x. Het navigatie gedeelte heb ik in eerste instantie in een tabel gezet, ja ik weet het daar zijn tabellen niet voor bedoelt maar het was even makkelijker, bestaande uit 1 rij. In Opera en IE wordt het weergegeven zoals bedoelt alleen in Mozilla is de table 1px te lang en op de een of andere manier 1px naar links geplaatst.

http://www.fscrl.com/new/fp1.php

Ik toch maar zo sportief geweest om het navigatie gedeelte in div te zetten alleen stuit ik dan op het probleem van een dubbele border bij aangrenzende divs. In het onderstaande linkje staat ook alle css die gebruikt wordt voor de navigatie balk weergegeven

http://www.fscrl.com/new/bar.php

Ik denk laat ik de div versie een in de pagina plaatsen om te zien of het prolbeem van de verschoven pixel is opgelost. Antwoord ja alleen is de weergave in mozilla nu echt belabberd geworden. Terwijl Opera en IE dus alleen een probleem hebben met die dubbele borders maar das logish

http://www.fscrl.com/new/fp2.php

[crisp]

waarschijnlijk allemaal veroorzaakt door het boxmodel verschil.
Probeer dit eens in je CSS erbij te zetten:

Cascading Stylesheet:

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ik moet zeggen dat ik de laatste tijd steeds meer gebruik maak van meerdere stylesheets omdat ik het 'hacken' om om de tekortkomingen van IE heen te komen een beetje zat ben...

[paragon]

Hmm dat is het niet want het wordt nu helemaal een drama in Mozilla. Bij het gebruik van xhtml in strict modus zijn de problemen met het boxmodel volgens mij niet meer van toepassing of iig sterk verminderd. Wat die hack van jou doet is het niet optellen van bijv padding en borders aan de afmetingen van een element dus zoiets als ie 5.0 en 5.5 ook doen.

http://www.fscrl.com/new/fp3.php

[ Voor 6% gewijzigd door paragon op 25-09-2003 11:16 ]

[crisp]

Sorry, niet gezien dat je XHTML strict gebruikte. Nu surf ik hier met IE5.5 en die heeft ook nogal wat probleempjes met XHTML strict, dus ik kan eigenlijk niet goed een vergelijk maken. Ook vanwege proxy kan ik niet even in Mozilla koekeloeren.
Het lijkt me toch wel goed mogelijk om dit in IE6 en Mozilla / Opera goed te krijgen...

[paragon]

Ja ik kan natuurlijk ook weer een js'je schrijven om de css in Mozilla aan te passen maar dat doe ik liever niet.

[ Voor 4% gewijzigd door paragon op 25-09-2003 11:23 ]

[crisp]

paragon schreef op 25 September 2003 @ 11:22:
Ja ik kan natuurlijk ook weer een js'je schrijven om de css in Mozilla aan te passen maar dat doe ik liever niet.

Dan kan je beter 2 stylesheets maken en met js de juiste stylesheet linken...

[paragon]

Hoe maak ik dan een goed onderscheid tussen IE+Opera aan de enekant en en Moz aan de andere kant of kan het beter serverside gebeuren?

[Ramon]

ben ik nou gek of is de oplossing hier heel simpel?
je doet toch gewoon border-left: 1px bij allemaal en bij de laatste doe je border-right: 1px; ?

[crisp]

paragon schreef op 25 september 2003 @ 11:27:
Hoe maak ik dan een goed onderscheid tussen IE+Opera aan de enekant en en Moz aan de andere kant of kan het beter serverside gebeuren?

JavaScript:

if (document.all) {
  // IE | Opera
} else {
  // echte browser
}

Tampie schreef op 25 september 2003 @ 11:27:
ben ik nou gek of is de oplossing hier heel simpel?
je doet toch gewoon border-left: 1px bij allemaal en bij de laatste doe je border-right: 1px; ?

tsja, het is een oplossing, maar in mijn ogen niet helemaal optimaal. Je wilt gewoon gebruik maken van de border-collapse property, of anders child-selectors willen gebruiken, maar IE schiet hierin nogal tekort...

[paragon]

uhm nee zo simpel is het dus niet. omdat de classes veranderen aan de hand van de actieve pagina. In dat geval zou je dus 4 verschillende div classes moeten maken. En als je dus naar http://www.fscrl.com/new/fp2.php kijkt zie je dat het div menu nog meer problemen oplevert in mozilla.

heb dus maar de js truc toegepast

[ Voor 7% gewijzigd door paragon op 25-09-2003 11:46 ]

[crisp]

Cascading Stylesheet:

div {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

div.link {  float:left;
        width:130px;
        padding:3px;
        border-right:1px solid #000;
        background-color:#aaa;
        font-weight:bold;
        text-align:center;
        border-collapse: collapse;
}

div.linkact {   float:left;
        width:130px;
        padding:3px;
        border-right:1px solid #000;
        background-color:#a84e5a;
        font-weight:bold;
        text-align:center;
}

#nav {  position:relative;
    left:0px;
    width: 781px;
    height: 21px;
    border: 1px solid #000;
    border-right-width: 0px;
}

zowel in IE5.5, Mozilla 1.3 en Opera 7 ziet het er bij mij goed uit. IE6 kan ik hier niet testen helaas, mogelijk moet je dan toch transitional gebruiken. Andersom krijg je 'm strict (W3C boxmodel) ook wel goed, maar dan zal IE5.5 en lager het ws niet meer goed doen...

[ Voor 12% gewijzigd door crisp op 25-09-2003 11:56 ]

[paragon]

Hmm thanx, maar op de een of andere manier flipt opera er nu van...zal vanavond weer eens verder gaan nu even van de laatste zonnestralen genieten