IE will mal wieder nicht richtig darstellen! FF schon!

Status
Nicht offen für weitere Antworten.
D

daddz

Mitglied
Hi erstma,
ich hab mal wieder ein Problem mit dem IE...immer dasselbe mit diesen M$-Produkten! ;)
Auf jeden Fall gehts im Firefox wunderbar!
Also hier ist erstmal der Quellcode:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="menu.css">
		<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>
		<div align="center">
		<table border="1" cellpadding="0" cellspacing="0" class="pageclass">
			<tr>
				<td valign="top">
					<table cellpadding="0" cellspacing="0" class="sizeclass"> 
						<tr>
							<td valign="top">
								<table cellpadding="0" cellspacing="0" class="sizeclass">
									<tr>
										<td height="103" class="bgclass3"></td>
									</tr>
									<tr>
										<td valign="top" align="left">
											<table id="menu" cellpadding="0" cellspacing="0" width="89">
												<tr>
													<td valign="middle" class="menu_punkt a">
														<center><a href="#">Main1</a></center>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt a">
														<center><a href="#">Main2</a></center>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt a">
														<center><a href="#">Main3</a></center>
													</td>
												</tr>
												<tr>
													<td>
														<hr>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt a">
														<center><a href="#">Main4</a></center>
													</td>
												</tr>
											</table>
											<table cellpadding="0" cellspacing="0" width="89" class="heightclass">
												<tr>
													<td width="89" valign="top">
														<img src="pics/ecke2.jpg" alt="">
													</td>
												</tr>
												<tr>
													<td valign="top" class="heightclass">
														<table cellpadding="0" cellspacing="0" class="heightclass">
															<tr>
																<td class="bgclass" width="22">&nbsp;</td>
															</tr>
														</table>
													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
							<td valign="top" align="center"> 
								<table cellpadding="0" cellspacing="0" >
									<tr>
										<td class="bgclass4" width="50%" valign="top"></td>
										<td valign="top">
											<img src="pics/roess_rad_logo.gif" alt="">
										</td>
										<td class="bgclass4" width="50%" valign="top"></td>
									</tr>
								</table>
								
								<table cellpadding="0" cellspacing="5" class="widthclass">
									<tr>
										<td valign="top">
											<hr>
										</td>
									</tr>
									<tr>
										<td valign="top">
											<table cellpadding="0" cellspacing="0">
												<tr>
													<td>
														inhalt<br><br><br><br><br><br><br>test
													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
							<td valign="top" align="right">
								<table cellpadding="0" cellspacing="0" class="sizeclass">
									<tr>
										<td class="bgclass3" height="103"></td>
									</tr>
									<tr>
										<td valign="top" align="right">
											<table id="menu2" cellpadding="0" cellspacing="0" width="89">
												<tr>
													<td valign="middle" class="menu_punkt2 a">
														<center><a href="#">Sub1</a></center>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt2 a">
														<center><a href="#">Sub2</a></center>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt2 a">
														<center><a href="#">Sub3</a></center>
													</td>
												</tr>
												<tr>
													<td>
														<hr>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt2 a">
														<center><a href="#">Sub4</a></center>
													</td>
												</tr>
											</table>
											<table cellpadding="0" cellspacing="0" width="89" class="heightclass">
												<tr>
													<td width="89" valign="top">
														<img src="pics/ecke3.jpg" alt="">
													</td>
												</tr>
												<tr>
													<td valign="top" class="heightclass" align="right">
														<table cellpadding="0" cellspacing="0" class="heightclass">
															<tr>
																<td class="bgclass2" width="22">&nbsp;</td>
															</tr>
														</table>
													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		</div>
	</body>
</html>
dann hier noch die CSS-Sheets:
(main.css)
HTML: 
#content {
	padding-left:2px;
}

.bgclass {
	height: 100%;
	background-color:#6487DB;
	border-style:solid;
	border-width:1px;
	border-top:0px;
	border-bottom:0px;
	border-left:0px;
	border-color:#565657;
}

.bgclass3 {
	background: url('pics/logo_bg3.jpg') repeat-x;
	width:100%;
}

.bgclass4 {
	background: url('pics/logo_bg2.jpg') repeat-x;
}

.bgclass2 {
	height: 100%;
	background-color:#6487DB;
	border-style:solid;
	border-width:1px;
	border-top:0px;
	border-bottom:0px;
	border-right:0px;
	border-color:#565657;
}

.heightclass {
	height: 100%;
}

.widthclass {
	width: 100%;
}

.sizeclass {
	height: 100%;
	width: 100%;
}

.pageclass {
	height: 100%;
	width: 800px;
}
die andere CSS-Datei ist unwichtig weil die keine probleme verursacht!
So nun zum Problem, im IE werden die Balken unter den Menüs nicht richtig angezeigt! Sie sollten eigentlich bis ans untere Ende der Seite gehn aber das tun sie nur im FF. Helft mir bitte!
Hier der Link zum ansehen: Klick!

Danke schonmal!

greetz
daddz
 
Hi,

