I have a couple issues with the current project I am working on. While none of them are terribly major, they are just little things I would like to figure out and get fixed.
<!-- m --><a class="postlink" href="http://www.digitpress.com/DPNEW/">http://www.digitpress.com/DPNEW/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.digitpress.com/DPNEW/style.css">http://www.digitpress.com/DPNEW/style.css</a><!-- m -->
First, notice the navigation menu to the left. The basic CSS rollover trick was employed on the links. They work properly in Firefox, and Opera, however not in IE.
The rollover should be activated when the cursor passes over the individual blocks, not necessarily the text. However, in IE the link is only activated when the cursor passes over the text. When the cursor is moved off the text, but remains in the same block, the rollover remains active. I don't understand why this happens.
Second, I highlighted the search form with a yellow border. In FireFox and IE (works fine in Opera), there is a padding problem that tacks on that extra 10 pixels or so to the bottom. (I've tried padding-bottom: 0px) Is there a way to remove this without violating several accessibility codes?
Any help on either issue would be greatly appreciated
Originally posted by sisko
First, notice the navigation menu to the left. The basic CSS rollover trick was employed on the links. They work properly in Firefox, and Opera, however not in IE. What version of IE are you testing it on? It seems to work properly for me.Originally posted by Triumph
What version of IE are you testing it on? It seems to work properly for me.
I'm using IE6Search box:
<form style="margin:0;" method="post" action="search.cfm">
Menu:
Add background:#c00; to #navlist dl a
It will still require a little tweaking.The background problem in IE-Win can be solved by adding position: relative; to the <a> tags in question, or using a Holly hack encased in the IE5-Mac backslash hack to set the height to a bogus value, like 1% or 1px.
/*\*/
* html #navlist dl a { height: 1px; }
/**/Originally posted by Fang
Search box:
<form style="margin:0;" method="post" action="search.cfm">
Worked like a charm! Thanks! I can't believe I didn't try that
Now, I don't understand what you guys aer saying about the background at all. AFAIK, there are no problems with the background. Hopefully this picture makes more sense than my obscure description
<!-- m --><a class="postlink" href="http://www.digitpress.com/DPNEW/iebug.gif">http://www.digitpress.com/DPNEW/iebug.gif</a><!-- m -->
Frame 1) Cursor placed over the links respective block. Rollover and link should be clickable here, but aren't.
Frame 2) Cursor placed over link text. Rollover activates and link is clickable.
Frame 3) Cursor removed from link text, but remains in block. Rollover remains activated, and link remains clickable, as it should.
In Opera and FireFox, the link and rollover are always active when the cursor is in a particular block, thus working perfectly.Just change these:
#navlist dl a
{background:#c00;
color: #FFF;
display: block;
text-decoration: none;
width: 180px;
font-weight: bold;
}
#navlist dt a:hover, #navlist dd a:hover
{
color: #FFF;
background: #000;
border-right: 3px solid #C11;
}I tried it and it worked. Now I'm truly stumped because I have no clue why it worked.
Can you please explain it to me?
(Thank you, by the way)#navlist dd a:hover this you need for the hover effect to work with links in dd
background:#c00; this is a float bug.
If you remove float:left from #left in your original document, the hover effect will work, but the layout is broken.
Without the background:#c00;, IE's box-model breaks and a "hole" is left down to #root2 preventing the hover effect firing.
<!-- m --><a class="postlink" href="http://www.digitpress.com/DPNEW/">http://www.digitpress.com/DPNEW/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.digitpress.com/DPNEW/style.css">http://www.digitpress.com/DPNEW/style.css</a><!-- m -->
First, notice the navigation menu to the left. The basic CSS rollover trick was employed on the links. They work properly in Firefox, and Opera, however not in IE.
The rollover should be activated when the cursor passes over the individual blocks, not necessarily the text. However, in IE the link is only activated when the cursor passes over the text. When the cursor is moved off the text, but remains in the same block, the rollover remains active. I don't understand why this happens.
Second, I highlighted the search form with a yellow border. In FireFox and IE (works fine in Opera), there is a padding problem that tacks on that extra 10 pixels or so to the bottom. (I've tried padding-bottom: 0px) Is there a way to remove this without violating several accessibility codes?
Any help on either issue would be greatly appreciated
Originally posted by sisko First, notice the navigation menu to the left. The basic CSS rollover trick was employed on the links. They work properly in Firefox, and Opera, however not in IE. What version of IE are you testing it on? It seems to work properly for me.
Originally posted by Triumph What version of IE are you testing it on? It seems to work properly for me.
I'm using IE6Search box:
<form style="margin:0;" method="post" action="search.cfm">
Menu:
Add background:#c00; to #navlist dl a
It will still require a little tweaking.The background problem in IE-Win can be solved by adding position: relative; to the <a> tags in question, or using a Holly hack encased in the IE5-Mac backslash hack to set the height to a bogus value, like 1% or 1px.
/*\*/
* html #navlist dl a { height: 1px; }
/**/Originally posted by Fang
Search box:
<form style="margin:0;" method="post" action="search.cfm">
Worked like a charm! Thanks! I can't believe I didn't try that
Now, I don't understand what you guys aer saying about the background at all. AFAIK, there are no problems with the background. Hopefully this picture makes more sense than my obscure description
<!-- m --><a class="postlink" href="http://www.digitpress.com/DPNEW/iebug.gif">http://www.digitpress.com/DPNEW/iebug.gif</a><!-- m -->
Frame 1) Cursor placed over the links respective block. Rollover and link should be clickable here, but aren't.
Frame 2) Cursor placed over link text. Rollover activates and link is clickable.
Frame 3) Cursor removed from link text, but remains in block. Rollover remains activated, and link remains clickable, as it should.
In Opera and FireFox, the link and rollover are always active when the cursor is in a particular block, thus working perfectly.Just change these:
#navlist dl a
{background:#c00;
color: #FFF;
display: block;
text-decoration: none;
width: 180px;
font-weight: bold;
}
#navlist dt a:hover, #navlist dd a:hover
{
color: #FFF;
background: #000;
border-right: 3px solid #C11;
}I tried it and it worked. Now I'm truly stumped because I have no clue why it worked.
Can you please explain it to me?
(Thank you, by the way)#navlist dd a:hover this you need for the hover effect to work with links in dd
background:#c00; this is a float bug.
If you remove float:left from #left in your original document, the hover effect will work, but the layout is broken.
Without the background:#c00;, IE's box-model breaks and a "hole" is left down to #root2 preventing the hover effect firing.