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

Strange css problem (bug?)

P: n/a
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>
</head>
<body>
<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>

<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! :o)

Thank you in advance.

M O J O
Aug 28 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
M O J O skrev:
I also found out, if I put a <p>&nbsp;</p> below the <a href...> in the
code above, everything works fine.


In xhtml text must be in a blockelement, so that's why it works
without doctype.

<p><a href="http://www.microsoft.com/">This is just a
link</a></p>
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html
Aug 28 '05 #2

P: n/a
Knud Gert Ellentoft wrote:
In xhtml text must be in a blockelement


No, that's Strict (HTML 4.01 Strict and XHTML 1.0 Strict). Transitional DTDs
allow text to be contained directly within the <body>, (Not that anybody
should be using Transitional in this day and age).

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Aug 28 '05 #3

P: n/a
M O J O wrote:

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>
</head>
<body>
<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>

<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 copied your sample into a new HTML file and tried it with Mozilla
Suite 1.7.11. It works exactly as you describe your intent: There
was a dashed underline for the link until I hovered my cursor over
it, when it changed to a solid underline.

By the way, you have defined font-family for body. You don't have
to repeat the definition for the anchors unless you are using a
different set of fonts for them.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.
Aug 28 '05 #4

P: n/a
"M O J O" wrote in message news:43***********************@dreader1.cybercity. dk...
Hi,

I'm developing a asp.net application and ran into a strange css problem.
no bug, you need to fix a few things here.
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):

----------------------------------------------------------------------
first you declare it to be XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
then, I think something is missing in <html> like
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
then you go ahead and redeclare the content to be plain html and don't end the "empty tag" with /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Strange</title>
</head>
<body>
you want style, but style belongs in the <head> and you don't add the type <style> as in
<style type="text/css">
then, by your document wanting to be XHTML, you need to define the style data block
<!--/*--><![CDATA[/*><!--*/
instead of just <!-- 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;
}

and end it with
/*]]>*/--></style>
instead of just -->
</style>

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

</body>
</html>

---------------------------------------------------------------------- Any idea???????
http://www.hixie.ch/advocacy/xhtml (Sending XHTML as text/html Considered Harmful)
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! :o)

Thank you in advance.

M O J O


so, after the corrections (btw, several things I added are optional ;-) :

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1252" />
<title>Strange</title>
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
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>

Aug 28 '05 #5

P: n/a
M O J O:
</head>
<body>
<style>
<!--


You're kidding, right?
Aug 28 '05 #6

P: n/a
Robi wrote:

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

As Knud observed, a link is an inline element. XHTML does not like
inline elements floating around without containment. So:

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

Also I was impressed by the OP's ability to cram so many errors into so
little code.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Aug 29 '05 #7

P: n/a
Christoph Päper <ch**************@nurfuerspam.de> wrote:
M O J O:
</head>
<body>
<style>
<!--


You're kidding, right?


Looks like your regular google search result page...
Aug 29 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.