Mozilla und IE7

ALDI

Hallo Forum-Hilfe !!!

Bin selber noch ein ziemlicher HTML-Neuling und habe da ein Problem mit dem Layout
meiner kleinen Homepage. Im Firefox Browser 2.0.0.7 wird die Seite genau so dargestellt, wie ich mir das vorgestellt habe, aber leider nicht im Internet Explorer 7.
Da verrutschen einigen Sachen. Ich benutzte zwei Editoren, Phase5 und das Programm Eversoft Firstpage 2006. Da verrutscht das Layou der Seite mittlerweile auch schon, im Firefox sieht dann aber alles prima aus.
Könnte sich vielleicht jemand von Euch den HTML-Code anschauen und mir sagen, wo und was ich anpassen müsste, damit es auch im IE7 richtig dargestellt wird.

Hier ist der Rapidshare-Link dazu:
http://rapidshare.com/files/62698109/Darieland.rar

misterjs

kannst es mit css hacks versuchen. schau einfach mal bei selfhtml oder poste den code
mfg johannes

chris90night

Codest du selber oder machst du von WYSIWYG (What you see is what you get) Gebrauch?
Bei Letzterem ist eine Hilfe ausgeschlossen, den Quelltext, den die Editoren produzieren kannste so wie er is, oft nur für einen Browser verwenden ...

nein, ich code das html selber....benutze dem wysiwyg kram nichtmehr, weils mir den
letzten nerv geraubt hat. (im darieland.rar ist das komplette Template drin,keine Angst ist virenfrei, kann aber den Code auch mal hier reinposten).

Hab zuerst Wiswigs-Editoren benutzt, es dann aber sein gelassen, weil die nie das gemacht haben, was ich wollte.

Habe meine Seite letztendlich mit Tabellen strukturiert, im FIreforx alles okay, aber im IE nicht.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>darieland.de</title>
  <meta content="Evrsoft First Page" name="GENERATOR" />
  <meta content="Darie" name="author" />
  <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
  <meta content="homepage" name="description" />
  <meta content="" name="keywords" />
  <link href="darieland.css" type="text/css" rel="stylesheet" />
</head>


<body bottommargin="35" background="back.gif" topmargin="60" marginheight="60">


<table cellspacing="0" cellpadding="0" width="760" align="center" border="2" bordercolorlight="#B7A99B" bordercolordark="#A49383">
<tr>
	<td valign="top" colspan="2" height="110" width="760" > [img]logo.gif[/img] </td>
</tr>


<tr height="1024">
	<td valign="top" width="134" style="overflow:hidden" background="border.gif">


		<div id='menu'>
		<ul id='li'>
		<li >[url='index.html']Home[/url]
		<li >[url='battlefield.html']BF2142[/url]
		<li >[url='projekte.html']PB-Projekte[/url]
		<li >[url='downloads.html']Downloads[/url]
		<li >[url='graphix.html']Graphix[/url]
		<li >[url='sounds.html']Sounds[/url]
		<li >[url='fundgrube.html']Fundgrube[/url]
		<li >[url='aboutme.html']Über Mich[/url]
		<li >[url='gaestebuch.html']Gästebuch[/url]
		<li >[url='kontakt.html']Kontakt[/url]
		[/list]
		</div>


	</td>


	<td valign="top" bgcolor="#E5D7C9" background="head.gif" style="background-repeat:no-repeat;">


	  <h1>[Home]</h1> 






	  <h2>W&middot;E&middot;L&middot;C&middot;O&middot;M&middot;E</h2>
	  <h3>to www.darieland.de</h3> 






	  [img]baustelle.gif[/img]
	  <p class="text" align="center" >work in progress... have a look next time !!!</p>


	</td>
</tr>


<tr>
	<td valign="top" background="foot.gif" colspan="2" height="31" style="padding:6px;">
	</td>
</tr>
</table>




<p align="center">- Design by AD-Software &copy; 2007 -</p>


</body>
</html>

Alles anzeigen

und hier die CSS Datei

Code

h1 {font-family:Verdana;font-size:16px;text-align:right;color:#f9f9ef;
    margin:6px;font-weight:lighter;}


h2 {font-family:Verdana;font-size:36px;text-align:center;color:#f9f9ef;
    margin:0px;font-weight:bold;text-decoration:blink;}


h3 {font-family:Verdana;font-size:24px;text-align:center;color:#f9f9ef;
    margin:0px;font-weight:normal;}


.text {font-family:Verdana;font-size:18px;color:#AFA091;
      margin:10px;font-weight:normal;}


#menu {
	width: 134px;
	}


#li {
	font:14px arial;
	color:#003871;
	height: 32px;
	list-style:none;
	margin:0px;
	padding:0px;
    }


#menu li a {
  	voice-family: "\"}\"";
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}


#menu li a:link, #menu li a:visited {
	color: #003871;
	display: block;
	background: url(buttons.gif);
	padding: 8px 0 0 30px;
	}


#menu li a:hover {
	color: #fff;
	background: url(buttons.gif) 0 -32px;
	padding: 8px 0 0 30px;
	}


#menu li a:active {
	color: #fff;
	background: url(buttons.gif) 0 -64px;
	padding: 8px 0 0 30px;
	}

Alles anzeigen

chris90night

Ich persönlich würde alles Formatierungsangaben mit CSS machen, aber so halb mal dies und mal das, wird unübersichtlich und wie du siehst kommt oft für viele Browser nix gescheites dabei raus

So Dinge z.B. wie:

Code

... bottommargin="35" ...

oder z.B. sowas:

Code

<td valign="top" bgcolor="#E5D7C9" background="head.gif" style="background-repeat:no-repeat;">

würde ich lassen, die Angaben kannst du alle in ein Stylesheet packen.

Chris

ja, stimmt schon, habe es erstmal so gemacht, weil ich ohnehin schon ne krise bekommen habe, weil anfangs nichts so hingehauen hat, wie ich es eigentlich wollte.....
War dann froh, dass ich das Tabellenlayout hinbekommen hab....

Aber wieso stellt der IE die Zelle mit den Navi-Links breiter da? Was muss ich für den IE korrigieren, damit das Layout genauso dargestellt wird, wie im Firefox....????

misterjs

hi
schau mal ob du da etwas findest

http://de.selfhtml.org/css/formate/box_modell.htm

mfg johannes

Okay, danke für den Tip, werde mal nachrechnen, ob die Gesambreiten mit den Rändern übereinstimmen. Werde es nochmal versuchen, dass hinzukriegen. Falls nicht melde ich mich nocheinmal ....

Thanx

Alexander

Tags