Problem mit CSS und IE - float??? von joker66, 09.07.2008 20:10

Problem mit CSS und IE - float???

joker66 09.07.2008 16:31

Hallo liebe Selfhtmler,

ich habe ein Problem mit einer Internetseite. Da ich selber noch nicht so lange "dabei" bin und ich somit selber und im Forum keine Lösung find, wende ich mich nun direkt an euch.

Es geht wiedermal um ein Problem das nur im IE auftritt. Im firefox wird wirklich alles so angezeigt wie es sein soll. Guckt man sich nun folgende Seite im firefox an, kann man dies auch selbst sehen. Schaut man sich das gleiche jetzt im IE an, fällt schnell auf wo das Problem liegt. Rechts gibt es eigentlich eine "Box" mit dem Titel "Kontakt" die im IE einfach verschwindet.

http://reiseportal.visiondubai.de/

Allerdings ist mir gerade beim schreiben aufgefallen das sich die Box doch auf der Seite befindet, allerdings ganz unten links, wenn man ganz nach unten scrollt. Ich denke mal das das ganze Problem irgendwie an den "floats" liegt allerdings hab ich irklich keine Ahnung wie man das so macht das auch der IE die Box an die richtige stelle setzt.

Hier einmal der code der index.php und der zugehörigen css.


<?php

require_once("includes/parseTopbox.php");

$link = getDataLinks();

$box1  = getBoxData($link[0]);
$box2  = getBoxData($link[1]);
$box3  = getBoxData($link[2]);
$box4  = getBoxData($link[3]);
$box5  = getBoxData($link[4]);
$box6  = getBoxData($link[5]);


/*
 * 0 = bild gross
 * 1 = sterne bild
 * 2 = textinfo
 * 3 = preis link
 * 4 = ort
 * 5 = hotel
 *
 * */
?>


<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="includes/screen.css">
<title>Vision Dubai - Die Welt von morgen</title>
</head>
<body>

<div id="maindiv">
 <img border="0" style="margin: 0; padding: 0;" src="img/header.jpg" usemap="#logo"><br>
 <map name="logo">
  <area shape="poly" coords="28, 9 ,291, 9 ,291, 70 ,28, 70" href="index.php">
 </map>
 <div id="top">
  <ul id="mainButtons">
   <li id="button"><a href="index.php"><img src="img/button1.png" /><br></a></li>
   <li id="button"><a href="lastminute.php"><img src="img/button2_black.png" /><br></a></li>
   <li id="button"><a href="info.php"><img src="img/button3_black.png" /><br></a></li>
  </ul>
 </div>
 <div id="utop">

 </div>
 <div id="innerMain">

  <div class="topbox">
   <div class="picdiv"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box1[0]); ?></div>
   <div class="top"><?php echo $box1[6]; ?></div>
   <div class="name"><?php echo $box1[5].$box1[1]; ?></div>
   <div class="preis"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box1[3]); ?></div>
  </div>


  <div class="topbox">
   <div class="picdiv"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box2[0]); ?></div>
   <div class="top"><?php echo $box2[6]; ?></div>
   <div class="name"><?php echo $box2[5].$box2[1]; ?></div>
   <div class="preis"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box2[3]); ?></div>
  </div>


  <div class="topbox">
   <div class="picdiv"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box3[0]); ?></div>
   <div class="top"><?php echo $box3[6]; ?></div>
   <div class="name"><?php echo $box3[5].$box3[1]; ?></div>
   <div class="preis"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box3[3]); ?></div>
  </div>

  <br/>

  <div class="topbox">
   <div class="picdiv"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box4[0]); ?></div>
   <div class="top"><?php echo $box4[6]; ?></div>
   <div class="name"><?php echo $box4[5].$box4[1]; ?></div>
   <div class="preis"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box4[3]); ?></div>
  </div>

  <div class="topbox">
   <div class="picdiv"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box5[0]); ?></div>
   <div class="top"><?php echo $box5[6]; ?></div>
   <div class="name"><?php echo $box5[5].$box5[1]; ?></div>
   <div class="preis"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box5[3]); ?></div>
  </div>

  <div class="topbox">
   <div class="picdiv"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box6[0]); ?></div>
   <div class="top"><?php echo $box6[6]; ?></div>
   <div class="name"><?php echo $box6[5].$box6[1]; ?></div>
   <div class="preis"><?php echo str_replace("ixp=pauschal", "ixp=katalog", $box6[3]); ?></div>
  </div>

  <br/>
  <br/>
  &nbsp;<a href="#f" name="f" style="color: #222222;">Booking Engine</a>
  <iframe src="http://comfort.traffics-switch.de/tibet.php?thm=http://www.reiseportal.visiondubai.de/skin_neu/&cfg=0190010100000000&ref=700741&ixp=katalog&typ=P" id="IBEFrame" scrolling="none" frameborder="0" name="frame"></iframe>
 </div>



 <div id="subNavi">
  <img src="img/kontakt.jpg">
  <p>
   Sie haben Fragen?<br />
   Wir helfen Ihnen gerne weiter!
  </p>
  <p class="middle">
   <img class="flag" src="img/dflag.jpg"><strong>0221 - 272 272 - 0</strong>
  </p>
  <p class="little">
   Unsere Hotline erreichen Sie täglich von 9:00 Uhr bis 18:00 Uhr!
  </p>
  <p class="little">
   Email:<br />
   <a href="mailto:service@visiondubai.de"><strong>service@visiondubai.de</strong></a>
  </p>
  <p align="center">
   Wir freuen uns auf Sie!
  </p>
 </div>
</div>

</body>
</html>

css code:


/************************* Allgemeine Bezeichner ************************/
body {
 background-color: black;
 margin: 0;
 padding: 0;
 text-align: center;
 color: #9a8e6e;
 font-size: 10pt;
 font-family: verdana;
}

table {
 font-size: 1em;
}


/************************* Head ************************/

#top {
 width: 100%;
 height: 28px;
 background-image: url(../img/header2.jpg);
 background-repeat: no-repeat;
 padding: 0;
 margin: 0;
}

#utop {
 width: 100%;
 height: 33px;
 background-image: url(../img/buttonunder.jpg);
 background-repeat: x-repeat;
}

#mainButtons {
 margin: 0px;
 list-style: none;
 width: 500px;
 border: 0px solid green;
 position: relative;
 top: 0px;
 left: 250px;
 * left: 120px;

}

#mainButtons img {
 border: 0;
}

#mainButtons #button {
 float: left;
 padding-right: 5px;
}


/************************* Main Div ************************/
#maindiv {
 width: 829px;
 background-color: #222222;
 height: 3360px;
 margin: 0px auto;
}

#innerMain {
 text-align: left;
 float: left;
 border: 0px solid green;
 width: 648px;
 padding: 0;
 margin: 0;
}

#innerMain h1 {
 color: #f6ebc9;
 margin: 10px;
}

#innerMain h2 {
 border: 0px solid green;
 font-size: 10.5pt;
 font-weight: bold;
 color: #ede2c1;
 margin: 15px 10px -5px 10px;
}

#innerMain p {
 margin: 10px;
}

#IBEFrame {
 width: 660px;
 height: 2550px;
 border: 0;
 margin-left: 5px;
}



/************************* Subnavigation ************************/
.topbox {
 width: 171px;
 height: 247px;
 float: left;
 background-image: url(../img/topboxback.jpg);
 background-repeat: no-repeat;
 margin: 20px 0px 20px 33px;
 *margin: 20px 0px 20px 20px;
 padding-top: 2px;
}

.topbox .top {
 position: relative;
 top: -122px;
 left: 3px;
 color: #f6ebc9;
 font-size: 10px;
 font-weight: bold;
 height:50px;
}

.topbox .mainpic {
 border-bottom: 2px solid #e39f20;
 width: 171px;
}

.topbox .picdiv{
 z-index: 99;
 position: relative;
 top: 20px;
}

.topbox img {
 border: 0px;
}

.topbox a {
 border: 0px;
}

.topbox .name {
 padding: 0 3px 0 3px;
 margin-top: -15px;
 text-align: center;
 font-weight: bold;
 height: 40px;
}

.topbox .preis {
 font-weight: bold;
 margin-left: 5px;
}

/************************* Subnavigation ************************/
#subnavi {
 float: left;
 width: 175px;
 height: 330px;
 border: 0px solid green;
 margin: 10px 0 0 0;
 padding: 0 0 0 0;
 background-image: url(../img/kontakt_below.jpg);
 background-repeat: no-repeat;
 text-align: left;
}

#subnavi img{
 margin-left: 0
}

#subnavi p{
 margin: 15px 0 0 0;
 padding: 0 15px 0 15px;
 color: black;
}

#subnavi .middle{
 font-size: 11px;
}

#subnavi .little{
 font-size: 10px;
}

#subnavi .flag{
 margin: 0 5px -3px 0;
}

#subnavi a:link{
 color: #222222;
}
#subnavi a:visited{
 color: #222222;
}
#subnavi a:hover{
 color: #554311;
}
#subnavi a:active{
 color: #222222;
}
a:link{
 color: #E39F20;
}
a:visited{
 color: #E39F20;
}
a:hover{
 color: #E39F20;
}
a:active{
 color: #E39F20;
}

Ich denke mal das dieses Problem für einen "Profi" (wie ich es leider nicht bin) kein wirkliches ist... und deswegen bin ich wirklich sehr dankbar für jede noch so kleine Hilfe!

Vielen Dank schon mal!

Mit freundlichen Grüßen aus Wetter, Mark

Beitrag melden

– Informationen zu den Bewertungsregeln

Problem mit CSS und IE - float???
suit Homepage des Autors 09.07.2008 16:43

css
– Informationen zu den Bewertungsregeln
Es geht wiedermal um ein Problem das nur im IE auftritt. Im firefox wird wirklich alles so angezeigt wie es sein soll. Guckt man sich nun folgende Seite im firefox an, kann man dies auch selbst sehen. Schaut man sich das gleiche jetzt im IE an, fällt schnell auf wo das Problem liegt. Rechts gibt es eigentlich eine "Box" mit dem Titel "Kontakt" die im IE einfach verschwindet.

zum thema "
die im IE einfach verschwindet"

und der bug dürfte könnte dir, wenn ich mir dein css ansehe, auch mal begegnen
Doubled Float-Margin Bug

im übrigen hast du eine wunderbare div-suppe gemacht
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Problem mit CSS und IE - float???
  
  joker66 09.07.2008 20:10
  
  css
  – Informationen zu den Bewertungsregeln
  Vielen Dank für die schnelle Antwort... aber leider hilft die mir nicht wirklich weiter ohne Erklärung an meiner Seite. Könntest du ein konkretes Beispiel an meiner Seite geben wie genau ich das Problem lösen könnte? ...oder jemad anders!
  
  Das wäre wirklich sehr nett!!!
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Problem mit CSS und IE - float???
    
    suit Homepage des Autors 10.07.2008 00:05
    
    css
    
    – Informationen zu den Bewertungsregeln
    Vielen Dank für die schnelle Antwort... aber leider hilft die mir nicht wirklich weiter ohne Erklärung an meiner Seite.
    
    wenn du die beiden von mir verlinkten artikel aufmerksam gelesen hättest, kämst du zb beim boubled float-margin bug zum schluss "margin-left" und "float: left;" muss durch ein "display: inline;" ergänzt werden
    
    das tritt zb auf folgendes zu;
    
    .topbox {
    float: left;
    margin: 20px 0px 20px 33px;
    *margin: 20px 0px 20px 20px;
    }
    
    .topbox sollte im ie gemäß bug also nicht 33 px abstand links haben sondern 66 - dass du das versuchst, mit einem hack zu umgehen ist schön, aber der falsche weg - der bug wird trotz hack getriggert, 20x2 = 40 = darstellungsfehler
    
    ersetze also deine sternchen-hack-zeile einfach durch "display: inline;" und gut ist
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

joker66: Problem mit CSS und IE - float???