--- title: "CSS och Firefox" type: "forum-thread" url: "https://www.webforum.nu/amne/html-css/138148-css-och-firefox" topic: "HTML & CSS" topic_url: "https://www.webforum.nu/amne/html-css" author: "ptr_lks" published: "2005-11-23T20:01:32.000Z" updated: "2005-11-24T14:09:03.000Z" replies: 22 views: 549 page: 1 pages: 2 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/138148-css-och-firefox" --- # CSS och Firefox _Sida 1 av 2._ ## #1 — ptr_lks, 2005-11-23T20:01Z hej hopp.. denna sida: ser annorlunda ut i FF och IE 1. texten "Pojkar P93´s hemsida" är längre åt vä i FF 2. Texten "Nyheter" skall vara längst åt vänster - vilket den inte är i FF 3. när jag klickar i menyn så blir det i FF prickade sidolinjer. Dessa vill jag ej ha´ Bifogar koden för att spara utrymme Bilagor: - [kod_meny.txt](https://www.webforum.nu/a/8560.txt) Permalänk: https://www.webforum.nu/p/138148 ## #2 — oskob, 2005-11-23T21:24Z Är det du som har gjort sidan? Permalänk: https://www.webforum.nu/p/1714462 ## #3 — ptr_lks, 2005-11-23T22:27Z > **oskob skrev:** > > Är det du som har gjort sidan? japp... varför undrar du? Permalänk: https://www.webforum.nu/p/1714495 ## #4 — oskob, 2005-11-24T01:38Z Hehe, nej jag förstod inte om du ville ha hjälp med kod eller om du bara var arg på att den inte fungerade i FF. 1\. En sak jag inte begriper är varför texten blir större i Explorer. Och eftersom du har puttat texten med &npsp; så blir det ju längre avstånd iom att storleken är större. Jag hade nog använt padding-left: xx i css:en istället för att knuffa med mellanslag. 2\. Testa att lägga till clear: both på style6 som nyheter ligger i för att den ska hoppa ner. 3\. Frågan är om det går att få bort på smidigt sätt. Det är ju FF som tycker att man ska kunna se området man klickat på. Kanske går med något trix. R: Ang. 1. Du har använt x-large i din css för att ange storleken. Antagligen har FF och IE olika åsikter om hur stort det ska bli. Kanske lika bäst att köra i punkter eller liknande. Permalänk: https://www.webforum.nu/p/1714535 ## #5 — webbebba, 2005-11-24T08:36Z 1\. Ta bort mellanslag och styr med padding som osob sa (och så hade du glömt ett ";" efter sans-serif). Lägg även till lite padding-top ``` .style1 {font-family: Verdana, Arial, Helvetica, sans-serif; padding-left:whatever antal px; padding-top:10px; } ``` 2\. lägg till text-align: left; ``` .style6 {color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: left; } ``` 3\. Jag kan inte se några prickade linjer i Firefox. Permalänk: https://www.webforum.nu/p/1714578 ## #6 — ptr_lks, 2005-11-24T09:03Z > **webbebba skrev:** > > 1\. Ta bort mellanslag och styr med padding som osob sa (och så hade du glömt ett ";" efter sans-serif). Lägg även till lite padding-top > > > ``` > .style1 > {font-family: Verdana, Arial, Helvetica, sans-serif; > padding-left:whatever antal px; > padding-top:10px; > } > ``` > > > > > 2\. lägg till text-align: left; > > > ``` > .style6 > {color: #000000; > font-family: Verdana, Arial, Helvetica, sans-serif; > text-align: left; > } > ``` > > > 3\. Jag kan inte se några prickade linjer i Firefox. Nu är jag noob på css, så jag har ngra frågor: 1. du skapade en klass väl (.style6) vilka fördelar har detta jämfört med använda tex h6? 2. fördelar att använda padding istället för ``` h6{ position: absolute; top: 100px; left: 200px; } ``` Permalänk: https://www.webforum.nu/p/1714584 ## #7 — webbebba, 2005-11-24T09:48Z > \# du skapade en klass väl (.style6) Nej den klassen fanns i din kod så jag bara modifierade den lite. Sedan vet jag inte vad det skall bli av "nyheter" så därför är det svårt att svara på din fråga om vad som är bäst. Permalänk: https://www.webforum.nu/p/1714599 ## #8 — ptr_lks, 2005-11-24T09:53Z > **webbebba skrev:** > > Sedan vet jag inte vad det skall bli av "nyheter" så därför är det svårt att svara på din fråga om vad som är bäst. den är tänkt som ett exempel på en rubrik... Skillnaden mellan > padding-left och ``` { position: absolute; top: 100px; left: 200px; } ``` [Enligt](http://www.tizag.com/cssT/padding.php) så > A padding is the space between an element's border and the content within it. Så¨frågan är om inte positionering passar bättre Permalänk: https://www.webforum.nu/p/1714601 ## #9 — webbebba, 2005-11-24T10:06Z ``` # h1 { font-family: georgia, verdana, arial, sans-serif; font-size: 15px; font-weight: normal; letter-spacing: .05em; color: #BE7815; padding: 0; } # p { font-family: georgia, verdana, arial, sans-serif; font-size: 12px; color: #000; text-align: left; } ``` Ovan ser du hur man kan formatera rubriker och brödtext med CSS istället för att skapa en lite mystisk klass. Padding använder du för att få luft runt texten. Permalänk: https://www.webforum.nu/p/1714606 ## #10 — ptr_lks, 2005-11-24T10:15Z Men är det korrekt att skriva så här (se röd fet) ``` # h1 { font-family: georgia, verdana, arial, sans-serif; font-size: 15px; font-weight: normal; [red][B]position: absolute;[/B][/red] [red][B]top: 100px; [/B][/red] [red][B]left: 200px; [/B][/red] letter-spacing: .05em; color: #BE7815; padding: 0; } # p { font-family: georgia, verdana, arial, sans-serif; font-size: 12px; color: #000; [red][B]position: absolute;[/B][/red] [red][B]top: 100px; [/B][/red] [red][B]left: 200px; [/B][/red] } ``` Permalänk: https://www.webforum.nu/p/1714609 ## #11 — webbebba, 2005-11-24T10:37Z Med ``` position: absolute; top: 100px; left: 200px; ``` anger du att en box eller en div positioneras 100px från toppen och 200px från vä kanten på sidan. Anger du detta för både rubrik och brödtext så hamnar allt s a s på samma ställe. Försök att titta på hur man enkelt bygger upp en layout med css t ex här: :) Permalänk: https://www.webforum.nu/p/1714617 ## #12 — ptr_lks, 2005-11-24T10:49Z > **webbebba skrev:** > > Med > > ``` > position: absolute; > top: 100px; > left: 200px; > ``` > > anger du att en box eller en div positioneras 100px från toppen och 200px från vä kanten på sidan. Anger du detta för både rubrik och brödtext så hamnar allt s a s på samma ställe. Försök att titta på hur man enkelt bygger upp en layout med css t ex här: :) jag skrev naturligtvis fel koordinater, men principen... Permalänk: https://www.webforum.nu/p/1714620 ## #13 — Insider, 2005-11-24T10:50Z > **ptr_lks skrev:** > > ... så Så¨frågan är om inte positionering passar bättre Jo, du har förstått rätt när det gäller padding och hur den ska användas. Men jag skulle nog föreslå att du ökar marginalen istället. Alltså; ``` span.style5 {margin-left:200px;} ``` Jag har märkt att många blandar ihop margin och padding, men i det här fallet är det ju marginalen man vill påverka. > Men är det korrekt att skriva så här: > \# h1 {} > \# p {} Nej, # h1 och # p är fel. Skriv bara h1{} och p{}. Permalänk: https://www.webforum.nu/p/1714623 ## #14 — ptr_lks, 2005-11-24T10:56Z > **Insider skrev:** > > Men jag skulle nog föreslå att du ökar marginalen istället. Alltså; > > ``` > span.style5 {margin-left:200px;} > ``` > > Jag har märkt att många blandar ihop margin och padding, men i det här fallet är det ju marginalen man vill påverka. varför marginaler och inte ``` position: absolute; top: 100px; left: 200px; ``` kan du förklara lite din kod; ``` span.style5 {margin-left:200px;} ``` Permalänk: https://www.webforum.nu/p/1714626 ## #15 — Insider, 2005-11-24T11:59Z > **ptr_lks skrev:** > > varför marginaler och inte > > ``` > position: absolute; > top: 100px; > left: 200px; > ``` > > kan du förklara lite din kod; > > ``` > span.style5 {margin-left:200px;} > ``` Varför positionering och inte margin??? :) Hursomhelst, absolut positionerade element tas bort ur dokumentflödet och då riskerar man att något annat hamnar under om man inte är försiktig. Det självklara valet i ditt fall är att öka vänstermarginalen. span.style5 betyder att alla \ element med klassnamnet style5 ska få en marginal mot närmsta vänsterkanten med 200 pixlar. Permalänk: https://www.webforum.nu/p/1714637 ## #16 — ptr_lks, 2005-11-24T12:05Z > **Insider skrev:** > > span.style5 betyder att alla \ element med klassnamnet style5 ska få en marginal mot närmsta vänsterkanten med 200 pixlar. Men är det samma sak som: ``` .style5{ margin-left:200px;} och text ``` Permalänk: https://www.webforum.nu/p/1714638 ## #17 — Insider, 2005-11-24T13:19Z > **ptr_lks skrev:** > > Men är det samma sak som: > > ``` > .style5{ > margin-left:200px;} > och text > ``` När du bara skriver .style5{} påverkar du ALLA element som har klassnamnet style5, inte bara *SPAN.* Det beror på vad du vill göra. Permalänk: https://www.webforum.nu/p/1714654 ## #18 — ptr_lks, 2005-11-24T13:19Z Efter lite letande har jag hittat info på Detta verka funka där ```

This is a paragraph with a specified top margin

``` Kommer det att fungera även i andra browsers än IE och med XHTML, fast jag inte anger alla "margin-properties"? Permalänk: https://www.webforum.nu/p/1714655 ## #19 — muskot, 2005-11-24T13:32Z Ett bra förstasteg är att validera HTML- och CSS-koden. Permalänk: https://www.webforum.nu/p/1714656 ## #20 — ptr_lks, 2005-11-24T13:37Z > **muskot skrev:** > > Ett bra förstasteg är att validera HTML- och CSS-koden. > > > Klistrat in i rutan > Enter the CSS you would like validated: Och [får till svar](http://jigsaw.w3.org/css-validator/validator?text=.min+%7B%0D%0Amargin-top%3A+300px%3B%0D%0Amargin-left%3A+100px%3B%0D%0A%7D%0D%0A%0D%0A%0D%0A&usermedium=all) Betyder detta att CSS är rätt? Permalänk: https://www.webforum.nu/p/1714658 --- Tråden på webben: https://www.webforum.nu/amne/html-css/138148-css-och-firefox Nästa sida: https://www.webforum.nu/amne/html-css/138148-css-och-firefox/page2.md