[CSS] browser selecteren

[martijn2008]

Hoi allemaal,

Ik zit met het volgende probleem Met FireFox en IE8 krijg ik een ander resultaat dan in Google Chrome.
In het CSS bestand:

voor Google Chrome wil ik het zo hebben

Cascading Stylesheet:

img.menu {vertical-align:-40%}

voor FireFox en IE

Cascading Stylesheet:

img.menu {vertical-align:-100%}

mijn website http://emmaus-cansat.110mb.com/

onder aan de pagina is in IE ook nog een probleem want dat ding ga naar top ziet er ook niet goed uit, maar als ik het op mijn pc heb staan dat bestand en ik test het in IE8 dan ziet het er wel goed uit. Is dit niet heel erg raar?

Misschien kom ik later nog meer browsers tegen, waar het ook anders is, dus heb ik graag een overzicht voor alle browsers, maar deze vind ik het belangrijkst. Omdat voorlopig mijn bezoekers alleen die browser gebruiken. (google analitycs)

[ Voor 14% gewijzigd door MueR op 09-01-2010 15:24 . Reden: Code tags toegevoegd ]

[webinn]

Probeer conditional formatting

http://www.google.com/sea...official&client=firefox-a

[ Voor 12% gewijzigd door webinn op 09-01-2010 12:05 ]

[martijn2008]

http://rafael.adm.br/css_browser_selector/

is een website, waar wel wat staan alleen had ik dus de volgende code gemaakt. Maar het werkt niet wat klopt hier niet aan?

code:

.ie img.menu {vertical-align:-100%}
.gecko img.menu {vertical-align:-100%}
.chrome img.menu {vertical-align:-40%}

[martijn2008]

webinn schreef op zaterdag 09 januari 2010 @ 12:05:
Probeer conditional formatting

http://www.google.com/sea...official&client=firefox-a

dus dan moet ik voor elke browser een appart bestand maken?? Niet het ideale maar als het werkt. Ik ga het proberen.

Het is voor IE gelukt, maar wat moet ik <!--[if IE]> in vullen voor Chrome and FireFox??

[ Voor 10% gewijzigd door martijn2008 op 09-01-2010 12:21 ]

[MueR]

martijn2008 schreef op zaterdag 09 januari 2010 @ 12:10:
dus dan moet ik voor elke browser een appart bestand maken?? Niet het ideale maar als het werkt. Ik ga het proberen

Wel ideaal. Heb je 1 leading stylesheet, met alle afwijkingen voor andere browsers netjes op een rijtje. Scheelt een hoop zoekwerk. Daarbij hoeft een browser ook de niet-relevante styling niet in te laden.

martijn2008 schreef op zaterdag 09 januari 2010 @ 12:10:
Het is voor IE gelukt, maar wat moet ik <!--[if IE]> in vullen voor Chrome and FireFox??

Geen. Conditional comments is iets wat alleen IE ondersteunt, de rest niet. IE is meestal ook de enige browser die ze nodig heeft, daar FF en Chrome bijna geen afwijking met de standaard hebben. IE daarentegen houdt er wat eigenaardige ideeen op na wat betreft rendering.

offtopic:
Zou je voortaan de edit knop kunnen gebruiken als je iets wil toevoegen aan de laatste post?

[ Voor 5% gewijzigd door MueR op 09-01-2010 15:28 ]

[MsG]

martijn2008 schreef op zaterdag 09 januari 2010 @ 12:07:
http://rafael.adm.br/css_browser_selector/

is een website, waar wel wat staan alleen had ik dus de volgende code gemaakt. Maar het werkt niet wat klopt hier niet aan?

code:

.ie img.menu {vertical-align:-100%}
.gecko img.menu {vertical-align:-100%}
.chrome img.menu {vertical-align:-40%}

Heb je dat script ook gebruikt? Of enkel de CSS selectors overgenomen? Die werken uiteraard niet zonder het script.

[mcDavid]

Je probeert een oplosing te vinden voor een probleem dat alleen maar bestaat doordat je een fundamentele ontwerpfout maakt.

Als je die border-afbeeldingen gewoon als background-image instelt, heb je heul geen vertical-align nodig.

-edit-
En als je toch bezig bent, gooi dan ook gelijk die table-layout die bol staat van de inline-styles eruit.

[ Voor 23% gewijzigd door mcDavid op 09-01-2010 16:34 ]

[martijn2008]

mcDavid schreef op zaterdag 09 januari 2010 @ 16:14:
Je probeert een oplosing te vinden voor een probleem dat alleen maar bestaat doordat je een fundamentele ontwerpfout maakt.

Als je die border-afbeeldingen gewoon als background-image instelt, heb je heul geen vertical-align nodig.

-edit-
En als je toch bezig bent, gooi dan ook gelijk die table-layout die bol staat van de inline-styles eruit.

Kan je dat in het stylesheet zetten dat van die border img? En hoe werkt dat dan??
Ik dacht dat je alleen background img zoals ik ook gedaan heb. Of wat bedoel je precies? Ik die losse plaatjes gemaakt, omdat dan het invoeren van de tekst de button automatisch groter wordt. Zou je een dan wat uitvoeriger uit kunnen geven het liefst met code, want ik snap het ff niet ... alvast bedankt

