PDA

Click to See Complete Forum and Search --> : Problem absolute position IE6?

pkng
07-24-2009, 06:37 PM
Hi!

In the #wrapper I have a position: relative; The problem is that some <div> with absolute: position; 10px wrong in the top compared to Firefox. I have some floated element also in the page.

I understand this is a common problem and that there is a lot information about this, and I have tested almost all kinds of methods, but it doesn't work!

Could I get some help?
Andyram2k
07-24-2009, 07:29 PM
Hi pkng,
Can you please post your code, or a link to a live site please?
pkng
07-25-2009, 05:20 AM
Hi, here are the code, HTML and CSS. Preciate some help! Thanks!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="sv" lang="sv">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="text" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="imagetoolbar" content="no" />

<title>text</title>



<link href="global.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="script.js"></script>

</head>

<body id="karta_page" onunload="GUnload()">

<div id="wrapper">

<div id="head">

<img class="minibild" src="bilder/bilder_mini/0001_2sg.jpg" width="100" height="75" />
<img class="minibild" src="bilder/bilder_mini/0012_2sg.jpg" width="100" height="75" />
<img class="minibild" src="bilder/bilder_mini/0010_1sg.jpg" width="100" height="75" />
<img class="minibild" src="bilder/bilder_mini/0013_2sg.jpg" width="100" height="75" />
<img class="minibild" src="bilder/bilder_mini/0004_3s.jpg" width="100" height="75" />
<img class="minibild" src="bilder/bilder_mini/0003_1s.jpg" width="100" height="75" />
<img class="minibild" src="bilder/bilder_mini/0002_1s.jpg" width="100" height="75" />
<img class="minibild" src="bilder/bilder_mini/0006_3s.jpg" width="100" height="75" />
<img class="minibild_sista" src="bilder/bilder_mini/0008_1s.jpg" width="100" height="75" />

</div>

<div id="head_menu">
<h1>text</h1>

<ul class="meny">
<li><a href="index.html">1</a></li>
<li><a href="fardvag.html">2</a></li>
<li><a href="karta.html" id="karta_link">3</a></li>
</ul>
</div>

<div id="main">

<div id="skydd"><img id="filter" src="bilder/bilder_layout/0000_0.gif" width="530" height="397"/></div>
<div id="bild"><img id="storbild" src="bilder/bilder_stora/0012_2.jpg" width="530" height="397"/></div>
<div id="karta"></div>

</div>

<div id="annons">
</div>

<div id="minibilder">
<a href="#" onclick="BytBild2(1)"><img id="minibild_1" src="bilder/bilder_layout/0000_0s.gif" width="50" height="38" border="0"/></a>
<a href="#" onclick="BytBild2(2)"><img id="minibild_2" src="bilder/bilder_layout/0000_0s.gif" width="50" height="38" border="0"/></a>
<a href="#" onclick="BytBild2(3)"><img id="minibild_3" src="bilder/bilder_layout/0000_0s.gif" width="50" height="38" border="0"/></a>
<a href="#" onclick="BytBild2(4)"><img id="minibild_4" src="bilder/bilder_layout/0000_0s.gif" width="50" height="38" border="0"/></a>
<a href="#" onclick="BytBild2(5)"><img id="minibild_5" src="bilder/bilder_layout/0000_0s.gif" width="50" height="38" border="0"/></a>
</div>

<div id="bildnamn"></div>

</div>

</body>

</html>


CSS:

body#karta_page a#karta_link {
border: 2px dashed #ebebeb;
}

body {
margin: 0;
padding: 0;
background-color: #252327;
}

#wrapper {
margin: 20px auto;
width: 920px;
position: relative;
}

#head {
height: 75px;
width: 908px;
padding: 10px;
background: #37393d;
border-left: #474747 1px solid;
border-top: #474747 1px solid;
border-bottom: #000 1px solid;
border-right: #000 1px solid;
}

#head_menu {
width: 908px;
padding-left: 10px;
padding-right: 10px;
background: #37393d;
height: 70px;
border-left: #474747 1px solid;
border-top: #474747 1px solid;
border-bottom: #000 1px solid;
border-right: #000 1px solid;
}

#main {
height: 416px;
width: 908px;
padding: 10px;
background: #37393d;
border-left: #474747 1px solid;
border-top: #474747 1px solid;
border-bottom: #000 1px solid;
border-right: #000 1px solid;
}

#annons {
height: 100px;
width: 908px;
padding: 10px;
background: #37393d;
border-left: #474747 1px solid;
border-top: #474747 1px solid;
border-bottom: #000 1px solid;
border-right: #000 1px solid;
}

h1 {
font-family: "century gothic", verdana, arial;
color: #fff;
font-size: 24px;
margin: 0;
padding-left: 0;
padding-top: 0px;
letter-spacing: 1px;
font-weight: normal;
}

#head_menu a:hover {
border: 2px dashed #f56f29;
}

ul.meny {
margin-top: 10px;
margin-bottom: 15px;
margin-left: 0;
padding-left: 0;
list-style-type: none;
float: left;
width: 100%;
}

ul.meny li {
float: left;
}

ul.meny a {
font-family: verdana, arial;
font-size: 12px;
color: #fff;
text-decoration:none;
margin-right: 10px;
display: block;
width: 60px;
text-align: center;
padding-top: 2px;
padding-bottom: 4px;
border: 2px solid #37393d;
}

img.minibild {
margin-right: 1px;
float: left;
}

img.minibild_sista {
float: left;
}

#text {
border: 2px #ccc solid;
padding: 0;
width: 530px;
height: 397px;
position: absolute;
top: 158px;
left: 8px;
}

#text h2 {
font-family: verdana, arial;
padding: 10px;
margin: 0;
color: #363636;
font-size: 14px;
font-weight: bold;
width: 500px;
}

#text p {
font-family: verdana, arial;
color: #363636;
font-size: 14px;
margin: 0;
padding: 10px;
font-weight: normal;
width: 500px;
text-align: justify;
}

#skydd {
padding: 0;
margin: 0;
position: absolute;
top: 199px;
left: 11px;
z-index: 20;
}

#bild {
padding: 0;
margin: 0;
position: absolute;
top: 179px;
left: 11px;
z-index: 10;
}

#bild img {
margin: 0;
padding: 0;
border: 10px #fff solid;
}

#karta{
width: 324px;
height: 397px;
margin: 0;
padding: 0;
position: absolute;
top: 179px;
left: 573px;
border: 10px #fff solid;
}

#minibilder {
width: 400px;
position: absolute;
top: 550px;
left: 35px;
z-index: 30;
}

#minibilder img {
margin-right: 5px;
margin-bottom: 0;
}

#bildnamn {
font-family: verdana;
color: #363636;
font-weight: bold;
font-size: 18px;
position: absolute;
top: 215px;
left: 35px;
z-index: 25;
}

#kommentar {
font-family: verdana;
font-size: 10px;
text-decoration: none;
position: absolute;
top: 660px;
left: 5px;
}

#infow img{
border: 1px #000 solid;
}

#infow h2{
margin: 0;
padding: 5px 0 0 0;
font-family: verdana, arial;
font-size: 12px;
font-weight: normal;
color: black;
}