IExplorer Problem mit hover und float

Status
Nicht offen für weitere Antworten.
P

PillePalle89

Grünschnabel
Moin Moin,

ich bin hier bald am ausrasten, dieser besch****** Internet Explorer :mad:

Also ich habe mir eine Seite gebastelt: http://pelle.kilu.de <-- da zu bewundern

Jetzt macht mir, wie eigentlich immer, der IExplorer ziemliche Probleme und das Problem ist ich weiß nicht wo das Problem ist, float sollte ja sogar der IE dann mal können finde ich.
Hier einfach mal mein Quelltext (ist auch n bisschen PHP drin, das sollte ja aber kaum die Ursache des Problems sein:

(index.php)
HTML: 
<!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=iso-8859-1" />
    <title> __________p_e_l_l_e_-_j_.__r_e_n_z______blog_&amp;_portfolio___________
    </title>
    <link href="page.css" rel="stylesheet" type="text/css" />
    <?php if($_GET['color'] == 'blue'){ $ifolder = 'blue'; echo '<link href="colors/blue.css" rel="stylesheet" type="text/css" />';}elseif($_GET['color'] == 'green'){ $ifolder = 'green'; echo '<link href="colors/green.css" rel="stylesheet" type="text/css" />';}elseif($_GET['color'] == 'yellow'){ $ifolder = 'yellow'; echo '<link href="colors/yellow.css" rel="stylesheet" type="text/css" />';}elseif($_GET['color'] == 'turquoise'){ $ifolder = 'turquoise'; echo '<link href="colors/turquoise.css" rel="stylesheet" type="text/css" />';}elseif($_GET['color'] == 'white'){ $ifolder = 'white'; echo '<link href="colors/white.css" rel="stylesheet" type="text/css" />';}elseif($_GET['color'] == 'black'){ $ifolder = 'black'; echo '<link href="colors/black.css" rel="stylesheet" type="text/css" />';}else{$ifolder = 'red'; echo '<link href="colors/red.css" rel="stylesheet" type="text/css" />';} ?>
  </head>
  <body>
    <div id="box">
      <div id="top_menue">
        <a href="#">Contact</a> &nbsp;-&nbsp;
        <a href="#">Impressum</a>
      </div>
      <img id="title" src="<?php echo 'images_'.$ifolder.''; ?>/title.gif" alt="Pelle-J. Renz - Blog &amp; Portfolio" />
      <div class="<?php if($_GET['site'] == 'gbook'){echo 'main_menue_active'; $site = 'gbook';}else{echo 'main_menue';}?>">
        <a href="<?php echo ''.$_SERVER['PHP_SELF'].'?site=gbook&amp;color='.$ifolder.''; ?>">
          <img src="<?php echo 'images_'.$ifolder.''; ?>/guestbook.gif" alt="Guestbook" /></a>
      </div>
      <div class="<?php if($_GET['site'] == 'photos'){echo 'main_menue_active'; $site = 'photos';}else{echo 'main_menue';}?>">
        <a href="<?php echo ''.$_SERVER['PHP_SELF'].'?site=photos&amp;color='.$ifolder.''; ?>">
          <img src="<?php echo 'images_'.$ifolder.''; ?>/photos.gif" alt="Photos" /></a>
      </div>
      <div class="<?php if($_GET['site'] == 'portfolio'){echo 'main_menue_active'; $site = 'portfolio';}else{echo 'main_menue';}?>">
        <a href="<?php echo ''.$_SERVER['PHP_SELF'].'?site=portfolio&amp;color='.$ifolder.''; ?>">
          <img src="<?php echo 'images_'.$ifolder.''; ?>/portfolio.gif" alt="Portfolio" /></a>
      </div>
      <div class="<?php if($_GET['site'] == 'blog'){echo 'main_menue_active'; $site = 'blog';}else{echo 'main_menue';}?>">
        <a href="<?php echo ''.$_SERVER['PHP_SELF'].'?site=blog&amp;color='.$ifolder.''; ?>">
          <img src="<?php echo 'images_'.$ifolder.''; ?>/blog.gif" alt="Blog" /></a>
      </div>
      <div class="<?php if($_GET['site'] == 'me'){echo 'main_menue_active'; $site = 'me';}else{echo 'main_menue';}?>">
        <a href="<?php echo ''.$_SERVER['PHP_SELF'].'?site=me&amp;color='.$ifolder.''; ?>">
          <img src="<?php echo 'images_'.$ifolder.''; ?>/thats_me.gif" alt="That's Me" /></a>
      </div>
      <div class="<?php if($_GET['site'] == 'home' OR isset($_GET['site']) != true){echo 'main_menue_active'; $site = 'home';}else{echo 'main_menue';}?>">
        <a href="<?php echo ''.$_SERVER['PHP_SELF'].'?site=home&amp;color='.$ifolder.''; ?>">
          <img src="<?php echo 'images_'.$ifolder.''; ?>/home.gif" alt="Home" /></a>
      </div>
      <div id="content">
        <span class="hov">
          <a href="#nogo"> Color Shemes
            <!--[if IE 7]><!--></a>
          <!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <b>
            <a style="color:#fe0000" href="<?php echo ''.$_SERVER['PHP_SELF'].'?site='.$site.'&amp;color=red'; ?>">Red</a>
            <a style="color:#0000fe" href="<?php echo ''.$_SERVER['PHP_SELF'].'?site='.$site.'&amp;color=blue'; ?>">Blue</a>
            <a style="color:#00fe00" href="<?php echo ''.$_SERVER['PHP_SELF'].'?site='.$site.'&amp;color=green'; ?>">Green</a>
            <a style="color:#fefe00" href="<?php echo ''.$_SERVER['PHP_SELF'].'?site='.$site.'&amp;color=yellow'; ?>">Yellow</a>
            <a style="color:#00fefe" href="<?php echo ''.$_SERVER['PHP_SELF'].'?site='.$site.'&amp;color=turquoise'; ?>">Turquoise</a>
            <a style="color:#fefefe" href="<?php echo ''.$_SERVER['PHP_SELF'].'?site='.$site.'&amp;color=white'; ?>">White</a>
            <a style="color:#000000" href="<?php echo ''.$_SERVER['PHP_SELF'].'?site='.$site.'&amp;color=black'; ?>">Black</a></b>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </span>
        <h1>Lorem Ipsum</h1>
        <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et  erat sit amet eros sollicitudin vulputate. Sed tempor, dui sit amet  blandit fermentum, enim massa adipiscing metus, non mollis mauris orci  et mauris. Proin auctor. Proin eu quam a metus tempus adipiscing.  Aenean egestas porttitor lacus. Etiam hendrerit. Ut sagittis. Donec  nunc justo, dictum eget, varius at, semper sit amet, odio. Aenean quis  sem. Aliquam vel lacus. Praesent vitae diam. Nam hendrerit dolor sit  amet metus. Vestibulum mollis ipsum in est. Quisque nonummy, massa sed  sodales tristique, purus nibh aliquet diam, nec fringilla augue arcu ut  justo. Vestibulum turpis justo, blandit sed, tempor at, auctor ac,  nulla. Curabitur mauris. Mauris vitae pede at felis consequat sodales.  Aenean consequat libero venenatis est. Donec quam ipsum, mattis sed,  cursus sed, venenatis vitae, odio.
        </p>
        <p> Suspendisse erat lacus, scelerisque ac, pellentesque eu, imperdiet  id, leo. Sed semper tellus vitae felis. Quisque eu ligula. Nunc  molestie vestibulum diam. Cras diam lacus, interdum a, interdum ut,  adipiscing id, tellus. Duis tincidunt ante non sem. Duis iaculis, purus  a hendrerit cursus, augue turpis tincidunt orci, vel posuere quam velit  et eros. Aliquam ac mi vitae augue pellentesque rutrum. Mauris libero.  Sed sed lorem et dui bibendum dignissim. Fusce non lacus. Vestibulum  ultrices. Duis molestie, justo id porta blandit, neque purus lacinia  nibh, a consectetuer magna turpis in enim. Cras lacinia eros non justo.  In ipsum. Mauris ac arcu. Morbi nisi ipsum, volutpat feugiat, luctus  id, convallis eget, mi. Nunc sed odio. Nam sit amet mauris in orci  consectetuer facilisis. Donec dignissim.
        </p>
        <p> Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent  per conubia nostra, per inceptos hymenaeos. Duis tincidunt, pede in  vestibulum aliquet, ante nibh accumsan urna, ut mollis risus augue sit  amet massa. Phasellus vitae elit sit amet lorem rhoncus ornare. Quisque  augue velit, malesuada vel, ornare quis, vestibulum et, libero.  Phasellus fringilla sem vel tortor. Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Praesent blandit sapien. Ut ultricies  nulla sit amet velit. Vivamus gravida leo a purus. Maecenas condimentum  pulvinar nisi. In nisl.
        </p>
        <p> Morbi in pede dignissim erat euismod porta. Cras ornare vulputate  lectus. Nunc suscipit. Quisque vitae felis. Sed ornare felis at ipsum.  Aenean ac neque. Nulla nec magna sit amet lorem elementum gravida.  Curabitur consequat turpis. Etiam ut libero. Sed sodales urna quis  mauris. Sed congue. Cum sociis natoque penatibus et magnis dis  parturient montes, nascetur ridiculus mus. Vestibulum consequat, augue  suscipit egestas porta, nisl tortor condimentum tortor, non  consectetuer odio odio a nisi. Morbi accumsan dolor eget tellus.  Vestibulum aliquet mi id tortor. In enim diam, sodales sed, dapibus  quis, interdum non, enim. Suspendisse potenti. Praesent neque.  Phasellus dapibus pretium felis.
        </p>
        <p> In nec mauris. Duis dapibus turpis id purus. Sed ultrices  condimentum ipsum. Etiam in mauris ac augue malesuada tincidunt. Nunc  mauris. In ipsum eros, faucibus eu, lacinia vel, ultricies nec, tortor.  Duis sagittis orci ut urna. Vivamus blandit bibendum dui. Praesent ac  turpis eu ligula blandit fringilla. Nulla hendrerit leo at mauris.  Aliquam laoreet. Fusce facilisis. Phasellus nibh arcu, suscipit  lobortis, volutpat vitae, blandit id, libero.
        </p>
        <p> Class aptent taciti sociosqu ad litora torquent per conubia nostra,  per inceptos hymenaeos. Nunc sodales nisi egestas odio. Aenean augue.  Mauris posuere nulla a leo. In hac habitasse platea dictumst. Integer  nibh mi, mollis vel, laoreet ac, vulputate vel, arcu. Nulla faucibus.  Curabitur at ipsum. Fusce augue ipsum, laoreet sit amet, mattis in,  aliquet scelerisque, lacus. Ut tincidunt sem at orci. Integer sit amet  enim. Curabitur fermentum quam et tellus. Nam ac diam. Sed accumsan  egestas tellus. Praesent erat. Suspendisse id turpis eu massa iaculis  sodales. Fusce vitae massa in urna faucibus tempus. Maecenas semper  ligula nec mauris. Duis risus.
        </p>
        <p> Etiam laoreet, tortor non tempor ultricies, libero risus faucibus  turpis, a ultrices diam diam nec mauris. Duis in est nonummy turpis  blandit elementum. Proin sed lectus eu urna pharetra vehicula. Morbi  sit amet diam. Sed lectus nisi, imperdiet et, pulvinar at, pellentesque  ac, sem. Quisque rhoncus, nisl quis ultrices ultricies, nibh metus  volutpat sapien, eget posuere elit diam quis quam. Suspendisse  imperdiet pharetra leo. Proin sem justo, imperdiet quis, mattis ac,  varius sit amet, elit. Phasellus mauris velit, porta vitae, congue non,  interdum eget, odio. Suspendisse faucibus pellentesque massa. Morbi  aliquet. Morbi ornare lacus pharetra felis. Morbi volutpat tortor non  lorem.
        </p>
        <p> Aliquam lorem. Maecenas vestibulum, orci quis accumsan sodales,  ipsum lorem pulvinar lacus, et consectetuer nibh lacus ac leo. Donec  lectus. Nam mauris elit, mollis eu, consectetuer ac, placerat nec,  elit. Donec vel libero. Proin venenatis. Duis at sem. Curabitur quis  ligula. Nullam sollicitudin molestie lectus. Maecenas quis leo. Fusce  vulputate.
        </p>
        <p> Etiam iaculis, odio eu eleifend consequat, diam elit pulvinar urna,  ac varius urna augue sed arcu. Nullam id arcu. Nullam vehicula. Aenean  ac massa sit amet enim pellentesque mattis. Mauris nibh augue,  consectetuer vitae, sodales quis, convallis euismod, eros. Aenean et  sem. Proin euismod, arcu nec aliquet lobortis, mauris ipsum convallis  justo, vehicula mattis nisl quam vel ante. Morbi vel risus in erat  vehicula semper. Nam ultrices suscipit nisl. Pellentesque nisi lectus,  porta sed, ultricies non, consequat ut, mi. Quisque id quam. In hac  habitasse platea dictumst. Donec dui. Cum sociis natoque penatibus et  magnis dis parturient montes, nascetur ridiculus mus. Morbi euismod.  Donec vehicula ligula at sem. Nunc ligula magna, semper eget, consequat  id, ornare eu, lacus. Ut mauris.
        </p>
        <p> Maecenas blandit, nibh id malesuada vulputate, mi lorem scelerisque  tellus, vitae bibendum leo sapien id elit. Donec elementum, lectus nec  convallis luctus, arcu felis ultrices nibh, nec sagittis odio ante sit  amet magna. Duis id turpis. Suspendisse potenti. In posuere mauris eu  metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Integer interdum, felis quis cursus molestie, libero massa fringilla  quam, vel blandit urna pede nec risus. Maecenas dictum. Praesent magna  sem, ullamcorper suscipit, placerat in, elementum et, nisi. Suspendisse  in tellus. Vivamus urna. Aliquam rutrum augue eu eros auctor imperdiet.  In hac habitasse platea dictumst. Cras vel urna vitae orci mattis  auctor. Suspendisse sed velit.
        </p>
        <p style="font-weight:bold"> Generated 10 paragraphs, 981 words, 6581 bytes of
          <a href="http://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a>
        </p>
      </div>
    </div>
    <div id="footer">
      <a href="http://validator.w3.org/check?uri=<?php echo $_SERVER['SCRIPT_URI']; ?>" target="_blank">
        <img src="images/valid_xhtml.png" alt="XHTML 1.0 Valid" /></a> &nbsp;
      <a href="http://jigsaw.w3.org/css-validator/validator?uri=<?php echo $_SERVER['SCRIPT_URI']; ?>" target="_blank">
        <img src="images/valid_css.png" alt="CSS Valid" /></a> &nbsp;
      <a href="#">
        <img src="images/copyright.png" alt="&copy; 2007 by Pelle-J. Renz" /></a>
    </div>
  </body>
</html>

(page.css)
Code: 
	@charset "iso-8859-2";
/* CSS Document */
body, td, th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
	color: #FFFFFF;
}
body {
	background-color: #35332e;
	margin: 0px;
	padding: 0px;
}
a {
	font-size: small;
}
a:link {
	text-decoration: none;
	color: #dedede;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
img {
	border: none;
}
#box {
	position: relative;
	width: 800px;
	left: 50%;
	margin-left: -364px;
	margin-bottom: 20px;
	display: block;
}
#top_menue {
	float: right;
	width: 100%;
	height: 20px;
	text-align: right;
}
#title {
	width: 100px;
	height: 80px;
	float: left;
	clear: right;
}
.main_menue a:link, main_menue a:visited {
	width: 80px;
	height: 80px;
	float: right;
	display: block;
	background: none;
}
.main_menue_active {
	width: 80px;
	height: 80px;
	float: right;
	display: block;
}
#content {
	clear: right;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}
#footer {
	width: 100%;
	height: 20px;
	text-align: center;
}
#footer img {
	margin-top: 2px;
}
.hov {
	float: right;
}
.hov table {
	position: absolute;
	border: 0;
	border-collapse: collapse;
	left: 0;
}
.hov a {
	color: #999999;
}
.hov b {
	display: none;
	font-weight: normal;
}
.hov:hover {
	position: relative;
	z-index: 100;
}
.hov a:hover,    .hov:hover a {
	border: 0;
	text-decoration: none;
	position: relative;
}
.hov:hover b,    .hov a:hover b {
	display: block;
	visibility: visible;
	position: absolute;
	left: 10px;
	top: 15px;
	background: #696969;
	border: 1px solid #888888;
	padding: 5px;
}
.hov b a {
	white-space: nowrap;
	color: #000;
	text-decoration: none;
	background: transparent;
	display: block;
}
.hov b a:hover {
	text-decoration: underline;
}

(red.css [je nach Farbschema andere Bilder])
Code: 
@charset "utf-8";
/* CSS Document */
body {
background-image: url(../images_red/background_top.jpg);
background-repeat: repeat-x;
}
.main_menue a:hover {
background-image:url(../images_red/menue_hover.jpg);
float:right;
}
.main_menue_active {
background-image:url(../images_red/menue_hover.jpg);
float:right;
}
#footer {
background-image:url(../images_red/background_bottom.jpg);
background-repeat:repeat-x;
}

