|
|||
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"> 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">
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> 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 |</font></a></li> <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Forum |</font></a></li> <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Gallerien |</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 |</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 |</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 |</font></a></li> <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Auktion |</font></a></li> <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Chat |</font></a></li> <li><a href="#Link"><font style="color: #ffffff; text-decoration: none; padding-left: 5px; padding-right: 5px;">Service |</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 |</font></a> <ul> <li><a href="#Link">FAQ</a></li> <li><a href="#Link">Ticked 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;">Über Uns |</font></a> <ul> <li><a href="#Linkl">Entstehung</a></li> <li><a href="#Link">Datenschutz</a></li> <li><a href="#Link">AGB´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> 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; } 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 |
Sponsored Links |
|
||||
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 |
|
|||
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 |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript | chrisol_76 | CSS | 2 | 21.07.2008 18:37 |
Css und Steam Problem | justinlenz | Offtopic | 3 | 27.03.2008 22:58 |
Problem mit Layout- Totaler CSS Noob | meici | CSS | 3 | 01.03.2008 17:33 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |