Problem mit Navigation im IE7

onkel-tom · #1 (**permalink**) 19.06.2009, 08:02

Hallo Leute,
ich habe ein Darstellungsproblem mit meiner Navigation im IE7. Der Firefox und der IE8 stellen alles korrekt dar, aber nur eben der IE7 nicht. Beim IE7 verschiebt es die ganzen Navipunkte in jeweils eine Zeile untereinander.

Anschauen kann man sich das hier: Test-Navigation. Allerdings sieht man das Problem nur im IE7.

Hier mal der Code der HTML-Seite:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <style type="text/css">
	#header {position: relative; top: 0px; left: 0px; height: 74px; width: 1000px;}
    #headerlogo {position: absolute; top: 0px; left: 0px;}
    #headerlogo img.headerlogo {margin: 3px 0px 3px 0px;}
    #headernavigation {position: relative; top: 0px; left: 155px; width: 845px; height: 24px; text-align: right;}
    #headernavigation ul {display: block;}
    #headernavigation ul img {float: right;}
    #headernavigation ul li {padding: 2px 2px 2px 0px; height: 24px; float: right; list-style-type: none;}
    #headernavigation ul li:hover {cursor: pointer;}
    #headernavigation ul li.topnav_login {background-image: url(topnav1_bg.png); background-repeat: repeat-x;}
    #headernavigation ul li.topnav_sonstiges {background-image: url(topnav2_bg.png); background-repeat: repeat-x;}
    #headernavigation ul li.topnav_sonstiges img.lupe {padding: 1px 0px 0px 0px; background-image: url(topnav2_bg.png); background-repeat: repeat-x;}
    #headernavigation ul li.topnav_sonstiges input.topsuchfeld {margin: 1px 5px 0px 0px; padding: 0px 0px 2px 2px; width: 100px; height: 12px; color: #B0B0B0; background-color: #FFFFFF; font-size: 10px; border: 1px solid #666666; vertical-align: middle; float: right;}
  </style>
</head>

<body>
    <div id='header'>
        <div id='headerlogo'>
        </div>
        <div id='headernavigation'>
            <form name='topsuche'>
                <ul>
                    <img src='topnav2_re.png' height='24' width='8' />
                    <li class='topnav_sonstiges'>
                        <img class='lupe' src='icon_lupe.png' height='16' width='16' title='Suche beginnen' />
                        <input class='topsuchfeld' name='suchfeld' type='text' title='Suche' value='' />
                    </li>
                    <img src='topnav2_trenner.png' height='24' width='9' /><li class='topnav_sonstiges' title='Nav 4'>Nav 4</li>
                    <img src='topnav2_trenner.png' height='24' width='9' /><li class='topnav_sonstiges' title='Nav 3'>Nav 3</li>
                    <img src='topnav2_trenner.png' height='24' width='9' /><li class='topnav_sonstiges' title='Nav 2'>Nav 2</li>
                    <img src='topnav2_trenner.png' height='24' width='9' /><li class='topnav_sonstiges' title='Nav 1'>Nav 1</li>
                    <img src='topnav12_trenner.png' height='24' width='11' /><li class='topnav_login' title='Login'>Login</li>
                    <img src='topnav1_li.png' height='24' width='7' />
                </ul>
            </form>
        </div>
</body>

</html>

hubspe · #2 (**permalink**) 19.06.2009, 09:54

Hi,

so wie du das notierst hast ist das sicher ausgesprochen suboptimal.
Validiere erstmal und beseitige die Fehler, du behandelst Listen vollkommen falsch.

Den Trennstrich zwischen den Navipunkten als img in den Quelltext zu schreiben ist imho leider auch nix.

Wo ist denn das a-Tag. Ich denke das soll eine Navi werden?

Schau dir mal in der CSS-FAQ ab Punkt 10 an, wie man Navis macht.

onkel-tom · #3 (**permalink**) 19.06.2009, 10:05

Was für fehler hab ich denn da drin?
Ich habe kein a Tag rein gemacht, da ich die buttons mit onclick verarbeite.
wie soll ich denn den trenner sonst einbauen, wenn nicht zwischen den tabs als grafik?

hubspe · #4 (**permalink**) 19.06.2009, 11:11

Zitat:

Zitat von onkel-tom

Was für fehler hab ich denn da drin?

Diese

Ohne Validierung braucht man sich über Fehlerbeseitigung gar nicht weiter unterhalten, weil es sinnlos ist.

Zitat:

Zitat von onkel-tom

Ich habe kein a Tag rein gemacht, da ich die buttons mit onclick verarbeite.

ähem..., *hüstel*..., das ist nicht dein Ernst?

Wie soll Google denn den Links nachgehen, wenn das a-Tag fehlt.
Mit JS kann Google ja nicht soviel anfangen

Zitat:

Zitat von onkel-tom

wie soll ich denn den trenner sonst einbauen, wenn nicht zwischen den tabs als grafik?

-In die Grafik mit einbauen
-als border-right/left für die li's.

Hast du dir die FAQ angeschaut? Wohl nicht, denke ich.
Hol das mal nach und schau dir vor allem grafische Menüs mal genau an.

Sorry, so wie du das vorhast ist das einfach Murks.

onkel-tom · #5 (**permalink**) 19.06.2009, 13:06

ok, wo die Fehler herkommen muss ich mir erst mal anschauen, aber grundsätzlich habe ich keine Buttons für die Navigation, da der Inhalt der Navigation, zumindest bei einem Button dynamisch sein müsste, daher wollte ich das ja so mit einer floatenden navi machen, aber ich kenne mich da nun eben mal nicht wirklich aus.

ich stehe nun vor dem problem wie ich das mit der floatenden navi mache und gleichzeitig die runden ecken und die navi trenner grafisch da rein bekomme, ohne daß der IE7 alles verschiebt.

das mit den grafischen menüs habe ich mir angeschaut und auch schon getestet, das geht bei mir aber wegen der dynamischen reiterinhalte nicht.

regloh · #6 (**permalink**) 19.06.2009, 14:00

Hilft dir das vielleicht weiter? Cascading Style Sheets { Tutorial : Horizontal-Navigation mit gleitenden Hintergründen }

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
IE7 Problem mit em Höhen	Kekami	CSS	2	25.08.2008 17:38
Problem mit Drop-Down-Navigation und Bildern im IE7	bbcda	(X)HTML	1	06.09.2007 09:03