Problem med <ul> listor i olika webbläsare

Permalänk
Medlem

Problem med <ul> listor i olika webbläsare

Hej!

Jag kör denna koden för att ändra line-height i en <ul> lista, men till exempel firefox visar annorlunda höjd än till exempel Chrome

Är det en bugg, kan man lösa problemet?

ul { font-family: "Trebuchet MS", Verdana, Helvetica, Arial; font-size: 11px; line-height: 19px; }

EDIT: Googlat runt en massa nu men får inte rätt på det, blir galen ^^

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk
Medlem

Prova att köra en css reset-fil först.

http://meyerweb.com/eric/tools/css/reset/

Permalänk
Medlem
Skrivet av materka:

Prova att köra en css reset-fil först.

http://meyerweb.com/eric/tools/css/reset/

Så jag ska ha 2 CSS filer?

reset.css och style.css?

Spelar de roll om jag har @CHARSET "ISO-8859-1"; i toppen på style.css?

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk
Medlem
Skrivet av materka:

Prova att köra en css reset-fil först.

http://meyerweb.com/eric/tools/css/reset/

Eller så använder man webbläsarens defaultstilar till sin fördel. För jag antar att flashen vill ha marginal på sina stycken, bullets på sina listor och monospace på sina kodbitar. Och vill hen inte det så ändrar hen det förmodligen i sin egen CSS.

Permalänk
Medlem
Skrivet av You:

Eller så använder man webbläsarens defaultstilar till sin fördel. För jag antar att flashen vill ha marginal på sina stycken, bullets på sina listor och monospace på sina kodbitar. Och vill hen inte det så ändrar hen det förmodligen i sin egen CSS.

Mjo de är en ganska avancerad lista jag gör, (dynamisk i PHP)

Så <ul> står fritt som vanligt men <li> är:

<ul> <li class="test1"><div>dynamiskt innehåll</div></li> <li class="test2"><div>dynamiskt innehåll</div></li> <li class="test3"><div>dynamiskt innehåll</div></li> </ul>

Så där är 3 li-classer i min CSS som styr de olika <li> taggarna med 3 olika list-style-image: bild

Men de ska väll inte spela någon roll när de kommer till list-CSSen ^^ Får läsa vidare

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk
Medlem

* {margin: 0; padding: 0;}
body {margin: 0; padding: 0;}

Detta längst upp i ditt css-dokument borde vara till hjälp.

Visa signatur

Citera mig för svar!
[ASUS Sabertooth P67] [Intel Core i5 2500K @ 4.2ghz] [Gigabyte Radeon 7970]
[16GB Corsair Vengeance @ 1600Mhz] [Corsair Force Series 3 GT 120GB] [Seagate Barracuda 1TB 7200RPM]
[Corsair Obsidian 800D] [Corsair CX V2 600W]

Permalänk
Medlem
Skrivet av Nuffing:

* {margin: 0; padding: 0;}
body {margin: 0; padding: 0;}

Detta längst upp i ditt css-dokument borde vara till hjälp.

Provar och återkommer

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk
Medlem
Skrivet av You:

Eller så använder man webbläsarens defaultstilar till sin fördel. För jag antar att flashen vill ha marginal på sina stycken, bullets på sina listor och monospace på sina kodbitar. Och vill hen inte det så ändrar hen det förmodligen i sin egen CSS.

Förvisso, dock så kan det ju vara bra att prova en reset först för att se om det ger någon positiv skillnad, och sedan anpassa den för sina egna behov.

Permalänk
Medlem
Skrivet av materka:

Förvisso, dock så kan det ju vara bra att prova en reset först för att se om det ger någon positiv skillnad, och sedan anpassa den för sina egna behov.

Personligen tycker jag det är bättre att ha koll på vad man gör istället för att slänga på margin/padding: 0 på alla element.

Permalänk
Inaktiv
Skrivet av Nuffing:

* {margin: 0; padding: 0;}
body {margin: 0; padding: 0;}

Detta längst upp i ditt css-dokument borde vara till hjälp.

body {margin: 0; padding: 0;}

behövs inte då * även väljer body.

Permalänk
Medlem

guttersnipe och You säger två saker, jag är förvirrad

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk
Medlem
Skrivet av flashen:

guttersnipe och You säger två saker, jag är förvirrad

Vi är av två olika åsikter. I grunden säger guttersnipe att du bör använda en CSS-reset som "ångrar" de defaultinställningar olika webbläsare har, för då blir det homogent mellan webbläsare. Jag påstår att detta är en dålig idé, eftersom defaultstilarna finns där av en anledning, och att man ändå bör skriva över de ändringar en CSS-reset gör i sin egen stilmall. Den här artikeln förklarar min åsikt ganska väl.

Jag skulle dessutom vilja ifrågasätta behovet av att saker ser exakt likadana ut i alla webbläsare. Kommer någon besökare någonsin upptäcka att ditt <li>-element är 2px högre i Chrome än det är i Firefox?

Permalänk
Medlem
Skrivet av You:

Vi är av två olika åsikter. I grunden säger guttersnipe att du bör använda en CSS-reset som "ångrar" de defaultinställningar olika webbläsare har, för då blir det homogent mellan webbläsare. Jag påstår att detta är en dålig idé, eftersom defaultstilarna finns där av en anledning, och att man ändå bör skriva över de ändringar en CSS-reset gör i sin egen stilmall. Den här artikeln förklarar min åsikt ganska väl.

Jag skulle dessutom vilja ifrågasätta behovet av att saker ser exakt likadana ut i alla webbläsare. Kommer någon besökare någonsin upptäcka att ditt <li>-element är 2px högre i Chrome än det är i Firefox?

Ah okej tack för svaret

De sista du skriver är intressant, självklart kan man strunta i det och låta det vara som det är. Men jag vill ha det perfekt (så nära man kan komma) då det är ett ganska stort projekt jag jobbar på.

Men om det visar sig vara helt omöjligt så får jag väll låta det gå, men det vill jag egentligen inte

EDIT: Kör lite tester i natt och återkommer i morgon

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk

Som tidigare nämnt, använd dig av:

* {
margin: 0px;
padding: 0px;
}

Det brukar man i regel alltid skriva in när man gjort en ny css-fil.
Om du kommer använda dig av css3-standarden, så vill du nog använda dig av PIE för att få det att funka i IE också:)

Visa signatur

"Don't believe everything you think. Believe you don't think everything. Repeat."

Permalänk
Medlem
Skrivet av Nathanael:

Som tidigare nämnt, använd dig av:

* {
margin: 0px;
padding: 0px;
}

Det brukar man i regel alltid skriva in när man gjort en ny css-fil.
Om du kommer använda dig av css3-standarden, så vill du nog använda dig av PIE för att få det att funka i IE också:)

Tack, ska köra lite tester ikväll

EDIT: Provade att lägga till det men samma fel kvarstår

EDIT2: Hittade en lösning, använder mig av "background-image:" taggen och tar bort själva list stylen för att sedan positionera ut bakgrunden

Nu ser det bra ut i alla webbläsare, är detta ett CSS hack? Känns inte så där bra Men de verkar fungera

EDIT3: Fungerar även i IE6 wop wop

body { font-family: "Trebuchet MS", Verdana, Helvetica, Arial; font-size: 11px; margin-left: 20px; } ul { list-style-type: none; padding: 0; margin: 0; } .test1 { background-image: url('test1.gif'); padding-top: 6px; background-repeat: no-repeat; background-position: 0px; padding-left: 18px; } .test2 { background-image: url('test2.gif'); padding-top: 6px; background-repeat: no-repeat; background-position: 0px; padding-left: 18px; } .test3 { background-image: url('test3.gif'); padding-top: 6px; background-repeat: no-repeat; background-position: 0px; padding-left: 18px; }

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk
Medlem
Skrivet av You:

Personligen tycker jag det är bättre att ha koll på vad man gör istället för att slänga på margin/padding: 0 på alla element.

För att citera Eric Mayer:

Citat:

The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.

In other words, this is a starting point, not a self-contained black box of no-touchiness.

Och som jag även sa tidigare, att man bör anpassa efter sina egna behov. Inte bara trycka in reseten och sedan får det vara bra.

Om man nu vill ha koll på vad man gör så känns det lite knepigt att låta webbläsaren bestämma en massa värden, och som även är inkonsekventa över olika webbläsare.

Och nu känns det som det blivit lite off topic så jag ger mig där.

Permalänk
Medlem
Skrivet av materka:

För att citera Eric Mayer:

Och som jag även sa tidigare, att man bör anpassa efter sina egna behov. Inte bara trycka in reseten och sedan får det vara bra.

Om man nu vill ha koll på vad man gör så känns det lite knepigt att låta webbläsaren bestämma en massa värden, och som även är inkonsekventa över olika webbläsare.

Och nu känns det som det blivit lite off topic så jag ger mig där.

Grejen är väl att man vill ha marginaler ändå, så att först ta bort alla för att direkt sätta dem känns lite meningslöst..

Skickades från m.sweclockers.com

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Grejen är väl att man vill ha marginaler ändå, så att först ta bort alla för att direkt sätta dem känns lite meningslöst..

Skickades från m.sweclockers.com

Om man inte bryr sig om att marginaler får olika värden på olika element över olika webbläsare så är det ganska meningslöst att använda en reset, ja.

Permalänk
Medlem
Skrivet av materka:

Om man inte bryr sig om att marginaler får olika värden på olika element över olika webbläsare så är det ganska meningslöst att använda en reset, ja.

Säg att jag använder pre, p, ul och li på en sida. Jag vill att dessa ska ha marginaler (och paddings).
Antingen sätter jag marginal och padding på dessa element till det jag vill ha, eller så gör jag som du föreslår och sätter marginal och padding till 0, för att sedan sätta marginal och padding till vad jag vill ha.

Notera att slutresultatet är precis, exakt på pixeln detsamma. Enda skillnaden är att jag gör det två gånger med en reset och (ofta) tvingar besökare att ladda en helt meningslös reset-fil.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Säg att jag använder pre, p, ul och li på en sida. Jag vill att dessa ska ha marginaler (och paddings).
Antingen sätter jag marginal och padding på dessa element till det jag vill ha, eller så gör jag som du föreslår och sätter marginal och padding till 0, för att sedan sätta marginal och padding till vad jag vill ha.

Notera att slutresultatet är precis, exakt på pixeln detsamma. Enda skillnaden är att jag gör det två gånger med en reset och (ofta) tvingar besökare att ladda en helt meningslös reset-fil.

Personligen så vill jag gärna ha en egen reset där jag själv deklarerar basvärden. Om vi nu i detta fallet har en pre,p,ul,li så har jag en resetfil som ger dessa element basvärden(padding,margin,line-height etc.) som jag själv har valt. Sedan om jag vill lägga på fler värden som background,color etc. samt klasser,id:n så gör jag det i en separat fil. På så vis så deklarerar jag inte om saker som margins eller paddings (om nu inte klasser eller id:n gör det)
Och jag tar smällen att användaren får ladda en fil till som tar 150 ms extra.

Så gör jag, funkar för mitt arbetssätt och ingen behöver göra likadant om man tycker det är ett dåligt sätt att göra det på.

Permalänk
Medlem
Skrivet av materka:

Personligen så vill jag gärna ha en egen reset där jag själv deklarerar basvärden. Om vi nu i detta fallet har en pre,p,ul,li så har jag en resetfil som ger dessa element basvärden(padding,margin,line-height etc.) som jag själv har valt. Sedan om jag vill lägga på fler värden som background,color etc. samt klasser,id:n så gör jag det i en separat fil. På så vis så deklarerar jag inte om saker som margins eller paddings (om nu inte klasser eller id:n gör det)
Och jag tar smällen att användaren får ladda en fil till som tar 150 ms extra.

Så gör jag, funkar för mitt arbetssätt och ingen behöver göra likadant om man tycker det är ett dåligt sätt att göra det på.

Ok men då är det ju ingen "reset" som diskuteras här Sätter du egna basvärden så är det ju egen styling det handlar om, det jag tyckte lät underligt var att först sätta allting till 0 (vilket är vad resets brukar göra) för att i nästa vända sätta de värden man egentligen vill ha. Det blir dubbelt jobb till ingen nytta.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Men hur fungerar en reset-fil då?

Som jag skrev innan, är det en separat reset.css fil som man lägger ovanför style.css?

Utveckla gärna det tekniska även om det kanske är två läger när det kommer till frågan

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk
Medlem
Skrivet av Teknocide:

