CSS: crossbrowser problemen...

[brecko]

Hey,

Ik ben begonnen aan het restylen van onze huidige basketsite.
(voor de geïnteresseerden: huidige site

niet verschieten, deze kan perfect doorgaan voor meest crappy website van de eeuw, daarom dat ik er mij eens ga mee moeien

nieuw ontwerp

nu goed, ik ben pas begonnen aan de site, maar ik zit nu al met browsercross-problemen:

*menu: verschil in marge langs de linkerkant..
*inhoud: problemen met margin-top van zowel de <p> als de <h's> en de <hr>

ik heb al geprobeerd met underscore hack, maar die blijkt niet te werken in IE7.

Kan er iemand eens kijken naar mij css en mij helpen het probleem te achterhalen?

(let nog niet op lay-out, dat wordt wel nog naar een deftiger niveau getild )

alvast enorm bedankt

[orez]

browserscross????
Crossbrowser dus

[Xavez]

And now I'm crosseyed .

Begin met je code naar je doctype te schrijven zou ik zo zeggen. Indien je nog niet zo goed met xhtml omkan, stel ik voor dat je met html 1.0 begint in plaats van 1.1. Je moet dus al je tags sluiten, onder andere ook je <hr>-tag (wat niet het geval is).

Verder is je CSS echt een ramp. Daar wil ik mijn handen zelfs niet aan vuil maken . #logo {float: left;} zal ongetwijfeld al voor problemen zorgen in IE. Verder heb je hééél gekke positioneringen. Je kan best zo weinig mogelijk een absolute positionering meegeven, dat zorgt alleen maar voor problemen. Zeker als je ook nog eens begint met negatieve margins en dergelijke. Iets als

#footer	{position:absolute;
    	left: 50%; 
   	top: 50%;
   	width: 160px;
   	height:22px;
   	margin-top: 348px; 
   	margin-left: -350px;
   	}

Is gewoon gedoemd om mis te lopen .

[brecko]

ik heb al eerder gemerkt dat mijn manier van positioneren niet dé manier is
nochtans hebben wij dit zo vorig jaar gezien op school. (higro)

bon ik zal me dus eerst wat verdiepen in positionering met css.
als je hier nog wil zeggen wat correct zou zijn (dus ipv mijn zotte css- positionering ), doe gerust, ik zal er niet van sterven.

ook een link specifiek naar positionering tuts mag altijd.

bedankt voor de reactie al!

browserscross????
Crossbrowser dus

awel ja

[KoenDK]

#logo {float: left;} zal ongetwijfeld al voor problemen zorgen in IE.

niet als hij er een width en height bij zet...



verder versta ik het toch niet goed hoor


uw menu moet toch 136px van de top zijn hé ?

dan doe je toch gewoon margin-top: 136px; ipv margin-top: -136px;

:/



als je trouwens een div (menu of eender wat) in het midden wil (horizontaal)
doe dan gewoon margin:auto;


ik zie trouwens ook dat je _margin-top: 100px; gebruikt ipv margin-top: 100px;




en

border: 0;
border-top: 1px solid #b81212;

gaat nooit werken :-)


weet zelfs niet wat je hiermee wil bereiken


misschien wil je
border-top: 1px solid #b81212;
border-bottom: none;
border-left: none;
border-right: none;

[Xavez]

de underscore-hack is wel voor IE neem ik aan . Ik zal sffs wat meer info geven brecko .

[brecko]

thanks, wat het is toch wel zeer vervelend om dat niet te kunnen zoals het moet...