Ik weet dat met <div> werken veel professioneler staat, maar dat begreep ik toen ik begon niet echt, dus ben ik met table gaan werken, wat ik overigens gewoon fantastisch vind werken tot ik google chrome gedownload heb zag ik dat daar de website niet goed werd weer gegeven. BTW met IE zit er bij dat paypal donate plaatje ook een fout, kom ik ook maar niet achter

[MueR]

martijn2008 schreef op zondag 10 januari 2010 @ 10:16:
Zou je een dan wat uitvoeriger uit kunnen geven het liefst met code, want ik snap het ff niet ... alvast bedankt

Eigenlijk doen we dat niet, maar ik zal lief doen op de zondagochtend. Wat je wil doen is 2 achtergronden maken. Eentje van de linkerkant (met zowel boven als onderhoek) en een van de rechterkant Deze laatste moet je een stuk langer maken, zeg 200 pixels voor dit voorbeeld. Vervolgens maak je zo je html:

HTML:

<a href="#" class="menu"><span>Tekst</span></a>

En in je CSS doe je zoiets:

Cascading Stylesheet:

a.menu {
  background:transparent url(/naar/background/image/linkerkant.jpg) no-repeat left;
  padding-left:5px; /* Of hoe breed je image ook mag wezen */
}
a.menu span {
  background:transparent url(/naar/background/image/rechterkant.jpg) no-repeat right;
  display:block;
  line-height:20px; /*Of hoe hoog je image ook is */
  padding-right:5px; /* Of hoe breed je image ook mag wezen */
}

Should do the trick. Hiermee moet je iig vooruit kunnen.

Ik weet dat met <div> werken veel professioneler staat

Wrong. Je moet een layout semantisch opzetten, hoe je dat doet zal de rest van de wereld een rotzorg zijn. Een <p> element is dus een paragraaf, een menu is een lijst met navigatie opties, bijvoorbeeld een <ul> In HTML 5 komt voor die laatste overigens <nav>. Misschien wil je deze pagina een keer lezen, daar wordt het een stukje uitgelegd.

[martijn2008]

MueR schreef op zondag 10 januari 2010 @ 11:49:
[...]

HTML:

<a href="#" class="menu"><span>Tekst</span></a>

En in je CSS doe je zoiets:

Cascading Stylesheet:

a.menu {
  background:transparent url(/naar/background/image/linkerkant.jpg) no-repeat left;
  padding-left:5px; /* Of hoe breed je image ook mag wezen */
}
a.menu span {
  background:transparent url(/naar/background/image/rechterkant.jpg) no-repeat right;
  display:block;
  line-height:20px; /*Of hoe hoog je image ook is */
  padding-right:5px; /* Of hoe breed je image ook mag wezen */
}

[...]

Bedankt dat je het toch wil doen, ook al lukt het me niet. Moet ik de table weggooien??? En ik had het voor het testen gewoon ergens tussen de tekst geplaats, maar het werkt niet echt. Hoe krijg ik die achtergrond achter de tekst. Alleen aan de rechter kant wordt dat plaatje goed weer gegeven.

---

links: [...]/images/menu2.jpg
rechts: [...]/images/menu3.jpg
height:40px width:10px

---

Ook zit er een groote ruimte tussen de tekst en de afbeelding

Jammer dat er niet iets is waarmee ik de browser kan selecteren. want alleen in google chrome ipv -100% de waarde op -40% en ook dan werkt alles.

[TJHeuvel]

MueR schreef op zaterdag 09 januari 2010 @ 15:28:
Geen. Conditional comments is iets wat alleen IE ondersteunt, de rest niet. IE is meestal ook de enige browser die ze nodig heeft, daar FF en Chrome bijna geen afwijking met de standaard hebben. IE daarentegen houdt er wat eigenaardige ideeen op na wat betreft rendering.

Of is het nou juist andersom

[MueR]

@TS: Kijk eens op deze pagina. Het zijn dan wel tabjes in plaats van menu items, maar het idee is ongeveer gelijk. Met een dergelijk werkend voorbeeld moet je er uit kunnen komen lijkt me.

[martijn2008]

MueR schreef op maandag 11 januari 2010 @ 19:37:
@TS: Kijk eens op deze pagina. Het zijn dan wel tabjes in plaats van menu items, maar het idee is ongeveer gelijk. Met een dergelijk werkend voorbeeld moet je er uit kunnen komen lijkt me.

Dit was een goede tip! Maar ik heb nog 1 probleem de hoogte van de tekst is te laag
[[url bestaat niet meer]] daar staat nu wat ik gemaakt hebt. ondersteund IE8, Firefox en GoogleChrome (meer browsers heb ik niet getest) Maar ik wil de tekst dus graag in het midden hebben. Zoals dat eerst ook was.

[ Voor 3% gewijzigd door martijn2008 op 17-01-2010 15:10 ]

[MueR]

Kijk eens naar de line-height property.

[martijn2008]

MueR schreef op zaterdag 16 januari 2010 @ 14:01:
Kijk eens naar de line-height property.

ja dat had ik gedaan, maar ik heb het in procent kan dat ook in pixels of dat em
bij line-height:0%; is ie het hoogst dit vind ik supervreemd
dus hoe lager de waarde hoe hoger die is. Ennuh als ik hem op -10% doe is de hoogte ook lager. en bij 200% is ie zo laag dat ie uit het vakje verdwijnt

[ Voor 31% gewijzigd door martijn2008 op 16-01-2010 16:18 ]

[mcDavid]

Just so you know

En ja line-height kan gewoon in pixels. Net als alles. Ik zou het zelfs aanraden. Het niet-gebruiken van pixels ivm schaalbaarheid, is met de huidige browsers allang achterhaald.

[martijn2008]

maar ik krijg het dus niet hoog genoeg, best wel vreemd ga het morgen nog even proberen en dan zeg ik het wel of het gelukt is of niet.

[mcDavid]

Zo moeilijk is het niet.

De line-height + padding-top + padding-bottom moet gewoon precies even hoog zijn als het achtergrondplaatje.



Je kunt ook nog de achtergrond verticaal centreren, dan staat'ie er per definitie midden-achter.
Ook is het verstandig om een max-width mee te geven zodat je knoppen nooit breder worden dan het plaatje.
En om de achtergrondkleur op zwart te zetten, als het plaatje dan niet laad, blijft in iediederer geval de witte tekst leesbaar.

[ Voor 39% gewijzigd door mcDavid op 17-01-2010 01:28 ]

[martijn2008]

gelukt bedankt, nu alleen nog op alle pagina's (20) aanpassen.
Maar ik krijg het niet gecentreerd ik voel me nu echt een noob.
<div align="center"> [menu] </div>
<center> [menu] </div>

en in css:ul.menu {
.....;
text-align:center;
...;}

geen van drieën werkt
I am getting crazy.

Nou het is nu wel gelukt met
<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td>[menu]</td></tr></table>

[ Voor 84% gewijzigd door martijn2008 op 17-01-2010 11:22 ]

[mcDavid]

Dat kun je ook wel met google vinden hoor!

En google dan gelijk even op PHP Includes.

[martijn2008]

ja ik weet al wat dat is. Maar ik heb het nu geupload de nieuwe dinges dus ik neem aan dat ie in alle browsers het nu doet. Dit is een hele verbetering. Nu alleen nog sponsors zoeken.
Nou ik denk dat ik er zo wel uit kom. Maar die php includes vind ik niet de moeite waard. Ik zou het kunnen doen voor de footer, maar ik verander dat toch nooit in principe. Ik moet eerst weer eens de inhoud gaan updaten

bedankt voor de hulp.

[Kiphaas7]

martijn2008 schreef op zondag 17 januari 2010 @ 15:09:
ja ik weet al wat dat is. Maar ik heb het nu geupload de nieuwe dinges dus ik neem aan dat ie in alle browsers het nu doet. Dit is een hele verbetering. Nu alleen nog sponsors zoeken.
Nou ik denk dat ik er zo wel uit kom. Maar die php includes vind ik niet de moeite waard. Ik zou het kunnen doen voor de footer, maar ik verander dat toch nooit in principe. Ik moet eerst weer eens de inhoud gaan updaten

bedankt voor de hulp.

20 pagina's veranderen, en dan nog vind je php includes niet de moeite waard? Ik zou het al de moeite waard vinden zodra ik meer dan 2x dezelfde verandering moet doorvoeren...

[martijn2008]

Ja, maar dit is 1 malig ik denk niet dat ik dat nog een keer moet doen. Dus dan zou ik nu 20 pagina's moeten aanpassen en het mss niet gebruiken, dat is zonde van de tijd. En het is gewoon allepagina's openen in notepade++ en met mijn coments in de source kan je het heel snel vinden en dan gewoon copie+paste dan is het zo gedaan. En hoe gaat bijvoorbeeld google daarmee om die php includes?

[MueR]

Niet. Google heeft er niks mee te schaften, want php is serverside. Voordat Google die pagina ziet is dat al geregeld.

[martijn2008]

Op die fiets, nou dan ga ik dat wel doen, maar dat zal nog wel een paar weken duren voordat ik daar aan ga beginnen. Bedankt voor de info MueR.

[martijn2008]

Dat php include, kan je dat alleen online testen? Of kan je wel gewoon op je pc testen of alles werkt?

[Matis]

martijn2008 schreef op zondag 24 januari 2010 @ 17:08:
Dat php include, kan je dat alleen online testen? Of kan je wel gewoon op je pc testen of alles werkt?

Dan zul je WAMP (Windows) of LAMP (Linux) moeten installeren.

[ Voor 13% gewijzigd door Matis op 24-01-2010 17:12 ]

[martijn2008]

Matis schreef op zondag 24 januari 2010 @ 17:11:
[...]
Dan zul je WAMP (Windows) of LAMP (Linux) moeten installeren.

Bedankt dat is een handige tool. Maar de php include is nog niet gelukt
Ik zal in de loop van de week even laten zien wat ik heb. Mss zien jullie het gelijk ik iig niet.