SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot gidday's Avatar
    Join Date
    Jan 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover breaks layout

    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.
    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
    Code:
    .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
    Joe
    "All that is necessary for the triumph of evil
    is that good men do nothing."

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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?

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, it would help if there was a database output rather than null contents.

  4. #4
    SitePoint Zealot gidday's Avatar
    Join Date
    Jan 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    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: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
    Joe
    "All that is necessary for the triumph of evil
    is that good men do nothing."

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Zealot gidday's Avatar
    Join Date
    Jan 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Joe
    "All that is necessary for the triumph of evil
    is that good men do nothing."

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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..)

    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)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Zealot gidday's Avatar
    Join Date
    Jan 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All

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

    Thanks to all.
    Joe
    "All that is necessary for the triumph of evil
    is that good men do nothing."

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No worries at least now it works, and it taught you a lesson make sure you use valid (x)html.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •