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_beta21.04.1218: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!
„...“
0

Kommentare

Krypton21.04.1219: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.
0
dom_beta21.04.1219: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>
„...“
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.