✔ Internet Explorer vergewaltigt mein Design

Status
Nicht offen für weitere Antworten.
A

Andrak

Grünschnabel
Hallo liebe Mitglieder,

im Rahmen meines Maturaprojektes (abi) hab ich eine Website erstellt die ihr auf http://www.handball-feldkirch.at/menu.php ansehen könnt.
Getestet hab ich sie immer im Firefox, wie ihr sehen könnt vergewaltigt IE aber das Design dahingehend, dass das Menü (beim aufklappen) zu klein ist und es hinter den inhalt des #inhalt divs geschoben wird, außerdem sollte der orange balken oben nur 3px hoch sein.

Wäre für Tipps dankbar !

Hier noch ein Auszug der menu.php:
PHP: 
<div class="menu">
<ul>
<li>
<a href="menu.php?site=home">Home<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="menu.php?site=verein"><b>»</b>Verein<!--[if IE 7]><!--></a>
<!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="menu.php?site=news">News</a></li>
<li><a href="menu.php?site=veranstaltungen">Veranstaltungen</a></li>
<li><a href="menu.php?site=galerie">Bildergalerien</a></li>
<li><a href="menu.php?site=nachwuchs">Nachwuchsarbeit</a></li>
<li><a href="menu.php?site=vorstand">Vorstand</a></li>
<li><a href="menu.php?site=schiri">Schiedsrichter</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="menu.php?site=teams">Teams</a></li>
<li><a href="http://www.handball-feldkirch.at/forum" target="_blank">Forum</a></li>
<li><a href="menu.php?site=service"><b>»</b>Service<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="menu.php?site=spielplan">Gesamtspielplan</a></li>
<li><a href="menu.php?site=links">Links</a></li>
<li><a href="menu.php?site=sponsoren">Sponsoren</a></li>
<li><a href="menu.php?site=gaestebuch">Gästebuch</a></li>
<li><a href="menu.php?site=newsletter">Newsletter</a></li>
<li><a href="menu.php?site=download">Download</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="function/login.php" target="_blank">Login</a></li>
</ul>
</div>

Das Menü hab ich von Stu Nicholls auf der HP generieren lassen, hier noch ein paar css eigenschaften:
PHP: 
#strich { -> der Orange strich oben
width:200px;
height:3px;
margin-left:180px;
margin-top:122px;
position:absolute;
background:#FF6509
}
#inhalt {
width:505px;
margin-left:200px;
margin-top:140px;
position:absolute;
font-size:12px;
overflow:auto;
height:458px;
}
.menu {
margin-top:120px;
padding-top:120px;
position:absolute;
}

Danke im voraus!
 
Hi,

wenn das Dokument mit dem entsprechenden Doctype im Standardsmode übergeben wird, tritt der IE auch nicht als Design-Vergewaltiger auf.

Da du derzeit keinen Dokumenttyp deklariert hast, laufen die Browser im Quirksmode, und in diesem Darstellungsmodus unterstützt der IE das CSS-Boxmodell nicht.

Damit die Submenüs nicht unterhalb des DIVs #inhalt angezeigt werden, erhält das Menü eine entsprechende Schichtposition:

Code: 
.menu {
margin-top:120px;
padding-top:120px;
position:absolute;
z-index:100;
}
Den gewünschten "3px-Balken" erzielst du im IE6 mit:

Code: 
#strich {
width:200px;
height:3px;
margin-left:180px;
margin-top:122px;
position:absolute;
background:#FF6509;
overflow:hidden;
}
Und zum Schluss noch der Hinweis, dass in einer CSS-Datei keine HTML-Elemente und -Kommentare notiert werden:

Code: 
<html>
<head>
<style type="text/css">

   ...

</style>
</head>

<!-- Menu: Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.-->
Kommentare werden in CSS mittels /* ich bin ein Kommentar */ maskiert.
 
Danke für die Antwort :)

btw -> ich hab in der css datei keine kommentare und html elemente, der obere auszug ist aus einem php file ^_^
 
Andrak hat gesagt.:
btw -> ich hab in der css datei keine kommentare und html elemente, der obere auszug ist aus einem php file ^_^
Zum Vergrößern anklicken....
Die HTML-Tags und der Kommentar werden aber in der CSS-Datei ausgegeben:

http://www.handball-feldkirch.at/menu.css hat gesagt.:
Code: 
<html>
<head>
<style type="text/css">

html, body, #inhalt, .menu {
margin:0;
padding:0;
}
body {
font:100.01% Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

.menu {
margin-top:120px;
padding-top:120px;
position:absolute;
}


.menu { margin: 8px; height: 100px; font-size: 10pt; font-family: verdana; }
.menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 10em; }
.menu li { background-color: #0000ff; float: left; }
.menu li.sub { background-color: #0000ff; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 10em; color: #ffffff; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px; }
* html .menu a, * html .menu a:visited { width: 10em; }
* html .menu a:hover { color: #ffffff; background-color: #ff6600; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { color: #ffffff; background-color: #ff6600; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { color: #ffffff; background-color: #ff6600; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 9em; background-color: transparent; }
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }

#navi {
margin-left:180px;
margin-top:104px;
width:550px;
height:20px;
background:#0000FF;
position:absolute;
}

#galerie {
position:absolute;
}

#strich {
width:200px;
height:3px;
margin-left:180px;
margin-top:122px;
position:absolute;
background:#FF6509
}

#kontakt {
position:absolute;
margin-left:540px;
margin-top:107px;
color:#FFFFFF;
}

#kontakt a{
color:#FFFFFF;
}

#inhalt {
width:505px;
margin-left:200px;
margin-top:140px;
position:absolute;
font-size:12px;
overflow:auto;
height:458px;
}

body
  {
  overflow: hidden;
  }
div.inhalt
  {
  height: 100%;
  overflow: auto;
  }

#ueberschrift {
margin-left:190px;
margin-top:104px;
position:absolute;
font-size:14px;
color:#FFFFFF;
font-weight:700;

}

#inhalt a {
font-size:12px;
text-decoration:underline;
}


#head {
color:#FFFFFF;
width:680px;
margin-left:10px;
position:absolute;
}

#head2 {
width:680px;
margin-left:546px;
position:absolute;
}

#news {
border:1px solid #ffffff;
background-color:#8DBFFC;
padding:3px;
width:450px;
}

#Gbook {
border:2px solid #FFFFFF;
padding:4px;
width:450px;
}

#Gbook_entry {
margin-left:10px;
}

#Gbook_strich {
width:430px;
height:2px;
background-color:#0000FF;
}

#verein a {
text-decoration:underline;
}

h1 {
font-size:14px;
color:#0000FF;
margin-top:2px;
padding-top:2px;
font-weight:700;
}

td {
font-size:12px;
}

a {
color:black;
text-decoration:none;
}

/* Sonderangaben für den Internet Exporer */
html, body, textarea {
  scrollbar-base-color:#0000FF;
  scrollbar-3d-light-color:#FFFFFF;
  scrollbar-arrow-color:#FFFFFF;
  scrollbar-darkshadow-color:#000000;
  scrollbar-face-color:#8C8CC6;
  scrollbar-highlight-color:#FFFFFF;
  scrollbar-shadow-color:#000000;
  scrollbar-track-color:#ACACE6;
}

* html body {
height:100%;
width:100%;
overflow:hidden;
}

</style>
</head>






<!-- Menu: Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.-->
Zum Vergrößern anklicken....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück