IE verhaut mal wieder alles!
Verfasst: 01.10.2008 20:52
Hallo,
liebe PROgrammierer.
Ich habe mal wieder ein Problem zum Thema Design und Internet Explorer (6).
Ich habe mein tolles Grundgerüst für ein neues Design und habe dort nun eine Tabnavigation mit Sliding Doors Effekt erstellt. Erst einmal ist das Padding oder Margin bei IE ganz anders und außerdem verdoppelt der das Padding/Margin irgendwie, wenn ich mit der Maus über einen der Tabs fahre, und dieser Zwischenraum bleibt dann stehen!
Vielleicht könnt ihr mir helfen...
Der Code:
HTML
CSS
Vielen Dank
liebe PROgrammierer.
Ich habe mal wieder ein Problem zum Thema Design und Internet Explorer (6).
Ich habe mein tolles Grundgerüst für ein neues Design und habe dort nun eine Tabnavigation mit Sliding Doors Effekt erstellt. Erst einmal ist das Padding oder Margin bei IE ganz anders und außerdem verdoppelt der das Padding/Margin irgendwie, wenn ich mit der Maus über einen der Tabs fahre, und dieser Zwischenraum bleibt dann stehen!
Vielleicht könnt ihr mir helfen...
Der Code:
HTML
Code: Alles auswählen
<!-- OnTop Logo und Navi -->
<div class="onTop">
<div class="onTopLogo">
<img src="styles/mynorden/imageset/site_logo.png" height="100" />
</div>
<div class="onTopNavi">
<div id="tabsB">
<ul>
<li><a href="#" title="Link 1"><span>Home</span></a></li>
<li><a href="#" title="Link 2"><span>Events</span></a></li>
<li><a href="#" title="Link 3"><span>Galerie</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Community</span></a></li>
<li><a href="#" title="Link 5"><span>Profil</span></a></li>
<li><a href="#" title="Link 6"><span>Mitglieder</span></a></li>
<!-- <li><a href="#" title="Link 7"><span>Link 7</span></a></li> -->
</ul>
</div>
</div>CSS
Code: Alles auswählen
.onTop {
white-space:nowrap;
}
.onTopLogo {
float: left;
}
.onTopNavi {
float: right;
height: 20px;
width: 540px;
padding-top: 77px;
padding-right: 20px;
}
/*- Menu Tabs B--------------------------- */
#tabsB {
float:left;
width:100%;
background:transparent;
font-size:93%;
line-height:normal;
white-space:nowrap;
}
#tabsB ul {
margin:0;
padding:0px 0px 0 0px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("styles/mynorden/theme/images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("styles/mynorden/theme/images/tabright.gif") no-repeat right top;
padding:3px 15px 4px 3px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}
Vielen Dank