[CSS] Untermenü um 1 px verschieben

[dayscott]

suckerfish funktioniert gut, nur das untermenü will ich um genau 1 px nach links verschieben, nur ich weis nicht wie



lauffähiger code:

/*SUBMENUUUU*/
#nav li {float:left;display: inline;border-right:1px solid #6D5D4D;margin-right:0px;}
.erste{margin-left:36px;border-left:1px solid #6D5D4D;}
#nav li a {color:white;display:block; padding:0px 12px 0px 12px;}

#nav li:hover ul,#nav li.sfhover ul {left:auto;}
#nav li:hover,#nav li.sfhover {background-image:url("../img/navbghover.jpg");}

/*2. Ebene*/
[b]#nav li ul {position: absolute;top:auto;left:-999em;}[/b]
[b]#nav li:hover ul,#nav li.sfhover ul {left:auto;}[/b]

#nav li li {float:none;display:block;}
#nav li li a{display:block;
color:#6B5D4C;font-size: 0.75em;padding-top:0px;background-color:#E8C79C;
border:1px solid #6D5D4D;border-top:none;
border-right:none;
padding:0px 12px 0px 12px;}

#nav li:hover li,#nav li.sfhover li {background-image:none;}
#nav li li a:hover {/*background-color:#FAD7AA;*/ color:black;}
/*IEFIX*/
li > ul {
	top: auto;
	left: auto;
	}
/*SUBMENUUUU*/

[tontechniker]

Onlinebeispiel mit zugehörigem HTML Code?

[dayscott]

link

bittschön


html.css

[tontechniker]

Das Problem ist der Rahmen, versuch es mal mit negativen margin. Außerdem solltest du oben mal deinen Code umbrechen, dann muss man nicht mehr scrollen.

[dayscott]

#nav li li {float:none;display:block;margin-left:-1px;}

gesettzt und es sieht gut aus!

im firefox ist nun alles optimal, der IE 6 zeigt aber totalen stuss an ://


hab extra eine ie.css -> was muss ich ändern dass das menü nicht mehr zerschossen ist ? : /

edit:

auserdem sind die links im li element im untermenü nicht gut ansteuerbar.

der a block erstreckt sich nicht über den ganzen <li> block , zumindest nicht im IE

[Kropff]

der a block erstreckt sich nicht über den ganzen <li> block , zumindest nicht im IE

a {display: block;} 

der IE 6 zeigt aber totalen stuss an

könntest du auch sagen was? wenn du den abstand des bildes zur navi meinst, dann folgende info: der ie interpretiert einen zeilenumbruch im quellcode als leerzeichen, ggf. mal für das entsprechende element ein font-size: 0px, setzen

gruß
peter

[dayscott]

alle zeilenumbrüche rausgenommen , trotzdem 1. wie du richtig erkannt hast noch zu großer abstand von navi zum obrigen bild.

und 2.

#nav li li a{display:block;
color:#6B5D4C;font-size: 0.75em;
padding-top:0px;background-color:#E8C79C;
border:1px solid #6D5D4D;
border-top:none;border-right:none;
padding:0px 12px 0px 12px;}

ist gesetzt!

trotzdem erstreckt sich der link nicht über das ganze <li>

[Kropff]

trotzdem erstreckt sich der link nicht über das ganze <li>

sorry, vergessen. du mußt noch eine feste(?) breitenangabe beim a setzen. schau dir mal ggf. das an, da wird auch das problem behandelt.

gruß
peter

[dayscott]

ah ok, sehr gut, deine homepage hat mir schon wieder weitergeholfen

hab noch genau 2 probleme:

im IE wird der border-left vom untermenü NICHT angezeigt im IE , ich weis nicht warum - hab schon extra in meiner ie.css rumgefummelt aber nichts hat zum Ziel geführt, dass es aussieht wie im firefox.


desweiteren ist das bild über der navi im IE immernoch mit einem zu großen abstand versehen, double margin bug ist das nicht, und einen anderen bug kann ich nicht deuten, oder vielleicht ist es auch keiner

hier noch mal die testpage :testpage

[Kropff]

mal die fehlerkonsole vom ff benutzt? es gibt z.b. kein

background-repeat:y-repeat; 

des weiteren wirft der ie eine js-fehlermeldung aus. und html transitional solltest du auch nicht benutzten. da macht der ie, was er will. nimm strict oder xhtml transitional.

gruß
peter

[dayscott]

background-repeat:y-repeat; <-- stimmt ist natürlich falsch


-

eine Änderung des doctypes auf strict bringt keine Änderung was den zu großen vertikalen Abstand betrifft : /


beim falschen js code weis ich glaub ich worans liegt *ausprobier*

[dayscott]

so das problem mit dem zu hohen vertikalen Abstand hab ich jetzt mit google gelöst, und es so gemacht:
phpBB3 &bull; Coding Guidelines

einfach das submenu absolut positioniert, etwas hässlig da ich echt viel code extra für den IE gebraucht hab, aber zumindest ist das problem nun gelöst.


nun wär noch exakt eine sache, der left-border von dem aufklappenden submenu ist NICHT zu sehen - ka warum O_o

goolge hat auch nichts gebracht : /