Die Seiten sind sowohl HTML Valid, als auch CSS, und ich weiß wirklich nicht wo der IE wieder sein verdammtes Problem hat :confused:
 

Anhänge

  • ie.jpg
    ie.jpg
    201,8 KB · Aufrufe: 11
  • ff.jpg
    ff.jpg
    324,8 KB · Aufrufe: 11
Zuletzt bearbeitet:
Hi,

setz mal für die Pseudoklassen :link und :visited die CSS-Eigenschaft background:none ein, damit beim Verlassen der Links das Hintergrundbild der :hover-Pseudoklasse nicht "stehen bleibt":

Code: 
.main_menue a:link, main_menue a:visited {
background:none;
width:80px;
height:80px;
float:right;
display:block;
}
 
Wurde gemacht.

Allerdings ändert das nichts an der komischen Interpretation von float beim IE (siehe angehängte Bilder vom vorherigen Posting) :confused:
 
hmh...das ist natürlich merkwürdig. woran kann es denn liegen, dass mein IE das so komisch anzeigt?

naja, sonst muss ich einfach davon ausgehen, dass die Seite nur bei mir nicht richtig um IE läuft :suspekt:
 
So ganz traue ich dem Frieden ja noch nicht. Irgendwie zeigt der IE 6 die Seite immernoch nicht so an wie er soll. Dabei habe ich jetzt herausgefunden was genau komisch ist:

