[CSS] Unterschiede im IE zum Mozilla

Der IE braucht zwar öfters mal Extrawürste,in Deinem Fall liegt das Problem aber am verkorksten Quellcode.
*hüstel*Nur mal ein paar Beispiele:

HTML: 
<img border="0" src="images/rand_u.gif"
HTML: 
marginwidth="1"


HTML: 
<tr>
		<td width="360">
<!---NAVIGATION--->
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td><img src="images/navi_ol.gif" width="180" height="150" alt="Navigation 1"></td>
		<td><img src="images/navi_or.gif" width="180" height="150" alt="Navigation 2"></td>
(Hier fehlt das </tr>!)


Am besten setzt Du Dich hin,und machst das ganze nochmal ordentlich neu.Eventuell kannst Du die Tabellen auch mit Stylesheet formatieren.

Mit Tabellen als Layout wirst Du sowieso nie glücklich werden,da das Design sofort auseinander gerissen wird,wenn der Inhalt Deines iframes grösser ist als 450x440 Pixel.
 
Hmm,da haste natürlich recht.Aber sieht das wirklich Vorteilhaft aus?Ich persönlich finde Srollbars mitten im Design schrecklich.
Das Problem mit dem verzerren könnte dann immer noch mit den anderen Tabellenzellen (zum Beispiel in der Navigation) auf ihn zukommen.
Spätestens wenn die Webseite verändert werden soll,wird er mit den Tabellen viel Spass haben.Und das leider weniger im positiven Sinn.

Tabellen für ein Webseiten-Layout zu verwenden ist ja durchaus noch legitim.Zumindest solange Stylesheets noch nicht einheitlich von allen Browsern gleich interpretiert wird.
Nur sollte man dann seinen Quellcode etwas übersichtlicher schreiben.Das erleichtert die Fehlersuche und ein späteres Erweitern doch erheblich.
HTML: 
<table border="" width="" height="" cellspacing="" cellpadding="">
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
 
Cosmoflamme schrieb:
Tabellen für ein Webseiten-Layout zu verwenden ist ja durchaus noch legitim.Zumindest solange Stylesheets noch nicht einheitlich von allen Browsern gleich interpretiert wird.
Zum Vergrößern anklicken....

Natürlich kann man es noch machen, viele Wege fürhen zum Ziel. Jedoch nimmt man sich damit vorteile. Und die Aussage Stylesheets werden unterschiedlich interpetiert ist eine Ausrede. Man kann drotz unterschiedlicher Darstellung ordentliche Designs umsetzen die überall gut aussehen. Wer was anderes behauptet hat sich nie mit CSS auserinandergesetzt, wahrscheinlich weil er zu faul ist umzudenken.

Zum Problem... das kommt durch die Schriftgröße. Der IE blässt die Tabellenzellen immer auf die Zeilenhöhe auf wenn sie Inhalt haben. Reduziert man die schriftgröße oder Zeilenhöhe dann passt das Design wieder. (Soviel zum Thema unterschiedliche Darstellung)

PS: das Design wäre eigentlich perfekte für CSS geeignet... ;)
 
ist nicht so das ich noch nicht mit css gearbeitet habe, aber es ist recht langher das ich das letzte mal eine webseite ordentlich programmiert habe.
könnt ihr mir mal eben ein zwei gute links nenen in denen das ganz kurz und knapp erklärt ist vorallem wo man drauf achten sollte.

gruss und dank euch dreien!


edit: wenn ich das hier mal so sehe wird ja eigentlich stylesheet mäßig fast garnichts vom IE7 interpretiert
https://de.selfhtml.org/css/eigenschaften/tabellen.htm
 
Zuletzt bearbeitet:
die seite ist gut...
nur eins versteh ich nicht wie ich das machen soll.
ich hab ja bei mir verschiedene teile:
- navigation (mit den 6 feldern)
- inhalt (der inlineframe)
- das logo
- den barcode
- den rand um die navigation und den inhalt mit den abgerundeten ecken.

ich glaub ich würde alles so mit ein wenig rumprobieren und so an ort und stelle bekommen nur bei dem rand weiß ich nicht genau wie ich das anstellen sollte!

kleiner tipp!?!

gruss Mathis
 
Meine Webseite wurde von mir komplett nur mit div und Stylesheets erstellt.Von daher trifft das was Du sagst nicht auf mich zu :mrgreen:.
Ich finds alledings recht nervig,wenn das Ergebnis mit dem Firefox richtig dargestellt wird,und mit dem IE dann noch etxra Definitionen angegeben werden müssen.

Du hast 2 Möglichkeiten das umzusetzen:

1)Du bleibst beim Tabellelayout,und verwendest für die Formatierung Stylesheets.
<table>
<tr>
<td class="inhalt"></td>
</tr>
</table>
Zum Vergrößern anklicken....

Stylesheet:
td.inhalt {Definition}
Zum Vergrößern anklicken....

Hier machst Du dann alle Angaben zu Grösse,Hintergrundbilder/Farbe etc.


2)Du machst es gleich richtig,und verwendest div-Container und Stylesheet
für die Formatierung.Allerdings musst Du dann auch eine Angabe zur Position der Container angeben.

<div id="inhalt1"></div>
Zum Vergrößern anklicken....

Stylesheet:
#inhalt {Definition}
Zum Vergrößern anklicken....

Du kannst z.b für Deinen Inhalt einen Div-Container in passender Grösse erstellen,und diesen dann pixelgenau ausrichten.

Das extra lernen zu müssen mag vielleicht etwas aufwendig aussehen,aber es lohnt sich.Falls Du nicht weiter kommst oder Hilfe brauchst,kannst Du Dich gerne hier oder bei mir über ICQ melden.
Grüssle
Cosmoflamme
 
Zuletzt bearbeitet:
jo ich hab nun heute fast den ganzen tag mal mit css rum probiert und geschaut wie das so aufgebaut ist was man machen kann etc. ich bin beeindruckt es eröffnet sich ganz andere art layouts und webseiten darzustellen.

das will ich nun auch mal also direkt mal ein versuch die saltnpeppa seite im css.

ich hab nun verstanden das ich für den navi und den inhalt teil 2 divs brauche aber auch noch einen in denen ich die beiden rein packe oder geht das auch ohne den darunter!?
aufjedenfall klappts so...

bin nun dran hängen geblieben das ich das ganze nicht zentrieren kann vertikal wie horizontal.
mit margin: auto zentriert er es nur mittig von links und rechts (also horizontral).
IE untersützt das auto nicht und vertical gehts leider auch nicht.
oder gibts dafür nen tipp!?
 
Klar,mit Stylesheet lässt sich das ohne weiteres machen.
Angenommen,Deine äusserste Box soll die Grösse 900x800 Pixel haben.Dann verwendest Du die Stylesheet-Definition
HTML: 
#zentriert {position:absolute; left:50%; top:50%; width:900px; height:800px; margin-left:-450px; margin-top:-400px;}

margin-left muss dabei immer die Hälfte der Breite,und margin-top die Hälfte der Höhe des Containers sein.
Möchtest Du es nur vertical zeentriert haben,lässt Du einfach das top:50% und das margin-top:-400px weg.

Alle weiteren Container,die von dem Div "zentriert" eingeschlossen sind,sind dann ebenfalls zentriert.
also z.B:
HTML: 
<div id="zentriert">
<div id="Inhalt"></div>
<div id="Navigation"></div>
</div>
 
Zuletzt bearbeitet:
yeah geil! geht wirklich alles, ich bin begeistert!
muss ich den rahmen mit dem von rot auf weiß und den runden ecken welcher um den großen div (wo navi und inhalt drin sind) muss mit mit float:left/right/bottom... machen?!
 
Hab gestern abend mal aus langerweile ein wenig rumgebastelt... hab kanpp 40min gebraucht. Hab kein einziges Bild verwendet. Die runden ecken funktionieren daher auch nur im Firefox, für den IE müsste man ein Bild verwenden. (einfach #main ein passendes Hindergrundbild geben) Ansonsten das einzig negative ist das Verhalten bei zu kleinen Bildschirmen, da verhält sich ne Tabelle bei weitem besser.

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" lang="de" xmlns="https://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
	<div id="wrapper">
		<h1>qLuqp</h1>
		<div id="main">
			<div id="content_wrapper">
				<div id="content">
					HOME<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
				</div>
			</div>
			
			<ul id="navigation">
				<li class="link1"><a href="">Home</a></li>
				<li class="link2"><a href="">Bilder</a></li>
				<li class="link3"></li>
				<li class="link4"><a href="">Videos</a></li>
				<li class="link5"><a href="">AGB</a></li>
				<li class="link6"><a href="">Impressum</a></li>	
			</ul>		
		</div>
	</div>

	<div id="barcode">
		<i></i><u></u><u></u><i></i><i></i><u></u><i></i><u></u><u></u><i></i><u></u><i></i><i></i><i></i><u></u><u></u><i></i><u></u><i></i><u></u><i></i><u></u><u></u><i></i><u></u><i></i><u></u><u></u><i></i><u></u><i></i><u></u><i></i><i></i><u></u><i></i><i></i><u></u><i></i><i></i><u></u><i></i><u></u><u></u><i></i><u></u><i></i><u></u>
	</div>
</body>
</html>

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

body {
	background-color: #1F5392;
	/*background-color: #A40D0D;*/
	/*background-color: #209128;*/
}

#barcode {
	position: absolute;
	bottom: 0;
	
	width: 400px;
	height: 40px;
}

#barcode * {
	display: block;
	width: 8px;
	height: 100%;
	float: left;
}

#barcode i {
	background-color: #fff;
}

#wrapper {
	width: 800px;
			
	position: absolute;
	top: 50%;
	left: 50%;
	
	margin: -350px -400px -250px -400px;
	
	z-index: 1000;
}

h1 {
	height: 80px;

	color: #fff;
	font-weight: bold;
	font-size: 80px;
	
	text-align: right;
	float: right;
}

#main {
	position: absolute;
	top: 85px;
	
	width: 790px;
	clear: both;
	height: 450px;
	background-color: #fff;
	
	padding: 5px;
	
	-moz-border-radius: 5px;
}

#content_wrapper {
	float: right;			

	height: 100%;
	width: 420px;
	
	overflow: auto;
}

#content {
	padding: 10px;		
}

#navigation {
	width: 360px;
	height: 100%;
	
	list-style-type: none;
}

#navigation li {			
	width: 50%;
	height: 33.333%;
	
	float: left;
	
	position: relative;
}

#navigation li a {
	position: absolute;
	bottom: 2px;
	right: 5px;
	
	text-decoration: none;
	
	color: #444;
	font-size: 18px;
}

#navigation .link1 { background-color: #ccc; }
#navigation .link1:hover { background-color: #eee; }
#navigation .link2 { background-color: #ddd; }
#navigation .link2:hover { background-color: #aaa; }
#navigation .link3 { background-color: #999; }
#navigation .link3:hover { background-color: #aaa; }
#navigation .link4 { background-color: #eee; }
#navigation .link4:hover { background-color: #ccc; }
#navigation .link5 { background-color: #bbb; }		
#navigation .link5:hover { background-color: #ccc; }	
#navigation .link6 { background-color: #aaa; }
#navigation .link6:hover { background-color: #ccc; }
 
hät mich gefreut wenns geklappt hätte leider schauts so bei mir aus:

Im Firefox 2


Im IE 6
 
Du hast ganz am Anfang der *.css-Datei ein Sternchen (*) vergessen, ist dieses vorhanden, läuft es einwandfrei. ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben