Bereiche
News
Rewind
Tipps & Berichte
Forum
Galerie
Journals
Events
Umfragen
Themenwoche
Kleinanzeigen
Interaktiv
Anmelden
Registrierung
Zu allen empfangenen Nachrichten
Suche...
Zur erweiterten Suche
Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum
>
Netzwerke
>
Horizontale Navigation und rechts ein DIV
Horizontale Navigation und rechts ein DIV
dom_beta
21.04.12
18:59
Hallo,
folgendes Problem.
Ich habe eine horizontale Navigation mittig ausgerichtet und rechts daneben soll ein DIV hin. Der IE7 zeichnet einen zu großen Abstand zwischen der Auflistung und dem DIV.
Das Schema der Seite ist so:
<div style="float:right; width:(Breite); height:(Höhe); ">
Sein Inhalt
</div>
<ul id="nav">
<li></li> (et cetera)
</ul>
Gibt es da ein Trick?
Der Internet Explorer ab Version 8, alle Firefox, Safari und Chrome Versionen zeigen dies korrekt an.
Übrigens, der IE7 zeigte die Navigation ursprünglich als Treppe an, Workaround war die LIs und die As als Block-Element anzeigen zu lassen.
Dieser Workaround beeinträchtigt nicht die anderen Webbrowser.
Und ja: Ein Teil der Besucher benutzen noch den IE7, daher muß ich das unterstützen auch wenn mancher jetzt in den Tisch beißt.
Ich würd das ja auch sein lassen, ich muß aber.
Danke!
„...“
Hilfreich?
0
Kommentare
Krypton
21.04.12
19:23
Wenn’s nur optisch ein leichter Unterschied ist, würde ich es einfach ignorieren.
Für konkrete Hilfe wäre ein Link zur Website wohl hilfreicher als das reine HTML-Schema. Ohne das zugehörige CSS bringt das auch recht wenig, da das CSS ja maßgeblich die Abstände beeinflusst (oder beeinflussen kann).
Wenn ich mich recht erinnere, musste man bei IE7 bestimmte Eigenschaften in einer Liste (padding, margin, list-style) explizit angeben, da bei fehlender Angabe dieser Werte ein meist unpassender Default-Wert verwendet wurde, der zu dem anderen Aussehen geführt hat – ist aber schon ’ne weile her.
Hilfreich?
0
dom_beta
21.04.12
19:45
Krypton
Wenn’s nur optisch ein leichter Unterschied ist, würde ich es einfach ignorieren.
Leicht ist untertrieben; die Navigation ist nicht mehr mittig, sondern eher links ausgerichtet.
Ich gebe Euch besser den Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="de">
<meta name="Description" content="">
<style type="text/css">
body {
background-color:#F5F5DC;
font-family:sans-serif;
margin:0;
padding:0;
font-size:1em;
}
div#suchbox{
width:1000px;
margin:0.4em auto 0;
}
div#suche {
width:156px;
margin:0;
padding:0;
float:right;
}
img#rssbild {
margin:3px 0 0 0;
float:left;
border:none !important;
}
input#suchfeld {
margin:3px 0 0 0;
height:17px;
border:none !important;
width:114px;
float:left;
}
ul#nav {
height : 25px;
width : 687px;
margin :10px auto;
padding : 0;
list-style : none;
}
ul#nav li {
display : block;
float : left;
margin : 0 4px;
}
ul#nav li a {
display:block;
width:96px;
color : #000;
background-color : #d9d9d9;
border-width : 1px;
border-style : solid;
border-color : #fff #000 #000 #fff;
text-decoration : none;
font-family : sans-serif;
font-size : 12px;
font-weight : bold;
padding : 4px;
text-align : center;
}
ul#nav li a:hover, ul#nav span a {
color : #fff;
background-color : #696969;
border-width : 1px;
border-style : solid;
border-color : #000 #fff #fff #000;
}
</style>
</head>
<body>
<div id="suchbox">
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<div id="suche">
<a href="RSS/rss.xml" title="titel"><img src="RSS-Text.gif" alt="RSS" id="rssbild"></a>
<input type="hidden" name="cref" value="Google-ID">
<input type="hidden" name="ie" value="utf-8">
<input type="hidden" name="hl" value="">
<input name="q" type="text" size="16" id="suchfeld" title="Suchen">
</div>
<script type="text/javascript" src="http://www.google.de/cse/tools/onthefly?form=searchbox_demo&lang="></script>
</form>
<ul id="nav">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
</ul>
</div>
</body>
</html>
„...“
Hilfreich?
0
Kommentieren
Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.
Apple gewährt Einblick in Audio- und Video-Test...
PIN-Code erraten: Dauer
Test Marantz Model 60n
20 Jahre Mac mini
macOS 15.3, iOS 18.3: Beta 2
iOS 18 mit ungewöhnlich hohem Energieverbrauch?
Doch keine finalen Versionen: Apple gibt zweite...
Apple verbessert Bildschirm-Unterstützung beim ...