...

View Full Version : Sidebar Trouble



beautyfiend
12-09-2009, 03:45 PM
Hello there,

My sidebar has no padding or margins but the UL inside it has been pushed over about 30px. I have added a blue background to show this clearer.

I have no idea what is causing this :confused:
Any help much appreciated!

Thanks


http://img.photobucket.com/albums/v314/nastyandsinister/Untitled.jpg


ALL SIDEBAR CODE-

#sidebar {
float: left;
width: 230px;
color: #FFF;
background: #333;
text-align: center;
padding: 0;
margin: 0;
}

#sidebar ul li {
margin: 0px;
padding: 0px;
list-style: none;
line-height: 2em;
background: #036;
}

Excavator
12-09-2009, 04:03 PM
Hello beautyfiend,
You don't say what browser your seeing this in but there is a default margin on ul that would cause that.
I always use a CSS reset to zero out all default margin/padding since they can differ from browser to browser.
Put this at the top of your CSS:
* {
margin: 0;
padding: 0;
}

Here is more about CSS reset (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/)


...

beautyfiend
12-09-2009, 06:38 PM
Hi,

It's happining with all browers I'm previewing it in.

I did put margin: 0; padding: 0; in the body selector.

Perhaps it would help if I show you the rest of my code?
thanks


body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 100.01%;
color: #EAEAEA;
margin: 0px;
padding: 0px;
text-align: center;
}
#container {
margin: 0 auto;
width: 800px;
text-align: left;
}

#header {
background: #FFF url(LONDONCALLING800200.png) no-repeat left top;
width: 800px;
height: 200px;
position: relative;
}
#header ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
position: absolute;
right: 0px;
bottom: 0px;
}
#header li {
float: left;
}
#header li a:link, #header li a:visited {
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 0.7em;
font-weight: bold;
color: #fff;
text-decoration: none;
background: #333;
display: block;
padding: 0.2em 0.5em;
margin-right: 0.5em;
}

#header li a:hover {
color:#999;
background: #fff;
}


#header li a.current, #header li a.current:hover, #header li a.current:active {
color: #333;
background: #fff;
cursor: default;
}


#sidebar {
float: left;
width: 230px;
color: #FFF;
background: #333;
text-align: center;
padding: 0;
margin: 0;
}

#sidebar ul li {
margin: 0px;
padding: 0px;
list-style: none;
line-height: 2em;
background: #036;
}


#content {
background: #FFF;
text-align: center;
margin: 0 0 0 240px;
padding: 0.5em 0.5em 2em;
color: #333;
}

#footer {
color:#333;
text-align: center;


clear:both
height:60px:
;
height: 20px;
clear: left;
border-top: 1px solid #333;
border-right: none;
border-bottom: none;
border-left: none;
}

_Aerospace_Eng_
12-09-2009, 06:42 PM
Hi,

It's happining with all browers I'm previewing it in.

I did put margin: 0; padding: 0; in the body selector.

Pay attention to the code given to you. He didn't say put it in the body. He used a * which is a wildcard. The code he gave you will zero out all padding and margins on ALL elements. The issue is you never set the margin and/or padding of the sidebar ul to 0.

beautyfiend
12-10-2009, 03:00 PM
Pay attention to the code given to you. He didn't say put it in the body. He used a * which is a wildcard. The code he gave you will zero out all padding and margins on ALL elements. The issue is you never set the margin and/or padding of the sidebar ul to 0.


Sorry, I had never heard of a wildcard before. Now I know.

Do you still have to put padding:0 margin:0 in the body if you use this wild card?

Thanks

Excavator
12-10-2009, 03:58 PM
That link I provided tells all about using a reset. Did you go look at it?

To answer your question, it depends on where the * is in your CSS wether you will need it to apply margin/padding 0 on your body. CSS cascades down from the top so if * is below the body tag, the browser default is effecting it and not the *.

beautyfiend
12-12-2009, 05:12 PM
I didn't see that link before, I will look at it now.

Thanks for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum