IE Bug - Box verschoben - float:left?
Hallo liebe xhtmler,
ich habe ein Problem mit einer Internetseite. Da ich selber noch nicht so lange "dabei" bin und ich somit selber und im Forum keine "direkte" 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.
Vision Dubai - Die Welt von morgen
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.
Da ich diese Seite nur von jemandem übernommen habe bin ich also nicht verantwortlich für die "div-Suppe". Das Problem ist das ich für eine "Präsentation" kurzfristig eine Lösung brauche so das diese Box dort erscheint im IE wo Sie ungefähr soll. Um die 1001 xhtml-Fehler werde ich mich dann demnächst kümmern!
Hier einmal der code der index.php und der zugehörigen css.
PHP-Code:
<?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/>
<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>
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! Da ich wirklich kurzfristig dieses Problem beheben muß bin ich wirklich für jeden praktischen Tipp dankbar. In einem anderen Forum wurden mir nur 2 Links zum "float: margin bug" aufgezeigt dir mir aber nichts bringen weil ich dem in diesen Ausmaßen nicht mächtig bin. Am besten wäre wirklich eine konkrete Hilfe an meinem code..
Vielen Dank schon mal!
Mit freundlichen Grüßen aus Wetter,
Mark |
