1 reply [Last post]
rasmuslh
Offline
newbie
Last seen: 16 years 35 weeks ago
Joined: 2003-12-07
Posts: 1
Points: 0

Hello

We are a couple of students who are making a website for a NGO-community.

We have some problems with positioning element with relative positions.

Here are a link to our website

http//www.itu.dk/people/rlh/OCD/index5.htm

If you look at our website in the IE the block with the 3 pictures have been moved 80px towards the top. However, in Mozilla nothing happens howcome?

Furthermore, the we don't want the spacing between the images.

Can anybody help us.

Here are our CSS
body {
text-align center;
font-family Verdana, Arial, Helvetica, sans-serif;
font-size 10px;
padding 0;
margin 0;
background-color #CCCCCC;

}

.center {
background #FFF;
height 100%;
width 777px;
text-align left;
border-left 1px solid #660000;
margin 0px auto;
border-right 1px solid #660000;
padding 0px;
}

.top {
background #fff url(img/topright.jpg) no-repeat top right;
width 777px;
height 172px;
margin 0;
padding 0;
border-right #FF0000;
border-bottom #FF0000;
border-left #FF0000;

}

.cssmenuvandret {
width270px;
border-left1px solid black;
vertical-align top;
float left;
clear both;
position relative;
left 280px;
top -172px;
}

.cssmenuvandret a {
floatleft;
colorwhite;
background#CC0000;
padding3px 5px;
border1px solid black;
border-left0;
text-decorationnone;
text-aligncenter;
}

.cssmenuvandret ahover {
background#FF9900;
colorwhite;
text-decorationnone;
}

.indholdsboks {
padding 0;
margin 0;
position relative;
float left;
left 30px;
top 10px;
text-align left !important;
display inline;
}

.spaltepar {
clear both;
}

.billede1 {
background-color #00FF00;
padding 0px;
float left;
margin 0px;
width 60px;
height 65px;
text-align left !important;

}
.indhold1 {
background-color #FF3300;
padding 5px;
width 100px;
float left;
margin 0;
text-align left !important;
position relative;
top -65px;
left 65px;

}

.venstreboks {
background-color #00FFFF;
width 100px;
height 150px;
margin 0px;
position relative;
left 30px;
top 10px;
text-align left !important;
padding 5px;

}

.aktivitetsboks {
padding 11px;
margin 0px;
position relative;
height 0px;
float left;
}

.aktivitet1 {
position relative;
height 64px;
width 50px;
left 250px;
border-right-width 1px;
border-right-style solid;
border-right-color #FF0000;
}
.aktivitet2 {
position relative;
height 64px;
width 50px;
left 320px;
top -64px;
border-right-width 1px;
border-right-style solid;
border-right-color #FF0000;
}
.aktivitet3 {
position relative;
height 64px;
width 50px;
left 390px;
top -128px;
border-right-width 1px;
border-right-style solid;
border-right-color #FF0000;
}
.indholdswrap {
background #fff;
width 777px;
height auto;
margin 0;
padding 0;
}

.topwrap {
background #fff;
width 777px;
height auto;
margin 0;
padding 0;
float left;
border #33FF99;

}

.bundwrap {
background #fff;
width 777px;
height auto;
margin 0;
padding 0;
border #CC99CC;

}

.fakta {
background #fff;
width 30%;
height auto;
margin 0;
padding 5 0;
display inline;
float left;

}

.broedtekst {
background #fff;
width 68%;
height auto;
margin 0;
padding 5 0;
display inline;
position relative;
top -80px;

}

.bundbilledewrap {
background url(img/buttomright.jpg) no-repeat bottom right;
width 777px;
height 123px;
margin 0;
padding 0;
position absolute;
bottom 0px;

}
.kontakt {
float left;
position absolute;
bottom 10px;
}

Here are our HTML-code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Velkommen til OCD-foreningen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="index3.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="center">
<div class="top">
<img src="img/topleft.jpg">
<div class="cssmenuvandret"> <a href="http//www.tv2.dk" target="_blank">OM
OCD</a> <a href="http//www.tv2.dk">Foreningen</a> <a href="http//www.tv2.dk">Debat</a>
<a href="http//www.tv2.dk">Bliv medlem</a> </div>
</div>

<div class="indholdswrap">
<div class="topwrap">

<div class="fakta">
<div class="venstreboks">Vidste du.... </div>
</div>
<div class="broedtekst">
<div class="indholdsboks">
<div class="spaltepar">
<div class="billede"><img src="img/billede.gif"></div>
<div class="indhold1">Her KLLKÆLKKÆ LKjfhdsfahhgfgHer KLLKÆLKKÆLKj
</div>
</div>
<div class="spaltepar">
<div class="billede"><img src="img/billede.gif"></div>
<div class="indhold1">Her KLLKÆLKK ÆLKjfhdsfahhgfgHer KLLKÆLKKÆLKj
</div>
</div>
<div class="spaltepar">
<div class="billede"><img src="img/billede.gif"></div>
<div class="indhold1">Her KLLKÆLKK ÆLKjfhdsfahhgfgHer KLLKÆLKKÆLKj
</div>
</div>
</div>
<!-- Slut på Indholdsboks -->
</div>
<!-- Slut på Brødtekst -->
</div> <!-- Slut på Topwrap -->

<div class="bundwrap">

<div class="aktivitetsboks">
<div class="aktivitet1">BLAH BLAH</div>
<div class="aktivitet2">BLAH BLAH</div>
<div class="aktivitet3">BLAH BLAH</div>
</div>
</div>


<div class="bundbilledewrap"> </div>
<div class="kontakt">OCD-foreningen Julius Bloms Gade 17, kld. tv. 2200 København
N Tel 35 82 64 84 </div>
</div>


</div>
</body>
</html>

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 38 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Problem with shared css for IE and Mozilla

Well the div that holds the 3 pictures is this

.broedtekst { 
background: #fff; 
width: 68%; 
height: auto; 
margin: 0; 
padding: 5 0; 
display: inline; 
position: relative; 
top: -80px; 

} 

Now normally setting a top for a relative position would not make any difference and it would be ignored, but due to an incomplete doc type you may find that the IE is viewing in quirky mode, and may be using that -80 to pull the images up the page. Moz properly ignores the top -80px.

I would try deleting that top: -80px and see if that helps. Am taking a guess here based on the 80px you mentioned.

Regards
Day

The only way to learn is to do it yourself