Darstellungsprobleme im Firefox

**pAd** · 23.12.2008 14:41

hi,

seit geraumer Zeit beschäftige ich mich mit einem kleinen Problem in Firefox.
Um das Problem ein bischen zu verdeutlichen, hier zwei Screenshots:

Problem: Der Schatten am Rand hört im Firefox bei viel Text einfach auf - im IE nicht.

Problem: Der graue "Bereich" hinter dem Text hört bei wenig Text einfach auf - im IE nicht.

Code index.php:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><?php echo $title; ?></title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

<div id="main">
	<div id="border_left"></div>
	
		<div id="page">
			<div id="header">
				<div id="header_1"></div>
				<div id="header_2"></div>
				<div id="header_3"></div>
				<div id="header_4"></div>		
				<div id="menu">
					<script language="javascript">
							if (AC_FL_RunContent == 0) {
							alert("Diese Seite erfordert die Datei \"AC_RunActiveContent.js\".");
							} else {
							AC_FL_RunContent(
							'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
							'width', '640',
							'height', '80',
							'src', 'menu',
							'quality', 'best',
							'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
							'align', 'middle',
							'play', 'true',
							'loop', 'true',
							'scale', 'showall',
							'wmode', 'window',
							'devicefont', 'false',
							'id', 'menu',
							'bgcolor', '#111111',
							'name', 'menu',
							'menu', 'true',
							'allowFullScreen', 'false',
							'allowScriptAccess','sameDomain',
							'movie', 'menu',
							'salign', ''
							); //end AC code
							}
					</script>
					<noscript>
						<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="640" height="80" id="menu" align="middle">
						<param name="allowScriptAccess" value="sameDomain" />
						<param name="allowFullScreen" value="false" />
						<param name="movie" value="menu.swf" /><param name="quality" value="best" /><param name="bgcolor" value="#111111" />
						<embed src="menu.swf" quality="best" bgcolor="#111111" width="640" height="80" name="menu" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
						</object>
					</noscript>
				</div>
				<div id="header_menu_end"></div>
			</div>
			
			<div id="space_header_content"></div>
			
			<div id="content_container">
				<div id="sidebar_all">
					<div id="sidebar_1"></div>
					<div id="sidebar_2">
									
					<table style="border: 0;" cellpadding="0" cellspacing="0">
						<tr>
							<td class="textpadding"></td>						
							<td>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla. </td>
							<td class="textpadding"></td>
						</tr>
					</table>
					
					</div>
					<div id="sidebar_3"></div>
				</div>
				<div id="content_all">
					<div id="content_1"></div>
					<div id="content_2">
					
					<table style="border: 0;" cellpadding="0" cellspacing="0">
						<tr>
							<td class="textpadding"></td>
							<td>
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.	
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
								
							</td>
							<td class="textpadding"></td>
						</tr>
					</table>
					
					</div>
					<div id="content_3"></div>
				</div>
				
				<div class="clear"></div>
				
			</div>
			
			<div id="footer_all">
			<div id="space_content_footer"></div>
			<div id="footer_1"></div>
			<div id="footer_2"></div>
			<div id="sponsor_1"></div>
			<div id="footer_3"></div>
			<div id="sponsor_2"></div>
			<div id="footer_4"></div>
			<div id="sponsor_3"></div>
			<div id="footer_5"></div>
			<div id="sponsor_4"></div>
			<div id="footer_6"></div>
			<div id="footer_7"></div>
			
			
			</div>
		</div>

	<div id="border_right"></div>	
	<div class="clear"></div>
</div>

</body>
</html>

Code index.css:

Code:

* html,body {
	min-height: 100%;
	height: 100%;
	margin:0;
	padding:0;
}

body {
    background-image: url(../gfx/background_1.jpg);
	background-repeat: repeat;
	color: #ffffff;
	font-family: sans-serif;
	font-size: 10pt;
}

table {
	font-size: 10pt;
}

a:link {
	color: #000000;
}
a:visited {
	color: #333333;
}
a:hover {
	color: #333333;
}
a:active {
	color: #333333;
}

.clear {
	clear:left;
}

.textpadding {
	width: 18px;
}

#main {
	position: relative;
	left:50%;
	min-height:100%;
	height: auto !important;
	height: 100%;
	width:1120px;
	margin-left:-560px;
}

#border_left {
	float: left;
	background-image: url(../gfx/border_left.jpg);
	width: 40px;
	height: 100%;
	min-height:100%;
}

#border_right {
	float: left;
	background-image: url(../gfx/border_right.jpg);
	width: 40px;
	height: 100%;
	min-height:100%;
}

#page {
	float: left;
	background-color: #111111;
	min-height:100%;
	height: auto !important;
	height:100%;
	width: 1000px;
}

#header {
	float: left;
	height: 190px;
	width: 1000px;
}

#header_1 {
	float:left;
	background-image: url(../gfx/header_1.jpg);
	width:422px;
	height: 40px;
}

#header_2 {
	float:left;
	background-image: url(../gfx/header_2.jpg);
	width:578px;
	height: 40px;
}

