FF, IE Darstellungskrampf...!

S

smaak

Well-known member
7 Mai 2006
2.811
357
Nabend zusammen!

Ich möchte euch mal wieder zu einer neuen Runde der Darstellungsfehler einladen und hoffe auf eure rege Teilnahme. Wie so üblich, stellt der FF alles zu meiner vollsten Zufriedenheit dar, wogegen der IE mein vorhaben genau so schrecklich darstellt, wie er im generellen auch ist. Zur Veranschaulichung habe ich mal zwei Screens hochgeladen.

Hier die Screens:
IHE


FF


Zu guter Letzt noch die CSS und HTML Bröckchen:
CSS
Code: 
body {
	margin: 0px;
	background-color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}

/* Partner */
#partner {
	width: 100%;
	height: 14px;
	background-color: #FF9900;
	color: #333333;
}

/* Header */
#header {
	padding-top: 5px;
}

/* Navigationsbox */
#navi {
	background-color: #FFFFFF;
	background-image: url(img/navi.jpg);
	background-repeat: repeat-y;
	padding-top: 1px;
}

/* Main */
#main {
	background-color: #FFFFFF;
	color: #333333;
	padding-left: 5px;
	padding-top: 1px;
}

/* Standardlinks */
a:link {
	color: #666666;
	text-decoration: none;
}
a:visited {
	color: #666666;
	text-decoration: none;
}
a:hover {
	color: #666666;
	text-decoration: underline;
}
a:active {
	color: #666666;
	text-decoration: none;
}

/* Navigation */
ul {
list-style-type:none;
width:80%;
padding-left: 3px;
}
li {margin-bottom: 0.5em;}
li a:link, li a:visited, li a:hover, li a:active, li a:focus {
background:#333333; color:orange;
width:auto; height: auto;
display:block;
border-bottom: 1px solid white;
border-left: 0.5em solid white;
text-decoration:none;
padding-left: 1px; padding-bottom: 1px;
font-size:11px;
}
li a:visited { color:white; border-color:white; }
li a:hover { color:orange; border-color:orange; }
li a:active { color:orange; border-color:orange; }
li a:focus { color:white; border-color:white; }

HTML
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel und sowas</title>
<link rel="stylesheet" type="text/css" href="bege.css" media="screen" />
</head>

<body>
<!-- Partner -->
<div id="partner"><b>Partner: </b>Test</div>
<!-- Logo -->
<div id="header" align="center"><img src="img/header.jpg" alt="Header" /></div>
<div align="center"><img src="img/begebar.jpg" alt="begebar" /></div>
<!-- Navigation und Inhalt -->
<div align="center">
<table width="897" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="155" id="navi" valign="top">
  <b>BenutzerGeil.de</b>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
  <b>Paid4</b>
<ul>
<li><a href="#">Paidmailer</a></li>
<li><a href="#">Startseiten</a></li>
<li><a href="#">Layer</a></li>
</ul>
</td>
    <td width="722" id="main" valign="top">tfuzjjtzuj r6iknfgukntzukntzukn<br /></td>
  </tr>
</table>
</div>
</body>
</html>

Ich hoffe ihr könnt mir weiterhelfen. Mein Ziel ist es das der IHE es genau so darstellt, wie der FF!

Vielen Dank schoneinmal!
 
Kein padding benutzen, da das Boxmodell des IEs ein "wenig" anders tickt und er dir sonst andere Breiten und Höhen ausrechnet.

So habs ich zumindest in Erinnerung, wie ich mich das letzte Mal in den Kampf geworfen hab :mrgreen:
 
Vielen Dank ihr beiden, klappt eins A! Ich muss gleich erstmal genau gucken, was genau der strolch da geändert hat. ;)
 
cholerisch schrieb:
Ich muss gleich erstmal genau gucken, was genau der strolch da geändert hat. ;)
Zum Vergrößern anklicken....

css datei:
Code: 
/* folgendes vor die body deklaration*/
* {
padding: 0;
margin: 0;
}
body {.....

/* Navigation */
ul {
list-style-type:none;
width:80%;
padding-left: 3px;
/* hier bin ich net sicher ob ich was gemacht habe*/
}
li {/* gefloatet mit fester widthangabe*/margin-bottom: 0.5em; float: left; clear: left; width: 130px; text-align: left;}
li a:link, li a:visited, li a:hover, li a:active, li a:focus {
background:#333333;
color:orange;
/* height und width rausgenommen*/
display:block;
border-bottom: 1px solid white;
border-left: 0.5em solid white;
text-decoration:none;
padding-left: 1px;
padding-bottom: 1px;
font-size:11px;
}
Das wars glaube ich im großen und ganzen auch schon. Fals du nochmal die float Regel lesen willst kann ich dir auch noch den Link hier posten, sehr informativ.
 
er hat einfach aus der liste den margin rausgenommen... die listen verhalten sich ein wenig anders als im firefox.
 
@ZeroCCC Jap genau das hatte ich anfangs getan allerding hat das für den IE nicht gereicht, deswegen habeich zusätzlich noch mit float und clear gearbeitet.
 
strolch00 schrieb:
Fals du nochmal die float Regel lesen willst kann ich dir auch noch den Link hier posten, sehr informativ.
Zum Vergrößern anklicken....

Poste ruhig mal den Link, man lernt ja nie aus. Vielen Dank!

PS: Kann dich leiner nich renomieren, da ich dich in einem anderen Thread schon mit grünen Popel beworfen hab.
 
strolch00 schrieb:
@ZeroCCC Jap genau das hatte ich anfangs getan allerding hat das für den IE nicht gereicht, deswegen habeich zusätzlich noch mit float und clear gearbeitet.
Zum Vergrößern anklicken....

hrm ja... das liegt vermutlich an der tabelle. der ie hat immer ein bullet an jedem item, auch wenns ausgeblendet wird. wenn man margin: 0; macht rutscht das aus dem listen container raus... und somit hat man den gewünschten effekt. aber scheinbar hat die tabelle ne starke grenze und deswegen rutscht dass ganze ein stück nach links... also würde ich mal behaupten hätte man keine tabelle als gestaltungs ellement genommen wäre dass nicht passiert.
 
ZeroCCC schrieb:
also würde ich mal behaupten hätte man keine tabelle als gestaltungs ellement genommen wäre dass nicht passiert.
Zum Vergrößern anklicken....

War mein Vorhaben, aber ganz allein mit divs komm ich noch nicht so klar. Habe mir das Layouten damals nur mit Tabellen beigebracht und hänge was das angeht nun etwas hinterher! ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben