zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Doctype und CSS Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.05.2009, 17:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2009
Beiträge: 3
tech befindet sich auf einem aufstrebenden Ast
Standard Doctype und CSS Problem

Hallo erstmal an alle,

ich habe da ein Problem, was die Doctypen und CSS betrifft.

Ich will mehrere dynamische Menues, rein CSS gesteuert, in eine Seite einbauen. Jetzt ist aber das Problem,das der IE 6, IE 7 und auch 8 sowie Firefox mit den Doctypen und der Darstellung des CSS Probleme macht.

Für nicht IE und IE 6 wollte ich deshalb folgenden Doctype einsetzen
HTML-Code:
<?xml version="1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Klappt auch soweit wunderbar, nur wenn ich jetzt für den IE 7 Und 8 diesen Doctype einsetze geht zwar das Layout, aber das Menue klappt nicht auf.

Daher hatte ich mir gedacht, das ich einfach eine Weiche für deise Browser einsetze und folgenden Doctype lade.
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Dann funktioniert zwar das Menue, aber nicht mehr das Layout, es werden dann weder die Höhenangaben noch Hintergrundgrafiken über CSS übernommen, komischerweise aber float:left und die Breitenangeaben.

hier der HTML code für den Header

HTML-Code:
  <head>
    <title>'.$title.'</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
  
<!-- Styles einbinden -->  
    <link rel="stylesheet" media="all" type="text/css" href="css/style.css" />
    <!--[if IE 6]>
      <link rel="stylesheet"  type="text/css" href="css/ie_style.css" />
    <![endif]-->    
    <!--[if gte IE 7]>
      <link rel="stylesheet"  type="text/css" href="css/ie7_style.css" />
    <![endif]-->

  </head>
  <body>

<div class="container_ges">
<div class="head"></div>
<div  class="header">
  <div class="head_left">
    <img src="images/logografik.gif" width="504" height="100" border="0" alt="" />
  </div>
  <div class="head_middle">
    <h2>'.$title.'</h2>
  </div>
  <div class="head_right">
    <h2></h2>
  </div>
</div>
und hier das Headermenue

HTML-Code:
<div class="menue_head">
    <div id="Rahmen">
      <ul id="Navigation">
         <li><a href="index.php">
             <font style="color: #ffffff; text-decoration: none; padding-right: 5px;">Home&nbsp;|</font></a></li>
      <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Forum&nbsp;|</font></a></li>
      <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Gallerien&nbsp;|</font></a>
      <ul>
        <li><a href="#Link">Seite 2a</a></li>
        <li><a href="#Link">Seite 2b</a></li>
      </ul>
    </li>



     <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Kleinnazeigen&nbsp;|</font></a>      <ul><!-- hier das KL Menue via Auslesen aus DB mit PHP--></ul>
    </li>

      <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Kontaktanzeigen&nbsp;|</font></a>      <ul>
        <li><a href="#Link">Seite 2a</a></li>

      </ul>
    </li>

      <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Shop&nbsp;|</font></a></li>

      <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Auktion&nbsp;|</font></a></li>

      <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Chat&nbsp;|</font></a></li>

      <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Service&nbsp;|</font></a>      <ul>
        <li><a href="#Beispiel">Webspace</a></li>
        <li><a href="#Link">Registrieren</a></li>
      </ul>
    </li>
    <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Support&nbsp;|</font></a>      <ul>
        <li><a href="#Link">FAQ</a></li>
        <li><a href="#Link">Ticked&nbsp;System</a></li>
        <li><a href="#Link">Kontakt</a></li>
      </ul>
    </li>

        <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">&Uuml;ber&nbsp;Uns&nbsp;|</font></a>      <ul>
        <li><a href="#Linkl">Entstehung</a></li>
        <li><a href="#Link">Datenschutz</a></li>
        <li><a href="#Link">AGB&acute;s</a></li>
        <li><a href="#Link">Impressum</a></li>
      </ul>
    </li>

      <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px;">Registrieren </font></a></li>

   </ul> </div>
</div>
und hier die CSS für Nicht IE
Code:
/*   Global   */

body {
  color: #000000;
  background-color: #dddddd;
  font-size: 75.09%;
  font-family: Helvetica,Arial,sans-serif;
  margin: 0px;
  padding: 1em;
  text-align: center;
  min-width: 21em;
}
h2 {
  font-size: 28px;
  font-weight: bold;
  Margin:left: 20px;
}
.container_ges {
  border: 1px solid #023d09;
  margin-top: 0px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  padding-top:1px;
  padding-left: 1px;
  padding-right:1px;
  padding-bottom: 1px
  min-height: 15px;
  }
.head {
  height: 15px;
  background-color: #023d09;
}
.header {
  border: 1px solid #023d09;
  background-color: #8AB996;
  background-image: url(../images/bg_head.jpg);
  background-repeat: repeat-x;
  min-height: 100;
  }
.head_left {
  float: left;
  width: 55%;
  height: 98px;
  }

.head_middle {

  float: left;
  padding-top: 15;
  width: 20%;
  height: 70;
  }
.head_right {

  float: right;
  padding-top: 15;
  width: 25%;
  height: 70;
  }


/*   Menue Header   */
  .menue_head{
  float: none;
  height: 25;
  background-image: url(../images/headmen.gif);
  text-align: left;
  color: #ffffff;
  font-weight:bold;
  padding-top:5px;
  padding-left: 10px;
  text-decoration: none;
  clear:left;

  }

  div#Rahmen {
    width: 100%;
    /*padding: 0.8em;*/
    border: 0px solid black;

  }

  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.4em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */

  }


  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.0em;
    background-color: #D9E2CD;
    padding: 5px;
      border: 2px solid #023d09;
  }

  ul#Navigation a, ul#Navigation div {
    display: inline;
    width: 100%;  /* Breite den in li enthaltenen Elementen zuweisen  */
    padding: 0.2em 0.1em;
    text-decoration: none; font-weight: bold;
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: #023d09; /*background-color: #ccc;*/
  }

  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: #000000;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: #cccccc;
  }
  ul#Navigation li ul div {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;

}
in den anderen CSS Dateien sind nur die Angleichungen für Höhen und Breiten sowie Positinsangaben für die Ausrichtug der Seite.

Wer weis da Rat, wie dieses Problem behoben werden kann?

Es sollte noch mit erwähnt sein, das die Ausgabedateien in TPL's aufgeteilt sind und über eine PHP gesteuerte Funktion geladen werden.

Danke schonmal im voraus für eure Hilfe
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.05.2009, 18:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2009
Beiträge: 3
tech befindet sich auf einem aufstrebenden Ast
Standard

Sorry, ins verkerte Forum gerutscht. Bitte verschieben nach XHTML oder CSS
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.05.2009, 18:46
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.837
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

DOCTYPE-Switch und seine Auswirkungen

Lies mal diesen Link durch und stell deine Seite mal online, so dass wir das Problem sehen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #4 (permalink)  
Alt 29.05.2009, 20:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2009
Beiträge: 3
tech befindet sich auf einem aufstrebenden Ast
Standard

So, ich habe jetzt mal die Daten auf den Server geladen, hier der Link

Im FF2 und FF3 gehts, Layout und Menue

Im IE6 fehlt nur die Hintergrundgrafik im Header

Im IE 7 und 8 zerhauts voll das Layout

Gruß Tech
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
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 16:09
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript chrisol_76 CSS 2 21.07.2008 17:37
Css und Steam Problem justinlenz Offtopic 3 27.03.2008 21:58
Problem mit Layout- Totaler CSS Noob meici CSS 3 01.03.2008 16:33
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:46 Uhr.