|
|||
Darstellungsprobleme im IE ( Wo sonst :/ ) ! Hilfe !
Hi Leute,
mein Problem ist folgendes: Ein Kunde möchte ein variables Menü, welches er aus typo3 herraus einfach bearbeiten kann, daher fallen Tabellen, oder ähnliches, schonmal raus. Ich hab mich dann für CSS entschieden, lief auch alles wunderbar. Bis ich an dem Punkt war, mein Menü fix im IE zu betrachten. Opera und Firefox problemfrei, aber der IE streßt natürlich. Hab mir nun schon einige Theards durchgelesen und auch einiges probiert, aber wirklich richtig funktionieren will es dennoch nicht. Also nach dem Motto, viele Augen sehen mehr als zwei - hoffe ich, einer von euch weiß vielleicht woran es liegt. Besten Dank im Vorraus. Grüße Jan -------------------------------------------- Fehler in der Darstellung ( Link ): Navigation Firefox: funktioniert IE: funktioniert nicht. Quellcode: <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Navigation</title> <style type="text/css"> /* Main Navigation */ #main_navigation { float: left; background-image:url(_images/bg_navi.jpg); background-repeat:repeat-x; width:1000px; height:29px; margin:0px; clear:both; } #main_navigation ul { padding:0px; margin-top: 2px; color: #000000; } #main_navigation li { display: inline; } #main_navigation a { display: inline; font: normal 11px Verdana, Arial, Helvetica, sans-serif; text-decoration:none; margin:0; color: #000000; } #main_navigation ul li a { background-image:url(_images/bgnavi_re.jpg); background-position:100% 0%; background-repeat: no-repeat; padding: 10px 10px 15px 0px; } #main_navigation ul li a span { background-image:url(_images/bgnavi_li.jpg); background-position: 0% 0%; background-repeat: no-repeat; padding: 10px 0px 15px 10px; } #main_navigation ul li a:hover { background-image:url(_images/bgnavi_re_on.jpg); background-position:100% 0%; background-repeat: no-repeat; } #main_navigation ul li a:hover span { background-image:url(_images/bgnavi_li_on.jpg); background-position: 0% 0%; background-repeat: no-repeat; } /** annderer bg für News **/ #main_navigation .vnews a { background-image:url(_images/bg_navi_news_re.jpg); background-position:100% 0%; background-repeat: no-repeat; color:#FFFFFF; font: bold 11px Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; } #main_navigation .vnews a span { background-image:url(_images/bg_navi_news_li.jpg); background-position: 0% 0%; background-repeat: no-repeat; } #main_navigation .vnews a:hover { background-image:url(_images/bg_navi_news_re_on.jpg); background-position:100% 0%; background-repeat: no-repeat; color:#444444; font: bold 11px Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; } #main_navigation .vnews a:hover span { background-image:url(_images/bg_navi_news_li_on.jpg); background-position: 0% 0%; background-repeat: no-repeat; } #main_navigation cursor: pointer; </style> </head> <body> <div id="main_navigation"> <ul> <li><a href="#"><span>Ausstellung</span></a></li> <li><a href="#"><span>BMZ</span></a></li> <li><a href="#"><span>KLub</span></a></li> <li><a href="#"><span>Veranstaltungen</span></a></li> <li class="vnews"><a href="#"><span>News</span></a></li> <li><a href="#"><span>Termine</span></a></li> <li><a href="#"><span>Kontakt</span></a></li> <li><a href="#"><span>Anfahrtsskizze</span></a></li> <li><a href="#"><span>Impressum</span></a></li> </ul> </div> </body> </html> |
Sponsored Links |
|
|||
Eine pixelgenaue Tab-Navigation im Inline-Kontext. Hm.
Ein Ansatz für den IE wäre seine "sort-of" inline-block-Darstellung. IE/Win: inline-block and hasLayout Sinnvoller fände ich den Einsatz von float statt display:inline. Bekanntes Beispiel: A List Apart: Articles: Sliding Doors of CSS, Part II Mit den zusätzlichen spans, du du jetzt schon benutzt, sollte ein :hover des gesamten Hintergrunds möglich sein. |
Sponsored Links |
|
|||
Hab die Sachen gefixt und nun funktionierts. Aller besten Dank nochmal
Nun funktioniert die Seite auch im blöden IE . Danke! Gruß Jan =) --------------------------- Navigation Quelltext: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Navigation</title> <style type="text/css"> /* Main Navigation */ #main_navigation { float: left; background-image:url(_images/bg_navi.jpg); background-repeat:repeat-x; width:1000px; height:29px; margin:0px; clear:both; } #main_navigation ul { display: inline; padding:0px; margin-top: 2px; color: #000000; } #main_navigation li { display: inline; margin:0; padding:0;; } #main_navigation a { float:left; font: normal 11px Verdana, Arial, Helvetica, sans-serif; text-decoration:none; margin:0; color: #000000; } #main_navigation ul li a { background-image:url(_images/bgnavi_re.jpg); background-position:100% 0%; background-repeat: no-repeat; padding: 10px 10px 15px 0px; } #main_navigation ul li a span { background-image:url(_images/bgnavi_li.jpg); background-position: 0% 0%; background-repeat: no-repeat; padding: 10px 0px 15px 10px; } #main_navigation ul li a:hover { background-image:url(_images/bgnavi_re_on.jpg); background-position:100% 0%; background-repeat: no-repeat; } #main_navigation ul li a:hover span { background-image:url(_images/bgnavi_li_on.jpg); background-position: 0% 0%; background-repeat: no-repeat; } /** annderer bg für News **/ #main_navigation .vnews a { background-image:url(_images/bg_navi_news_re.jpg); background-position:100% 0%; background-repeat: no-repeat; color:#FFFFFF; font: bold 11px Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; } #main_navigation .vnews a span { background-image:url(_images/bg_navi_news_li.jpg); background-position: 0% 0%; background-repeat: no-repeat; } #main_navigation .vnews a:hover { background-image:url(_images/bg_navi_news_re_on.jpg); background-position:100% 0%; background-repeat: no-repeat; color:#444444; font: bold 11px Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; } #main_navigation .vnews a:hover span { background-image:url(_images/bg_navi_news_li_on.jpg); background-position: 0% 0%; background-repeat: no-repeat; } #main_navigation cursor: pointer; </style> </head> <body> <div id="main_navigation"> <ul> <li><a href="#"><span>Ausstellung</span></a></li> <li><a href="#"><span>BMZ</span></a></li> <li><a href="#"><span>KLub</span></a></li> <li><a href="#"><span>Veranstaltungen</span></a></li> <li class="vnews"><a href="#"><span>News</span></a></li> <li><a href="#"><span>Termine</span></a></li> <li><a href="#"><span>Kontakt</span></a></li> <li><a href="#"><span>Anfahrtsskizze</span></a></li> <li><a href="#"><span>Impressum</span></a></li> </ul> </div> </body> </html> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsprobleme im IE7 und abwärts | Matthias1982 | CSS | 1 | 08.05.2010 12:25 |
Kontaktformular Hilfe nötig :) | sunny55 | CSS | 2 | 05.08.2008 20:29 |
HILFE, ich brauche Hilfe von Profis! | frambuesa | CSS | 13 | 13.06.2008 23:46 |
Hilfe, Hilfe Layout zerschossen | floody | CSS | 2 | 07.01.2006 17:46 |
Hilfe, Darstellungsprobleme unter Firefox | zebra21 | CSS | 2 | 19.01.2005 17:18 |