--- title: "hamnar på olika plats i webläsare" type: "forum-thread" url: "https://www.webforum.nu/amne/html-css/148183-hamnar-på-olika-plats-i-webläsare" topic: "HTML & CSS" topic_url: "https://www.webforum.nu/amne/html-css" author: "bortglömd" published: "2006-06-18T13:24:55.000Z" updated: "2006-06-25T18:42:03.000Z" replies: 37 views: 1539 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/148183-hamnar-på-olika-plats-i-webläsare" --- # hamnar på olika plats i webläsare _Sida 1 av 2._ ## #1 — bortglömd, 2006-06-18T13:24Z Hej! jag har ett jobbigt problem med css, det är så att min meny hamnar i olika höjd i olika webläsare och eftersom jag har en linje under menyn precis så ser det hemskt ut då menyn hamnar över den ibland. någon som vet hur man kan lösa detta? jag lägger upp min kod så att ni kan läsa den... diven som den ligger i heter menu i layout.css och själva koden för menyn ligger i menu.css jag tycker att det är lustigt att den hamnar på olika höjd eftersom jag använder pixlar, räknar webläsarna pixlar på olika sätt lr vadå? layout.css ``` /* CSS Document */ body{ margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; } #top{ background-color:#000000; height:150px; padding-left:25px; padding-right:25px; padding-top:25px; padding-bottom:0px; } #innertop{ position: absolute; margin-right:auto; margin-left:auto; background-image:url(img/top_bg.jpg); background-repeat:repeat-x; width:92%; height:125px; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom: 0px; } #search{width:220px; position:absolute; right:10px; top:10px; color:#FFFFFF; } #line{ background-image:url(img/line_green.jpg); background-repeat:repeat-x; height:20px; } #menu{ width: auto; height:42px; position:absolute; right:20px; color:#FFFFFF; font-size:12px; top: 117px; } #kolumn1 {float: left; width: 200px;} #kolumn2 {float: left; width: 200px;} .searchbutton{ background-image: url(img/button_green.jpg); height:23px; border:1px solid #000000; font-size:10px; } ``` menu.css ``` /* CSS Document */ #meny li{display: inline; list-style-type: none;} #meny a{padding: 7px; text-decoration: none;} #meny a:link{color: #ffffff; background: #000000;} #meny a:visited{color: #ffffff; background: #000000;} #meny a:hover{ background-image:url(img/menu_bg_green.jpg);} #meny a#current{background: #6a8b4e; color: #000000;} ``` Permalänk: https://www.webforum.nu/p/148183 ## #2 — aron, 2006-06-18T14:01Z > **bortglömd skrev:** > > ... > jag tycker att det är lustigt att den hamnar på olika höjd eftersom jag använder pixlar, räknar webläsarna pixlar på olika sätt lr vadå?... Är det mellan IE och en annan webbläsare som skilnaden uppstår? Det är i sånna fall antagligen W3C box model vs "border" box model som gör att det blir olika. Vid "border" box model räkans även ramen och marginalen med i höjden vilket det inte gör i W3C box model. Mycket inte roligta att upptäcka denna dåliga implementation.. edit: verkar inte vara det hmm :OO Permalänk: https://www.webforum.nu/p/1830277 ## #3 — bortglömd, 2006-06-18T14:19Z okej, hur ser en W3C box modell ut då? om det är nu är skillnad mellan boxarna. nåja, jag har precis börjat med css. Permalänk: https://www.webforum.nu/p/1830279 ## #4 — aron, 2006-06-18T14:43Z W3C box modell räknar inte med ramen och marginalen i höjden, bara paddingen och innehållets höjd. Om du typ söker på det så får du säkert se en fin bild som jämför dem. searchbutton har t.ex. både en height och en border.. vilket kan göra en pytte lite skilnad, testa utan border, är problemet kvar?, men jag tror det är nåt annat som spökar. Permalänk: https://www.webforum.nu/p/1830283 ## #5 — aron, 2006-06-18T14:49Z Få se nu, är det #line som är linjen?, den är inte absolut positionerad och eftersom absolut positionerade element tas bort från dockument flödet så har dom ingen influens på linjen. Sätt den till absoulut också och under det den ska vara under. Kan det bli rätt tro? Permalänk: https://www.webforum.nu/p/1830288 ## #6 — bortglömd, 2006-06-18T15:40Z okej, det verkade bli rätt i opera nu men nu flög den istället upp en kanske 10px i IE antar att det har något med mina paddings i #innertop att göra, där jag satte top, right och left till ett värde, finns det ngt bättre och enklare sätt att sätta tre sidor till ett värde? Permalänk: https://www.webforum.nu/p/1830297 ## #7 — aron, 2006-06-18T15:57Z Man kan skriva det kortare: padding: 10px 10px 0px 10px; Det är i ordningen top-right-bottom-left Man kan också skriva: padding: 5px 10px; för att få top-bottom till 5px och right-left till 10px. Men det ändrar inte på någonting. Permalänk: https://www.webforum.nu/p/1830303 ## #8 — zcorpan, 2006-06-18T18:52Z En gissning är att det är olika standardmarginaler på vissa element som du inte har angett. Testa ange 'margin-top' och 'margin-bottom' på de element som verkar problematiska. Permalänk: https://www.webforum.nu/p/1830333 ## #9 — bortglömd, 2006-06-19T16:25Z Tack har testat det men det hjälper inte så valde att lägga upp två printscreens, den ena från ie där menyn är för högt upp och den i firefox där den ligger rätt... för att kanske kunna få några tips.. jag har även lagt till en blå bakrund på #menu i layout.css för att göra det enklare att se. den första bilden är ie och den andra firefox. Bilagor: - [ie.jpg](https://www.webforum.nu/a/11134.jpg) - [firefox.jpg](https://www.webforum.nu/a/11135.jpg) Permalänk: https://www.webforum.nu/p/1833320 ## #10 — tanten, 2006-06-19T16:40Z tror att ul känner sig lite bortglömd :) prova sätt \#meny ul{ margin: 0px; } Permalänk: https://www.webforum.nu/p/1833321 ## #11 — bortglömd, 2006-06-19T17:03Z det gjorde tyvärr ingen skillnad :( Permalänk: https://www.webforum.nu/p/1833324 ## #12 — caya, 2006-06-19T18:45Z minska höjden på ul... annars prova \* html #meny ul { internet explorer-specifika värden } Permalänk: https://www.webforum.nu/p/1833352 ## #13 — jarvklo, 2006-06-19T19:44Z Hmm... För att slippa gissa mer... Har du möjlighet att lägga upp hela HTML-koden (och CSS-filerna) för den del av sidan du skärmdumpade ? position:absolute kan nämligen vara trixig att felsöka i blindo såhär iom att det handlar om relativ positionering gentemot föräldern och inte gentemot webbläsarfönstret samtidigt som vissa webbläsare under vissa förutsättningar inte alltid betett sig riktigt som det var tänkt (och dessutom beroende på vald \ Permalänk: https://www.webforum.nu/p/1833381 ## #17 — jarvklo, 2006-06-19T20:45Z Ahh... Konstaterar följande: 1) Problemet kommer sig av att #meny ligger inne i #head samtidigt som #head har en padding-top... (detta gör att en skillnad mellan webbläsarna hur position:absolute hanteras tydligen utlöses - tar jag bort padding-top från #head försvinner en del av problemet vad jag kan se) 2) En del av problemet kommer sig också av att du har samma id - #meny - på både en div och en ul. (varje id-värde du väljer måste vara unikt i dokumentet och kan alltså inte återanvändas mellan element) Så jag testade följande: 1) Flyttade ner #meny efter #head i HTML-koden 2) Tog bort id="meny" från \-taggen i menyn 3) satte margin:0 och padding:0 på ul och li Detta gav inte en perfekt sida - men illafall en där MSIE och FF visar likadant resultat... Hoppas det går att bygga vidare på - om inte, fråga igen :birp Permalänk: https://www.webforum.nu/p/1833395 ## #18 — bortglömd, 2006-06-19T21:04Z en fråga att bara, tar man bort id="meny" från \ taggen försvinner ju själva strukturen på meny så hur löste du det? Permalänk: https://www.webforum.nu/p/1833404 ## #19 — jarvklo, 2006-06-19T21:35Z Hmm... Jag orkade inte gå igenom den delen av din kod eftersom jag upptäckte att större delen av problemet utlöstes av andra saker - men du kan antingen hitta på ett nytt id för div-taggen som idag har id=meny, eller för ul-taggen som idag (också) har id=meny och därefter ändra din CSS så att den använder rätt stil kopplat till rätt typ av element... ;) Permalänk: https://www.webforum.nu/p/1833414 ## #20 — caya, 2006-06-19T21:42Z > **bortglömd skrev:** > > testat att ändra höjden på ul vilket inte verkade hjälpa men vad menar du med internet explorer specifika värden? ja anpassad kod till internet explorer förstås, ie lyssnar på \* html vilket inte de andra webbläsarna gör. med andra ord kan du sätta upp specifika värden just för ie. praktiskt? jajamen tex det här med margin-padding. ie läser margin+padding+width=bredd medan andra läser width = bredd, margin = marginal, padding = avstånd inuti till nästa element. genom att ange andra värden på margin för tex ie resp ff får du en sida som beter sig bättre i flera webbläsare... nu känns klockan sen och inlägget därmed flummigt men som sagt, sök på box model och lyssna på herr järvklo - han har en hel del vettigt att säga Permalänk: https://www.webforum.nu/p/1833416 --- Tråden på webben: https://www.webforum.nu/amne/html-css/148183-hamnar-på-olika-plats-i-webläsare Nästa sida: https://www.webforum.nu/amne/html-css/148183-hamnar-på-olika-plats-i-webläsare/page2.md