CSS Block Position Question - css

Question

I'm pretty new to CSS but I'm hoping this is just something obvious I'm missing.
On www.sonogenics.co.uk, the Twitter block appears to be floated to the right or have 40px left margin. I have explicity set the margins to be 0px and cleared the floats etc but there has been no effect. From the Firefox WebDeveloper addon, it appears to be a problem with the .tweet ul but I can't seem to fix it. Can someone explain to me what is going on?
Cheers
Chris

Answer 1

It actually has left-padding and not margin. This is the default styling of a ul element. To cancel it, you should put padding:0; in the #tweet ul style declaration.
A couple of suggestions:
Use Firebug for development, it is far superior to the WebDeveloper add-on. I was able to immediately spot the problem using it
Use a CSS reset stylesheet, to remove those default style declarations and normalize it across browsers (the defaults are not consistent between browsers). The best known is the CSS reset by Eric Meyer, which I personally use on every site I develop.

Answer 2

#chris robinson; i checked your twitter/style.css your main problem is that you declare css wrongly that why the properties are not working.
wrong css declaration :
.twitter #tweets {
background: #111;
padding: 0 0px;
padding-bottom:20px;
text-align:left;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:2px;
margin:0px;
}
.twitter ul, li {
list-style-type: none;
background: #222;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:1px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
margin:0px;
-webkit-padding-start:10x;
}
.twitter #tweets a {
color: #AAA;
text-decoration:none;
}
.twitter #tweets a:hover {
color: #AAA;
}
if you check your html your twitter class is inside #tweets not outside of it . So, first correct your css .
Correct css:
#tweets .twitter {
background: #111;
padding: 0 0px;
padding-bottom:20px;
text-align:left;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:2px;
margin:0px;
}
#tweets ul.twitter li {
list-style-type: none;
background: #222;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:1px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
margin:0px;
-webkit-padding-start:10x;
}
#tweets .twitter a {
color: #AAA;
text-decoration:none;
}
#tweets .twitter a:hover {
color: #AAA;
}

Answer 3

This should fix it
#tweets ul { padding: 0px; }
uls have a left padding by default in most browsers (i.e. WebKit 40px).

Answer 4

Your styling isn't being applied because of your css selector. Your selector is
.twitter ul, li {}
while your html for the elements are
<div id="tweets">
<ul class="twitter">...</ul>
</div>
Your css selector says "style all ul and li that are descendents of any element with the 'twitter' class". Since the ul isn't contained in an ancestor element with the "twitter" class, it isn't being styled with that rule.
If you want the rule to actually apply, you can either just use the selector
.twitter {...}
or you can re-class the parent div with "twitter",
<div id="tweets" class="twitter">
<ul class="twitter">...</ul>
</div>
or you can use this selector instead,
#tweets ul, li {...}
which more closely matches your original selector.