hallo allerseits!
ich hab nun 2 tage suche hinter mir und komm leider nicht weiter…vielleicht kann mir hier jemand weiterhelfen.
ich weiss, ist ein geläufiges thema - hab auch einiges gefunden dazu und scheinbar immerhin meine probleme mit IE7 gelöst…
ich habe in dreamweaver cs3 ein spry-accordion erstellt bzw. aus einer der vorlagen übernommen und an meine bedürfnisse angepasst, welches links auf meiner page als navigation mit mehreren untermenüs fungieren soll. in firefox, safari und mittlerweile auch in IE7 funktioniert alles problemlos.
leider ist jedoch im IE6 ein teil des accordions nach rechts verschoben und drückt den mainContent nach unten.
nur zur info: ich hab folgendes ausm quelltext gelöscht (und damit das problem im IE7 gelöst):
<!--[if IE 5]>
<style type="text/css">
/* Fügen Sie CSS-Box-Modell-Korrekturen für IE 5* in diesen bedingten Kommentar ein. */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* Mit der obigen proprietären Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
</style>
<![endif]-->ich hab mal 2 screenshots angefügt (screenshot1: dastellung in firefox, safari und IE7, screenshot2 ist IE6)
ich hab gelesen, für andere IE versionen (abwärts) ist eventuell eine anpassung nötig. kann mir vielleicht jemand weiterhelfen?
vielen dank im voraus!
hier noch text.css und SpryAccordion.css:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/javascript; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>.......</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #F3F7FB;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.twoColFixLtHdr #container {
width: 950px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #FFFFFF;
text-align: left;
}
.twoColFixLtHdr #header {
background: #ffffff;
}
.twoColFixLtHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.twoColFixLtHdr #sidebar1 {
float: left;
width: 220px;
margin: 0;
background-color: #F3F7FB;
height: auto;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px;
}
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px;
background:#DDDDDD;
}
.twoColFixLtHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
--------
SpryAccordion.css:
.Accordion {
overflow: hidden;
height: auto;
}
.AccordionPanel {
}
.AccordionPanelTab {
border-top: solid 1px black;
border-bottom: solid 1px gray;
margin: 0px;
padding: 0px;
cursor: pointer;
height: auto;
}
.AccordionPanelContent {
overflow: hidden;
margin: 0px;
padding: 0px;
height: auto;
}
.AccordionPanelOpen .AccordionPanelTab {
background-color: #E1EBF5;
}
.AccordionPanelTabHover {
color: #000033;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #000033;
}
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;