Hover breaks layout

HTML & CSS
1

Hi Folks

I have got a bit of code that creates some bar graphs of statistics drawn from a database. When I hover over the links (numbers in blue) the layout breaks (see images). Below is the code that generates the bar graph and the css to go with it. This only has to work in IE7.
Graph code.

<div class="graph_container">
<div class="graph_container_heading"><h4>Graph heading</h4></div>
<span class="bar_image"><img src="../common/images/pink_square.png" style="height:<%= vBarHeight %>px;"></span>
<span class="bar_graph_score" style="height:<%= vBarHeight + 40 %>px;"><%= vData %></span>
<span class="link bar_graph_text"><a href="#"><%= x %><span><%= gtxt_RS("BuildingName") %></span></a></span>
</div>

CSS

.graph_container {
	position:relative;
	margin: 10px 20px;
	border: 1px solid #eee;
	padding: 100px 0 50px 10px;
	}
.graph_container_heading {
	position: absolute;
	top: 10px;
	left: 10px;
}
span.bar_image img {
	width: 25px;
	margin: 0 -5px 20px -5px;
	}
span.bar_graph_score {
	width: 25px;
	margin: 0 0 -20px -25px;
	border: 1px solid #bbb;
	text-align: center;
	/*writing-mode: tb-rl;
	filter: fliph() flipv();*/

	}
span.bar_graph_text {
	width: 25px;
	height: 20px;
	margin: 0 0 -40px -30px;
	text-align: center;
	background: #ccffff;
	/*border: 1px solid green;*/
}
span.link {
	position: relative;
}
span.link a span {
	display: none;
}
span.link a:hover {
	font-color: #000000;
}
span.link a:hover span { 
    position: absolute;
	display: block; 
	margin-top: 20px; 
	margin-left: 10px;
	width: 175px; 
	/*padding: 5px; */
	color: #000; 
	background: #FFFFcc;
	text-align: left; 
	text-decoration: none;
	font-weight: normal;
	font-size: 100%;
}

As it should be.
After I hover over a number (link).

All help much appreciated.

Joe

2

Hi All

Well how embarrassed am I. The page didn’t have a doctype on it. Now it works. Aaaargh.

Thanks to all.

3

Well right now I can’t even reproduce a local copy of this to test on my own even though you gave code (I tried copying it to a local copy page and nothing…):slight_smile:

Open the page up in your browser and give me the full output (I don’t need any of that ASP you have going on there :))

And nothing relaly jumped out at me (though I only took a quick glance at the hover styles) :slight_smile:

4

Hi RyanReese

I can’t provide a link as it is the local intranet at work. I have tried commenting out parts of the style with no effect but I will go back and revisit that. Maybe I need to look further.

Just out of interest, was there anyhing in the code that looked like it could cause the problem?

5

No worries at least now it works, and it taught you a lesson make sure you use valid (x)html.

6

Hi, could you provide a link where this is happening?

Since it only happens on hover, comment out all your hover styles, and uncoment it one at a time until you find what makes IE7 “tick”

If you don’t have it figured out by now then juust post a link and I’ll do my best to help :wink:

7

Yes, it would help if there was a database output rather than null contents.

8

Sorry people, my bad.

I should also mention that to get the multiple graphs bars I use simple vbscript looping. It basically outputs building names and number data.

<div class="graph_container">
<div class="graph_container_heading"><h4>Graph heading</h4></div>
<span class="bar_image"><img src="../common/images/pink_square.png" style="height:40px;"></span>
<span class="bar_graph_score" style="height:80px;">4</span>
<span class="link bar_graph_text"><a href="#">1<span>Building Name</span></a></span>
</div>

Thanks

9

Since this isn’t HTML:
<span class=“link bar_graph_text”><a href=“#”><%= x %><span><%= gtxt_RS(“BuildingName”) %></span></a></span>

I can’t tell if that’s an error there or not. Could you post what the browser outputs instead?