Darstellungsfehler: Lücke im IE wo im Firefox keine ist

bclumsy

Aktives Mitglied
Thread Starter
Dabei seit
14.04.2005
Beiträge
268
Reaktionspunkte
1
Hallo!

Ich arbeite gerade an einer Webseite als Projekt für mein Studium. Hab mich davor noch nicht wirklich mit Webdesign beschäftigt, deswegen ist alles noch ziemlich neu für mich.
Hab's trotzdem geschafft eine Website zu basteln und war auch eigentlich schon fertig, bis mir eingefallen ist, dass die Seite auch im Internet Explorer funktionieren soll. Da gab's natürlich erst mal Problem, die weitestgehend auch beheben konnte. Allerdings werd ich ein Problem nicht los:

Ich habe eine horizontale Navigation mittels ungeordneter Liste erstellt, die wie Registerreiter aussieht. Darunter folgt direkt anschließend ein roter Balken mit einer Subnavigation. Wenn ich die margins so setze, dass im Firefox die Registerreiter genau an den roten Balken grenzen, bleibt im IE eine Lücke von genau 3px. Setze ich die margins passend für den IE, dann kommt es im Firefox zu Überschneidungen.

Hat jemand ne Ahnung, woran das liegen könnte?

Hier mal noch das CSS:

Code:
@charset "UTF-8";
/* CSS Document */

body {
margin-top:20px;
text-align:center;
}

#wrapper {
text-align:left;
margin:0 auto;
width:960px; }


/*-------------------------------------------------------------------------------*/
/*NAVIGATION*/
/*-------------------------------------------------------------------------------*/

#navi_up {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:right;
background : #000000 url(images/black_bgrd.png) repeat-x;
height:36px;
line-height:3em;
padding-right:20px; 
margin-bottom:30px;}

	#navi_up ul {}
	
	#navi_up li {
	display:inline;
	list-style-type:none;
	padding-left:10px;
	color:#ffffff; }
	
	#navi_up a {
	text-decoration:none; 
	color:#ffffff; }
	
	#navi_up a:hover, #navi_up A.active {
	color:#d70000}


#navi_main {
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
font-size:16px;
font-weight:bold;
margin-top:20px;
margin-bottom:-8px; }

#navi_main ul {}

	#navi_main li {
	display:inline;
	list-style-type:none; }
	
	#navi_main a {
	color:#22282b;
	background-color:#ffffff;
	text-decoration:none;
	border-left:1px solid #d70000;
	border-right:1px solid #d70000;
	border-top:1px solid #d70000;
	padding:8px 10px; }
	
	#navi_main a:hover, #navi_main A.active {
	background-color:#d70000;
	color:#ffffff;
	border-color:#d70000; }

#navi_down {
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
font-size:12px;
background:#d70000 url(images/red_bgrd.png) repeat-x;
height:36px;
line-height:3em;
}

#navi_down li {
display:inline;
list-style-type:none;
color:#ffffff; 
padding-left:10px;}

#navi_down a {
color:#ffffff;
text-decoration:none; }

#navi_down a:hover, #navi_down A.active {
color:#22282b; }

/*-------------------------------------------------------------------------------*/
/*PICTURES*/
/*-------------------------------------------------------------------------------*/

#logo {
float:left; 
border:none; }

Und das HTML:

Code:
<!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=UTF-8" />
<title>southwestusa.net   |   home</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>


<body>

<div id="wrapper">

<div id="navi_up">
    <a href="index.html"><img src="images/logo.png" id="logo" /></a>
    <ul>
        <li><a href="index.html" class="active" >home</a></li>
        <li>|</li>
        <li><a href="gallery.html" >gallery</a></li>
        <li>|</li>
        <li><a href="contact.html" >contact</a></li>
    </ul>
</div>

<div id="navi_main">
    <ul>       
        <li><a href="arizona.html" >Arizona</a></li>
        <li><a href="california.html" >California</a></li>
        <li><a href="colorado.html" >Colorado</a></li>
        <li><a href="nevada.html" >Nevada</a></li>
        <li><a href="new_mexico.html" >New Mexico</a></li>
        <li><a href="utah.html" >Utah</a></li>
    </ul> 
</div>

<div id="navi_down">
    <ul>
        <li><a href="az01.html" >Grand Canyon</a></li>
        <li>|</li>
        <li><a href="az02.html" >Monument Valley</a></li>
        <li>|</li>
        <li><a href="az03.html" >Antelope Canyon</a></li>
        <li>|</li>
        <li><a href="az04.html" >Saguaro NP</a></li>
        <li>|</li>
        <li><a href="az05.html" >The Wave</a></li>
   </ul>
</div>

</div>

Für eure Hilfe wäre ich euch sehr dankbar!
Vielen Dank schon mal im Voraus!
 
Ja, das liegt am Internet Explorer... ;)
Der interpretiert die Angaben der CSS Datei nicht vollständig und läßt wahlweise div. Angaben einfach weg. Ich hab zur Zeit ein ähnliches Problem.

Am besten per JavaScript einen Browser-Check machen und für den IE eine "eigene" Website basteln. :(
Ist zwar nicht besonders komfortabel, aber wenn man bestimmte (nette) Features von CSS nutzen will, ist das die wahrscheinlich eleganteste Lösung.
 
Zurück
Oben Unten