webForumDet fria alternativet

hamnar på olika plats i webläsare

HTML & CSS

37 svar · 1 500 visningar · startad av bortglömd · sida 2 av 2

Frågan, av bortglömd

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

Läs frågan i sin helhet →
Medlem sedan nov. 20051 596 inlägg
#21

Tror klockan är sen för flera. Lyssna på Jarvklo men inte på id-pratet. Tror han läst fel och trott att det står meny, när det står menu så du behöver inte ändra det.
Felet beror på annat och detta med positionering till fönster eller förälder är ett större problem. Linjen är också fel. Din meny ligger under den i FF så det ser bara ut som den ligger rätt...
Funderar vidare i morgon om ... felet finns kvar då.

Medlem sedan nov. 20051 596 inlägg
#22

Har tittat lite mer på din kod nu, och om man ökar textstorleken några steg i FF så ser man att fyra divar lägger sig över varandra på ett sätt som inte är så bra vid första den första menylänken. Skulle helst vilja ändra så det blir naturligt flöde på divvarna men då blir det kanske att börja om från början helt... Någon annan lösning har inte jag... :(
De röda markeringarna på bilden visar divvar med absolut positionering. Du kan då också se att searchboxen lägger sig med en del utanför sidan och tvingar fram en sidoscroll...

absolut.jpg
Medlem sedan mars 200633 inlägg
#23

hmm, det där ser ju inte allt för bra ut men jag är med på att börja om, om du förklarar vad naturligt flöde på divarna innebär, bättre att få det rätt nu än att felen börjar hopa sig senare.

Medlem sedan mars 200633 inlägg
#24

så, någon som kan förklara vad naturligt flöde på divar innebär?

Medlem sedan dec. 20042 245 inlägg
#25

Normalt flöde innebär i korthet att elementet i fråga inte har 'position:absolute', 'position:fixed', 'float:left' eller 'float:right'.

Medlem sedan mars 200633 inlägg
#26

hmm, okej... någon som kan visa lite hur det fungerar?
som om jag har min gamla kod, hur får jag meny och sök div dit jag vill med hjälp av normalt flöde?

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;
}
Medlem sedan nov. 20051 596 inlägg
#27

Nu hade jag inte sett ditt senaste inlägg utan knölade istället med din meny ;) Den var knölig... och om du är ny i css så rekommenderar jag inte dig att lägga ner för mycket energi på att försöka förstå alla IEspecifika * saker i den. För hoppningsvis ska man inte behöva koda så här så länge till. Men jag tror den fungerar i IE7.
Tillsammans med menyn lade jag in din randbild och de två kolumnerna under.
Jag är lite av en float-left fantast och vill gärna använda mig av det i ur och skur :h Varför, ja för att divarna ska lägga sig under varandra om fönstret blir smalt, så man slipper sidoscroll. Det går att dra ihop sidan nu tills menyn blir för bred då kommer scrollen...
Jag gjorde det mest för att du skulle se vad som händer när du ändrar textstorlek och att de inte lägger sig på varandra...
Menyn har jag inte positionerat alls. Bara en class som skickar i väg menyn till höger, så i princip ska du kunna lägga in den i din andra design... tror jag. Har inte testat...
Ska titta på din andra fråga senare, om inte åskan kommer tillbaka, då åker sladdarna ur kontakten igen.
http://member.webforum.nu/9656/utanab.html

Medlem sedan mars 200633 inlägg
#28

testade din uppdatering i internet explorer 7 och då hamnade menyn helknasigt (se bifogad bild)
sen så undrar jag om det bara är att sätta in min svarta bakrund samt min lite tonade bakrund som den var förut eller om även den måste placeras på något speciellt sätt.

ie7.JPG
Medlem sedan nov. 20051 596 inlägg
#29

bortglömd skrev:

testade din uppdatering i internet explorer 7 och då hamnade menyn helknasigt (se bifogad bild)
sen så undrar jag om det bara är att sätta in min svarta bakrund samt min lite tonade bakrund som den var förut eller om även den måste placeras på något speciellt sätt.

Men det var ju märkligt. Om du raderar white-space:nowrap; . .meny så händer samma sak i IE6...
så då har de tagit bort ett stöd som de tidigare haft, och så har de inte lagt till stöd för (ändrat för jag menade) display:table-cell; Vet inte hur de tänkt och då kan jag inte säga annat än att det står totalt still i mitt hjärnkontor.
Eftersom jag inte laddat ner 7:an, så kan jag inte testa mig fram heller.

När det gäller din andra fråga, så känns det som att jag satt i gång något som jag inte har tid att följa upp nu. Ber om ursäkt för det... :r Men blir aldeles för stressad av alla andra måsten nu till midsommar och får inte till det med den grund du har. Ser så enkelt ut, men den har ganska mycket som tolkas olika av webläsarna och komplicerar det hela. Har bara någon stund hit och dit att titta på det och det räcker tydligen inte. Eller så är det stressen som sätter stopp för min tankeförmåga :x
Men ska det inte finnas något mer ovanför strecket...? Ingen text, ingen logga...som man också måste ta hänsyn till innan du kommer för långt. Alltid bra att ha html färdigt innan man börjar med designen.
Skulle vilja säga i dagsläget, glöm mitt "normalt flöde" och testa med sånt som float och relativ positionering och clear tills du kommit fram till något du tycker är ok i IE och FF även om de inte ser exakt likadana ut.
Vet inte om du har någon nytta av att läsa denna tutorial, men lägger in den här ändå... tycker den visar på ett bra sätt att få till det med innehåll först och design sedan...
http://friendlybit.com/css/building-niche-sites-with-standards/
och/eller kika runt i koderna på sidor som dessa och se hur de löst designen...
http://www.cssbeauty.com/
sidorna ligger till höger när du kommer in... och kan ge lite tips i koderna på placeringar av divvar.
Jag lär ha väldigt lite tid här i wf fram till mitten av nästa vecka... :(

Medlem sedan nov. 20051 596 inlägg
#30

Hann med att göra en snabbskiss, på mitt gamla vanliga sätt...med mycket float och extra divvar...för att få den någorlunda lik din... Kanske kan den ge dig någon idé om fortsatt byggande... Eftersom det åtminstone såg ut som att du gjort en design som skulle fungera i olika bredder på skärmen så fortsatte jag med det. Det ska oxå gå att öka textsorleken några steg utan större problem, men känns inte helt färdigtänkt... kanske flyttar divvarna sig lite väl tidigt. Men när man vet vad innehållet ska vara så är det lättare att veta hur man ska anpassa det... nu är det mer gissning...
Lät min förra meny ligga kvar, fast den inte fungerade i IE7, någon kan kanske lösningen på den. IE kan egentligen bara hovra över text och för att få den att hovra över en hel bakgrund/li så måste man hitta på en massa trix och fix för det. Jag hade ju hoppats att den i det här fallet skulle läsa css som de andra webläsarna... Men enligt det man kan läsa så ska den klara hover nu...
Du har väl senaste versionen av 7:an? Ska titta på det igen senare nästa vecka...när tid kommer
Alternativet kan vara javascript...
Ha en skön midsommar :birp
http://member.webforum.nu/9656/skiss.html

Medlem sedan mars 200633 inlägg
#31

det är helt förståligt om du har/är upptagen i midsommar det har även jag själv varit men jo det ska finns en en logo i vänstra hörnet av innertop, kollade även runt lite på internet, bl.a. allas våran veerle's blog (http://veerle.duoh.com/index.php/blog/comments/the_xhtml_css_template_phase_of_my_new_blog_part_2/) på menyn där man kan se att veerle's meny fungerar i alla webläsare men vad jag kan se hittar inte jag några speciella saker med den menyn så det vore väldigt snällt om någon visste hur man ska få det att fungera i ie 7.
hittade även en intresant artikel på veerle om phantom space i ie7, ska testa detta nu på menyn:
http://veerle.duoh.com/index.php/blog/comments/internet_explorer_7_and_phantom_spaces/
hoppas att ni har haft en trevlig midsommar, det har åtminstonde jag haft!

tyvärr så verkar problemet kvarstå trots att man tar bort alla space och break.

Medlem sedan nov. 20051 596 inlägg
#32

metoden veerle använt sig av i sin blog, kallas för sliding doors... Finns nog en hel del att hitta på nätet om det...

Medlem sedan nov. 20051 596 inlägg
#33

Tänkte till lite ;) fast jag fortfarande inte har tid... verles meny eller matrix använder en enda stor bild för både text och bakgrunder. Det finns ju inte en chans att få li att lägga sig på annat sätt än horisontellt. Men vill du ha det så? Har användaren bilder avstängda eller inte kan se dem, så är de svåra att hitta... Går ju inte att använda alt heller.
Har surfat runt lite men inte hittat någon direkt lösning på IE7-problemet.
Eftersom jag inte kan testa så vore det intressant att få höra eller se med skärmdump hur t.ex den här sidan ser ut i 7:an
http://exploding-boy.com/images/cssmenus/menus.html

Medlem sedan mars 200633 inlägg
#34

hehe, det är väldigt snällt :)
testade din sida i ie7 där den ser lika dan ut som i firefox så jag snodde helt enkelt en av menyerna för att testa den på min egna design då den blev lika fel som tidigare menyer, så då gjorde jag helt enkelt ett litet test och provade att skapa ett eget dokument med menykoden då den fungerar så det måste vara något i koden på min design som strular till det för menyn och lägger den som den gör i ie7, så antagligen är det inte menyn som strular utan någon annan del av koden.

Medlem sedan nov. 20051 596 inlägg
#35

Måste bara ställa en följdfråga... när du testade menykoden i eget dokument, hade du med linjen då? Problemet från början var ju placeringen av menyn i förhållande till den.
Så jag undrar är vi tillbaka på ruta 1 igen nu? :birp för IE

Medlem sedan mars 200633 inlägg
#36

ja, linjen var med när jag testade men problemet kvarstår även då jag tar bort den. Men om man kollar på sidan i dreamweaver så ser den även där fel ut, det kanske den ska göra men frågar ändå. kolla bifogad bild.

dw.jpg
Medlem sedan nov. 20051 596 inlägg
#37

När det gäller dreamweaver eller något annat sådant program så har jag ingen aning hur det kan eller ska se ut. Använder bara anteckningar själv :-) Och FF:s och IE:s web developers toolbar... :)
Ett sista försök från min sida då, eftersom jag inte kan testa själv.
Lägg menyn i en div till, t.ex <div id="menu">

#menu{ height: auto; width: 100%; float: right;}

Om 7:an inte klarar auto på height och fortfarande lägger li över varandra så sätt då en höjd med em. Kanske kan diven tvinga menyn att lägga sig på bredden i stället för på höjden med det.

Läst i några andra forum att problemet finns. Där uppmanas folk att strunta i 7:an tills den är ute på riktigt... Kanske du får göra med, eller nöja dig med texthover tills den är ute så man vet vad man har att rätta sig efter.
Eller att du gör en egen stylesheet för IE7, såg att verle gjort det på sin sida...

Medlem sedan mars 200633 inlägg
#38

nåja det hjälpte inte mer än att det såg mer "riktigt" ut i dreamweaver så tills vidare låter vi det se ut som det gör i ie7, jag får tacka för att du har tagit dig tid att försöka hjälpa mig :)

291 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
143 ms — deklarationer (db)
0 ms — hämta statistik (cache)
144 ms — hämta tråd, inlägg och bilagor (db)
140 ms — ändringar (db)