Strange css problem (bug?)

Discussion in 'ASP .Net' started by M O J O, Aug 28, 2005.

  1. M O J O

    M O J O Guest

    Hi,

    I'm developing a asp.net application and ran into a strange css problem.

    I want all my links to have a dashed underline and when they are
    hovered, it must change to a solid line. Sounds simple, but it's not
    working.

    I've cooked down my output code to show you what I mean. If you run the
    code below, there's no line under the link, but if you either remove the
    <!DOCTYPE...> line or the body-part of the css decleration, everything
    works fine.

    Here's my code (watch for wrappings):

    ----------------------------------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Strange</title>
    <style>
    <!--
    body
    {
    font-family: verdana, arial, helvetica, sans-serif;
    }


    a:link, a:visited
    {
    font-family: verdana, arial, helvetica, sans-serif;
    color: #d32525;
    border-bottom: 1px dashed #d32525;
    text-decoration: none;
    }

    a:hover
    {
    font-family: verdana, arial, helvetica, sans-serif;
    color: #d32525;
    border-bottom: 1px solid #d32525;
    text-decoration: none;
    }
    -->
    </style>
    </head>

    <body>
    <a href="http://www.microsoft.com/">This is just a link</a>
    </body>

    </html>

    ----------------------------------------------------------------------

    Any idea???????

    I also found out, if I put a <p>&nbsp;</p> below the <a href...> in the
    code above, everything works fine.

    I'm confused!!!!!

    HHHHEEELLLPPPPP! :eek:)

    Thank you in advance.

    M O J O
    M O J O, Aug 28, 2005
    #1
    1. Advertising

  2. M O J O

    tom pester Guest

    Check out the css newsgroup

    Let me know if you have any more questions...

    Cheers,
    Tom Pester

    > Hi,
    >
    > I'm developing a asp.net application and ran into a strange css
    > problem.
    >
    > I want all my links to have a dashed underline and when they are
    > hovered, it must change to a solid line. Sounds simple, but it's not
    > working.
    >
    > I've cooked down my output code to show you what I mean. If you run
    > the code below, there's no line under the link, but if you either
    > remove the <!DOCTYPE...> line or the body-part of the css decleration,
    > everything works fine.
    >
    > Here's my code (watch for wrappings):
    >
    > ----------------------------------------------------------------------
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >
    > <html>
    > <head>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=windows-1252">
    > <title>Strange</title>
    > <style>
    > <!--
    > body
    > {
    > font-family: verdana, arial, helvetica, sans-serif;
    > }
    > a:link, a:visited
    > {
    > font-family: verdana, arial, helvetica, sans-serif;
    > color: #d32525;
    > border-bottom: 1px dashed #d32525;
    > text-decoration: none;
    > }
    > a:hover
    > {
    > font-family: verdana, arial, helvetica, sans-serif;
    > color: #d32525;
    > border-bottom: 1px solid #d32525;
    > text-decoration: none;
    > }
    > -->
    > </style>
    > </head>
    > <body>
    > <a href="http://www.microsoft.com/">This is just a link</a>
    > </body>
    > </html>
    >
    > ----------------------------------------------------------------------
    >
    > Any idea???????
    >
    > I also found out, if I put a <p>&nbsp;</p> below the <a href...> in
    > the code above, everything works fine.
    >
    > I'm confused!!!!!
    >
    > HHHHEEELLLPPPPP! :eek:)
    >
    > Thank you in advance.
    >
    > M O J O
    >
    tom pester, Aug 28, 2005
    #2
    1. Advertising

  3. M O J O

    M O J O Guest

    Hi Tom,

    Which group are you exactly talking about?

    M O J O

    tom pester wrote:
    >
    > Check out the css newsgroup
    >
    > Let me know if you have any more questions...
    >
    > Cheers,
    > Tom Pester
    >
    >> Hi,
    >>
    >> I'm developing a asp.net application and ran into a strange css
    >> problem.
    >>
    >> I want all my links to have a dashed underline and when they are
    >> hovered, it must change to a solid line. Sounds simple, but it's not
    >> working.
    >>
    >> I've cooked down my output code to show you what I mean. If you run
    >> the code below, there's no line under the link, but if you either
    >> remove the <!DOCTYPE...> line or the body-part of the css decleration,
    >> everything works fine.
    >>
    >> Here's my code (watch for wrappings):
    >>
    >> ----------------------------------------------------------------------
    >>
    >> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >>
    >> <html>
    >> <head>
    >> <meta http-equiv="Content-Type" content="text/html;
    >> charset=windows-1252">
    >> <title>Strange</title>
    >> <style>
    >> <!--
    >> body
    >> {
    >> font-family: verdana, arial, helvetica, sans-serif;
    >> }
    >> a:link, a:visited
    >> {
    >> font-family: verdana, arial, helvetica, sans-serif;
    >> color: #d32525;
    >> border-bottom: 1px dashed #d32525;
    >> text-decoration: none;
    >> }
    >> a:hover
    >> {
    >> font-family: verdana, arial, helvetica, sans-serif;
    >> color: #d32525;
    >> border-bottom: 1px solid #d32525;
    >> text-decoration: none;
    >> }
    >> -->
    >> </style>
    >> </head>
    >> <body>
    >> <a href="http://www.microsoft.com/">This is just a link</a>
    >> </body>
    >> </html>
    >>
    >> ----------------------------------------------------------------------
    >>
    >> Any idea???????
    >>
    >> I also found out, if I put a <p>&nbsp;</p> below the <a href...> in
    >> the code above, everything works fine.
    >>
    >> I'm confused!!!!!
    >>
    >> HHHHEEELLLPPPPP! :eek:)
    >>
    >> Thank you in advance.
    >>
    >> M O J O
    >>

    >
    >
    M O J O, Aug 28, 2005
    #3
  4. M O J O

    tom pester Guest

    http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets?gvc=2&hl=en

    Let me know if it helped you or not...

    Cheers,
    Tom Pester

    > Hi Tom,
    >
    > Which group are you exactly talking about?
    >
    > M O J O
    >
    > tom pester wrote:
    >
    >> Check out the css newsgroup
    >>
    >> Let me know if you have any more questions...
    >>
    >> Cheers,
    >> Tom Pester
    >>> Hi,
    >>>
    >>> I'm developing a asp.net application and ran into a strange css
    >>> problem.
    >>>
    >>> I want all my links to have a dashed underline and when they are
    >>> hovered, it must change to a solid line. Sounds simple, but it's not
    >>> working.
    >>>
    >>> I've cooked down my output code to show you what I mean. If you run
    >>> the code below, there's no line under the link, but if you either
    >>> remove the <!DOCTYPE...> line or the body-part of the css
    >>> decleration, everything works fine.
    >>>
    >>> Here's my code (watch for wrappings):
    >>>
    >>> --------------------------------------------------------------------
    >>> --
    >>>
    >>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    >>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >>>
    >>> <html>
    >>> <head>
    >>> <meta http-equiv="Content-Type" content="text/html;
    >>> charset=windows-1252">
    >>> <title>Strange</title>
    >>> <style>
    >>> <!--
    >>> body
    >>> {
    >>> font-family: verdana, arial, helvetica, sans-serif;
    >>> }
    >>> a:link, a:visited
    >>> {
    >>> font-family: verdana, arial, helvetica, sans-serif;
    >>> color: #d32525;
    >>> border-bottom: 1px dashed #d32525;
    >>> text-decoration: none;
    >>> }
    >>> a:hover
    >>> {
    >>> font-family: verdana, arial, helvetica, sans-serif;
    >>> color: #d32525;
    >>> border-bottom: 1px solid #d32525;
    >>> text-decoration: none;
    >>> }
    >>> -->
    >>> </style>
    >>> </head>
    >>> <body>
    >>> <a href="http://www.microsoft.com/">This is just a link</a>
    >>> </body>
    >>> </html>
    >>> --------------------------------------------------------------------
    >>> --
    >>>
    >>> Any idea???????
    >>>
    >>> I also found out, if I put a <p>&nbsp;</p> below the <a href...> in
    >>> the code above, everything works fine.
    >>>
    >>> I'm confused!!!!!
    >>>
    >>> HHHHEEELLLPPPPP! :eek:)
    >>>
    >>> Thank you in advance.
    >>>
    >>> M O J O
    >>>
    tom pester, Aug 28, 2005
    #4
  5. M O J O

    Stefan Guest

    Try putting your style-block before the body tag. Inside the head you
    should only refer to external css files.
    Stefan, Aug 28, 2005
    #5
  6. M O J O

    M O J O Guest

    Okay thanks, I'll give it a try.

    M O J O

    tom pester wrote:
    > http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets?gvc=2&hl=en
    >
    >
    > Let me know if it helped you or not...
    >
    > Cheers,
    > Tom Pester
    >
    >> Hi Tom,
    >>
    >> Which group are you exactly talking about?
    >>
    >> M O J O
    >>
    >> tom pester wrote:
    >>
    >>> Check out the css newsgroup
    >>>
    >>> Let me know if you have any more questions...
    >>>
    >>> Cheers,
    >>> Tom Pester
    >>>
    >>>> Hi,
    >>>>
    >>>> I'm developing a asp.net application and ran into a strange css
    >>>> problem.
    >>>>
    >>>> I want all my links to have a dashed underline and when they are
    >>>> hovered, it must change to a solid line. Sounds simple, but it's not
    >>>> working.
    >>>>
    >>>> I've cooked down my output code to show you what I mean. If you run
    >>>> the code below, there's no line under the link, but if you either
    >>>> remove the <!DOCTYPE...> line or the body-part of the css
    >>>> decleration, everything works fine.
    >>>>
    >>>> Here's my code (watch for wrappings):
    >>>>
    >>>> --------------------------------------------------------------------
    >>>> --
    >>>>
    >>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    >>>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >>>>
    >>>> <html>
    >>>> <head>
    >>>> <meta http-equiv="Content-Type" content="text/html;
    >>>> charset=windows-1252">
    >>>> <title>Strange</title>
    >>>> <style>
    >>>> <!--
    >>>> body
    >>>> {
    >>>> font-family: verdana, arial, helvetica, sans-serif;
    >>>> }
    >>>> a:link, a:visited
    >>>> {
    >>>> font-family: verdana, arial, helvetica, sans-serif;
    >>>> color: #d32525;
    >>>> border-bottom: 1px dashed #d32525;
    >>>> text-decoration: none;
    >>>> }
    >>>> a:hover
    >>>> {
    >>>> font-family: verdana, arial, helvetica, sans-serif;
    >>>> color: #d32525;
    >>>> border-bottom: 1px solid #d32525;
    >>>> text-decoration: none;
    >>>> }
    >>>> -->
    >>>> </style>
    >>>> </head>
    >>>> <body>
    >>>> <a href="http://www.microsoft.com/">This is just a link</a>
    >>>> </body>
    >>>> </html>
    >>>> --------------------------------------------------------------------
    >>>> --
    >>>>
    >>>> Any idea???????
    >>>>
    >>>> I also found out, if I put a <p>&nbsp;</p> below the <a href...> in
    >>>> the code above, everything works fine.
    >>>>
    >>>> I'm confused!!!!!
    >>>>
    >>>> HHHHEEELLLPPPPP! :eek:)
    >>>>
    >>>> Thank you in advance.
    >>>>
    >>>> M O J O
    >>>>

    >
    >
    M O J O, Aug 28, 2005
    #6
  7. M O J O

    M O J O Guest

    Hi Stefan,

    Thanks for letting me know. Unfortunately it does not solve my problem.

    :eek:(

    Hmmmmm.

    Thanks anyway.

    M O J O

    Stefan wrote:
    > Try putting your style-block before the body tag. Inside the head you
    > should only refer to external css files.
    >
    M O J O, Aug 28, 2005
    #7
  8. M O J O

    Bruce Barker Guest

    your problem is that an <a> is an inline element, not a block element, so it
    does not have a border. normally you use the text-decoration to control
    underlining, but there is no dashed version. you can try setting the display
    style to block.

    -- bruce (sqlwork.com)



    "M O J O" <mojo@_no_spam_delete_this_newwebsolutions.dk> wrote in message
    news:...
    > Hi,
    >
    > I'm developing a asp.net application and ran into a strange css problem.
    >
    > I want all my links to have a dashed underline and when they are hovered,
    > it must change to a solid line. Sounds simple, but it's not working.
    >
    > I've cooked down my output code to show you what I mean. If you run the
    > code below, there's no line under the link, but if you either remove the
    > <!DOCTYPE...> line or the body-part of the css decleration, everything
    > works fine.
    >
    > Here's my code (watch for wrappings):
    >
    > ----------------------------------------------------------------------
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >
    > <html>
    > <head>
    > <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    > <title>Strange</title>
    > <style>
    > <!--
    > body
    > {
    > font-family: verdana, arial, helvetica, sans-serif;
    > }
    >
    >
    > a:link, a:visited
    > {
    > font-family: verdana, arial, helvetica, sans-serif;
    > color: #d32525;
    > border-bottom: 1px dashed #d32525;
    > text-decoration: none;
    > }
    >
    > a:hover
    > {
    > font-family: verdana, arial, helvetica, sans-serif;
    > color: #d32525;
    > border-bottom: 1px solid #d32525;
    > text-decoration: none;
    > }
    > -->
    > </style>
    > </head>
    >
    > <body>
    > <a href="http://www.microsoft.com/">This is just a link</a>
    > </body>
    >
    > </html>
    >
    > ----------------------------------------------------------------------
    >
    > Any idea???????
    >
    > I also found out, if I put a <p>&nbsp;</p> below the <a href...> in the
    > code above, everything works fine.
    >
    > I'm confused!!!!!
    >
    > HHHHEEELLLPPPPP! :eek:)
    >
    > Thank you in advance.
    >
    > M O J O
    Bruce Barker, Aug 29, 2005
    #8
    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. Elmo Watson

    Strange CSS problem

    Elmo Watson, Nov 3, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    471
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Nov 3, 2005
  2. Dave
    Replies:
    2
    Views:
    454
  3. =?Utf-8?B?bmljaw==?=

    Master page and CSS link strange problem.

    =?Utf-8?B?bmljaw==?=, Jun 20, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    3,887
    =?Utf-8?B?bmljaw==?=
    Jun 22, 2006
  4. Replies:
    0
    Views:
    1,048
  5. Replies:
    0
    Views:
    91
Loading...

Share This Page