CSS Help PLEASE READ!!!

Neil_8_24_93 · 08-29-2006

OK. For some strange reason my CSS margins arent working I tried several different browsers but all of them are the same. Take my text field for example here is my code:

<div class = "username">
<form>
<input type = "text" name = "username" class = "field" value = "username" onfocus="if (this.value==this.defaultValue) this.value='';" onblur= "if(this.value=='')this.value=this.defaultValu e"/>
</form>
</div>

here is my CSS:

.username{
margin: 0px 0px 0px 0px
}

what ever i make my margin's the text box doesnt move can someone please help me? this just started recently its never done this before.

ecntrc · 08-29-2006

why do you have 4 margins? shouldnt you name them left margin or something? Im not that smart with CSS but to me that dont look right.. sorry I couldnt of better help. Ill look it up in my CSS book and get back to you later..

metsatöll · 08-29-2006

dont use px for zero,
and just a trick, if your all values is equal to eachother than just write one of them not all of them (eg margin:0

@ecntrc, margin-left, margin-right, margin-top, margin-bottom, those values are still available in css but meaningless to use them since margin: 1px 2px 3px 4px; would mean 1px from top, 2px from right, 3px bottom, 4px from left.

margin:0; would mean zero for all sides

Jacorre · 08-29-2006

Have you tried applying it to the form tag instead? Forms may have some sort of spacing default.

ecntrc · 08-29-2006

Quote:

Originally Posted by metsatöll

dont use px for zero,
and just a trick, if your all values is equal to eachother than just write one of them not all of them (eg margin:0

@ecntrc, margin-left, margin-right, margin-top, margin-bottom, those values are still available in css but meaningless to use them since margin: 1px 2px 3px 4px; would mean 1px from top, 2px from right, 3px bottom, 4px from left.

margin:0; would mean zero for all sides

yeah thats what I meant, see I know CSS but I dont you know. I knew that didnt look right but luckily someone else could help him.. thats good to know.. thanks

GoldNetX · 08-29-2006

I am not sure on it, but I think that the margin attribute only applies to elements on a page that are positioned relatively. Meaning you need to define the position attribute as relative.

Try this:

Code:

.username{
position: relative;
margin: 0;
}

metsatöll · 08-29-2006

I didnt check it well yesterday
@goldpix, margin: 0px; is not right way to right. It should be margin:0;

@neil, try that one,

HTML Code:

<html>
<head>
<style>
.username{
    position: relative;
    margin: 0;
    }  
</style>
</head>

<body>
<div class = "username">

<form class = "username">
<input type = "text" name = "username" class = "field" 
value = "username" onfocus="if (this.value==this.defaultValue) this.value='';" onblur= "if(this.value=='')this.value=this.defaultValu e"/>

</form>
</div>
</body>
</html>

Neil_8_24_93 · 08-29-2006

Thank you all I found the problem.....my linking I didnt link the HTML page to the CSS page properly.

Sorry guys.

Alex McKee · 09-02-2006

Furthermore, you might have needed to also set 0 padding