|
|||
IE + table
Servus allerseits,
folgende Seite bekomme ich mit dem IE einfach nicht gefixt: Testseite Im Grunde sollen transparente PNGs um ein Div herum für einen Schatten sorgen. Habe es mit nur DIVs versucht, vergeblich. Aber scheinbar auch mit Tabellen bekomme ich es einfach nicht hin Anbei wäre zu erwähnen, dass das Div sowohl in der Breite als auch in der Höhe flexibel sein muss. Im FF und Opera ist alles Roger, der IE hält die Höhen oben und unten nicht ein. Ich bin einfach nur am verzweifeln. Gruß SXP |
Sponsored Links |
|
|||
Habs mitlerweile mit überwiegend Tabellen gelöst. Den Doctype habe ich dabei komplett ausgelassen, ich muss mir das nochmal genauer anschauen später. Die Lösung unter Testseite
mein Versuch mit den Divs, Template ... : HTML-Code:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> { literal } <!-- Titel --> <title> Test </title> <!-- Meta-Tags --> <meta name="generator" content="HTML Tidy for Windows (vers 1 May 2005), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <!-- CSS Includes --> <link rel="stylesheet" type="text/css" href="tpl/css/main2.css" media="screen" /> <!-- JS <script src="js.php" type="text/javascript" /> --> { /literal } </head> <body> <div class="layout"> <div class="top"> <a href="index.php"> <img src="tpl/gfx/logo.jpg"/> </a> </div> <div class="middle"> {* <- 996 -> *} <div class="header"> {* <- 150 -> *} <div class="left"> <div class="content"> { include file = "navi.tpl" } </div> <div class="shadow_ur"></div> <div class="shadow_r"></div> <div class="shadow_ll"></div> <div class="shadow_l"></div> <div class="shadow_lr"></div> </div> {* <- 670 -> *} <div class="center"> <div class="content"> oben </div> <div class="shadow_ur"></div> <div class="shadow_r"></div> <div class="shadow_ll"></div> <div class="shadow_l"></div> <div class="shadow_lr"></div> </div> {* <- 150 -> *} <div class="right"> <div class="content"> oben rechts </div> <div class="shadow_ur"></div> <div class="shadow_r"></div> <div class="shadow_ll"></div> <div class="shadow_l"></div> <div class="shadow_lr"></div> </div> </div> </div> <div class="bottom"> unten </div> </div> </body> </html> HTML-Code:
/************************************************************** BASIC-DEFIITIONS **************************************************************/ * { outline: 0px solid yellow; } body, html { background-color: #FFF; margin: 0px; padding: 0px; font: Helvetica, Verdana, Arial, sans-serif; } a:link, a:visited, a:focus, a:hover, a:active { color: #c3c3c3; text-decoration: none; -moz-outline-style: none; } div { margin: 0px; padding: 0px; } img { border: 0px; } /************************************************************** STRUCTURE **************************************************************/ .layout { position: relative; width: 100%; height: 100%; } /*******************************************/ .top { height: 148px; background: #FFF; text-align: center; } .middle { width: 100%; height: 100%; background-color: #FFF; background: url( "../gfx/bg.png" ); background-repeat: repeat-x; } .bottom { height: 80px; background: #FFF; text-align: center; clear: both; } /************************************************************** SHADOWS **************************************************************/ .shadow_ur { height: 7px; width: 7px; background: url( "../gfx/shadow_ur.png" ); float: left; } .shadow_r { height: 5px; width: 7px; background: url( "../gfx/shadow_r.png" ); float: left; } .shadow_lr { height: 8px; width: 7px; background: url( "../gfx/shadow_lr.png" ); float: left; } .shadow_l { height: 8px; width: 5px; background: url( "../gfx/shadow_l.png" ); float: left; } .shadow_ll { height: 8px; width: 7px; background: url( "../gfx/shadow_ll.png" ); float: left; } /******************************************* HEADER *******************************************/ .header { width: 996px; height: 270px; margin: auto; clear: both; outline: 1px solid red; } /******************************************/ .header .left, .header .right { width: 150px; height: 270px; float: left; margin: 0px; color: #FFF; background: none; } .header .left .content, .header .right .content { width: 143px; height: 262px; float: left; margin: 0px; } .header .left .content { background: #1E2D47; } .header .right .content { background: #839CCA; } .header .left .shadow_r, .header .right .shadow_r { height: 255px; width: 7px; background: url( "../gfx/shadow_r.png" ); float: left; } .header .left .shadow_l, .header .right .shadow_l { height: 8px; width: 136px; background: url( "../gfx/shadow_l.png" ); float: left; } /******************************************/ .header .center { width: 670px; height: 270px; margin: 0px 13px; float: left; background: none; } .header .center .content { width: 663px; height: 262px; float: left; background: #F8E8C4; margin: 0px; } .header .center .shadow_r { height: 255px; width: 7px; background: url( "../gfx/shadow_r.png" ); float: left; } .header .center .shadow_l { height: 8px; width: 656px; background: url( "../gfx/shadow_l.png" ); float: left; } /******************************************* MAIN *******************************************/ .main { width: 996px; height: 800px; margin: auto; } .left, .right { width: 150px; height: 100%; float: left; margin: 0px 4px; background: #FFF; border-bottom: 1px solid #EFF2F8; } .center { width: 676px; height: 100%; float: left; background: #EFF2F8; border-bottom: 1px solid black; } /******************************************* NAVIGATION *******************************************/ .navi { margin: 0px; padding: 0px; list-style: none; } .navi>li { margin: 10px; padding: 0px; font-size: 24px; } .navi ul { margin: 0px; padding: 0px; list-style: none; } .navi ul li { font-size: 18px; } .navi a { display: block; width: 100%; } .navi a:hover { background: #CCC; color: #1E2D47; } /******************************************* SPACER *******************************************/ .spacer_4 { height: 4px; width: 100%; clear: both; } |
|
|||
Das mag sein, ich hab auch ehrlich gesagt noch nie das Doctype weggelassen, aber ich kann keine Fehler in meinem Code erkennen, laut Vererbungen und CSS-Standards müsste er sich so verhalten, wie ich es erwarte, und das tut er nicht.
Wenn ich den Doctype einschalte, dann sind alle Tabellenzellen wieder so groß wie der Inhalt, geschissen auf die 100% height. Wer nicht hört, muss fühlen Ich bin natürlich dankbar für eine bessere Lösung, bisher habe ich aber keine |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Myspace Fehler zwischen FF und IE? | soren.designs | (X)HTML | 1 | 05.09.2009 17:02 |
Myspace problem... Rechte Säule verschiebt sich im IE. | calledmarcel | CSS | 1 | 27.02.2009 10:12 |
Myspace-Probleme | Nora-B | CSS | 3 | 16.09.2008 00:17 |
Falsche Darstellung im Internet Explorer | Janizzle | CSS | 0 | 30.08.2007 20:44 |