zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tabs mit CSS - Problem mit IE6

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.01.2008, 00:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.01.2008
Beiträge: 7
crush41 befindet sich auf einem aufstrebenden Ast
Standard 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>
Hier der Code in Action! Klick mich!

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 03:01 Uhr) Grund: Link hinzugefügt
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2008, 02:45
Neuer Benutzer
neuer user
 
Registriert seit: 31.01.2008
Beiträge: 2
littlecoder befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.02.2008, 15:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.01.2008
Beiträge: 7
crush41 befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ich habe das Problem gelöst ich habe für den IE6 nur diesen Code hinzugefügt:
Code:
	#tabs li {
	overflow:hidden;
	}
Danke für die Antwort!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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 Browserweiche IE CSS 00001 CSS 5 24.09.2010 11:23
Problem mit CSS background-image: nordseeinsel CSS 9 06.10.2009 22:01
Design Float IE6 Problem koknarr CSS 10 05.09.2008 19:05
Text-Zeichen im IE6 wiederholen sich – Problem... rg69 (X)HTML 2 05.06.2008 15:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:16 Uhr.