Hallo,
ich habe mal Testweise ein Layout mit position:fixed und position:absolute für den IE gemacht. Klappt fast alles, nur leider läßt sich der blaue Balken nicht unabhängig vom Layout bewegen, im Gegensatz zu den anderen divs.
Schaut es euch mit dem Internet Explore an
http://kakapopo.ka.funpic.de/huette/index.html
Hier mal der Code:
Der blaue Kasten ist mit .bg definiert.
Könnt ihr mir helfen?
Danke
mfg
ich habe mal Testweise ein Layout mit position:fixed und position:absolute für den IE gemacht. Klappt fast alles, nur leider läßt sich der blaue Balken nicht unabhängig vom Layout bewegen, im Gegensatz zu den anderen divs.
Schaut es euch mit dem Internet Explore an
http://kakapopo.ka.funpic.de/huette/index.html
Hier mal der Code:
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>Breakfasthouse.com </title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 100.01% Verdana;
background-color:#FFFFFF;
color:#333333;
}
#body {
width:99.98%;
}
#container {
width: 746px;
text-align:left;
margin: 0 auto;
position:fixed;
left: 140px;
top: 5px;
}
.bg {
width: 100%;
height: 213px;;
background-color:#283140;
position:fixed;
top: 133px;
}
#header {
background-image:url(img/header.gif);
width: 746px;
height: 101px;
display:block;
position:fixed;
top: 8px;
}
#navigationtop {
width: 746px;
height: 37px;
background-image:url(img/navigationoben2.gif);
font-weight:bold;
font-size:12px;
color:white;
display:block;
position:fixed;
top: 109px;
}
.topnavi a:visited {
color:#FFFFFF;
text-decoration: none;
}
.topnavi a:link {
color:#FFFFFF;
text-decoration:none;
}
.topnavi a:hover {
color: white;
text-decoration:underline;
}
.topnavi {
position:fixed;
top: 116px;
left: 353px;
}
#navigationleft {
display:block;
width:200px;
height: 190px;
background-color:#FFFFFF;
background-repeat:no-repeat;
font-size:11px;
line-height: 20px;
position:fixed;
top: 146px;
left: 141px;
}
ul {
list-style-image:url(img/listspace.gif);
position:fixed;
left: 132px;
color:#333333;
}
#picsbar {
width: 533px;
height: 165px;
background-image:url(img/bilderleiste.gif);
position: fixed;
top: 145px;
right: 150px;
}
#rightbar {
width:14px;
height:434px;
background-image:url(img/leisterechts.gif);
position:fixed;
top: 145px;
right: 138px;
}
#welcometext {
width: 531px;
height: 234px;
background-image:url(img/welcometextflaeche.gif);
position:fixed;
top: 345px;
left: 341px;
}
#whitebar {
background-color:#ffffff;
width: 531px;
height: 26px;
position:fixed;
top: 310px;
left: 341px;
}
#footer {
font-size:11px;
position:fixed;
bottom: 0px;
left: 320px;
display:none;
}
#footer a:visited {
color: #283140;
text-decoration:none;
}
#footer a:hover {
color: #283140;
text-decoration:underline;
}
#footer a:link {
color: #283140;
text-decoration:none;
}
#gallery {
width: 201px;
height: 234px;
background-image:url(img/gallery.gif);
position:fixed;
top: 345px;
left: 140px;
}
ul a:visited {
color: #333333;
text-decoration:none;
}
ul a:hover {
color:#000099;
text-decoration:none;
}
ul a:link{
color:#333333;
text-decoration:none;
}
#picsbar span {
font-size:11px;
margin-left: 56px;
margin-top: 141px;
display:block;
}
#picsbar a:visited {
color:#333333;
text-decoration:none;
}
#picsbar a:hover {
color:#000099;
text-decoration:underline;
}
#picsbar a:link {
color:#333333;
text-decoration:none;
}
#gallery span {
color:#FFFFFF;
font-size:11px;
margin-left:64px;
margin-top: 215px;
display:block;
}
#gallery a:visited {
color:#fff;
text-decoration:none;
}
#gallery a:hover {
color:#fff;
text-decoration:underline;
}
#gallery a:link {
color:#fff;
text-decoration:none;
}
#welcometext p {
font-size: 12px;
margin-left: 30px;
margin-top: 37px;
}
#whitebar span {
font-size:11px;
font-weight:bold;
padding-top:7px;
padding-left: 14px;
display:block;
color:#283140;
}
#whitebar a:visited {
color:#283140;
text-decoration:none;
}
#whitebar a:hover {
color:#283140;
text-decoration:underline;
}
#whitebar a:link {
color:#283140;
text-decoration:none;
}
#navigationtop input {
margin-top:8px;
margin-left:25px;
font-size:11px;
color:#283140;
}
#navigationtop .submit {
margin-left:2px;
}
#search {
margin-right: 0;
}
/* Internet Explorer Part */
* html body {
height:100%;
width:100%;
}
* html #header {
position:absolute;
top: 8px;
left: 110px;
}
* html #navigationtop {
position:absolute;
top: 107px;
left: 110px;
}
* html #navigationleft {
position:absolute;
top: 144px;
left:111px;
}
* html #picsbar {
position:absolute;
top:143px;
left:311px;
}
* html .topnavi {
position:absolute;
top: 7px;
left: 213px;
}
* html #rightbar {
position:absolute;
top: 143px;
right: 148px;
}
* html #whitebar {
position:absolute;
top: 308px;
left: 311px;
}
* html #welcometext {
position:absolute;
top: 343px;
left: 311px;
}
* html #gallery {
position:absolute;
top: 343px;
left: 110px;
}
* html ul {
position: absolute;
top: 8px;
left: 0;
}
* html .bg {
}
/* Internet Explorer Part End */
/*]]>*/
</style>
</head>
<body>
<div class="bg" id="body">
<div id="container">
<div id="header"></div>
<div id="navigationtop"><form action="index.html" method="post">
<input type="text" name="search" id="search" size="18" maxlength="40" value=" Your search query" /><input class="submit" type="submit" name="go" value="Go"/>
</form><span class="topnavi"><a href="index.html">Home</a> <a href="index.html">Rooms & Rates</a> <a href="index.html">Region & Local Attractions</a> <a href="index.html">About Us</a> <a href="index.html">Contact Us</a></span></div>
<div id="navigationleft">
<ul>
<li><a href="index.html">Individual Room Details</a></li>
<li><a href="index.html">Special Deals</a></li>
<li><a href="index.html">Meals & Menus</a></li>
<li><a href="index.html">Terms & Conditions</a></li>
<li><a href="index.html">Attractions & Pastimes</a></li>
<li><a href="index.html">Photo Gallery</a></li>
<li><a href="index.html">Links</a></li>
<li><a href="index.html">References & Testimonials</a></li>
</ul>
</div>
<div id="picsbar"><span><a href="index.html">View Details</a> <a href="index.html">View Details</a> <a href="index.html">View Details</a></span></div>
<div id="rightbar"></div>
<div id="whitebar"><span><a href="index.html">.Home</a></span></div>
<div id="welcometext"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><p style="margin-top:2px"> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
</div>
<div id="gallery"><span><a href="index.html">View Gallery</a></span></div>
<div id="footer"><p>Copyright 2006 by Breakfasthouse.com All rights reserved</div>
</div>
</body>
</html>Der blaue Kasten ist mit .bg definiert.
Könnt ihr mir helfen?
Danke
mfg
