[CSS] Wie so oft: Unterschied i.d. Darstellung zw IE und Firefox

[dayscott]

ich hock jetzt seit 2 Tagen an : http://igway.de/igway/newtest/start.htm

sieht einer worans liegt, dass das dropdown menü im IE anders angezeigt wird wie im firefox? (hintergrund wird bei der dropdownliste nicht blau im IE)

in der links.css ist glaube ich das das problem:

div.mainnav li ul li:hover
{

background-color:#010A7A;
}
div.mainnav li ul li:hover
a
{
color:white;
}

das kann man anders schreiben. nur ich weis nicht wie. vorletzten zeilen machen mir sorgen.-

[ministry]

Der IE kann hover nur für Links. Mach die Links auf display:block und gib ihnen das hover.

[TobiaZ]

Der IE kennt kein li:hover.

OffTopic:

---

Aber BTW: Absolut gigantisch, wenn man sein Nicht-Können schon auf der Startseite, bzw. im Seitendesign soo zur Schau stellt. (s. Anhang)

Abgesehen von 4 undefinierten Variablen
benutzt du mysql_pconnect() ohne Grund
und setzt Variablen in Anführungszeichen,
aber nicht mal konsequent. *CNR*

---

[ministry]

OffTopic:

---

@ Tobiaz: Hättest dir wenigstens die Mühe machen können, den Binärcode zu übersetzen... da wäre sicher auch noch was tolles bei rausgekommen

---

[dayscott]

@ministry

aus den links block; machen dann darauf das hover setzen geht, aber erfüllt nicht das was ich will. dadurch wird dann nur der text des links anklickbar, nicht die <li> zelle, was der fall sein soll.


@tobiaz hab den code einfach kopiert, kam grad nix besseres in den sinn . danke trotzdem. (mysql_pconnect ist manchmal sinnvoller als mysql_connect -> nur so nebenbei) aber hast mich schon durchschaut, bin tatsächlich n newbie. - dafür aber masochistisch veranlagt und steh drauf auf harte, zynische weise verarscht zu werden, auch so.

edit:

[b]div.mainnav li ul li:hover[/b]
{

background-color:#010A7A;
}
[b]div.mainnav li ul li:hover[/b]
a
{
color:white;
}

ist ja dasselbe. das 2te fettgedruckte spricht ja dasselbe elemtn an . - jedoch soll dann "a" color : white; annehmen.

wie schreibe ich diesen code snippet kürzer?

[ministry]

mit display:block sollten die Links den ihnen zur Verfügung stehenden Platz (=das Listenfeld) einnehmen.

[dayscott]

Original geschrieben von ministry
mit display:block sollten die Links den ihnen zur Verfügung stehenden Platz (=das Listenfeld) einnehmen.

aber nur in der breite , nicht in der höhe , oder?

ansonsten - ich will ja ein hover über nem <li> d.h. ich brauch wieder javascript - mit css geht ja das ja nicht.

[TobiaZ]

nee, nur in der breite. aber es spricht ja nichts dagegen, dem li das padding auf 0 zu setzen und dafür dem a den ursprünglichen Abstand zu geben. Sei mal kreativ. Ist ja angeblich dein Job!

[dayscott]

yaps habs jetz so gemacht.

div.mainnav li ul li a
{
display:block;
padding:2px 15px 3px 5px;
color:#010A7A;
}

http://igway.de/igway/newtest/start.htm


im firefox passt bis auf "Angebot"->"Domainregistrar",
selbst wenn ich die 15 px höher mache, bringt es nichts.
ein padding der liste führt wieder zu einer "nicht ganz füllung" der <li> zelle, selbiges bei einem margin des <a> tags.

im IE passen die zellen auch noch nicht.


zumindest hab ich es nun geschnallt das ich hier kein javascript brauch.

[TobiaZ]

wie haste denn div.mainnav li definiert?

[dayscott]

div.mainnav li
{
/*display:inline;*/
float:left;
position:relative;
   background-color:transparent;
   color: #CCCCCC;
   padding:2px 33px 3px 33px;
   font-size: 1.2em;
   border: 1px solid #CCCCCC;
}
div.mainnav li ul
{
display:none;
position:absolute;
top:2.1em;
left: 0;
font-size:0.7em;
color:#010A7A;
}

div.mainnav li ul li
{
[b]width:120px; [/b]
padding:0px;
}

damit ist jetzt jeder <li> 120 px groß ---> auch n langes Wort sieht gut aus.

--> alle <li> des submenu sind gleich groß - ist ok.

hab bei div.mainnav li ja jeweils links + rechts 66px. wie ermittle ich die pixelbreite eines wortes?

wenn ich die <li> des submenu jeweils so breit haben will wie die zugehörigen obermenüeinträge dann krieg ich das nur über javascript hin oder?


edit:

http://igway.de/igway/newtest/start.htm

---> die zumal falsche darstellung im IE jetzt gefällt mir fast schon besser

das div.mainnav li ul li mit display:block; erweitern ändert nix an der floatenden darstellung, float:clear; bringt hier auch keine änderung.

[dayscott]

hab inzwischen finger von meinem wirrwarr gelasen und versuch jetzt

http://www.htmldog.com/articles/suckerfish/bones/


so umzuschreiben,dass das submenu nebeneinander und nicht untereinander erscheint!

kriege es partout nicht hin , wenn einer n tipp hat her damit !!


ist "barebone" code, also völlig nackt, -> lässt sich leicht drin rumwuseln.

[wahsaga]

Original geschrieben von dayscott
kriege es partout nicht hin , wenn einer n tipp hat her damit !!

Tipp: Wenn du vorhast, Webdesign als Dienstleistung anzubieten - und danach sieht die Testseite ja wohl aus - dann lern' mal schön selber, mit den Techniken umzugehen.

[prego]

Der IE7 kann btw :hover nicht nur auf A-Tags. Dem IE6 kann man es mit einer kleinen Erweiterung beibringen. Hier mal ein alter Blogpost von mir zum Thema: http://www.triebschicht.de/item/23/

[dayscott]

javascript frage:

folgender code soll bei nem hover das untermenü einblenden, jedoch erst ausblenden wenn ein anderer <li> eintrag mit der maus berührt wird, folgendes sollte klappen: nach der logik zumindest, ich suche blos den syntax fehler.

navRoot = document.getElementById("hauptnav");
		for (i=0; i<navRoot.childNodes.length; i++) 
		
		
		{
			node = navRoot.childNodes[i];
			
			if (node.nodeName=="LI") 
			{
			
				node.onmouseover=function() 
		 {

//2. schleife damit jedes ANDERE element, beim hover von DIESEM das "over" gestrichen bekommt!
               for (s=0; s<document.getElementById("hauptnav").childNodes.length; s++) 
                {
                  document.getElementById("hauptnav").childNodes[s]=className.replace(" over", "");
				
                			
                }
					
				
					
					this.className+=" over";
					
		 }
				
				
				node.onmouseout=function() 
				{
							//			this.className+=" over";
				//	this.className=this.className.replace(" over", "");
				}
				
				
				
			}
		}

noch ne frage: wie bring ich den firefox dazu nicht die li:hover klasse bei nem drüberfahren mit der maus anzuspreochen sondern die li.over klasse (sodass ich meinen effekt dass das menü bei nem mouseout nicht weggeht sowohl im firefox als auch im IE realisiert hab)