Just wondering /Menu - CSS Padding for aligned right link

Just wondering /Menu - CSS Padding for aligned right link

Post by Baxte » Wed, 15 Sep 2004 04:23:37


was wondering if you tried it? I was just plying around with his code in
IE and Fire fox and it seamed to work just fine, with this code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from
url=(0049)http://www.saintelizabethhighschool.com/menu.html -->
<HTML><HEAD>
<TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>
.red {
BACKGROUND-COLOR: #cc0033
}
.black {
BACKGROUND-COLOR: #000000
}
.menu1 {
PADDING-RIGHT: 8px; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM:
0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-ALIGN: right
}
.menu1 A {
DISPLAY: block; WIDTH: 100%; TEXT-DECORATION: none
}
.menu1 A:link {
COLOR: #000000
}
.menu1 A:visited {
COLOR: #000000
}
.menu1 A:hover {
COLOR: #cc0033;
BACKGROUND-COLOR: #000000;
background-position: right;
}
.menu1 A:active {
COLOR: #cc0033
}
</STYLE>

<META content="MSHTML 6.00.2800.1458" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width=157 border=0>
<TBODY>
<TR>
<TD width=156>
<TABLE cellSpacing=0 cellPadding=0 width=156 border=0>
<TBODY>
<TR>
<TD><IMG height=4 src="menu_School_files/spacer.gif"
width=156></TD></TR>
<TR>
<TD class=menu1><A
href="http://www.saintelizabethhighschool.com/menu.html#"
class="menu1">Admissions</A></TD>
</TR>
<TR>
<TD class=menu1><A
href="http://www.saintelizabethhighschool.com/menu.html#"
class="menu1">Contact
Us</A></TD>
</TR>
<TR>
<TD class=menu1><A
href="http://www.saintelizabethhighschool.com/menu.html#"
class="menu1">Clubs</A></TD>
</TR>
<TR>
<TD class=menu1><A
href="http://www.saintelizabethhighschool.com/menu.html#"
class="menu1">Contact
St. Liz </A></TD>
</TR>
<TR>
<TD class=menu1><A
href="http://www.saintelizabethhighschool.com/menu.html#"
class="menu1">College
Visits</A></TD>
</TR>
<TR>
<TD class=menu1><A
href="http://www.saintelizabethhighschool.com/menu.html#"
class="menu1">Curriculum</A></TD>
</TR>
<TR>
<TD class=menu1><A
href="http://www.saintelizabethhighschool.com/menu.html#"
class="menu1">Library /
Media this is a two-line item Center</A></TD>
</TR>
<TR>
<TD class=menu1><A
href="http://www.saintelizabethhighschool.com/menu.html#"
class="menu1">Newsletter</A></TD>
</TR>
<TR>
<TD class=menu1><A
href="http://www.saintelizabethhighschool.com/menu.html#"
class="menu1">Guidance
Couseling</A></TD>
</TR>
<TR>
<TD class=menu1><
 
 
 

Just wondering /Menu - CSS Padding for aligned right link

Post by TC211 » Wed, 15 Sep 2004 06:01:29

Hello,
There's an IE box model problem when using 100% width on #menu1 a , and
padding in #menu1. To see it, add another row to the table, and put an image
156px wide in it (which is what the td width is set as). Now display it in IE
and Firefox. That could change the look of the page in IE vs firefox depending
on other design elements in or around that table.

If you just add the following hack to the original code, it fixes the
hover issue in IE.

<!--[if gte IE 5]>
<style>
.menu1 a {height: 1em;}
</style>
<![endif]-->
</head>

Take care,
Tim

 
 
 

Just wondering /Menu - CSS Padding for aligned right link

Post by TC211 » Wed, 15 Sep 2004 06:14:42

"Interesting IE phenomenon... (IE6, XP Pro)

Check out http://www.yqcomputer.com/ "

For this page the fix would be:

<!--[if gte IE 5]>
<style>
#menu a {height: 1em;}
</style>
<![endif]-->
</head>

Take care
 
 
 

Just wondering /Menu - CSS Padding for aligned right link

Post by Baxte » Wed, 15 Sep 2004 06:17:28

Interesting info thanks.
Dave


and
image
IE
depending
 
 
 

Just wondering /Menu - CSS Padding for aligned right link

Post by TC211 » Wed, 15 Sep 2004 06:26:07

Hello,
Sorry, forgot something.
To give credit where it is due, I learned this in a great tutorial:
http://www.yqcomputer.com/
Take care