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

Discussion in 'ASP .Net' started by dee, Sep 6, 2005.

  1. dee

    dee Guest

    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
    dee, Sep 6, 2005
    #1
    1. Advertising

  2. dee

    Bruce Barker Guest

    to handle this on ie, use the mouseover and mouseout events to change the
    style rather than hover.

    -- bruce (sqlwork.com)


    "dee" <> wrote in message
    news:%...
    > 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
    >
    Bruce Barker, Sep 7, 2005
    #2
    1. Advertising

  3. dee

    dee Guest

    Bruce, for that I have to use client side script, no? The spec is not to use
    any scripts.
    Thanks

    "Bruce Barker" <> wrote in message
    news:...
    > to handle this on ie, use the mouseover and mouseout events to change the
    > style rather than hover.
    >
    > -- bruce (sqlwork.com)
    >
    >
    > "dee" <> wrote in message
    > news:%...
    >> 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
    >>

    >
    >
    dee, Sep 7, 2005
    #3
  4. dee

    dee Guest

    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" <> wrote in message
    news:...
    > to handle this on ie, use the mouseover and mouseout events to change the
    > style rather than hover.
    >
    > -- bruce (sqlwork.com)
    >
    >
    > "dee" <> wrote in message
    > news:%...
    >> 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
    >>

    >
    >
    dee, Sep 7, 2005
    #4
  5. dee

    clintonG Guest

    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" <> wrote in message
    news:...
    > 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" <> wrote in message
    > news:...
    >> to handle this on ie, use the mouseover and mouseout events to change the
    >> style rather than hover.
    >>
    >> -- bruce (sqlwork.com)
    >>
    >>
    >> "dee" <> wrote in message
    >> news:%...
    >>> 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
    >>>

    >>
    >>

    >
    >
    clintonG, Sep 7, 2005
    #5
  6. dee

    dee Guest

    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" <> wrote in message
    news:u$...
    > 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" <> wrote in message
    > news:...
    >> 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" <> wrote in message
    >> news:...
    >>> to handle this on ie, use the mouseover and mouseout events to change
    >>> the style rather than hover.
    >>>
    >>> -- bruce (sqlwork.com)
    >>>
    >>>
    >>> "dee" <> wrote in message
    >>> news:%...
    >>>> 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
    >>>>
    >>>
    >>>

    >>
    >>

    >
    >
    dee, Sep 7, 2005
    #6
  7. dee

    dee Guest

    The problem goes away when I remove the <tr> and <td> sorrounding the
    hyperlinks.


    "clintonG" <> wrote in message
    news:u$...
    > 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" <> wrote in message
    > news:...
    >> 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" <> wrote in message
    >> news:...
    >>> to handle this on ie, use the mouseover and mouseout events to change
    >>> the style rather than hover.
    >>>
    >>> -- bruce (sqlwork.com)
    >>>
    >>>
    >>> "dee" <> wrote in message
    >>> news:%...
    >>>> 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
    >>>>
    >>>
    >>>

    >>
    >>

    >
    >
    dee, Sep 7, 2005
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. morrell
    Replies:
    1
    Views:
    933
    roy axenov
    Oct 10, 2006
  2. Chandra
    Replies:
    0
    Views:
    303
    Chandra
    Mar 7, 2007
  3. Chandra
    Replies:
    0
    Views:
    396
    Chandra
    Mar 7, 2007
  4. Erwin Moller
    Replies:
    2
    Views:
    184
    Erwin Moller
    Feb 21, 2006
  5. Chandra
    Replies:
    3
    Views:
    169
    OmegaJunior
    Mar 11, 2007
Loading...

Share This Page