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 !!!!!
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 !!!!!
> 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
>
>
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:
>
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...2&
hl=en
>
> Let me know if it helped you or not...
> Cheers,
> Tom Pester
>
>
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_newwebsolution
s.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 !!!!!
> HHHHEEELLLPPPPP! :o)
> Thank you in advance.
> M O J O

0 comments:

Post a Comment