zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE + table

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.04.2009, 00:15
SXP SXP ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2009
Beiträge: 16
SXP befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.04.2009, 11:13
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Du versetzt den IE in den Quirksmode, durch diese, hier eigentlich unnötige, Angabe:
<?xml version="1.0" encoding="utf-8"?>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.04.2009, 12:09
SXP SXP ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2009
Beiträge: 16
SXP befindet sich auf einem aufstrebenden Ast
Standard

Hi protonenbeschleuniger,

erstmal vielen Dank für den Hinweis, hab den Eintrag rausgenommen, nur leider ärndert sich nichts am Verhalten der Tabelle.
Mit Zitat antworten
  #4 (permalink)  
Alt 14.04.2009, 16:19
Benutzer
neuer user
 
Registriert seit: 19.02.2009
Beiträge: 50
manhunter__ befindet sich auf einem aufstrebenden Ast
Standard

poste mal deinen versuch mit den divs
__________________
Besuche meinen Blog über Web Design und Programmierung | Mein Blog
Mit Zitat antworten
  #5 (permalink)  
Alt 14.04.2009, 17:28
SXP SXP ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2009
Beiträge: 16
SXP befindet sich auf einem aufstrebenden Ast
Standard

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>
und CSS:

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;
}
Mit Zitat antworten
  #6 (permalink)  
Alt 14.04.2009, 18:05
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von SXP Beitrag anzeigen
Habs mitlerweile mit überwiegend Tabellen gelöst. Den Doctype habe ich dabei komplett ausgelassen,
Damit stellen alle Browser die Seite im Quirksmode dar, was keine gute Idee ist.
Mit Zitat antworten
  #7 (permalink)  
Alt 15.04.2009, 00:24
SXP SXP ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2009
Beiträge: 16
SXP befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:13 Uhr.