2 problem med css meny

[Obbe]

Hej!
Jag har en vertikal css meny som jag har två problem med. I netscape visas ej borden.

I ie7 hoppas raden upp en rad över första raden och hela menyn blir fel

Jag har ändrat margin top. Men då blir det fel i ff och netscape.

Visning kan ni se här.

Om ni jämför ie 7 och ie6 ser ni skillnaden. samt ff och netscape
http://www.ninasmat.se/hjalp/
Menyn scriptet

 


<div id="menu_v">
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul>
 <li><a href="#" class="head">Rubrik 1</a>
  <ul>
   <li><a href="#">länk 1</a></li>
   <li><a href="#">länk 2</a></li>
   <li><a href="#">länk 3</a></li>
  </ul>
 </li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul>
 <li><a href="#" class="head">Rubrik 2</a>
  <ul>
   <li><a href="#">länk 1</a></li>
   <li><a href="#">länk 2</a></li>
   <li><a href="#">länk 3</a></li>
  </ul>
 </li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul>
 <li><a href="#" class="head">Rubrik 3</a>
  <ul>
   <li><a href="#">länk 1</a></li>
   <li><a href="#">länk 2</a></li>
   <li><a href="#">länk 3</a></li>
  </ul>
 </li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul>
 <li><a href="#" class="head">Rubrik 4</a>
  <ul>
   <li><a href="#">länk 1</a></li>
   <li><a href="#">länk 2</a></li>
   <li><a href="#">länk 3</a></li>
  </ul>
 </li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul>
 <li><a href="#" class="head">Rubrik 5</a>
  <ul>
   <li><a href="#">länk 1</a></li>
   <li><a href="#">länk 2</a></li>
   <li><a href="#">länk 3</a></li>
  </ul>
 </li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

css scriptet

  

#menu_v {
position:absolute;
left: 5px;
top: 162px;
z-index: 2;
height: 106px;
width: 171px;
} 
#menu_v table { line-height:0px; } 
#menu_v ul { list-style:none; margin:0; padding:0; display:block; } 
#menu_v li { border:1px solid #000000; position:relative; margin-bottom:-1px; } 
#menu_v ul ul { display:none; position:absolute; left: 169px; margin-top:-21px; } 
#menu_v .head { font-weight: bold; } 
#menu_v .group { margin-right:-25px; margin-left:-5px; } 
#menu_v ul table { width:10px } 
#menu_v .group li a { position:relative; left:-10px; padding:0; } 

#menu_v a { font:11px/20px Verdana, Arial, Helvetica, sans-serif; color:#000000; text-decoration:none; background-color: #fafafa; display:block; } 
#menu_v ul a {
width:163px;
padding-left:5px;
position:relative;
} 

#menu_v li:hover a, #menu_v a:hover a { color:#000000; background-color:#ddd; } 
#menu_v li:hover ul, #menu_v a:hover, #menu_v a:hover ul { display:block; color:#000000; background-color:#ddd; } 
#menu_v li:hover ul a, #menu_v a:hover ul ul a { color:#000000; background-color: #fafafa; } 
#menu_v li:hover ul a:hover, #menu_v a:hover ul ul a:hover { color:#000000; background-color: #ddd; } 
#menu_v a:active ul a, #menu_v a:focus ul a { color:#000000; background-color:#ffc63d; } 
#menu_v ul li ul a:active, #menu_v ul li ul a:focus { color:#000000; background-color:#ffc63d; }

Jag har sökt men ej hittat nåt som kan fixa detta.
Hoppas nån vänlig kan hjälpa mig?

Tack på förhand

Med vänliga hälsningar
David

[Magnus-SEO]

Tyvärr...

Testa att posta på IDG:s forum eller webmaster network istället.

[Princip]

Varför använder du en table-struktur utanpå listan? Finns det verkligen ett behov av det?

[Obbe]

Hej!

Dingdong:
Har testat wn, inget svar där.
Skall testa idg.

Peter L:
Om du kommer ihåg visade jag dig nya sidan. Där vi skall ha denna menyn.
Var en som gjorde css menyn åt mig, men får inte tag på honom igen. Så därför vet jag inte varför det är en table sruktur ovan på.

Har du eller nån annan tips på en bra css seo vänliga meny?

[Princip]

Jag var lite snabb att svara ser jag nu.

Table-strukturen ligger i en Conditional Comment (if less than/equal IE6 then) - övriga webbläsare bortser från den koden.

Ändrar du till [if lte IE 7] så kommer table-strukturen även att användas där - och det kommer att fungera.

[Obbe]

Jag var lite snabb att svara ser jag nu.

Table-strukturen ligger i en Conditional Comment och hanteras endast av IE6 - övriga webbläsare bortser från den koden. Alltså har den inget med saken att göra...

Jag ser att det är margin top på problem ett vet inte hur jag skall lösa om det går att lösa att den läser annorlunda vid ie7?

Mvh
David

[Obbe]

Jag var lite snabb att svara ser jag nu.

Table-strukturen ligger i en Conditional Comment (if less than/equal IE6 then) - övriga webbläsare bortser från den koden.

Ändrar du till [if lte IE 6] så kommer table-strukturen även att användas där - och det kommer att fungera.

Hej!
Du menar till ie7?
Eller har jag förstått dig fel?

Vet du hur man kan lösa det andra problemet med bordern i netscape?

Mvh
David

[Princip]

Riktigt. Har ändrat min post nu. Om du ändrar till IE7 så fungerar det likadant som i IE6.

Jag har inte Netscape installerat för att kunna kolla. Men å andra sidan - har någon det? Jag skulle inte lägga någon tid på det...

[Obbe]

Riktigt. Har ändrat min post nu. Om du ändrar till IE7 så fungerar det likadant som i IE6.

Jag har inte Netscape installerat för att kunna kolla. Men å andra sidan - har någon det? Jag skulle inte lägga någon tid på det...

Oki fick ena problemet att funka ser det ut som med ie7

Ang netscape.
Vi har en hel del besökare som har det.
Då jag gör om sidan vill jag ju att den skall funka i det också.

[Princip]

Fungerar den inte ändå om det bara är bordern som inte syns?

Ofattbart om du har "en hel del" besökare med Netscape. Tittar jag på statistik för en av mina större sajter har 0,24% Netscape 4, 0,23% Netscape 7, 0,05% Netscape 3 och 0,01% Netscape 8. Jag har fler besökare som surfar med PDA och mobiltelefon - hur har du det med såna besökare?

Ett alternativ är ju att köra en ren textbaserad meny, utan några effekter alls?

[Obbe]

Fungerar den inte ändå om det bara är bordern som inte syns?

Ofattbart om du har "en hel del" besökare med Netscape. Tittar jag på statistik för en av mina större sajter har 0,24% Netscape 4, 0,23% Netscape 7, 0,05% Netscape 3 och 0,01% Netscape 8. Jag har fler besökare som surfar med PDA och mobiltelefon - hur har du det med såna besökare?

Ett alternativ är ju att köra en ren textbaserad meny, utan några effekter alls?

Skrev det dumt en hel del har vi inte.
Men vill ju ändå menyn skall funka. Iden är att köra kraftigare färger vilket jag kommer göra. Men optimera sidan för safari, ie, ff. Det är ju dom stora vad jag vet.
Det lustiga är förstår inte varför borden inte kommer.
På den horisontela menyn funkar det.

[Bernt Johansson]

Jag har kikat lite på din meny, men tyvärr orkade jag inte ta fram ett bättre förslag.

Själv brukar jag sätta mina kompabilitetskrav till att menyn ska fungera (dvs ska gå att navigera med) i alla browsers, men att utseendet inte behöver vara lika.

I så fall är det oftast enklast att låta de som kör gamla browsers helt enkelt få en vanlig lista med länkar.

Att ta fram lösningar som utnyttjar olika "hacks" för att få exakt samma beteende i alla browsers brukar sällan sluta bra. En vacker dag så slutar hacksen att fungera och då står man där...

[Obbe]

Tråkigt att du inte orkade.

I netscape går det så där att navigera med den.

Men jag vill ju också den skall vara kompatibel.
Just att använda en sån meny som fälls ut. Är ju för att besökaren skall inte behöva klicka så mycket.

Hur gör man det de som kör med gamla browsers får den lista?

Jag fick hjälp med denna css meny. För jag kan inte sälv göra en sån avancerad.

[Princip]

jag har inte testat själv nu, men det här ska fungera:

<script>
if (document.layers) // If NS
{
document.write("<link rel='stylesheet' type='text/css' href='ns.css'>");
}
else if (document.all) // If IE 4/5
{
document.write("<link rel='stylesheet' type='text/css' href='ie45.css'>");
}
else if (document.getElementByID) // If IE5 / NS6
{
document.write("<link rel='stylesheet' type='text/css' href='ns6.css'>");
}
else // Rest
{
document.write("<link rel='stylesheet' type='text/css' href='rest.css'>");
}
</script>

[Obbe]

Tack Peter!
Skall bara hitta ett bra sett att kunna testa det.