Something wrong with css in these listboxes

HTML & CSS
1 
<?php /*******************************************sel1**************************************************************/?>
<div id="sel-book_1" style="float: left; margin: 0px 0px 0px 5px; width: 188px; height: 493px;">

<?php /*****************************************table1****************************************************************/?>
<?php $count= 1; ?>
<div style="position: relative; margin: 0px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; text-align: left; padding: 0px 0px 0px 5px;" onmouseover="document.getElementById('filltable<?php echo $count; ?>').style.display= 'block'; " onmouseout="document.getElementById('filltable<?php echo $count; ?>').style.display = 'none';">
	<div id="tbl_<?php echo $count; ?>" style="margin: 0px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 0px;">Select A Source</div>
	<div id="filltable<?php echo $count; ?>" style="background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 121px; border: 1px solid #7A1010; overflow-y: auto; overflow-x: hidden;"></div>
</div>
<?php /*******************************************end table1**************************************************************/?>
<?php /*****************************************book1****************************************************************/?>
<div style="position: relative;" onmouseover="document.getElementById('fillbook<?php echo $count; ?>').style.display= 'block';" onmouseout="document.getElementById('fillbook<?php echo $count; ?>').style.display = 'none';">
	<div style="position: relative; margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;">Select A Book</div>
	<div id="fillbook<?php echo $count; ?>" style="background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 121px; border: 1px solid #7A1010; overflow-y: auto; overflow-x: hidden;"></div>
</div>
<?php /*******************************************end book1**************************************************************/?>
<?php /*****************************************chapter1****************************************************************/?>
<?php $count= 1; ?>
    <div style="position: relative;" onmouseover="document.getElementById('fillchapter<?php echo $count; ?>').style.display= 'block';" onmouseout="document.getElementById('fillchapter<?php echo $count; ?>').style.display = 'none';">
    	<div id="chap_<?php echo $count; ?>" style="margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;">Select A Chapter</div>
    	<div id="fillchapter<?php echo $count; ?>" style="position: absolute; top: 100%; background-color: #EAE8C8; margin: 0px 0px 0px 0px; padding: 0px 5px 0px 5px; width: 178px; border: 1px solid #7A1010; overflow-x: hidden; overflow-y: auto; display: none; z-index: 1;"></div>
	</div>
<?php /*******************************************end chapter1**************************************************************/?>
<?php /*****************************************verse1****************************************************************/?>
    <div style="position: relative;" onmouseover="document.getElementById('fillverse<?php echo $count; ?>').style.display= 'block';" onmouseout="document.getElementById('fillverse<?php echo $count; ?>').style.display = 'none';">
        <div id="ver_<?php echo $count; ?>" style="margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;">Select A Verse</div>
        <div id="fillverse<?php echo $count; ?>" style="position: absolute; top: 100%; background-color: #EAE8C8; margin: 0px 0px 0px 0px; padding: 0px 5px 0px 5px; width: 178px; border: 1px solid #7A1010; overflow-x: hidden; overflow-y: auto; display: none; z-index: 1;"></div>
    </div>
<?php /*******************************************end verse1**************************************************************/?>
<?php /*****************************************text1****************************************************************/?>
<div id="filltext<?php echo $count; ?>">
    <div style="float: left; margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;"></div>
        <div style="float: left; background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 410px; border: 1px solid #7A1010;">
    </div>
</div>
<?php /*******************************************end text1**************************************************************/?>
</div>
<?php /*******************************************end sel1**************************************************************/?>

For some reason the boxes don’t line up properly and the z-index doesn’t work. The 2nd listbox overlaps the first.

2

Could you just post the HTML that is generated after the PHP has been processed? Then we have a better idea of what we are dealing with.

3 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Listboxes</title>
</head>

<body>
<div id="sel-book_1" style="float: left; margin: 0px 0px 0px 5px; width: 188px; height: 493px;">

<div style="position: relative; margin: 0px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; text-align: left; padding: 0px 0px 0px 5px;" onmouseover="document.getElementById('filltable1').style.display= 'block'; " onmouseout="document.getElementById('filltable1').style.display = 'none';">
	<div id="tbl_1" style="margin: 0px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 0px;">Select A Source</div>
	<div id="filltable1" style="background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 121px; border: 1px solid #7A1010; overflow-y: auto; overflow-x: hidden;"></div>

</div>
<div style="position: relative;" onmouseover="document.getElementById('fillbook1').style.display= 'block';" onmouseout="document.getElementById('fillbook1').style.display = 'none';">
	<div style="position: relative; margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;">Select A Book</div>
	<div id="fillbook1" style="background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 121px; border: 1px solid #7A1010; overflow-y: auto; overflow-x: hidden;"></div>
</div>
    <div style="position: relative;" onmouseover="document.getElementById('fillchapter1').style.display= 'block';" onmouseout="document.getElementById('fillchapter1').style.display = 'none';">
    	<div id="chap_1" style="margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;">Select A Chapter</div>
    	<div id="fillchapter1" style="position: absolute; top: 100%; background-color: #EAE8C8; margin: 0px 0px 0px 0px; padding: 0px 5px 0px 5px; width: 178px; border: 1px solid #7A1010; overflow-x: hidden; overflow-y: auto; display: none; z-index: 1;"></div>
	</div>

    <div style="position: relative;" onmouseover="document.getElementById('fillverse1').style.display= 'block';" onmouseout="document.getElementById('fillverse1').style.display = 'none';">
        <div id="ver_1" style="margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;">Select A Verse</div>
        <div id="fillverse1" style="position: absolute; top: 100%; background-color: #EAE8C8; margin: 0px 0px 0px 0px; padding: 0px 5px 0px 5px; width: 178px; border: 1px solid #7A1010; overflow-x: hidden; overflow-y: auto; display: none; z-index: 1;"></div>
    </div>
<div id="filltext1">
    <div style="float: left; margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;"></div>
        <div style="float: left; background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 410px; border: 1px solid #7A1010;">
    </div>
</div>

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

Hm, there’s a bit of JavaScript craziness going on there. What actual functionality do you want for this? Is it like an accordion list? Having all that inline JavaScript is not a good idea. If you could clarify exactly what behavior you want, I’m sure there will be suggestions for better options.

5

Ralph’s hitting the tip of the iceberg here – From what I’m seeing it looks like inlined CSS missing the point of using CSS in the first place, inlined scripting doing CSS’ job, faulty CSS methodology, and possibly even DIV for elements of which a semantic tag may be available.

Basically, you’ve got a bunch of stuff in your markup that has NO BUSINESS IN THE MARKUP! this is a stunning example of why putting the style attribute in the markup in 99% of cases is not just bad practice, it’s shooting yourself in the foot!

Doesn’t help the ‘giant run-on’ css making it harder to debug, the pointless metric declarations on all the margin/paddings, the borders identical to the background (making having borders on them pointless)

That’s one giant train-wreck for what should probably only be:


<ul class="selectMenu">
	<li>
		Select a Source
		<div></div>
	</li><li>
		Select a Book
		<div></div>
	</li><li>
		Select a Chapter
		<div></div>
	</li><li>
		Select a Verse
		<div></div>
	</li>
</ul>

with EVERYTHING else stated ONCE in the external sheet instead of the ten or so redundant times you appear to be doing.

Though your problem is that relative elements are relative to each-other based on source order in the markup, so you have to change the z-index on the PARENT element in order for it to depth sort over later siblings.

That’s such a mess though I can’t even picture what it is you are trying to make it do… Though I suspect much of that is from the use of fixed height containers on the hovers, and lack of content for the hover elements so we can see what it is you are trying to show… is that just another nested list of choices for a normal dropdown menu?

Pretty much whatever it is you are trying to do, you’ve SERIOUSLY out-thunk yourself into a corner with it by using five or six times as much code as should be necessary.