Ok men då är det ju ingen "reset" som diskuteras här Sätter du egna basvärden så är det ju egen styling det handlar om, det jag tyckte lät underligt var att först sätta allting till 0 (vilket är vad resets brukar göra) för att i nästa vända sätta de värden man egentligen vill ha. Det blir dubbelt jobb till ingen nytta.

Jag utgår alltid från Eric Meyers resetfil men anpassar den efter behov och sätter de basvärden jag vill ha, därav att jag kallar den resetfil.
Som jag förstått det så ska man väl egentligen göra så, och inte blint bara trycka in en generell resetfil.
Hehe stackars Flashens tråd vart en "Resetfilens vara eller icke vara" .(Underrrubrik: Vad är egentligen en resetfil )

Permalänk
Medlem
Skrivet av flashen:

Men hur fungerar en reset-fil då?

Som jag skrev innan, är det en separat reset.css fil som man lägger ovanför style.css?

Utveckla gärna det tekniska även om det kanske är två läger när det kommer till frågan

Ja precis, det brukar vara en separat reset.css. Våra tidigare kommentarer speglar nog ganska bra hur du ska använda den (och inte använda den)
Men säg gärna till så får vi förklara mer.

Permalänk
Medlem
Skrivet av flashen:

Men hur fungerar en reset-fil då?

Som jag skrev innan, är det en separat reset.css fil som man lägger ovanför style.css?

Utveckla gärna det tekniska även om det kanske är två läger när det kommer till frågan

En CSS-reset är helt vanlig CSS. Jag argumenterar för dess meningslöshet medan guttersnipe ser användningsområden om man anpassar den efter ens behov. Jag tror vi är överens om att * { margin:0; padding:0; } är "skadligt". Det är detta som din tråd nu handlar om

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Men om den webbplatsen jag jobbar på nu fungerar till 99% likadant i alla upplösningar samt Firefox Opera Chrome Safari Explorer 8-9 (Expolorer 6 fungerar hjälpligt med separat CSS - user agen check etc.)

Ska jag börja bry mig om vad ni säger och se över hela min CSS som är ganska stor (över 1000 rader) då? Eller ni menar att det ska implementeras vid start och bygga projekt runt om till exempel en reset.css?

Förlåt om jag ställer dumma frågor men detta var extremt intressant

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk
Medlem

Det är snarare extremt ointressant. CSS-reset är inget magiskt på något sätt. Det gör inget som inte väldesignad CSS gör. Det ÄR helt vanlig (jävla) CSS.
Om din site fungerar och du är nöjd med hur den är byggd så blir den inte bättre av en reset, garanterat.

Skickades från m.sweclockers.com

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Hehe

Menade mest att det var intressant att det fanns över huvudtaget, tack för alla svar! Blivit klokare i ämnet

Visa signatur

▩ Monitor: ASUS Swift 27" @ 1440p/165Hz ▩ CPU: Ryzen 7700X ▩ Cooling: Corsair H170i ELITE 420mm ▩ GPU: MSI 3080 Ti SUPRIM X ▩ Memory: Corsair 32GB DDR5 Vengeance ▩ Motherboard: ASUS Crosshair X670E Hero ▩ M.2: Samsung 980 Pro ▩ PSU: Corsair HX1200 ▩ Chassi: Corsair 7000X ▩ Geekbench 6: 2903 ▩ Time Spy: 19 340

📷 Mina fotografier
👍 SweClike - Synligare färg på dina likes

Permalänk
Medlem

<!--[if gte IE 1]>
<link href="iespecific.css" rel="stylesheet" media="screen" type="text/css" />
<![endif]-->

Man kan ha denna kod i <head> för att säga: om webbläsaren är IE 1 eller högre, använd denna css, iespecific.css (döp till vad man vill).

Angående * och body så bör man ha båda om man ska resetta i toppen av sin CSS. Alla webbläsare uppfattar inte * på ett perfekt sätt och då kan man ha body som en säkerhetsgrej.

Visa signatur

Citera mig för svar!
[ASUS Sabertooth P67] [Intel Core i5 2500K @ 4.2ghz] [Gigabyte Radeon 7970]
[16GB Corsair Vengeance @ 1600Mhz] [Corsair Force Series 3 GT 120GB] [Seagate Barracuda 1TB 7200RPM]
[Corsair Obsidian 800D] [Corsair CX V2 600W]