zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden padding-Problem mit IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.07.2006, 06:38
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard padding-Problem mit IE

hallo,

ich hab ein kleines Problem mit dem IE mal wieder!

Das Logo hab ich als Hintergrund abgelegt und drücke die HP diesen Bereich mit padding nach unten. Im Mozilla siehts auch super aus, doch nicht im IE!

http://metalheroes.de/index.php

html
Code:
<body>
<div id="wrap">
	<div id="navigation">
		<ul class="navilist">
			<li><a href="#">Home</a></li>
			<li><a href="http://board.metalheroes.de">Forum</a></li>
			<li><a href="#">Crew</a></li>
			<li><a href="#">Link uns</a></li>
			<li><a href="#">Hilfe</a></li>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">Impressum</a></li>
</ul> </div> <!-- navigation end -->
	<div id="sidebar_l">
		<div class="me...............
css
Code:
* {
	margin:0;
	padding:0;
}
body {
	font-family:verdana,arial,helvetica,sans-serif;
	padding:10px 0;
	font-size:11px;
	color:#eee;
	background:#242424;
}
#wrap {
	margin:auto;
	padding:115px 0 0 0;
	width:780px;
	min-height:100%;
	text-align:left;
	border:1px solid #000;
	background:#515151 url(../design/img/logo.jpg) no-repeat;
}
#navigation ul {
	float:left;
	list-style:none;
	border-bottom:1px solid #8c8c8c;
	height:20px;
	width:780px;
	color:#fff;
	background:#242424 url(../design/img/cellpic.jpg) repeat-x;
}
#navigation ul li {
	display:inline;
	float:left;
	height:20px;
	width:50px;
	padding:0 0 0 13px;
}
#navigation ul li a {
	padding:4px 0 0 0;
	float:left;
	font-size:10px;
	font-weight:bold;
	text-align:center;
	color:#eee;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.07.2006, 08:54
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Das ist wegen deinem float in div#navigation. Lege mal einen Border rundum und du wirst sehen dass deine ul darüber hinaus reicht und es nur 1px hoch ist. (Mit einem border rundum würde es übrigens ebenfalls passen.)

Lösung:
Code:
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Code:
<div id="navigation" class="clearfix">
		  <ul class="navilist">
			    <li><a href="#">Home</a></li>
			    <li><a href="http://board.metalheroes.de">Forum</a></li>
			    <li><a href="#">Crew</a></li>
			    <li><a href="#">Link uns</a></li>
			    <li><a href="#">Hilfe</a></li>
    <li><a href="#">Kontakt</a></li>
			    <li><a href="#">Impressum</a></li>
  </ul>
</div> <!-- navigation end -->

Regards,
Lloyd
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.07.2006, 21:56
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für deine Erklärung und der Lösung. Ich war schon total verzweifelt. Jetzt weiss ich worauf ich achten muss.
Mit Zitat antworten
  #4 (permalink)  
Alt 21.07.2006, 03:23
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.864
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Code:
<div id="navigation" class="clearfix">
<ul class="navilist">
<li><a href="#">Home</a></li>
...
</ul>
</div>
Schmeiß das div raus (ist total überflüssig) und gib ul die ID. Dann brauchst Du Clearfix auch nicht. Oder Du entfernst bei ul das float und wendest Clearfix auf sie an. Die 1%-Höhe brauchst Du nicht, denn ul hat bereits Layout.

Man sollte irgendwo mal ganz groß hinschreiben "Legt keine divs um Eure Menülisten"...

Ob es bei diesem Design ratsam ist, die Links floaten zu lassen (eher nicht), ist eine andere Frage. In jedem Fall brauchen sie keine feste Höhe. Schau Dir das Menü mal nach Textvergrößerung im Firefox an.

Geändert von heiko_rs (21.07.2006 um 13:13 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 17:02
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
Frage zu horizontalen Linien marvin1989 CSS 3 30.12.2009 00:35
Problem mit CSS Style flo007 CSS 3 25.01.2009 18:08
Footer left und right Probleme... wolf1985 CSS 2 14.08.2008 14:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:59 Uhr.