6

I choose not to because it’s too much hassle when you run into problems since you have to scroll up and down to figure out which is doing what. Let me go back one step and simplify this.

Why is it that the bottom box doesn’t line up with the top box:

<?php $count= 1; ?>
<div style="position: relative; margin: 0px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; text-align: left; padding: 0px 0px 0px 5px;" onmouseover="document.getElementById('filltable<?php echo $count; ?>').style.display= 'block'; " onmouseout="document.getElementById('filltable<?php echo $count; ?>').style.display = 'none';">
	<div id="tbl_<?php echo $count; ?>" style="margin: 0px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 0px;">Select A Source</div>
	<div id="filltable<?php echo $count; ?>" style="background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 121px; border: 1px solid #7A1010; overflow-y: auto; overflow-x: hidden;"></div>
</div>
7

(You are doing the PHP thing again. Try to remember to leave that out, as it just gets in the way in these sorts of questions.)

8

Why is it that the bottom box doesn’t line up with the top box:
Hi,
Because the width of the bottom box is wider, you have it at 188px.
You have the parent at 183px with a 5px left padding and a 19px height.

You don’t need to set the widths on block level children, they will expand to the full width of the parent.

Here is what I could make out of that snippet you just posted (after I removed the php). You will see that I commented out the rules that were not needed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">

#demo {
position: relative;  
background-color: #7A1010; 
width: 183px; 
[COLOR=Red]/*height: 19px;*/[/COLOR]
border: 1px solid #7A1010; 
color: white; 
text-align: left; 
[COLOR=Red]/*padding: 0 0 0 5px;*/[/COLOR]
}
#tbl { 
background: #7A1010; 
[COLOR=Red]/*width: 183px;*/
/*height: 19px; */[/COLOR]
[COLOR=Red]/*border: 1px solid #7A1010; */[/COLOR]
color: white; 
font-weight: bold;  
}
#filltable {
background-color: #EAE8C8; 
margin: 0; 
[COLOR=Red]/*width: 188px;*/[/COLOR]
height: 121px; 
[COLOR=Red]/*border: 1px solid #7A1010; */[/COLOR]
overflow-y: auto; 
overflow-x: hidden;
}
</style>

</head>
<body>

<div id="demo" onmouseover="document.getElementById('filltable').style.display= 'block';" onmouseout="document.getElementById('filltable').style.display = 'none';" >
    <div id="tbl">Select A Source</div>
    <div id="filltable"></div>
</div>

</body>
</html>

Now you can clean all that up and replace the js hide/show with :hover to show the bottom div.
Likewise that top div can just be a heading since that’s what it is.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
#demo {
    width: 183px;
    padding: 1px;/*simulate border*/
    background: #7A1010;
    color: #FFF;
}
#demo h3 {
    background: #7A1010;
    margin: 0;
    padding: 2px 4px;
    font-size: 1em;
}
#fill {
    display: none;
    height: 121px;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #EAE8C8;
}
#demo:hover #fill {
    display: block
}
</style>

</head>
<body>

<div id="demo">
    <h3>Select A Source</h3>
    <div id="fill"></div>
</div>

</body>
</html>
9

Meaning you missed the point of CSS and external sheets, or another of the points. If you have to spend time scrolling up and down, you’ve got problems with how you are editing your code. If you are having problems figuring out what is what, you have problems with not using verbose names on things.

If you put it into an external CSS file (where it belongs) not only do you save bandwidth by everything once instead of every time you echo an item, not only does it make it easier to write the php since you don’t have the endless pointless redundant code, not only is it cached across pages, not only is it simpler to maintain because there would be LESS code…

You could also view them in separate windows side-by-side… eliminating the need to scroll at all – as a rule of thumb if you are even THINKING about 90% of the stuff you have in your markup when you are making your markup, you’re doing it all WRONG.

… and by not using the STYLE attribute in the markup you can make that CSS legible instead of a giant incomprehensible run-on.

Likewise I’d suggest adding FORMATTING to your output to help with debugging and getting rid of all those pointless wasteful <?php ?> – but then I consider any PHP that has more than one occurrence of <?php ?> in it to be total rubbish. (I had my way <?php and ?> would be removed from php entirely as pointless, wasteful, half-assed coding)

Rayzur touched upon it – you’re declaring widths that don’t add up, widths on elements that don’t need widths as they should auto-fill to the parent, borders on elements that don’t need borders (if the border is identical to the background color what are you putting border on it for?!?)

Let’s take #tbl_count for example, 183px width + 1px border == 185px total width unless you’re working with JUST IE in quirks mode (the broken box model) – that’s too wide to fit inside the 183px parent.

Move on to #filltablecount, and it’s lather, rinse, repeat on that, since 188px + 1px border = 190px, which can’t fit into the 183px declared on the parent.

You’re basically stating widths on things that shouldnt’ have widths – set a width on the parent, the rest should fall into place.

… and that’s before we talk the onmouseover/onmouseout doing CSS’ job… though again I can’t entirely say what the markup should be for that until I know what’s going into that second nested DIV for content.

Where the fixed height is also problematic or even a /FAIL/ at accessibility depending on what the content is that you are revealing.

Just what are you trying to do with this? What is being shown?

ASSUMING we kept the DIV in there (which given what you are doing I think is incorrect) the first thing I would do is neuter the content down to what is actually NEEDED.


<?php
	$count= 1;
	echo '
		<div class="item" id="tbl_',$count,'">
			Select A Source
			<div id="filltable_',$count,'" class="hoverContent"></div>
		</div>';
?>

Then the CSS (assuming you’re wasting bandwidth and making things harder by not using a reset)

I’m also going to assume you do NOT want the hover state box to push everything down the page when hovered, which means switching it to APO. (would be annoying as hell the other way)


.item {
	position:relative;
	z-index:1;
	width:183px;
	margin:0;
	padding:0;
	/* you are using a px height, so fix the font-size and line-height */
	font:14px/16px arial,helvetica,sans-serif;
	background:#7A1010;
}

.item:hover {
	z-index:2; /* when hovered move it over it's siblings */
	height:1%; /* holly hack, trip haslayout, fix IE positioning */
	padding:3px 6px;
}

.item .hoverContent {
	position:absolute;
	display:inline; /* IE hover state fix */
	left:-999em;
	top:19px;
	width:188px;
	height:121px;
	margin:0;
	padding:0;
	background:#7A1010;
}

.item:hover .hoverContent {
	display:block; /* IE hover state fix */
	left:0;
}

Which would work IE7+, for legacy IE I’d just throw csshover3.htc at them.

ASSUMING I understood what it is you are even trying to do – which given the code you presented is actually pretty doubtful as it left me with more questions than answers in that department… since this would overlap the later ones no matter what you do…

If you WANT it to push all the content down when hovered (which is what you were coding – which makes little sense as z-index would be a non-issue)


.item {
	width:183px;
	margin:0;
	padding:0;
	/* you are using a px height, so fix the font-size and line-height */
	font:14px/16px arial,helvetica,sans-serif;
	background:#7A1010;
}

.item:hover {
	padding:3px 6px;
}

.item .hoverContent {
	display:none;
	margin:0;
	padding:0;
	height:121px;
	background:#7A1010;
}

.item:hover .hoverContent {
	display:block;
}

Which doesn’t make a whole lot of sense and would be painful as all git to navigate.

You’re combining broken CSS methodologies, broken markup techniques, and needlessly complex php with trying to do a behavioral effect that I doubt anyone here has even been able to decipher what it is you’re actually trying to do.

10

Wait, I followed the link in your siggy, now I see what it is you are trying to do…

… and why you are having so many problems – mein gott 37k of markup for 1.8k of plaintext – that whole thing needs to be pitched in the trash and started over clean. I’m SHOCKED you were able to get as far as you did with that approach to coding a site.