CSS Woes

[DrWolfgangVonBubbles]

Ok, I made everything look all nice in CSS. Untill... I added a BG image and I wanted to move some text over 15 lousy pixels! I tried everything I could think of. (Left: 15px) (margin: 15px) (margin-left: 15px) (padding: 15px) (padding-left: 15px)
I tried putting it in the same ID as the background, I tried putting it in a different ID and nesting it inside the bg ID...

Page:
http://unibrowinc.hostmatrix.org/styletest01.php
CSS:
http://unibrowinc.hostmatrix.org/styletest01.css

Please help me move the links to the right before I vomit in frusteration.

I am begining to think my browser is just being stupid... <_< It's probably something so incredibly simple, too.


....This stupid CSS layout is slowly stealing my sanity. :mellow:

[chilipie]

Try validating both your HTML and CSS files. At current there is no DTD or character encoding in your HTML file, which may be causing some problems...

[galbus]

Instead of changing the margin-left on the 'main' or 'body' styles, do them on the 'a:' styles like so:


a:link
{color: #5555AA; text-decoration: none; margin-left: 15px;}

a:visited
{color: #3333AA; text-decoration: none; margin-left: 15px;}

a:active
{color: #AAAAAA; text-decoration: none; margin-left: 15px;}

a:hover
{color: #5555AA; text-decoration: underline; background-color: #000000; margin-left: 15px;}


Hope this has helped. If not then explain in more detail what you want to change.

And Chillipie has a good point, submit your pages to this address and it'll tell you where the problems are: http://validator.w3.org/

[DrWolfgangVonBubbles]

I figured it out. I used

#menu
{position: absolute; left: 15px; top: 200px; width: 200px; background-image: url(http://image); color: #000000}

#menutext
{margin-left: 15px}

And then used

<div id="menu"><div id="menutext">

In the page itself.

If I put the margin-left in the a: sections, and I put a link on anywhere else on the page wouldn't it look weird?

[geek]

no, just create a new ID for everything else.