kheb er nu al wa voort zitten aan sleutelen.... (hr, h's en p even terug 'ongestijld')

ja idd ik gebruikte de underscore hack, maar die lijkt niet te werken op IE7, klopt dat?

wat ik mij ook nog steeds afvraag, hoe kan je een div element een minimale hoogte geven, maar vanaf je die hoogte overschrijdt door je inhoud ze de hoogte automatisch laten aanpassen? (alsook de hoogte van uw evt sidebar)

bedankt alvast!

[Xavez]

Hoe ik het zou aanpakken:

HTML:

* een grote, onzichtbare, allesomsluitende container-div
* een header-div
* een menu-div
* een content-div

Meer heb je niet nodig . Ik heb je code even herschreven (kwartiertje werk). Je kan hem op http://livegraphics.eu/projects/merchtemeagles bekijken. De CSS code heb ik van commentaar voorzien om je een idee te geven hoe we meestal positioneren. Zoals je kan zien is het soms een stuk eenvoudiger dan je denkt .

[brecko]

hoe kan ik u in godsnaam bedanken???

edit: is het mogelijk om die footer iets meer naar onder te laten komen, zodat de container onderaan de ronde hoeken van de afbeelding heeft?

[Xavez]

Gewoon in de CSS de achtergrondkleur van de footer op #000 zetten ipv #fff zou dat moeten oplossen .

[brecko]

thanks

kzie dat allemaal veel te ingewikkeld in, inderdaad

[Xavez]

En indien je de footer meer spatiëring wil geven om hem "los" te maken van de content, kan je hem best in je html "buiten" de wrapper div plaatsen en dan een margin: 10px auto; meegeven .

[KoenDK]

wat ik mij ook nog steeds afvraag, hoe kan je een div element een minimale hoogte geven, maar vanaf je die hoogte overschrijdt door je inhoud ze de hoogte automatisch laten aanpassen? (alsook de hoogte van uw evt sidebar)

bedankt alvast!

<div style="overflow:auto; height:300; width:750;">

of die style extern in je css plaatsen

[KoenDK]

en zo leert iedereen (allé, niet iedereen ) iets bij

We vermijden padding omdat dat vaak weergavefouten geeft in IE*/



wist ik niet, nog niet gemerkt

[Quilombo]

als je trouwens een div (menu of eender wat) in het midden wil (horizontaal)
doe dan gewoon margin:auto;


ik zie trouwens ook dat je _margin-top: 100px; gebruikt ipv margin-top: 100px;

en

border: 0;
border-top: 1px solid #b81212;

gaat nooit werken :-)

waarom zou dat nie werken? tuurlijk werkt da...
iets dat meer naar onder staat in een css file overschrijft dingen die erboven staan he.

nuja, dno of border: 0; wel klopt, mss eerder dan border-width, of border: none;

en _margin-top is een IE hack

en om te centreren kan je beter het trucje van in de sticky gebruiken: margin: auto wordt niet door alle (oudere) browsers ondersteund

[Quilombo]

ontopic moet je mss eens zien naar www.positioniseverything.net
en dan vooral naar de doubled margin bug, 3px bug enzo (dno juist, heb niet naar t probleem gezien)

[Xavez]

en om te centreren kan je beter het trucje van in de sticky gebruiken: margin: auto wordt niet door alle (oudere) browsers ondersteund

Om het even op jouw onverbloemde manier te zeggen: what a load of bullshit. Noem mij één significante browser die een layout opfuckt als je margin: auto; gebruikt?

[KoenDK]

hehe :d

[Quilombo]

Om het even op jouw onverbloemde manier te zeggen: what a load of bullshit. Noem mij één significante browser die een layout opfuckt als je margin: auto; gebruikt?

IE 5

ok, vertegenwoordigt maar 3% vd markt, maar als je die er zonder enige problemen kan bijnemen, waarom zou je het NIET doen?

[Xavez]

IE 5

ok, vertegenwoordigt maar 3% vd markt, maar als je die er zonder enige problemen kan bijnemen, waarom zou je het NIET doen?

En bekijk ook vooral de algemene tendens met de maandelijkse afname van het percentage IE5-surfers.

margin: auto; fuckt de layout niet in IE5, ze zal enkel niet gecentreerd staan en dat is niets onoverkomelijk. Je kan niet tot in het oneindige rekening houden met oudere browsers. Een reden om het niet te doen? Meer eenvoudige, meer transparante code en minder bytes .