CSS = Pulling Hair Out

[greg]

Ok, i'm back, got my links working fine from a few threads down, now I've
got a new problem. First off, the page in question is here:

http://www.goforthdesigns.com/test

After several deletions of cache and history files, it's still not working
for me so I don't know what to think.

Here is my CSS:

body {
background-image: url(images/background.gif);
background-repeat: repeat-x;
}

#links{
position: absolute;
top: 62;
right: 10;
}

..logo {
position: absolute;
top: 0;
left: 0;
}

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
color: #000099;
text-decoration: none;
}

a:visited {
font-size: 1em;
color: #000099;
font-weight: normal;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;


}

a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
color: #000099;
text-decoration: none;
}

a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}



Now, the logo positions fine, however the links are as far left and to the
top as they can be. With the coordinates I have set it should position
itself to the very far right hand side of the screen inside the grey area
with the blue bars above and below it. The ID's are correct, the syntax on
the xhtml page is <div id="links">link info here</div> yet it will not
position itself correctly. And I have deleted my cache several times..I've
got no idea about this one. Please help me save my last hair.

-g-

 

[Marc]

Ok, i'm back, got my links working fine from a few threads down, now I've

got a new problem. First off, the page in question is here:

http://www.goforthdesigns.com/test

After several deletions of cache and history files, it's still not working
for me so I don't know what to think.

Here is my CSS:

body {
background-image: url(images/background.gif);
background-repeat: repeat-x;
}

#links{
position: absolute;
top: 62;
right: 10;
}

.logo {
position: absolute;
top: 0;
left: 0;
}

a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
color: #000099;
text-decoration: none;
}

a:visited {
font-size: 1em;
color: #000099;
font-weight: normal;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;


}

a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
color: #000099;
text-decoration: none;
}

a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}



Now, the logo positions fine, however the links are as far left and to the
top as they can be. With the coordinates I have set it should position
itself to the very far right hand side of the screen inside the grey area
with the blue bars above and below it. The ID's are correct, the syntax on
the xhtml page is <div id="links">link info here</div> yet it will not
position itself correctly. And I have deleted my cache several times..I've
got no idea about this one. Please help me save my last hair.

You have not set a width for the #links <div> so maybe the <div> is doing
what <div>s are supposed to do, and is taking up all the width it has
available?

Marc

 

[greg]

You have not set a width for the #links <div> so maybe the <div> is doing
what <div>s are supposed to do, and is taking up all the width it has
available?

Marc

Ok, I've now set the CSS to read:

#links{
position: absolute;
top: 62;
right: 10;
width: 400px;
}

But it completely ignores the positioning. right now it looks like top 0
left 0. Any more ideas?

Thanks again for all the great help I've gotten from you guys.

greg g.

 

[PeterMcC]

Ok, i'm back, got my links working fine from a few threads down, now
I've got a new problem. First off, the page in question is here:

http://www.goforthdesigns.com/test

After several deletions of cache and history files, it's still not
working for me so I don't know what to think.

Apart from the other suggestions in this thread, you should define your
links in the order, link, visited, hover, active

 

[Anders Thorsen Holm]

Ok, I've now set the CSS to read:

#links{
position: absolute;
top: 62;
right: 10;
width: 400px;
}

But it completely ignores the positioning. right now it looks
like top 0 left 0. Any more ideas?

As stated elsewhere in the thread: specify a unit - in this case px
(pixels), like you do when defining the width.

 

[greg]

Apart from the other suggestions in this thread, you should define your
links in the order, link, visited, hover, active

Taken from a few threads below: Why dosen't My CSS Work?

Be sure to define the rules in this order:

a:link {}
a:visited {}
a:active {}
a:hover {}

Which is it?

By the way, my stuff is working now...thanks again guys.

-g-

 

[Anders Thorsen Holm]

Taken from a few threads below: Why dosen't My CSS Work?

[snip - my bad]

Which is it?

Peter's right, you should define the rules in this order:
link, visited, hover, active.

With my code the rules for the hover-pseudoclass would be applied even
*after* you'd activated a link in stead of the :hover-pseudoclass
rules.

 

[Anders Thorsen Holm]

Anders Thorsen Holm wrote:

With my code the rules for the hover-pseudoclass would be applied
even *after* you'd activated a link in stead of the
:hover-pseudoclass rules.

^^^^^

active, even .... damn, the heat is really getting to my head today.
Bloody weather.

 

[Jacqui or (maybe) Pete]

....

http://www.goforthdesigns.com/test
....
Here is my CSS:

Your hair's best friend is this site:

http://jigsaw.w3.org/css-validator/validator-text.html

It won't fix all of your problems, but it will find all the syntax
errors.

 

[Toby A Inkster]

#links{
position: absolute;
top: 62;
right: 10;
}

Units: px? em? ex? percent?