30.01.2008, 23:17
|
|||
|
|||
Tabs mit CSS - Problem mit IE6
Hallo,
ich habe folgenden Code gebastelt. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#tabs ul li {
display:inline;
}
#tabs li {
width:100px;
background-color:#FF0000;
float:left;
}
#tabs ul li:hover div {
display:block;
position:relative;
top:0px;
width:500px;
height:100px;
background-color:#0000FF;
}
#tabs ul li a:hover div {
display:block;
position:relative;
top:0px;
width:500px;
height:100px;
background-color:#0000FF;
}
#tabs ul li div {
display:none;
}
#tabs div {
width:100px;
}
#tabs ul {
padding:0;
margin:0;
list-style:none;
position:relative;
}
</style>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE8.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/ie7-squish.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="tabs" style="width:500px; overflow:hidden;">
<ul>
<li><a href="#ims">Tab 1</a>
<div class="tab" style="left:0px;">Inhalt 1</div>
</li>
<li><a href="#ims">Tab 2</a>
<div class="tab" style="left:-100px;">Inhalt 2</div>
</li>
<li><a href="#ims">Tab 3</a>
<div class="tab" style="left:-200px;">Inhalt 3</div>
</li>
<li><a href="#ims">Tab 4</a>
<div class="tab" style="left:-300px;">Inhalt 4</div>
</li>
<li><a href="#ims">Tab 5</a>
<div class="tab" style="left:-400px;">Inhalt 5</div>
</li>
</ul>
</div>
</body>
</html>
Was im Endeffekt so etwas wie Tabs sein soll, wie es auch in Opera, Firefox & Internet Explorer 7 korrekt dargestellt wird. Nur im IE6 sieht es irgendwie nicht so aus wie es soll, obwohl ich schon die Fixes von ie7-js - Google Code integriert habe. Irgendjemand eine Idee was der IE da falsch interpretiert und wie man das lösen könnte? Danke für Hilfe! Geändert von crush41 (31.01.2008 um 02:01 Uhr) Grund: Link hinzugefügt 
|
| Sponsored Links |
|
01.02.2008, 01:45
|
|||
|
|||
|
kann ich dir sagen. Schau mal hier:
.tabs ul li a:hover div { display:block; position:relative; top:0px; width:500px; height:100px; background-color:#0000FF; } ...wird naemlich definiert, dass das div angezeigt wird wenn a "hoovert". Leider steht aber das div nicht in dem a, weshalb nichts passieren duerfte. Wahrscheinlich hast du beim Code kopieren vergessen eine Browserweichenanweisung in Form eines HTML-Kommentares zu kopieren?
|
| Sponsored Links |
 |
| 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 16:09 |
| Problem Browserweiche IE CSS | 00001 | CSS | 5 | 24.09.2010 10:23 |
| Problem mit CSS background-image: | nordseeinsel | CSS | 9 | 06.10.2009 21:01 |
| Design Float IE6 Problem | koknarr | CSS | 10 | 05.09.2008 18:05 |
| Text-Zeichen im IE6 wiederholen sich – Problem... | rg69 | (X)HTML | 2 | 05.06.2008 14:36 |
Linear-Darstellung
