Archief - CSS: crossbrowser problemen...

brecko · 15 jan 2007

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 · 16 jan 2007

browserscross????

Crossbrowser dus

Xavez · 16 jan 2007

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

Code:

#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 · 16 jan 2007

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!

orez zei:
browserscross????
Crossbrowser dus

awel ja

KoenDK · 16 jan 2007

Xavez zei:
#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 · 16 jan 2007

de underscore-hack is wel voor IE neem ik aan

. Ik zal sffs wat meer info geven brecko

.

brecko · 16 jan 2007

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 · 16 jan 2007

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 · 16 jan 2007

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 · 16 jan 2007

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

.

brecko · 16 jan 2007

thanks

kzie dat allemaal veel te ingewikkeld in, inderdaad

Xavez · 16 jan 2007

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 · 16 jan 2007

brecko zei:
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 · 16 jan 2007

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 · 16 jan 2007

KoenDK zei:
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 · 16 jan 2007

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 · 16 jan 2007

Quilombo zei:
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 · 18 jan 2007

hehe :d

Quilombo · 18 jan 2007

Xavez zei:
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 · 18 jan 2007

Quilombo zei:
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

.

Archief - CSS: crossbrowser problemen...

brecko

Legacy Member

orez

Legacy Member

Xavez

Legacy Member

brecko

Legacy Member

KoenDK

Legacy Member

Xavez

Legacy Member

brecko

Legacy Member

Xavez

Legacy Member

brecko

Legacy Member

Xavez

Legacy Member

brecko

Legacy Member

Xavez

Legacy Member

KoenDK

Legacy Member

KoenDK

Legacy Member

Quilombo

Legacy Member

Quilombo

Legacy Member

Xavez

Legacy Member

KoenDK

Legacy Member

Quilombo

Legacy Member

Xavez

Legacy Member