#header_3 {
	clear: left;
	background-image: url(../gfx/header_3.jpg);
	width: 1000px;
	height: 70px;
}

#header_4 {
	float: left;
	background-image: url(../gfx/header_4.jpg);
	width: 342px;
	height: 80px;
}

#menu {
	float: left;
	width: 640px;
	height: 80px;
}


#header_menu_end {
	float: left;
	background-image: url(../gfx/header_menu_end.jpg);
	width: 18px;
	height: 80px;
}

#space_header_content {
	clear:left;
	background-image: url(../gfx/space_header_content.jpg);
	width: 1000px;
	height: 10px;
}

#content_container {
	padding-bottom: 157px;	
}

#sidebar_all {
	float:left;
	background-color: #1a1a1a;
}

#sidebar_1 {
	background-image: url(../gfx/sidebar_1.jpg);
	width: 260px;
	height: 24px;
}

#sidebar_2 {
	background-color: #1a1a1a;
	width: 260px;
}

#sidebar_3 {
	background-image: url(../gfx/sidebar_3.jpg);
	width: 260px;
	height: 24px;
}

#content_all {
	float: left;
	background-color: #111111;
}

#content_1 {
	background-image: url(../gfx/content_1.jpg);
	width: 740px;
	height: 24px;
}

#content_2 {
	background-color: #111111;
	width:740px;
}

#content_3 {
	background-image: url(../gfx/content_2.jpg);
	width: 740px;
	height: 24px;
}


#footer_all {
	clear:left;
	width: 1000px;
	height: 156px;
	position: absolute;
	bottom:0;
}

#space_content_footer {
	background-image: url(../gfx/space_content_footer.jpg);
	width: 1000px;
	height: 28px;
}


#footer_1 {
	float:left;
	background-color: #3d3d3d;
	width: 1000px;
	height: 10px;
}

#footer_2 {
	float:left;
	background-color: #3d3d3d;
	width: 20px;
	height: 110px;
}

#footer_3 {
	float:left;
	background-color: #3d3d3d;
	width: 53px;
	height: 110px;
}

#footer_4 {
	float:left;
	background-color: #3d3d3d;
	width: 54px;
	height: 110px;
}

#footer_5 {
	float:left;
	background-color: #3d3d3d;
	width: 53px;
	height: 110px;
}

#footer_6 {
	float:left;
	background-color: #3d3d3d;
	width: 20px;
	height: 110px;
}

#footer_7 {
	clear:left;
	background-color: #3d3d3d;
	width: 1000px;
	height: 8px;
}

#sponsor_1 {
	float:left;
	background-image: url(../gfx/footer_sponsor_1.jpg);
	width: 200px;
	height: 110px;
}

#sponsor_2 {
	float:left;
	background-image: url(../gfx/footer_sponsor_2.jpg);
	width: 200px;
	height: 110px;
}

#sponsor_3 {
	float:left;
	background-image: url(../gfx/footer_sponsor_3.jpg);
	width: 200px;
	height: 110px;
}

#sponsor_4 {
	float:left;
	background-image: url(../gfx/footer_sponsor_4.jpg);
	width: 200px;
	height: 110px;
}

Schonmal vielen Dank im vorraus.

**Boris** · 23.12.2008 14:57

Du siehst deinen Fehler im IE nicht, weil dieser eine Sache falsch macht - du musst deine Floats auch korrekt Clearen, der IE macht es einfach so von sich aus.

**pAd** · 23.12.2008 15:05

Hmm..
Wäre nett wenn du mir ein paar kleine Denkanstöße geben könntest^^ Bin noch nicht wirklich sicher mit HTML und CSS unterwegs. :S

**Boris** · 23.12.2008 15:13

*Anstoß*

http://www.andreas-kalt.de/webdesign.../float-theorie
http://fwpf-webdesign.de/css/float-und-clear

**pAd** · 23.12.2008 15:55

Danke

Endlich mal was vernünftiges.. nach 2 Stunden "Das Parfüm" lesen is man fertig mit der Welt hehe

**pAd** · 23.12.2008 20:33

Hmm irgendwie blick ich da nich durch :/
Hab ich irgendwo ein clear vergessen?

Edit:
Hab es jetz schonmal geschafft, dass der Schatten bis nach ganz unten geht - bzw bis zum Ende vom Footer. Nur geht der ganze Content jetzt hinter dem Footer her und kommt unten wieder raus

Edit2:
Ich hab echt kein Plan mehr, was ich ändern kann / muss :/ Glaube jetz bin ich an dem Punkt angelangt, an dem ich aufgebe oO 5 Stunden rumprobieren ohne das Problem zu lösen reicht mir. Schlauer werd ich dadraus auch nicht mehr.

zur Startseite vom TP

Thema: Darstellungsprobleme im Firefox

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Darstellungsprobleme im Firefox

Ähnliche Themen

Darstellungsprobleme mit Firefox 3

Darstellungsprobleme nur im IE, nicht in Firefox oä.

Darstellungsprobleme

Darstellungsprobleme im FIREFOX

Darstellungsprobleme

Aktive Benutzer

Aktive Benutzer