Problem with <a href...> doesn't take my class attributes.

akaii

11-24-2009, 09:16 PM

Hi guys

I don't understand why my <a href...> tag doesn't take the style I gave him in my CSS. Is it possible that the space between the <li> and the <a href...> is the cause? If yes how can I solve this in the CSS?

Here is my CSS code :

div.mod_login
{
position: absolute;
top: 5px;
z-index:-1;
left: 720px;
width: 150px;
height: 150px;
color:blue;
border:0px;
text-decoration: underline; color: blue;
}

div.mod_login a:link, a:visited, a:hover
{
text-decoration:underline; font-size: 10px; color: white;
}

div.mod_login li, ul
{
text-decoration:underline; font-size: 10px; color: white;
}

div.mod_login li a:link
{
text-decoration:underline; font-size: 10px; color: white;
}

here is the source code :
<div class="mod_login">
<form action="http://127.0.0.1/dev/index.php?option=com_user&task=login" method="post" name="login" id="login">
<label for="username_vmlogin">Identifiant</label><br/>
<li> <a href="/dev/index.php?">Inscription</a></li>
</ul>
</form>
</div>

Excavator

11-24-2009, 09:31 PM

Hello akaii,
It's hard to tell how your putting that in your site... the bits that you quote work when I put them into a test page.
It is not valid code.

Just to show you the space doesn't matter... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
height: 400px;
width: 1200px;
margin: 30px auto;
background: #999;
font-size: 0.8em;
position: relative;
}
div.mod_login
{
position: absolute;
top: 5px;
/*z-index:-1; (just to make things visible*/
left: 720px;
width: 150px;
height: 150px;
color:blue;
border:0px;
text-decoration: underline; color: blue;
}

div.mod_login a:link, a:visited, a:hover
{
text-decoration:underline; font-size: 10px; color: white;
}

div.mod_login li, ul
{
text-decoration:underline; font-size: 10px; color: white;
}

div.mod_login li a:link
{
text-decoration:underline; font-size: 10px; color: white;
}
</style>
</head>
<body>
<div id="container">
<div class="mod_login">
<form action="http://127.0.0.1/dev/index.php?option=com_user&task=login" method="post" name="login" id="login">
<label for="username_vmlogin">Identifiant</label><br/>
<li>

<a href="/dev/index.php?">Inscription</a></li>
</ul>
</form>
</div>
</div>
</body>
</html>

Arbitrator

11-24-2009, 10:18 PM

I don't understand why my <a href...> tag"a element" would be correct terminology (versus "<a href...> tag").

doesn't take the style I gave him in my CSS. Is it possible that the space between the <li> and the <a href...> is the cause?My guess is that your selector was miswritten. The first code block below should be written as the second:

div.mod_login a:link, a:visited, a:hover { /* ... */ }

div.mod_login a:link, div.mod_login a:visited, div.mod_login a:hover { /* ... */ }

Given that code, you may want to just use one of the following though to simplify your code:

div.mod_login a["href"] { /* ... */ } /* more specific */
div.mod_login a { /* ... */ } /* MSIE6 compatible */

akaii

11-25-2009, 02:06 AM

Yes thanks arbitrator and all!!