By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,689 Members | 1,106 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,689 IT Pros & Developers. It's quick & easy.

display: block style issue in IE (and not on other browsers)

P: n/a
dee
Here is a a list of my hyperlinks in my home page:

<A class="theclass" href="Default.aspx">Home</A>
<A class="theclass" href="Search.aspx">Search</A>
<A class="theclass" href="Help.aspx">Help</A>

And these are defined in Styles.css file:

a.theclass:link, a.theclass:visited {
display: block;
border: 1px solid #cccccc;
text-decoration: none;
}
a.dpclass:hover{
border: 1px solid #cccccc;
text-decoration: none;
}

Now, the problem is that in FireFox/Netscape and Opera when the mouse cursor
enters the style box of the hyperlink (due to display:block style) the box
changes color. However, in IE6.0 the box only changes color when the mouse
cursor is on the text of the hyperlink and entering into the box alone
produces no visual effect. I appreciate if anyone who has run into this
issue has a solution or anyone else has a suggestion about this.

Thanks.
Dee
Nov 19 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
to handle this on ie, use the mouseover and mouseout events to change the
style rather than hover.

-- bruce (sqlwork.com)
"dee" <de*@home.net> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Here is a a list of my hyperlinks in my home page:

<A class="theclass" href="Default.aspx">Home</A>
<A class="theclass" href="Search.aspx">Search</A>
<A class="theclass" href="Help.aspx">Help</A>

And these are defined in Styles.css file:

a.theclass:link, a.theclass:visited {
display: block;
border: 1px solid #cccccc;
text-decoration: none;
}
a.dpclass:hover{
border: 1px solid #cccccc;
text-decoration: none;
}

Now, the problem is that in FireFox/Netscape and Opera when the mouse
cursor enters the style box of the hyperlink (due to display:block style)
the box changes color. However, in IE6.0 the box only changes color when
the mouse cursor is on the text of the hyperlink and entering into the box
alone produces no visual effect. I appreciate if anyone who has run into
this issue has a solution or anyone else has a suggestion about this.

Thanks.
Dee

Nov 19 '05 #2

P: n/a
dee
Bruce, for that I have to use client side script, no? The spec is not to use
any scripts.
Thanks

"Bruce Barker" <br******************@safeco.com> wrote in message
news:us**************@TK2MSFTNGP09.phx.gbl...
to handle this on ie, use the mouseover and mouseout events to change the
style rather than hover.

-- bruce (sqlwork.com)
"dee" <de*@home.net> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Here is a a list of my hyperlinks in my home page:

<A class="theclass" href="Default.aspx">Home</A>
<A class="theclass" href="Search.aspx">Search</A>
<A class="theclass" href="Help.aspx">Help</A>

And these are defined in Styles.css file:

a.theclass:link, a.theclass:visited {
display: block;
border: 1px solid #cccccc;
text-decoration: none;
}
a.dpclass:hover{
border: 1px solid #cccccc;
text-decoration: none;
}

Now, the problem is that in FireFox/Netscape and Opera when the mouse
cursor enters the style box of the hyperlink (due to display:block style)
the box changes color. However, in IE6.0 the box only changes color when
the mouse cursor is on the text of the hyperlink and entering into the
box alone produces no visual effect. I appreciate if anyone who has run
into this issue has a solution or anyone else has a suggestion about
this.

Thanks.
Dee


Nov 19 '05 #3

P: n/a
dee
Actually this is laid out vertically:

<tr><td>
<A class="theclass" href="Default.aspx">Home</A>
</td></tr>
<tr><td>
<A class="theclass" href="Search.aspx">Search</A>
</td></tr>
<tr><td>
<A class="theclass" href="Help.aspx">Help</A>
</td></tr>

The horizontal layout doesnt have a problem az the boxe sizes are determined
by the hyperlink text.
"Bruce Barker" <br******************@safeco.com> wrote in message
news:us**************@TK2MSFTNGP09.phx.gbl...
to handle this on ie, use the mouseover and mouseout events to change the
style rather than hover.

-- bruce (sqlwork.com)
"dee" <de*@home.net> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Here is a a list of my hyperlinks in my home page:

<A class="theclass" href="Default.aspx">Home</A>
<A class="theclass" href="Search.aspx">Search</A>
<A class="theclass" href="Help.aspx">Help</A>

And these are defined in Styles.css file:

a.theclass:link, a.theclass:visited {
display: block;
border: 1px solid #cccccc;
text-decoration: none;
}
a.dpclass:hover{
border: 1px solid #cccccc;
text-decoration: none;
}

Now, the problem is that in FireFox/Netscape and Opera when the mouse
cursor enters the style box of the hyperlink (due to display:block style)
the box changes color. However, in IE6.0 the box only changes color when
the mouse cursor is on the text of the hyperlink and entering into the
box alone produces no visual effect. I appreciate if anyone who has run
into this issue has a solution or anyone else has a suggestion about
this.

Thanks.
Dee


Nov 19 '05 #4

P: n/a
IE does not support the box model in the same way as other browsers that
followed the W3C specifications.

search: ie box model hack
<%= Clinton Gallagher
METROmilwaukee (sm) "A Regional Information Service"
NET csgallagher AT metromilwaukee.com
URL http://metromilwaukee.com/
URL http://clintongallagher.metromilwaukee.com/
"dee" <de*@home.net> wrote in message
news:Ok**************@TK2MSFTNGP09.phx.gbl...
Actually this is laid out vertically:

<tr><td>
<A class="theclass" href="Default.aspx">Home</A>
</td></tr>
<tr><td>
<A class="theclass" href="Search.aspx">Search</A>
</td></tr>
<tr><td>
<A class="theclass" href="Help.aspx">Help</A>
</td></tr>

The horizontal layout doesnt have a problem az the boxe sizes are
determined by the hyperlink text.
"Bruce Barker" <br******************@safeco.com> wrote in message
news:us**************@TK2MSFTNGP09.phx.gbl...
to handle this on ie, use the mouseover and mouseout events to change the
style rather than hover.

-- bruce (sqlwork.com)
"dee" <de*@home.net> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Here is a a list of my hyperlinks in my home page:

<A class="theclass" href="Default.aspx">Home</A>
<A class="theclass" href="Search.aspx">Search</A>
<A class="theclass" href="Help.aspx">Help</A>

And these are defined in Styles.css file:

a.theclass:link, a.theclass:visited {
display: block;
border: 1px solid #cccccc;
text-decoration: none;
}
a.dpclass:hover{
border: 1px solid #cccccc;
text-decoration: none;
}

Now, the problem is that in FireFox/Netscape and Opera when the mouse
cursor enters the style box of the hyperlink (due to display:block
style) the box changes color. However, in IE6.0 the box only changes
color when the mouse cursor is on the text of the hyperlink and entering
into the box alone produces no visual effect. I appreciate if anyone who
has run into this issue has a solution or anyone else has a suggestion
about this.

Thanks.
Dee



Nov 19 '05 #5

P: n/a
dee
Thanks for your post. I have a different issue tho thats most likely not
related to box model but appearantly ie is the only browser thats not
behaving correctly.

"clintonG" <cs*********@REMOVETHISTEXTmetromilwaukee.com> wrote in message
news:u$*************@TK2MSFTNGP15.phx.gbl...
IE does not support the box model in the same way as other browsers that
followed the W3C specifications.

search: ie box model hack
<%= Clinton Gallagher
METROmilwaukee (sm) "A Regional Information Service"
NET csgallagher AT metromilwaukee.com
URL http://metromilwaukee.com/
URL http://clintongallagher.metromilwaukee.com/
"dee" <de*@home.net> wrote in message
news:Ok**************@TK2MSFTNGP09.phx.gbl...
Actually this is laid out vertically:

<tr><td>
<A class="theclass" href="Default.aspx">Home</A>
</td></tr>
<tr><td>
<A class="theclass" href="Search.aspx">Search</A>
</td></tr>
<tr><td>
<A class="theclass" href="Help.aspx">Help</A>
</td></tr>

The horizontal layout doesnt have a problem az the boxe sizes are
determined by the hyperlink text.
"Bruce Barker" <br******************@safeco.com> wrote in message
news:us**************@TK2MSFTNGP09.phx.gbl...
to handle this on ie, use the mouseover and mouseout events to change
the style rather than hover.

-- bruce (sqlwork.com)
"dee" <de*@home.net> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Here is a a list of my hyperlinks in my home page:

<A class="theclass" href="Default.aspx">Home</A>
<A class="theclass" href="Search.aspx">Search</A>
<A class="theclass" href="Help.aspx">Help</A>

And these are defined in Styles.css file:

a.theclass:link, a.theclass:visited {
display: block;
border: 1px solid #cccccc;
text-decoration: none;
}
a.dpclass:hover{
border: 1px solid #cccccc;
text-decoration: none;
}

Now, the problem is that in FireFox/Netscape and Opera when the mouse
cursor enters the style box of the hyperlink (due to display:block
style) the box changes color. However, in IE6.0 the box only changes
color when the mouse cursor is on the text of the hyperlink and
entering into the box alone produces no visual effect. I appreciate if
anyone who has run into this issue has a solution or anyone else has a
suggestion about this.

Thanks.
Dee



Nov 19 '05 #6

P: n/a
dee
The problem goes away when I remove the <tr> and <td> sorrounding the
hyperlinks.
"clintonG" <cs*********@REMOVETHISTEXTmetromilwaukee.com> wrote in message
news:u$*************@TK2MSFTNGP15.phx.gbl...
IE does not support the box model in the same way as other browsers that
followed the W3C specifications.

search: ie box model hack
<%= Clinton Gallagher
METROmilwaukee (sm) "A Regional Information Service"
NET csgallagher AT metromilwaukee.com
URL http://metromilwaukee.com/
URL http://clintongallagher.metromilwaukee.com/
"dee" <de*@home.net> wrote in message
news:Ok**************@TK2MSFTNGP09.phx.gbl...
Actually this is laid out vertically:

<tr><td>
<A class="theclass" href="Default.aspx">Home</A>
</td></tr>
<tr><td>
<A class="theclass" href="Search.aspx">Search</A>
</td></tr>
<tr><td>
<A class="theclass" href="Help.aspx">Help</A>
</td></tr>

The horizontal layout doesnt have a problem az the boxe sizes are
determined by the hyperlink text.
"Bruce Barker" <br******************@safeco.com> wrote in message
news:us**************@TK2MSFTNGP09.phx.gbl...
to handle this on ie, use the mouseover and mouseout events to change
the style rather than hover.

-- bruce (sqlwork.com)
"dee" <de*@home.net> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Here is a a list of my hyperlinks in my home page:

<A class="theclass" href="Default.aspx">Home</A>
<A class="theclass" href="Search.aspx">Search</A>
<A class="theclass" href="Help.aspx">Help</A>

And these are defined in Styles.css file:

a.theclass:link, a.theclass:visited {
display: block;
border: 1px solid #cccccc;
text-decoration: none;
}
a.dpclass:hover{
border: 1px solid #cccccc;
text-decoration: none;
}

Now, the problem is that in FireFox/Netscape and Opera when the mouse
cursor enters the style box of the hyperlink (due to display:block
style) the box changes color. However, in IE6.0 the box only changes
color when the mouse cursor is on the text of the hyperlink and
entering into the box alone produces no visual effect. I appreciate if
anyone who has run into this issue has a solution or anyone else has a
suggestion about this.

Thanks.
Dee



Nov 19 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.