Hi All
I have designed a menu using css, see here: <!-- m --><a class="postlink" href="http://www.johnbrewerphotography.com/">http://www.johnbrewerphotography.com/</a><!-- m --> and while it looks good in FireFox, in Internet Explorer when the mouse hovers over the text, the text in the menu moves left.
Here is the basic code I am using:
<div id="menu">
<div id="title"><img alt="Logo" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo.gif" /></div>
<div id="links">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/index.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/portfolio/">Portfolio</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/purchasing.html">Purchasing</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/technical_notes.html">Technical Notes</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/about.html">About</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/contact.html">Contact</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/links.html">Links</a>
</div>
</div>
#links {
margin: 10px;
}
#menu
{
height: 490px;
font-size: 13pt;
}
#menu img {
margin-right: 10px;
}
#menu #links a
{
display: block;
margin-top: 5px;
padding: 2px;
padding-left: 6px;
border: 1px solid #FFF;
border-left: 4px;
color: black;
text-decoration: none;
}
#menu #links a:hover
{
padding-left: 2px;
color: rgb(50%,0%,0%);
color: black;
border-bottom: 1px solid #666;
border-left: 4px solid #666;
}
Any help would be much appriciated.
Joe#links a
{
display: block;
margin-top: 5px;
padding: 2px;
padding-left: 6px;
border: 1px solid #FFF;
border-left: 4px solid #fff;
/*font: bold; */
color: black;
text-decoration: none;
}
#links a:hover
{
padding: 2px;
padding-left: 6px;
margin-top: 5px;
/*background-color: #D4D4DF; */
color: rgb(50%,0%,0%);
color: black; /* color redefined ? */
border: 1px solid #FFF;
border-bottom: 1px solid #666;
border-left: 4px solid #666;
}
Don't need #menu #links, #links already points to one element.You've got your "a" with a padding-left: 6x and your "hover" with a padding-left: 2px. Seems to me that would shift something left on hover.
Why does it work fine in ff and not in IE? I think because of the box model problem in IE. If you switched your doctype to strict instead of transitional, I think it would display the same in both browsers, but I'm not positive. I THINK transitional doctypes tell IE to display in "quirks" mode which I'm pretty sure you'd like to avoid "quirks" mode unless you REALLY know what you're doing.
If it were me, I'd try changing the padding to match in the hover and "a" states first, but I wouldn't be surprised if it didn't fix things.
This is all what I THINK, and if past history is any indicator, it's all completely wrong!
CFH
I have designed a menu using css, see here: <!-- m --><a class="postlink" href="http://www.johnbrewerphotography.com/">http://www.johnbrewerphotography.com/</a><!-- m --> and while it looks good in FireFox, in Internet Explorer when the mouse hovers over the text, the text in the menu moves left.
Here is the basic code I am using:
<div id="menu">
<div id="title"><img alt="Logo" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo.gif" /></div>
<div id="links">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/index.html">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/portfolio/">Portfolio</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/purchasing.html">Purchasing</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/technical_notes.html">Technical Notes</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/about.html">About</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/contact.html">Contact</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.johnbrewerphotography.com/links.html">Links</a>
</div>
</div>
#links {
margin: 10px;
}
#menu
{
height: 490px;
font-size: 13pt;
}
#menu img {
margin-right: 10px;
}
#menu #links a
{
display: block;
margin-top: 5px;
padding: 2px;
padding-left: 6px;
border: 1px solid #FFF;
border-left: 4px;
color: black;
text-decoration: none;
}
#menu #links a:hover
{
padding-left: 2px;
color: rgb(50%,0%,0%);
color: black;
border-bottom: 1px solid #666;
border-left: 4px solid #666;
}
Any help would be much appriciated.
Joe#links a
{
display: block;
margin-top: 5px;
padding: 2px;
padding-left: 6px;
border: 1px solid #FFF;
border-left: 4px solid #fff;
/*font: bold; */
color: black;
text-decoration: none;
}
#links a:hover
{
padding: 2px;
padding-left: 6px;
margin-top: 5px;
/*background-color: #D4D4DF; */
color: rgb(50%,0%,0%);
color: black; /* color redefined ? */
border: 1px solid #FFF;
border-bottom: 1px solid #666;
border-left: 4px solid #666;
}
Don't need #menu #links, #links already points to one element.You've got your "a" with a padding-left: 6x and your "hover" with a padding-left: 2px. Seems to me that would shift something left on hover.
Why does it work fine in ff and not in IE? I think because of the box model problem in IE. If you switched your doctype to strict instead of transitional, I think it would display the same in both browsers, but I'm not positive. I THINK transitional doctypes tell IE to display in "quirks" mode which I'm pretty sure you'd like to avoid "quirks" mode unless you REALLY know what you're doing.
If it were me, I'd try changing the padding to match in the hover and "a" states first, but I wouldn't be surprised if it didn't fix things.
This is all what I THINK, and if past history is any indicator, it's all completely wrong!
CFH