Forum Moderators: not2easy
I am using the following to create a menu. The following has table lines and works fine:
table.menu a {width:125px; border:1px solid #A6B6B7; display: block;}
However, I would like to make the table border = 0. When you hover over the menu, it gives the effect of the menu bouncing (expanding). Is there a way around this?
Thanks in advance, Steven
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
a:link {font-family: Arial, Helvetica, Verdana; font-size: 10pt; color: rgb(0,51,153);}
a:visited {font-family: Arial, Helvetica, Verdana; font-size: 10pt; color: rgb(204,51,51);}
a:hover {font-family: Arial, Helvetica, Verdana; font-size: 10pt; color: rgb(204,51,51);}
a:active {font-family: Arial, Helvetica, Verdana; font-size: 10pt; color: rgb(204,51,51);}
table.menu a {width:125px; border:0px solid #A6B6B7; display: block;}
div.menu a {text-decoration:none; color: #333333; background: #CDDEDE; line-height:16px;}
div.menu (position:absolute;top:0; left:0;) /*fixes IE slowness? */
div.menu a:link {text-decoration: none; color: #333333; background: #cccc99;}
div.menu a:visited {text-decoration: none; color: #333333; background: #CDDEDE;}
div.menu a:hover {text-decoration: none; color: white; background: black; border:1px solid #000000;}
div.menu a:active {text-decoration: none; color: #000000; background: #cccc99;}
</style>
<title>Test Rollover</title>
</head>
<body>
<div align="left" class="menu">
<table summary="" cellpadding="0" cellspacing="0" class="menu">
<tr>
<td><a href="#"><strong>Linky Links</strong></a></td>
</tr>
<tr><td><a href="http://mylink.com/" onfocus="this.blur()"> Library Network</a></td></tr>
<tr><td><a href="#" onfocus="this.blur()"> Link 2</a></td></tr>
<tr><td><a href="#" onfocus="this.blur()"> Link 3</a></td></tr>
<tr><td><a href="#" onfocus="this.blur()"> Link 4</a></td></tr>
<tr><td><a href="#" onfocus="this.blur()"> Link Steven</a></td></tr>
</table></div>
</body>
</html>
border: 1px solid transparent;
Will fix your bounce problem.
Whats the point in writing in xhtml and then abusing the markup by using tables for layout and doing horrible things with ?
I'm confused as to the purpose of the onfocus="this.blur()" on your anchors! Do you mind if I ask what this is doing?
Cheers!
First off, that's not valid XHTML, the XML declaration MUST be the first thing in the document if you provide one. I recommend not including it at all, because IE6 goes into quirks mode.
I find just the opposite to be true for me. When I have the xml declaration at the top of the page, everything works as it should. However, when i take it off and just leave the xhtml doctype, positioning and alignment go crazy. For this reason I only put the doctype in to validate my html, then I take it out completely after it tells me it validates.
But just try taking the xhtml stuff out and see what happens.
Try sticking with using a correct doctype - your pages will behave properly and will be styled easier using CSS.
See [alistapart.com...] for more info
Second, I was quickly putting an example together using css to format a table, and I wasn't paying attention when I put the xml stuff in there. Please except my apologies.
Thanks again, Steven
MWPro: sounds like you are used to working with quirks mode and switching to 'standards compliant' mode is knocking your design off a bit.Try sticking with using a correct doctype - your pages will behave properly and will be styled easier using CSS.
See [alistapart.com...] for more info
That is an interesting thought.
Does IE go into quirks mode if there is no doctype? If so then that very may well be what is happening. How can I know for sure?
BlobFisk: It removes focus from the link, making it impossible to use the keyboard to get to it.
drbrian: Thanks - that's what I thought but I can't really see a reason for it. I tend to use the tab key quite a bit to move around links and form objects, so this code would limit/kill my ability to do that.
I suppose I just can't see the underlying reason for doing it.
