IE display:block

[tbirnseth]

I am using some position:absolute <div>s to provide some menus. I'm getting exactly the behavior I expect under FF, but under IE the paragraphs end up 100% wide.

Relative CSS is:

.Sub a, .Sub a:visited {
display: block;
padding: 1px 8px 1px 12px;
border: 1px solid;
border-color: #999 #333 #333 #999;
background-color: #CCCCCC; /* Gray */
color: #993300; /* Maroon */
text-decoration: none;
}

.Sub a:hover, .Sub a:active, .Sub a:focus {
background-color: #F4F4F4; /* OffWhite */ /* #A0A0A0 Darker Gray */
color: #F2AC1F; /* Silver */
}
.leftNavMenu a {
text-decoration: none;
font-weight: bold;
color: #FFCC00;
}
.leftNavMenu a:hover, .leftNavMenu a:active, .leftNaveMenu a:focus {
color: #F5E79C; /* light yellow */
}
.leftNavMenu a:visited {
text-align: right;
}



<div id="SubSupport" style="position:absolute; z-index:2; visibility:hidden;" class="Sub">
<p><a href="#">Connectivity</a></p>
<p><a href="#">Shipping Providers</a></p>
<p><a href="#">Payment Providers</a></p>
<p><a href="#">Drop Shippers</a></p>
<p><a href="#">Import/Export Data</a></p>
<p><a href="#">Creating/Managing Data Maps</a></p>
<p><a href="#">Inventory Management</a> </p>
<p><a href="#">Customer Management</a> </p>
<p><a href="#">Email Templates</a> </p>
<p><a href="#">Maintenance Windows</a> </p>
</div>


<p class="leftNavMenu" onmouseover="P7_autoLayers(0,'SubSupport');P7_Snap('aSup','SubSupport',3,-16)">Support<a id="aSup"></a></p>

[/HTML]

The P7_stuff() just turns the layers on/off and does some positioning. The problem seems to be in the 'display:block' within the anchor. If I put it in the paragraph that contains the anchor, I get the right blocking but the edges are ragged and it looks cheesy!

I used this following hack to have similar pages working in the past (not really sure what it's doing within IE) but it doesn't seem to work this time.

</body>
<!--[if gte IE 5]>
<style>
/* This rule fixes a bug in IE5-6 allowing block links to work correctly */
.Sub a { height: 1em;}
.leftNavMenu a { height: 1em;}
</style>
<![endif]-->
</html>


Any help/wisdom provided would be greatly appreciated.

thanks,
tony

[sutabi]

a block normally takes 100%....

try this to the block that goes 100%:
width: auto;

That should the block as in "inline"

[WebJoel]

Re:
<div id="SubSupport" style="position:absolute; z-index:2; visibility:hidden;" class="Sub">
<p><a href="#">Connectivity</a></p>
<p><a href="#">Shipping Providers</a></p>
<p><a href="#">Payment Providers</a></p>
<p><a href="#">Drop Shippers</a></p>
<p><a href="#">Import/Export Data</a></p>
<p><a href="#">Creating/Managing Data Maps</a></p>
<p><a href="#">Inventory Management</a> </p>
<p><a href="#">Customer Management</a> </p
<p><a href="#">Email Templates</a> </p>
<p><a href="#">Maintenance Windows</a> </p>
</div>
Keep in mind that using the "<p></p>" to nest your links is going to complicate things by adding the line-height, and any stylings of "p" in STYLEsheet (such as color, font-weight, size, indentation, padding, etc... -why bother?), and be a block-level element ("100% wide") to your navigation list's LI. -Why not do this semantically (the way it is supposed to be), since your "navigation list" is a list, let's make it an unordered list, something like this:

<ul class="sub">
<li><a href="#">Connectivity</a></li>
<li><a href="#">Shipping Providers</a></li>
<li><a href="#">Payment Providers</a></li>
<li><a href="#">Drop Shippers</a></li>
<li><a href="#">Import/Export Data</a></li>
<li><a href="#">Creating/Managing Data Maps</a></li>
<li><a href="#">Inventory Management</a></li>
<li><a href="#">Customer Management</a></li>
<li><a href="#">Email Templates</a></li>
<li><a href="#">Maintenance Windows</a></li>
<ul> To which you can attach any class="" or id="" (you do not always have to wrap everything in a DIV, -that is just plain overkill most of the time. You can define the <UL> to behave pretty much as you would define a DIV in the same situation, spare yourself complicated coding and reduce your pageweight by a few bytes or KB & reduce download times for dial-up users, by it's absence).

The reason the 'hack' you cited worked 'sometimes' and not others, has to do with several factors of the <ul>, and whether or not it "hasLayout", and even if the <ul> has anchors in the <li>, which also can trigger the bug. If you give this "position:absolute;", it doesn't have the white-space bug, or if you give the <li> a "width", or if you give the <li> a "border-bottom:n" you have satisfied IE's requirement of 'has layout'. There are several other factors.

As an aside note, be cautious of extra 'white spaces' in your html and css code, things like:
<p><a href="#">Maintenance Windows</a><---------------></p>
whereas "<--->" represents 'white spaces'. Hitting the [RETURN] to put code on the next line is okay, as this is treated as a 'line-return' (one space).
Multiple contiguous white spaces in the code can trigger IE's "white-space bug" and cause a virtual linefeed in your output, giving rise to vertical lists seeming as if they have several "<br>"s between each list-item (although possibly other factors can negate even this, often enough code that I have checked for general white-space complaints HAVE extra 'white spaces' (unnecessary space-bar taps) in the HTML and/or CSS which, when removed, seems to have solved the problem..).

And just for note:
<div id="SubSupport" style="position:absolute; z-index:2; visibility:hidden;" class="Sub">is without meaning, as anything that is "position:absolute;" (out of the document flow), doesn't require any "z-index:n" and isn't obeying this anyway. "absolute:" is "infinity". "relative:" is whatever number you assign it (1, 2, 3, 1000, -whatever, and therefore is "relative to/above the parent" by that number of 'layers').
You can only apply "z-index:n" with any result to a relatively-positioned object (div, img, etc.)

And, only IE understands negative z-indexes, so never use neg z's as you'll confuse compliant browsers (Opera, Moz, NS, Fx, etc.) and they will not display it as you intended...

[tbirnseth]

width:auto didn't help. The width of the <a> tag should have been constrained by the width of the enclosing <div> (hence the block appearance).

[WebJoel]

We can do this the easiest way too. Test this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
html, body {border:0; padding:0; margin:0;}

</style>

<style type="text/css">
ul {width:200px; padding:10px;}
ul li {list-style-type:none; width:760px; margin-bottom:6px; color:black; background-color:white;}
ul li a:hover {text-decoration:none; font-weight:bold; letter-spacing:0.1em; color:red;}
</style>

</head>
<body>

<ul>
<li><a href="#">Connectivity</a></li>
<li><a href="#">Shipping Providers</a></li>
<li><a href="#">Payment Providers</a></li>
<li><a href="#">Drop Shippers</a></li>
<li><a href="#">Import/Export Data</a></li>
<li><a href="#">Creating/Managing Data Maps</a></li>
<li><a href="#">Inventory Management</a></li>
<li><a href="#">Customer Management</a></li>
<li><a href="#">Email Templates</a></li>
<li><a href="#">Maintenance Windows</a></li>
</ul>
</body>
</html>

[tbirnseth]

Cut/pasted into a test page. I still get the 'block' as very wide. I.e. the white background extends way wider than any of the enclosed list items (both IE and FF).

If this works for you, it indicates to me that I have something else in my stylesheet that's driving the behavior. I do have some <div>'s defined at 100% and the overall enclosing <div> is 100% wide.

Any thoughts? But your approach is nice and clean.

tony

[WebJoel]

opps, -my bad!


re:
<style type="text/css">
ul {width:200px; padding:10px;}
ul li {list-style-type:none; width:760px; margin-bottom:6px; color:black; background-color:white;}
ul li a:hover {text-decoration:none; font-weight:bold; letter-spacing:0.1em; color:red;}
</style>
Typo. I had "160px" in my HTML-editor and I got to adding little niceties like :hover effects and stuff and inadvertantly changed the width and neglected to re-check prior up posting. Obviously, the <li> would never be wider than the container <ul>! :eek:
I checked it closer this time... THIS below should work. :o (with additional stylings and changes, and a green border to show that it IS in fact, as wide as 210px, which would be a nice left-hand side navigation. It could be even more narrow except my :hover effect of increasing the letter-spacing would be busted...)

This is what it should have been (further edited) :
<style type="text/css">
ul {width:220px; border:1px solid green; display:block;}
ul li {display:block; margin-left:5px; width:220px; list-style-type:none; margin-bottom:6px; color:black; background-color:white;}
ul li a:hover {text-decoration:none; font-weight:bold; letter-spacing:0.02em; color:red;}
</style>
I am sure that it can still be further edited for functionality & appearance, but I am seeing nearly the same results now in IE and Firefox. And yes, reluctantly I will concede that a 'container DIV' for the UL might further increase your control over this, how it displays on your page, etc.

[tbirnseth]

Yes, forcing the width does make it work.

However, if set to width:auto or no width at all, I get the same behavior.
Making the containing <div> have a class and then having that class definition control the ul, li "SHOULD" have the width of the <div> become the width of the widest element within it (which would end up about 220px in this case). But it doesn't. That's what makes me think there's something else that's driving the width to be 100% in IE but I can't see what it is.

May just force the width for now, higher priority stuff than IE's issues to work on! :-)

tony