Versatz zwischen div und Grafik in Firefox/IE

sr6081

Hallo,
ich bin gerade dabei meine erste Homepage zu gestalten. Das funktioniert auch eigentlich ganz gut, nur ein Problem bekomme ich nicht in den Griff:
Mein horizontales Menü möchte ich so anordnen, dass es an der Unterkante mit einer nebenliegenden Grafik abschließt. Habe die Positionierung nur mit "float:left/right" gemacht, und im Safari (mac) klappt das auch einwandfrei.
Im Internet Explorer und Firefox habe ich aber einen Versatz von einem Pixel zwischen Menü und Grafik. Dies kann ich mit "position:relative; top:1px;" zwar beheben, aber dann hab ich den Versatz in Safari. Ich denke mal es läuft auf eine Browserweiche hinaus, habe aber keine Ahnung wie das funktioniert, und lese überall nur, dass man ohne Weichen auskommen soll..
wäre echt toll, wenn mir jemand helfen könnte..

Danke und Viele Grüße!!!

sejuma

Versuch's mal damit:
http://www.ohne-css.gehts-gar.net/0009.php

Evtl. auch

Code

ul {margin: 0;}

Ansonsten bitte Link zur Problemseite posten.

sr6081

hat leider nicht geholfen..
hier mal meine HTML-Datei:

HTML

<!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>Test</title>
<link rel="stylesheet" type="text/css" href="css/standard.css"/>
</head>


<body>


<div id="seite">

	<div id="header">
		<h1>Header</h1>
	</div>
		<img style="float:left;" src="bilder/logo1.png" alt="logo1"/>
		<img style="float:right" src="bilder/logo2.png" alt="logo1"/>

	<div id="menu">
		<ul>
			<li><a style="background-color:#fff; color:#f00;" class="direkt" href="#">Link</a></li>
		</ul>
		<ul>
			<li><a class="direkt" href="#">Link</a></li>
		</ul>
		<ul>
			<li><h3>Link</h3>
				<ul style="padding-left:30px;">
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				</ul>
			</li>
		</ul>
		<ul>
			<li><h3>Link</h3>
				<ul style="padding-left:30px;">
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				</ul>
			</li>
		</ul>
	</div>

	<div id="inhalt">
		<h2>Inhalt</h2><br/>
	</div>

</div>


</body>
</html>

Alles anzeigen

und hier die dazugehörige CSS-Datei (hab nur die entscheidenden Einträge reinkopiert)

Code

/*--Seite--*/


* {
margin: 0;
padding: 0;
font-family:Verdana;
}


body {
background-color:#808080;
}


#seite {
margin-left:auto; 
margin-right:auto; 
width:837px;
background-color:#eee; 
}


#header {
float:left; 
padding:14px 0px 0px 15px;
width:563px; 
line-height:0.2;
background-color:#fff;
min-height:107px;
}


#inhalt {
color:#f00;
padding:60px 11px 15px 70px; 
font: 13px Verdana;
min-height:550px;
clear:left;
}


/*--Navigation--*/


#menu {
float: left;
/*position:relative; top:1px;*/ /*--Versatz-Ausgleich von Menü-Balken und Grafik für Internet Explorer und Firefox--*/
width:646px;
background-color:#f00;
border:0;
font:12px Verdana;
cursor:default;
}


#menu ul {
float: left;
width: 92px;
list-style-type: none;
}


/*--Überschriften--*/
#menu h3 {
background-color: #f00;
border: 1px solid #f00;
font:bold 12px Verdana;
color: #fff;
text-align: center;
padding:3px;
}

Alles anzeigen

noch ein paar Erläuterungen: also zuerst kommt links oben ein div-Container als eigentlicher Header. Recht daneben folgt dann die Grafik, die ich teilen musste, da die Grafik zwei verschiedene Höhen hat (Menü wird durch die Höhe der ersten Grafik vertikal positioniert). Unter dem Header und unter der ersten Grafik folgt dann das horizontale Menü, das eigentlich mit der zweiten Grafik eben abschließen soll. Hab auch mal ein Foto angehängt, da das alles irgendwie schwer zu erklären ist^^

sejuma

Ohne Link zur Seite kann man dir schwer helfen, da man auch die eingebundenen Grafiken sehen muss.
Besorge dir ggf. Freewebspace bei einem Anbieter.

Du kannst es auch mal damit versuchen, letztlich ist aber ohne Link alles nur Spekulation:

Code

#header {
float:left; 
padding:14px 0px 0px 15px;
width:563px; 
background-color:#fff;
height:107px;
}

Versatz zwischen div und Grafik in Firefox/IE

Tags

Benutzer online in diesem Thema