Das angehängte Bild zeigt die Seite beim durchklicken der einzelnen Menüpunkte oben. Das heißt:

1. Home
2. That's Me
3. Blog
4. usw.
...
7. wieder Home

Dabei verschiebt sich, wie ihr auf den Bildern sehen könnt das ganze Layout. Auch nach Aktualisieren ist das Layout der Seite "gesprengt". Löscht man allerdings den Verlauf des IE dann zeigt er die Seite wieder richtig an, bis man wieder auf die Links klickt.

Eine weitere Kleinigkeit ist, dass der IE das Logo oben links zu weit nach oben setzt. Wobei das eher meine kleinere Sorge ist.

Vielleicht fällt jemandem ja doch noch ein woran das alles liegen könnte, bzw. eventuell finden sich andere Leute, die denselben Darstellungsfehler haben, weil ich kann nicht glauben, dass das nur bei mir so komisch aussieht.

Nochmal der Link: http://pelle.kilu.de
 

Anhänge

  • Untitled-3.jpg
    Untitled-3.jpg
    82,4 KB · Aufrufe: 10
Möglicherweise hat der IE ein Problem mit dem Cache, wenn die dynamischen Inhalte nachträglich in das Dokument geladen werden, denn der CSS-Code funktioniert ja grundsätzlich :confused:

Versuch es mal mit den folgenden META-Angaben im Dokument-Header:

Code: 
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-cache">
 
Ändert leider auch nichts. Vielleicht werde ich es morgen einfach mal mit "absolut" positionierten div-containern probieren. Irgendwie muss das ja zu schaffen sein.

Trotzdem vielen Dank :)
 
Hi,

und wenn du es anstelle der DIVs .main_menue einfach mal mit einem horizontal ausgerichteten Listenmenü versuchst?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück