16 svar · 914 visningar · startad av aasah
Jaha, efter lite trixande för att få min CSS-fil lite mer intuitiv och mindre "ihopplockad" har jag nu fått lite oväntade effekter till stånd...
Vissa delar av CSS-filen har varit med sedan jag tog mina första stapplande CSS-steg, och sedan bara byggts ut och byggts till. Nu håller jag på att överlag skaffa en bättre struktur på den genererade HTML-koden genom användande av div, id mm. I samband med detta vill jag minimera behovet att använda CSS-klasser och istället stoppa in default beteende via id:n. Sagt och gjort jag har flyttat ett antal CSS-klasser från "huvudnivån" (alltså bara definiera taggen/klassen rakt av) till att definieras till att bara gälla i menuDiv som omsluter min drop-down-meny. I samband med detta har jag även bytt lite textstorlekar och sånt. I IE funkar allt hur fint som helst! :)
Men i FF har den lodräta drop-down menyn plötsligt blivit horisontell!?!?!? :q :o
Någon som förstår varför?
//Relevant del av CSS:n
/* id=menuDiv Omsluter Drop-Down Menyn */
#menuDiv {
font-size: 14px;
}
/* menudiv a - huvudmenyn */
#menuDiv a:link {
color: #330000;
}
#menuDiv a:visited {
color: #330000;
}
#menuDiv a:hover {
color: #C48C11;
}
#menuDiv a:active {
color: #C48C11;
}
/* menudiv .sub - drop-down-bakgrunden */
#menuDiv .sub {
background-color: D6B05B;
color: #330000;
width: auto;
}
/* menudiv .submenu - drop-down-innehallet */
#menuDiv .submenu {
font-size: 12px;
}
#menuDiv a.submenu:link {
color: #330000;
text-decoration:none;
}
#menuDiv a.submenu:visited {
color: #330000;
text-decoration:none;
}
#menuDiv a.submenu:hover {
color: #DC143C;
text-decoration:none;
}
#menuDiv a.submenu:active {
color: #DC143C;
text-decoration:none;
}
#menuDiv .here { /*Kan man skriva sa har? */
color: #FFCC33;
}
/* STOP omslutning */
/* id=nav Huvudmenyns lista - ej ändrad eller påverkad på något sätt! */
#nav {
list-style: none;
padding: 0;
margin: 0;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 6em;
}
#nav li {
float: left;
width: 6em;
padding: 0.2em 0.5em 0em 0.5em;
}
#nav li ul {
position: absolute;
width: 9em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
//Utdrag ur menyn sedd från "Visa källa"
<div id="menuDiv"><ul id="nav"><li><a href="http://.../welcome.php">Point me!</a>
<ul class="sub"><li><a class="submenu" href="http://.../welcome.php"> Home</a></li></ul></li>
<li><a href="http://.../news.php">News/Info</a>
<ul class="sub"><li><a class="submenu" href="http://.../news.php"> News</a></li>
<li><a class="submenu" href="http://.../faq.php"> FAQ</a></li></ul></li>
<li><a href="http://.../chooseQuiz.php">Puzzles</a>
<ul class="sub"><li><a class="submenu" href="http://.../chooseQuiz.php"> Quizzes</a></li>
</ul></li></ul></div><br clear="all"><br>
Testa att lägga till:
#menuDiv .sub li {
float:none;
}
under
/* menudiv .sub - drop-down-bakgrunden */
#menuDiv .sub {
background-color: D6B05B;
color: #330000;
width: auto;
}
Eller så kan du kolla http://hjd.se/playground/menu.htm där jag ändrade lite andra grejer i koden också eftersom jag såg att den inte ville i IE7.
Melitta skrev:
Testa att lägga till:
#menuDiv .sub li { float:none; }
Det löste problemet! Tack! :birp
Melitta skrev:
Eller så kan du kolla http://hjd.se/playground/menu.htm där jag ändrade lite andra grejer i koden också eftersom jag såg att den inte ville i IE7.
Nyfiken som jag blev har jag kikat här ändå, och så vitt jag begriper har du ändrat på tre ställen (till). Förklara gärna förändringarna! Vad gör de? Varför är de bättre? Jag vill helst förstå varför min kod ser ut som den gör... (vilket jag i och för sig inte gör fullt ut med denna drop-down-meny, men det är något jag gärna vill ändra på).
Förresten, vadå inte ville i IE 7? Menar du att om jag ändrar enligt ovan behöver jag inte js-skriptet som fixar till drop-downen i IE? Hjälper det i så fall även IE 6? Eller hur menar du? :q
En annan - mycket retfull sak - är att länkarna under Links på den länkade sidan ovan "sticker ut" utanför subs bakgrundsfärg i FF. Jag skulle bli själaglad om jag kunde lösa det på något annat sätt än att korta länktexten. Idéer?
Jag har inte testat IE6 då jag inte har tillgång till det just nu men är ganska säker på att det ska funka även där och då utan javascript..
Ändringarna jag gjort är egentligen inge större grejer. Istället för att göra som du hade gjort och placera om sub vid hover så är min lösning placerad på samma ställe hela tiden, jag väljer istället att visa dölja sub med visibility:
#nav li ul {
position:absolute;
width: 9em;
[b]visibility:hidden;[/b]
}
#nav li:hover ul {
visibility:visible
}
#nav li:hover ul, #nav li.sfhover ul {
visibility:visible
}
En annan - mycket retfull sak - är att länkarna under Links på den länkade sidan ovan "sticker ut" utanför subs bakgrundsfärg i FF.
Hur menar du då?
Melitta skrev:
Istället för att göra som du hade gjort och placera om sub vid hover så är min lösning placerad på samma ställe hela tiden, jag väljer istället att visa dölja sub med visibility:
Åhå! Är det det min nuvarande CSS gör? Visar dem alltid, men någonstans långt utanför skärmen??? Jag har aldrig fattat vad alla dessa omflyttningar egentligen gjorde... (eller också har jag glömt det). Det låter ju onekligen vettigare att lösa det hela via visibility. Jag ska testa! :D
Melitta skrev:
aasah skrev:
En annan - mycket retfull sak - är att länkarna under Links på den länkade sidan ovan "sticker ut" utanför subs bakgrundsfärg i FF.
Hur menar du då?
Se bifogad bild: (Obs! Blir bara så i FF.)
#menuDiv .sub li {
float:none;
width:auto;
}
Trött som tusan och har ingen möjlighet att testa men det borde lösa saken..
Innan du kommer för långt med dina försök, så fungerar Melittas förslag inte i IE6.
På Stu Nicholls hemsida finns många förslag på hur man kan göra för att slippa js. Här är en kladdsida, jag håller på att jobba med. Där jag ändrat lite nu för att det ska bli liknande det du vill ha. kladd.html
Att få dropdown att fungera i IE6 så är det de insmygna tabellerna i kommentarerna som fixar det.
Kan vara som tanten säger, har iallafall uppdaterat http://www.hjd.se/playground/menu.htm så det funkar både i FF och IE7 här utan java eller liknande. Men som sagt, har ingen möjlighet att testa i IE6 tyvärr.
Melitta skrev:
#menuDiv .sub li { float:none; width:auto; }Trött som tusan och har ingen möjlighet att testa men det borde lösa saken..
Det gjorde det inte tyvärr. I alla fall inte utan att ändra de tre andra klasserna också - har inte hunnit göra det än, nämligen.
tanten - Skulle IE 6 fungera sämre med javascript om man använde visibility knepet istället för omflyttning? Eller påverkas det bara inte? Har ingen möjlighet att testa sedan min IE bestämde sig för att uppgradera sig för någon månad sedan. :(
Jag tittade lite på din meny, men vad är det eg som gör att vissa av alternativen funkar sämre i andra webbläsare än IE? Vid snabb titt såg jag inget mönster (i koden)? :q
Melitta skrev:
Kan vara som tanten säger, har iallafall uppdaterat http://www.hjd.se/playground/menu.htm så det funkar både i FF och IE7 här utan java eller liknande. Men som sagt, har ingen möjlighet att testa i IE6 tyvärr.
Perfekt! :D Ska titta närmare på den koden efter lunch!
Finns det något sätt att sparka igång js-funktionen bara för IE6? (Kanske ska fråga det i JS-forumet i stället dock....)
Annars föreslår jag en anpassning av denna som ska klara alla browsers utom IE5:
http://sperling.com/examples/menuh/
Hoppas det ordnar sig för dig :)
Kan vara som tanten säger, har iallafall uppdaterat http://www.hjd.se/playground/menu.htm så det funkar både i FF och IE7 här utan java eller liknande. Men som sagt, har ingen möjlighet att testa i IE6 tyvärr.
Fungerar inte i IE6.
Jag tittade lite på din meny, men vad är det eg som gör att vissa av alternativen funkar sämre i andra webbläsare än IE? Vid snabb titt såg jag inget mönster (i koden)?
Jag har inte sett att det fungerar i IE6 någonstans annat än antingen med javascript eller med som jag skrev förut, med att smyga in en kommentar table.
En del av min kod
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo" class="rub">Aalborg<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a
Sedan är listorna dolda med typ left:-9999px; isf. visibility
Din fråga om javascript kan jag inte svara på eftersom jag inte provat med det på menyer någon gång. Är ju lite av en fråga om tillgänglighet, om man ska undvika det, vilket jag försöker göra på sådant som t.ex. menyer... :)
Glömde säga
att hover fungerar bara på länkar i IE6, så därför gör man denna början och slut på <a href="...></a> i en tabell som i detta fall.
Missförstod din fråga om IE... Du läste texten jag skrivit... :)
Det gäller sidorna man kommer till om man väljer en sådan länk och där har de som gjort sidan inte gjort den för någon annan webläsare än IE.
Tänkte inte på att ta bort texten innan jag skickade upp sidan...
tanten har du tillgång till IE6? Eller om någon annan har tillgång till IE 6? Kan du i så fall kolla om denna sidas meny funkar i IE6? Den funkar i FF, IE7 och har kvar JS-funktionen. Så kanske...?
Eftersom nuvarande meny använder JS, så skulle det i så fall vara ett jättekliv framåt eftersom den ser OK ut i FF också (vilket nuvarande inte gör för långa länkar).
Problemet med tabellösningen är att jag inte får någon rätsida på din kod, plus att jag är rädd att den skulle bli duktigt jobbig att generera... :q Hur ser en sublänk ut egentligen?
<li class="top"><a href="#nogo" class="rub">Aalborg
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td></a><![endif]--></li>
Eller? För du verkar ha oordning på taggarna i exemplet...
Och OK att detta funkar för alla varianter av IE, men vad ser FF, Opera m.fl.?
Din sida fungerar i IE6 nu...
När det gäller min sida så ska den fungera i alla webläsare.
När det gäller min kod så är det så att sublänkarna ser ut precis som vanligt
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="http://www.travservice.dk/default.asp">Travcervice.dk</a></li>
<li><a href="http://www.danskespil.dk/?jumpTo=1_3_0_1">Dantoto</a></li>
<li><a href="http://www.travsek.dk/">Travsekretariatet</a></li>
<li><a href="http://www.travxperten.dk/">TravXperten</a></li>
<li><a href="http://www.travportalen.dk/root/index.asp">Travportalen</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
De är liksom bara inlurade i en <td> för IE6.
Tusen tack Melitta och tanten!!! :birp :birp <--- En till er var ;)
Jag kör på Melittas förslag så länge. :) Ska se om jag kan sätta mig in i tantens meny när jag har mer tid senare. :)
Var så lite så :)