webForumDet fria alternativet
Logga in / Bli medlem

hamnar på olika plats i webläsare

HTML & CSSur HTML, XHTML & CSS

37 svar · 1 498 visningar · startad av bortglömd

bortglömdMedlem sedan mars 200633 inlägg
Frågan#1

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;}
aronMedlem sedan mars 2004485 inlägg
#2

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

bortglömdMedlem sedan mars 200633 inlägg
#3

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.

aronMedlem sedan mars 2004485 inlägg
#4

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.

aronMedlem sedan mars 2004485 inlägg
#5

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?

bortglömdMedlem sedan mars 200633 inlägg
#6

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?

aronMedlem sedan mars 2004485 inlägg
#7

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.

zcorpanMedlem sedan dec. 20042 245 inlägg
#8

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.

bortglömdMedlem sedan mars 200633 inlägg
#9

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.

ie.jpgfirefox.jpg
tantenMedlem sedan nov. 20051 596 inlägg
#10

tror att ul känner sig lite bortglömd :)
prova sätt
#meny ul{ margin: 0px; }

bortglömdMedlem sedan mars 200633 inlägg
#11

det gjorde tyvärr ingen skillnad :(

cayas avatarcayaMedlem sedan aug. 20051 448 inlägg
#12

minska höjden på ul...
annars prova
* html #meny ul { internet explorer-specifika värden }

jarvkloMedlem sedan juli 20013 378 inlägg
#13

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 <!DOCTYPE ), vilket gör att det t.ex. kan spela in vilken div din #meny ligger i också (som du själv verkar vara inne på också)...

Så - Har du en länk till *hela* koden som ger dig de skärmdumpar du bifogade ovan så löser vi garanterat detta utan att behöva gissa fel igen pga ofullständiga fakta ;)

bortglömdMedlem sedan mars 200633 inlägg
#14

testat att ändra höjden på ul vilket inte verkade hjälpa men vad menar du med internet explorer specifika värden?

jarvkloMedlem sedan juli 20013 378 inlägg
#15

Hmm..

Vilken <!DOCTYPE kör du med?
Vilken/vilka div-block ligger menyn i HTML-kodmässigt?

... Som sagt - Visa oss hela koden så slipper vi gissa en massa ;)

bortglömdMedlem sedan mars 200633 inlägg
#16

vill ni se filerna så kan ni se dem på https://www.filewalk.com/webforum/

jarvkloMedlem sedan juli 20013 378 inlägg
#17

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 <ul>-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

bortglömdMedlem sedan mars 200633 inlägg
#18

en fråga att bara, tar man bort id="meny" från <ul> taggen försvinner ju själva strukturen på meny så hur löste du det?

jarvkloMedlem sedan juli 20013 378 inlägg
#19

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... ;)

cayas avatarcayaMedlem sedan aug. 20051 448 inlägg
#20

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

134 ms totalt · 3 externa anrop · v20260731065814-full.b746b907
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)