zunächst würde ich der ersten inneren Tabelle eine Hintergrundfarbe (weiss) zuweisen. Hat jemand
wie ich geänderte Systemfarben, werden diese als Background übernommen.

Zum eigentlichen Problem:
Weise der linken und rechten Spalte der ersten inneren Tabelle Hintergrundbilder zu, die die Spalte
simulieren. Ich habe zwei mögliche Bilder in den Anhang.

Weiterhin solltest du Leerzeilen bei den Ecken-Bildern vermeiden, da sonst der IE Lücken einblendet.

Die geänderten Passagen im Quelltext habe ich fett hervorgehoben.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://www.d-struction.de/roess/menu.css">
		<link rel="stylesheet" type="text/css" href="http://www.d-struction.de/roess/main.css">
	</head>
	<body>
		<div align="center">
		<table border="1" cellpadding="0" cellspacing="0" class="pageclass">

			<tr>
				<td valign="top">
					<table cellpadding="0" cellspacing="0" class="sizeclass" style="background: #ffffff;">
						<tr>

							<td valign="top" style="background: url(../bilder/blau_links.gif) repeat-y;">

								<table cellpadding="0" cellspacing="0" class="sizeclass">
									<tr>
										<td height="103" class="bgclass3"></td>
									</tr>

									<tr>
										<td valign="top" align="left">
											<table id="menu" cellpadding="0" cellspacing="0" width="89">
												<tr>
													<td valign="middle" class="menu_punkt a">
														<center><a href="#">Main1</a></center>
													</td>
												</tr>

												<tr>
													<td valign="middle" class="menu_punkt a">
														<center><a href="#">Main2</a></center>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt a">
														<center><a href="#">Main3</a></center>

													</td>
												</tr>
												<tr>
													<td>
														<hr>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt a">

														<center><a href="#">Main4</a></center>
													</td>
												</tr>
											</table>
											<table cellpadding="0" cellspacing="0" width="89" class="heightclass">
												<tr>
													<td width="89" valign="top"><img src="http://www.d-struction.de/roess/pics/ecke2.jpg" alt=""></td>
												</tr>
												<tr>
													<td valign="top" class="heightclass">
														<table cellpadding="0" cellspacing="0" class="heightclass">
															<tr>
																<td class="bgclass" width="22">&nbsp;</td>
															</tr>
														</table>

													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
							<td valign="top" align="center">
								<table cellpadding="0" cellspacing="0" >

									<tr>
										<td class="bgclass4" width="50%" valign="top"></td>
										<td valign="top">
											<img src="http://www.d-struction.de/roess/pics/roess_rad_logo.gif" alt="">
										</td>
										<td class="bgclass4" width="50%" valign="top"></td>
									</tr>
								</table>

								<table cellpadding="0" cellspacing="5" class="widthclass">

									<tr>
										<td valign="top">
											<hr>
										</td>
									</tr>
									<tr>
										<td valign="top">
											<table cellpadding="0" cellspacing="0">
												<tr>

													<td>
														inhalt<br><br><br><br><br><br><br>test
													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
							</td>

							<td valign="top" align="right" style="background: url(../bilder/blau_rechts.gif) 100% 0 repeat-y;">
								<table cellpadding="0" cellspacing="0" class="sizeclass">
									<tr>
										<td class="bgclass3" height="103"></td>
									</tr>
									<tr>
										<td valign="top" align="right">
											<table id="menu2" cellpadding="0" cellspacing="0" width="89">
												<tr>

													<td valign="middle" class="menu_punkt2 a">
														<center><a href="#">Sub1</a></center>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt2 a">
														<center><a href="#">Sub2</a></center>
													</td>

												</tr>
												<tr>
													<td valign="middle" class="menu_punkt2 a">
														<center><a href="#">Sub3</a></center>
													</td>
												</tr>
												<tr>
													<td>

														<hr>
													</td>
												</tr>
												<tr>
													<td valign="middle" class="menu_punkt2 a">
														<center><a href="#">Sub4</a></center>
													</td>
												</tr>

											</table>
											<table cellpadding="0" cellspacing="0" width="89" class="heightclass">
												<tr>
													<td width="89" valign="top"><img src="http://www.d-struction.de/roess/pics/ecke3.jpg" alt=""></td>
												</tr>
												<tr>
													<td valign="top" class="heightclass" align="right">

														<table cellpadding="0" cellspacing="0" class="heightclass">
															<tr>
																<td class="bgclass2" width="22">&nbsp;</td>
															</tr>
														</table>
													</td>
												</tr>
											</table>
										</td>

									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		</div>

	</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 

Anhänge

  • blau_links.gif
    blau_links.gif
    48 Bytes · Aufrufe: 50
  • blau_rechts.gif
    blau_rechts.gif
    48 Bytes · Aufrufe: 50
Jetzt habe ich noch ein Problem! Im FF wird die Inhaltstabelle beim ersten mal richtig dargestellt! Aber wenn ich refreshe vergrößert sie sich bis zum Rand der Menüs! Im IE funktioniert es aber! Hoffe ihr könnt mir helfen!
Link:Klick

greetz
daddz
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück