2 replies [Last post]
jjm106
Offline
newbie
NY
Last seen: 13 years 27 weeks ago
NY
Timezone: GMT-5
Joined: 2009-03-30
Posts: 5
Points: 0

I'm trying to get a horizontal website working. Sometimes when my divs for rollover images are listed in a certain order (in HTML), some of the rollovers work and some don't. I found a bunch of threads here on div ordering and another bunch of threads on image rollovers, but i haven't found a good solution (or reason) yet.
Maybe someone can help me out? I've built an example scenario.
Here's two HTML files; the first HTML-all 4 rollovers work. First 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">
<head>
<title>
</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<div id="content">
	<div class="box4"><a class="boxrollover" href="#">&nbsp;</a></div>
	<div class="box3"><a class="boxrollover" href="#">&nbsp;</a></div>
	<div class="box2"><a class="boxrollover" href="#">&nbsp;</a></div>
	<div class="box1"><a class="boxrollover" href="#">&nbsp;</a></div>
</div>
</body>
</html>

and the second, only the bottom-right box rollover works:

<!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">
<head>
<title>
</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
<div id="content">
	<div class="box1"><a class="boxrollover" href="#">&nbsp;</a></div>
	<div class="box2"><a class="boxrollover" href="#">&nbsp;</a></div>
	<div class="box3"><a class="boxrollover" href="#">&nbsp;</a></div>
	<div class="box4"><a class="boxrollover" href="#">&nbsp;</a></div>
</div>
</body>
</html>

Here's the CSS with the four rollover boxes (background image sliders):

body {
	margin:0px;
	padding:0px;
	width: 3250px;
	height: 700px;
	color:#ff0000; 
	background: #000000;
}
#content {
	margin:78px 0px 0px 0px; 
	float: left;
}
.box1 {
position:absolute;
padding-top:50px;
padding-left:50px;
}
.box2 {
position:absolute;
padding-top:50px;
padding-left:250px;
}
.box3 {
position:absolute;
padding-top:200px;
padding-left:50px;
}
.box4 {
position:absolute;
padding-top:200px;
padding-left:250px;
}
a.boxrollover {
	display: block;
	width: 149px;
	height: 118px;
	background: url("blankcell.jpg") 0 0 no-repeat;
	text-decoration: none;
}
a:hover.boxrollover {
	background-position: -152px 0;
}

I threw the two examples on my site.
Here's the working example:
http://www.johnmorga.com/divplay/example-ok.html

and here's the one that doesn't completely work:
http://www.johnmorga.com/divplay/example-not-ok.html

Again, the only difference is the listed DIV order.

TIA,
John

attilla
Offline
newbie
Portsmouth
Last seen: 13 years 14 weeks ago
Portsmouth
Timezone: GMT+1
Joined: 2009-03-31
Posts: 10
Points: 0

John, All the thing is just

John,

All the thing is just because you use padding instead of margin. When it worked well, it worked, because first you put the box 4, after the box 3 and 2 and 1 Smile In this case the rollover is not affected.

When you put the box 4 for last, then this "layer" will be over the box 1, 2 and 3.
padding-left:250px;
padding-top:200px;

All the other divs are under that. Thats why they did not worked. Try to use margin instead of padding.

Cheers

Attilla

jjm106
Offline
newbie
NY
Last seen: 13 years 27 weeks ago
NY
Timezone: GMT-5
Joined: 2009-03-30
Posts: 5
Points: 0

WORD brother! that was it.

WORD brother!

that was it. thanks so much, man. fixed - dropped the pads for margins.

body {
	margin:0px;
	padding:0px;
	width: 3250px;
	height: 700px;
	color:#ff0000; 
	background: #000000;
}
#content {
	margin:78px 0px 0px 0px; 
	float: left;
}
.box1 {
position:absolute;
margin:50px 0 0 50px;
}
.box2 {
position:absolute;
margin:50px 0 0 250px;
}
.box3 {
position:absolute;
margin:200px 0 0 50px;
}
.box4 {
position:absolute;
margin:200px 0 0 250px;
}
a.boxrollover {
	display: block;
	width: 149px;
	height: 118px;
	background: url("blankcell.jpg") 0 0 no-repeat;
	text-decoration: none;
}
a:hover.boxrollover {
	background-position: -152px 0;
}