Here is an odd bug that I'm not sure how to explain. It happens in IE6 (haven't tested other browsers), and it's a combination of tags/layout that I honestly don't think anyone's discovered before.
If anyone can either verify my findings or explain the cause, I would be most grateful.
When you check out the following code, the links don't work at all!!
<body leftmargin="2" marginheight="2" marginwidth="2" topmargin="2"> <!-- Site Introduction - Splash/Logo/SiteSummary --> <div style="position:relative; top:0; left:0;"> <div style="float:left; width:150px;"> <div style=""><img src="some-150x225.jpg" width="150" height="226" border="0" hspace="0" vspace="0" style="padding:0; margin:0;"></div> </div> <div style="padding:5px;"><h1>Some Website Name</h1></div> <div style="display:none;"> <p>This text should not display.</p> <blockquote> <p>More text that should not display. Removing this blockquote will allow the links below to work. Odd...</p> </blockquote> </div> </div> <!-- Navigation Container (Nav Levels 1-3) --> <div> <span><a href="Welcome.html" target="TargetFrame">Welcome / Home Page</a></span> <span><a href="ServicesAndFees.html" target="TargetFrame">Services & Fees</a></span> <span><a href="Resources.html" target="TargetFrame">Resources</a></span> </div> </body>
The links will work if you do any one of the following:
- Remove the relative positioning in the first div
- Remove the padding in the div for the website name
- Remove the display:none; from the div after the website name
- Remove the blockquote entirely
I'm not sure what is the cause, and if anyone can explain it, I'd be happy to hear what the reasons are.
Anchors broken by Blockquote and/or CSS in IE6 ??
I can see what is happening, but it is still an IE 'bug'.
The <div style="display:none;"> is actually being taken into account when the page is displayed.
It's actual position is over the top of the links so stopping them from being selectable.
1. Remove the relative positioning in the first div
Stops IE from considering the display:none; div
2. Remove the padding in the div for the website name
Moves the links up the screen so that they are not under the display:none; div
3. Remove the display:none; from the div after the website name
move the links to below the div.
4. Remove the blockquote entirely
Removes the offending div from the equation.
Your best bet is to remove the position:relative from the first div.
Other browsers get it right though.