Monday, March 26, 2012

Strange css problem (bug?)

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://links.10026.com/?link=http://www.microsoft.com/">This is just a link</a>
</body
</html
----------------------

Any idea???

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

I'm confused!!!!!

HHHHEEELLLPPPPP! :o)

Thank you in advance.

M O J OCheck 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://links.10026.com/?link=http://www.microsoft.com/">This is just a link</a>
> </body>
> </html>
> ----------------------
> Any idea???
> I also found out, if I put a <p> </p> below the <a href...> in
> the code above, everything works fine.
> I'm confused!!!!!
> HHHHEEELLLPPPPP! :o)
> Thank you in advance.
> M O J O
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://links.10026.com/?link=http://www.microsoft.com/">This is just a link</a>
>> </body>
>> </html>
>>
>> ----------------------
>>
>> Any idea???
>>
>> I also found out, if I put a <p> </p> below the <a href...> in
>> the code above, everything works fine.
>>
>> I'm confused!!!!!
>>
>> HHHHEEELLLPPPPP! :o)
>>
>> Thank you in advance.
>>
>> M O J O
>>
>
http://groups.google.com/group/comp...ets?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://links.10026.com/?link=http://www.microsoft.com/">This is just a link</a>
>>> </body>
>>> </html>
>>> ---------------------
>>> --
>>>
>>> Any idea???
>>>
>>> I also found out, if I put a <p> </p> below the <a href...> in
>>> the code above, everything works fine.
>>>
>>> I'm confused!!!!!
>>>
>>> HHHHEEELLLPPPPP! :o)
>>>
>>> Thank you in advance.
>>>
>>> M O J O
>>
Try putting your style-block before the body tag. Inside the head you
should only refer to external css files.
Okay thanks, I'll give it a try.

M O J O

tom pester wrote:
> http://groups.google.com/group/comp...ets?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://links.10026.com/?link=http://www.microsoft.com/">This is just a link</a>
>>>> </body>
>>>> </html>
>>>> ---------------------
>>>> --
>>>>
>>>> Any idea???
>>>>
>>>> I also found out, if I put a <p> </p> below the <a href...> in
>>>> the code above, everything works fine.
>>>>
>>>> I'm confused!!!!!
>>>>
>>>> HHHHEEELLLPPPPP! :o)
>>>>
>>>> Thank you in advance.
>>>>
>>>> M O J O
>>>>
>
Hi Stefan,

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

:o(

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.
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:uNHXoi8qFHA.904@.tk2msftngp13.phx.gbl...
> 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://links.10026.com/?link=http://www.microsoft.com/">This is just a link</a>
> </body>
> </html>
> ----------------------
> Any idea???
> I also found out, if I put a <p> </p> below the <a href...> in the
> code above, everything works fine.
> I'm confused!!!!!
> HHHHEEELLLPPPPP! :o)
> Thank you in advance.
> M O J O

0 comments:

Post a Comment