|
 |
  |
| Autor |
Nachricht |
AliceDiee
Neuer [User]
Anmeldung: 20.02.05
Beiträge: 2
|
 Verfasst am: 20.02.2005, 14:44 Titel: Darstellungsproblem im IE |
 |
|
Hallo zusammen!
Ich habe hier ein Problem mit einer Webseite, die im Firefox wie gewünscht dargestellt wird im IE aber Probleme macht:
Hier der HTML-Code:
| Code: | <?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="generator" content="" />
<meta name="author" content="" />
<meta name="robots" content="all" />
<style type="text/css">
<!--
@import url(./screen.css);
-->
</style>
</head>
<body>
<table class="table_main" border="1">
<colgroup>
<col width="150px" />
<col width="75px" />
<col width="565px" />
<col width="120px" />
<col />
</colgroup>
<tr style="height: 93px;">
<td colspan="3" align="left"><img src="./gfx/page/logo.jpg" alt="ALT" /></td>
<td class="light_sep"> </td>
<td> </td>
</tr>
<tr style="height: 60px;">
<td class="menu_back" rowspan="3" style="height: 60px;">
<table class="menu">
<tr style="height:100px;">
<td> </td>
</tr>
<tr style="height:20px;">
<td class="menu_item">- <a href="index.php?cat=start" class="menu_item">Start</a></td>
</tr>
<tr style="height: 150px;">
<td> </td>
</tr>
<tr style="height: 20px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background-color: #8f8d9b;">
<td style="height: 20px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background-color: #8f8d9b;"> </td>
</tr>
<tr style="height:100%;">
<td> </td>
</tr>
</table>
</td>
<td class="dark_sep" style="height: 60px"> </td>
<td colspan="2" style="background-image:url(./gfx/page/sep1.jpg); background-repeat:no-repeat; background-position:right;"> </td>
<td class="light_sep"> </td>
</tr>
<tr style="height: 20px;">
<td class="light_sep"> </td>
<td class="dark_sep"> </td>
<td class="green_sep"> </td>
<td class="dark_sep"> </td>
</tr>
<tr>
<td> </td>
<td class="main_box">Hallo!!!!</td>
<td class="light_sep"> </td>
<td> </td>
</tr>
</table>
</body>
</html> |
und die css-datei (screen.css)
| Code: | body,html {
background-color: #ffffff;
margin: 1px;
color: #000000;
font-family: Verdana, sans-serif;
font-size: 12px;
height: 100%;
}
input,textarea {
background-color: #8f8d9b;
}
h1 {
font-size: 20px;
font-weight: bold;
}
h2 {
font-size: 15px;
font-weight: bold;
}
.textlink {
color: #000000;
}
.table_main {
background-color: #ffffff;
border-spacing: 1px;
width: 100%;
height: 100%;
table-layout: fixed;
}
.light_sep {
background-color: #dbd9e9;
vertical-align: top;
}
.dark_sep {
background-color: #8f8d9b;
}
.green_sep {
background-color: #299f31;
}
.menu_back {
background-color: #939393;
vertical-align: top;
}
.menu {
background-image: url(./gfx/page/menu-back.jpg);
background-repeat: no-repeat;
background-position: top right;
width: 100%;
height: 500px;
font-family: Verdana, sans-serif;
font-size: 13px;
color: #ffffff;
}
.main_box {
vertical-align: top;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 12px;
}
.menu_item {
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
.menu_item:hover {
background-color: #8f8d9b;
color: #000000;
}
.sidebox_header {
color: #000000;
font-size: 12px;
text-align: left;
text-weight: bold;
}
.sidebox_item {
color: #000000;
text-decoration: none;
font-size: 12px;
text-align: left;
}
.sidebox_item:hover {
background-color: #8f8d9b;
color: #000000;
}
.sitemaplink {
color: #000000;
line-height: 18px;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.prod_table {
width: 90%;
border-spacing:1px;
color: #000000;
}
.prod_table td {
font-family: Verdana, sans-serif;
font-size: 12px;
}
.prod_table_header {
background-color: #8f8d9b;
color: #ffffff;
}
.lex_listing {
color: #000000;
}
.lex_listing:hover {
color: #999999;
}
th {
font-family: Verdana, sans-serif;
font-size: 12px;
} |
Es geht um die Spaltenhöhen rechts vom Menü. Firefox zeigt diese den Höhenangaben entsprechend korrekt an und nimmt den verbleibenden Platz für die "HauptTD" die hier "Hallo!!!!" enthält. Der IE scheint die Höhenangaben zu übersehen und verteilt den Platz gleichmässig auf alle TableRows.
Bin für jeden Hinweis dankbar!
Edit 1: Ich war etwas voreilig mit dem posten und hätte evtl ein paar Beiträge weiter unten lesen sollen.
padding-bottom: 100% war die Lösung!
Edit 2: Da habe ich mich wohl zu früh gefreut, zwar sind nun die Zeilengrößen im oberen Bereich korrekt, dafür habe ich aber unter jeder Seite einiges an Freiraum.
padding-bottom: 100%;
habe ich in .main_box aufgenommen.
Irgendwelche Ideen?
Gruß,
Martin
|
|
| Nach oben |
|
 |
JörgK
Beliebter [Mod]
Anmeldung: 09.04.04
Beiträge: 376
|
|
| Nach oben |
|
|
AliceDiee
Neuer [User]
Anmeldung: 20.02.05
Beiträge: 2
|
| Verfasst am: 22.02.2005, 19:22 Titel: |
|
|
Das bringt mich auch nciht weiter, die absoluten Höhenangaben funktionieren ja ohne Probleme halt nur nicht die relativen 
|
|
| Nach oben |
|
|
JörgK
Beliebter [Mod]
Anmeldung: 09.04.04
Beiträge: 376
|
| Verfasst am: 23.02.2005, 21:57 Titel: |
|
|
Es geht nicht um eine absolute Höhe, sondern um eine Mindesthöhe für .main_box mit der diese dann im Internet Explorer die anderen Tabellenzellen, die bislang zuviel Platz einnehmen, zusammenstaucht. Du kannst stattdessen auch eine absolute Höhe nehmen:
| Code: |
.main_box {
vertical-align: top;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 12px;
height: 500px;
}
|
Dann sind die Abstände der oberen Tabellenzellen im IE wie im FF, einfach mal ausprobieren, statt nur zu schreiben, das bringt dich nicht weiter! Der Inhalt in der linken Box darf allerdings nicht größer werden als die rechte Box, deswegen mein Vorschlag mit dem Blindgif, da wächst .main_box dann mit
_________________
 Webnotizen - Forum für XHTML, CSS und SEO - Bookmarks
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
