[CSS]CSS alleen voor Firefox verbergen - Softwareontwikkeling

zaterdag 5 november 2005 13:01

Acties:

It might get loud

Topicstarter

Hallo,

Ik heb in mijn CSS ergens een padding staan. In IE en Opera wordt die correct weergegeven, alleen Firefox weet zich er geen raad mee. Als ik het voor Firefox fix is het in die andere 2 browsers weer niet goed, dus ik wil die CSS rule voor Firefox "verbergen".

Op het moment heb ik het zo geregeld:

Cascading Stylesheet:

li ul {
padding: 5px;
}

li > ul {
padding: 0px;
}

(Het gaat hier om de welbekende suckerfish

)
Op deze manier wordt de padding alleen in IE toegepast, omdat die "parent > child" niet snapt. Echter, nu heeft Opera dus ook geen padding, terwijl die hem wel correct kan weergeven.

Kortom: ik ben op zoek naar een manier om óf een stuk CSS te laten negeren door Firefox, óf een stuk CSS alleen in Opera weer te geven. Wie weet raad? Ik heb pagina's vol moz-dit en moz-dat gelezen en hoe je CSS alleen in IE kan uitvoeren etc., maar de oplossing heb ik nog niet gevonden...

[ Voor 3% gewijzigd door sjaakaq op 05-11-2005 13:01 ]

leoaq.fm // Jeune Loop

zaterdag 5 november 2005 13:04

Acties:

crisp

Devver

Pixelated

Geef eens een volledig voorbeeld van wat er fout gaat, want volgens mij is dat gewoon netjes op te lossen op een manier die gewoon in alle browsers werkt...
Laat je de pagina overigens wel in standards compliant mode renderen (volledig doctype)?

[ Voor 4% gewijzigd door crisp op 05-11-2005 13:05 ]

Intentionally left blank

zaterdag 5 november 2005 13:06

Acties:

Verwijderd

crisp schreef op zaterdag 05 november 2005 @ 13:04:

Laat je de pagina overigens wel in standards compliant mode renderen (volledig doctype)?

Vast niet, anders zou IE vrijwel hetzelfde gedrag vertonen als Firefox.
Ik gok dat dit weer om een breedte + padding probleempje gaat. Die twee kun je beter niet tegelijk gebruiken op hetzelfde element.

zaterdag 5 november 2005 13:08

Acties:

sjaakaq

It might get loud

Topicstarter

Mijn doctype is:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Ik zal alle CSS van de suckerfish geven:

Cascading Stylesheet:

ul {
list-style: none;
padding: 0px;
margin: 0px;
}

li {
float: left;
position: relative;
width: 130px;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}

li:hover {
color: #aaa;
}

li ul {
display: none;
position: absolute; 
top: 15px;
left: -6px;
border: 1px solid #ccc;
border-top: none;
background: url('images/bg_header.gif') #212121;
text-align: center;
padding: 5px;
padding-top: 0px;
}

li > ul {
top: auto;
left: auto;
padding: 0px;
}

li:hover ul, li.over ul {
display: block;
}

Als ik die padding ook toepas in Firefox dan loopt de tekst in het "block" een stukje buiten de dat "block" door...

[ Voor 10% gewijzigd door sjaakaq op 05-11-2005 13:10 ]

leoaq.fm // Jeune Loop

zaterdag 5 november 2005 13:13

Acties:

Ansur

Kan je niet adhv. JavaScript detecteren welke browser gebruikt wordt en zo een aparte StyleSheet inladen?

zaterdag 5 november 2005 13:16

Acties:

sjaakaq

It might get loud

Topicstarter

Ja...maar dat is me iets te ranzig, dan maar Opera en Firefox geen padding

leoaq.fm // Jeune Loop

zaterdag 5 november 2005 13:18

Acties:

Verwijderd

Voor dit probleem kun je het beste

code:

1 2	box-sizing: border-box; -moz-box-sizing: border-box;

gebruiken denk ik.

zaterdag 5 november 2005 13:18

Acties:

crisp

Devver

Pixelated

Met een volledig voorbeeld bedoel ik inclusief markup; zet anders even een compleet voorbeeld online - het werkt wat makkelijker als we een idee hebben wat het beoogde effect is

Intentionally left blank

zaterdag 5 november 2005 13:19

Acties:

crisp

Devver

Pixelated

Ansur schreef op zaterdag 05 november 2005 @ 13:13:
Kan je niet adhv. JavaScript detecteren welke browser gebruikt wordt en zo een aparte StyleSheet inladen?

bah

Verwijderd schreef op zaterdag 05 november 2005 @ 13:18:
Voor dit probleem kun je het beste
code:
1
2
box-sizing: border-box;
-moz-box-sizing: border-box;
gebruiken denk ik.

bah

Intentionally left blank

zaterdag 5 november 2005 13:32

Acties:

sjaakaq

It might get loud

Topicstarter

crisp schreef op zaterdag 05 november 2005 @ 13:18:
Met een volledig voorbeeld bedoel ik inclusief markup; zet anders even een compleet voorbeeld online - het werkt wat makkelijker als we een idee hebben wat het beoogde effect is

http://zeghooreens.nl

Ik heb de CSS nu zo gezet dat alle browsers die 5px padding krijgen, dus Firefox ook.

[ Voor 3% gewijzigd door sjaakaq op 05-11-2005 13:32 ]

leoaq.fm // Jeune Loop

zaterdag 5 november 2005 18:52

Acties:

getfirefoxnow

Eeen beetje off topic, maar ik ben ook bezig met suckerfish en vroeg me af of het mogelijk is de drop down menu's met een vetraging te laten verdwijnen. Nu is het zo dat als je even buiten de grenzen van het dropdownmenu komt het dropdownmenu meteen weer verdwijnt.

zaterdag 5 november 2005 18:58

Acties:

Alex)

Niet, omdat het puur CSS is kun je geen vertragingen toepassen. Hoogstens met JS etc, maar dan is je pure-CSS-oplossing weg..

We are shaping the future

zaterdag 5 november 2005 19:11

Acties:

Verwijderd

En daarom zijn die suckerfish menu'tjes helemaal niet zo geweldig. Niet iedereen is even nauwkeurig met de muis. Daarom kun je het best óf een vertraging toepassen, óf de menu's pas weer laten inklappen als er ergens anders wordt geklikt. Javascript is hier prima geschikt voor.

zaterdag 5 november 2005 19:17

Acties:

Alex)

Maar JS is wel een slordige, browser-incompatible-oplossing (denk aan Lynx, en andere non-JS browsers.). En moeilijker bij te werken dan een list.
Een mooie oplossing zou zijn: maak een list, laad daarna een javascript in dat de functie van de list overneemt als de browser compatible is.

We are shaping the future

zaterdag 5 november 2005 19:23

Acties:

Verwijderd

Alex schreef op zaterdag 05 november 2005 @ 19:17:
Maar JS is wel een slordige, browser-incompatible-oplossing (denk aan Lynx, en andere non-JS browsers.). En moeilijker bij te werken dan een list.
Een mooie oplossing zou zijn: maak een list, laad daarna een javascript in dat de functie van de list overneemt als de browser compatible is.

Javascript is niet slordig, CSS kan net zo goed niet altijd worden ondersteund, en als je een klein beetje ervaring hebt, logisch nadenkt of probeert, heb je zo een navigatiesysteem gemaakt waarvan je mag verwachten dat het altijd werkt.
Zo werkt de navigatie van dit forum prima in Lynx. Het werkt alleen niet in een browser die CSS ondersteunt en als Javascript is uitgeschakeld. En laat de doelgroep nou gewoon snappen dat je javascript niet volledig moet uitschakelen.

Met "Javascript is slordig" en "Javascript is browser-incompatible" scoor je hier echt geen punten. Dat is gewoon klinkklare onzin. Javascript in handen van een prutser kan voor problemen zorgen, ja.

zaterdag 5 november 2005 21:33

Acties:

sjaakaq

It might get loud

Topicstarter

Zolang je die suckerfishmenu's groot genoeg maakt en geen margin/padding meegeeft aan de bovenkant moet je wel heel erg je best doen om ze te missen hoor...

Heeft iemand btw ondertussen al enig idee over mijn probleem?

Edit: ik heb het opgelost door de links een "display: block" mee te geven en die weer een padding van 5px mee te geven

Ze moesten toch al blocks worden ter ondersteuning van het leuke hover-effectje, dus dat kwam mooi uit. Maar wat nu oorspronkelijk het probleem was weet ik ook niet...

[ Voor 42% gewijzigd door sjaakaq op 05-11-2005 22:20 ]

leoaq.fm // Jeune Loop

zondag 6 november 2005 00:32

Acties:

zeekoe

Beetje mosterd na de maaltijd misschien, maar php is imo voor dit soort dingen altijd prima in te zetten. Even een header('Content-Type: text/css') aan het begin, en dan met $_SERVER['USER_AGENT'] detecteren welke browser er gebruikt wordt, en aan de hand daarvan het aangepaste stukje css meesturen. .css renamen naar .css.php en je bent klaar.
_{ik doe dit uit m'n hoofd en kan er naast zitten met de preciese teksten, maar 't idee is duidelijk...}

Nieuw huis, nieuwe (verduurzamings)kansen...

zondag 6 november 2005 00:34

Acties:

crisp

Devver

Pixelated

zeekoe schreef op zondag 06 november 2005 @ 00:32:
Beetje mosterd na de maaltijd misschien, maar php is imo voor dit soort dingen altijd prima in te zetten. Even een header('Content-Type: text/css') aan het begin, en dan met $_SERVER['USER_AGENT'] detecteren welke browser er gebruikt wordt, en aan de hand daarvan het aangepaste stukje css meesturen. .css renamen naar .css.php en je bent klaar.
_{ik doe dit uit m'n hoofd en kan er naast zitten met de preciese teksten, maar 't idee is duidelijk...}

de user-agent string is onbetrouwbaar en code daarop baseren is veelal ook niet forwards-compatible. Kortom: bad practice...

Intentionally left blank

zondag 6 november 2005 00:37

Acties:

Alex)

Opera identificeert zich standaard als IE, en dus zou je de verkeerde CSS kunnen krijgen. Voor FF is er ook zo'n uitbreiding, etc...

We are shaping the future

zondag 6 november 2005 02:26

Acties:

Verwijderd

crisp schreef op zaterdag 05 november 2005 @ 13:19:
[...]

bah

[...]

bah

Heel leuk, je bah's, maar waarom is dit bah?

Motiveren!

zondag 6 november 2005 02:54

Acties:

Gomez12

Verwijderd schreef op zondag 06 november 2005 @ 02:26:
[...]

Heel leuk, je bah's, maar waarom is dit bah?

Motiveren!

Simpel :
1e bah : browsercheck is vies en niet forward compatible. En niet simpel te doen. Mijn Firefox kan zich identificeren als IE zelfs mijn wget kan zich identificeren als IE maar dit zegt niet dat ik de goede pagina krijg.

2e bah : Hacks gebruiken die niet volgens de standaard zijn wederom niet forward compatible en dus vies. Niemand garandeert dat ze in een volgende versie werken.

Vroeger was methode 1 nog wel eens nodig omdat er geen andere manier was. Methode 2 is zo heel af en toe nog wel eens nodig, maar 99,9% van de pagina's waarin dit soort dingen gebruikt worden zijn met correcte html en css te herschrijven naar een versie die wel forward compatible is en in elke browser "zou moeten" werken.

zondag 6 november 2005 03:00

Acties:

Verwijderd

Mijn visie op die 2 bah's:

1: Je moet niet kijken naar welke browser het is. Als je al iets controleert, is dat of de browser iets kan. Dit zorgt voor veel meer zekerheid, ook voor browsers/versies/instellingen die je niet kent.

2: De box-sizing "resetten" is wel het ultieme teken dat je er totaal niet mee overweg kan, waarschijnlijk wegens gebrek aan kennis/ervaring. Overigens zie je die box-sizing properties vaak in combinatie met de * selector. Dat mag je dan als 3e "bah" zien.

zondag 6 november 2005 15:48

Acties:

zeekoe

hmz, laat ook maar...
de topicstarter is blij, einde discussie

[ Voor 89% gewijzigd door zeekoe op 06-11-2005 16:27 ]

Nieuw huis, nieuwe (verduurzamings)kansen...

zondag 6 november 2005 18:51

Acties:

sjaakaq

It might get loud

Topicstarter

Hehe feel free to continue hoor

leoaq.fm // Jeune Loop

Pagina: 1

Reageer