can't achieve even padding ?

[smoker]

Hi,

I am stuck on padding. Everytime I try and get content tight up to the box border the padding right and left remains larger than top and bottom. For example, if I declare padding: 1px; Instead of this resulting in 1px all around I get 1px top & bottom but more space on right and left. I want to get the box border tight up to the content on all sides, why isn't it happening ? It will be the same if I specify the values all round individually. What am I failing to understand here ?

Thanks.

smoker

[Kravvitz]

Please show us your code.

[smoker]

Hi Kravvitz,

I am unsure if you wanted the whole style sheet or just the code for the test I am doing. If you simply want the test it's at the very bottom .test

I did a test because the elements in my site were doing as I said, I did a test with simple text just to see if it was any diffferent, it isn't. If I increase padding incrementally it affects top & bottom only - until they are the same as left & right - and then if I increase the padding after that they increse proportionally. Reducing the padding after that will bring it down proportionally up to the point where left & right stop reducing and only top & bottom padding changes. I hope you can understand what I mean. Basically, as I said, I cannot simply achieve proportional padding by declaring one small value.

Thanks for your willingness to help, I am completely new to css and this is my first stylesheet.

smoker

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
background-color: #5A5578;
color: #FFF;
}

h2 {
font-size: 1.2em;
text-align: center;
}

h3 {
text-align: center;
}

#container {
background-color: #333365;
color: white;
width: 700px;
height: 340px;
margin-top: 90px;
margin-left: 150px;
}

#sitename {
width: 250px;
height: 40px;
position: relative;
top: 20px;
left: 343px;
color: white;
text-align: center;
}

:link { color: white; background-color: #333365; } /* the link name colour*/
:visited { color: #FF9900; background-color: #333365; } /* visited link colour*/
a:active { color: #00FFFF; background-color: #333365; } /* colour when link is clicked*/
A:hover { color: #00FFFF; background-color: #333365; } /* by adding the attribute - background: the whole of the content box changes colour*/

#menu {
position: relative;
top: 20px;
left: 100px;
width: 200px;
height: 100px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 0.5;
}
#menu h2 {
text-align: left;
}

#illustration {
position:absolute;
top: 163px;
left: 460px;
}

#footer {
position: absolute;
top: 370px;
left: 540px;
width: 140px;
}

/* Index finishes*/

/* style for Price page starts */
#pricesheader {
font-size: 1em;
text-align: center;
margin-top: 100px;
}

ul.horizontalmenu li {
float: left;
margin: 2.4em;
list-style: none;
font-size: 0.9em;
}

#priceshome {
position: absolute;
top: 350px;
left: 450px;
width: 90px;
height: 33px;
}

#pricesfooter h3 {
font-style: italic;
}
#pricesfooter {
text-align: center;
}
/* end prices page*/

/*start Bellows page*/

#bellscontainer {
background-color: #333365;
font-size: 0.9em;
color: white;
width: 800px;
height: 450px;
padding-top: 20px;
position: absolute;
top: 50px;
left: 110px;
}

#bellscontainer h1 {
font-size: 1.5em;
text-align: center;
}

#bellone {
position: relative;
top: 5px;
left: 120px;
}

#bellscontent {
padding: 10px 20px 0px 25px;
}

#bellsfooter {
text-align: center;
}

.bellshome {
position: absolute;
top: 380px;
left: 355px;
width: 90px;
}

/* style for Sounds page starts */

#soundscontainer {
background-color: #333365;
font-size: 0.9em;
color: white;
width: 800px;
height: 450px;
position: absolute;
top: 50px;
left: 110px;
padding-top: 10px;
}

#soundscontainer h1 {
margin-top: 30px;
font-size: 1.5em;
text-align: center;
}

#soundsheader {
margin-top:50px;
text-align: center;
}

#soundcontent {
width: 260px;
height: 200px;
margin-top: 50px;
margin-left: 265px;
}


.test {
border: solid;
text-align: center;
padding: 1px;
}

[Kravvitz]

The CSS is useless without the X/HTML its used with. Please post the page's markup.

P.S. Please read Guidelines and Suggestions for Posting on Web Development Forums.

[ray326]

Better yet, a link. My gut feel is you've got a container that's wider than the text and you're seeing the centering effect.

[Rezon]

I agree with Ray but which element is causing the problem? Posting your CSS without directing us to the problem doesn't help us.

[smoker]

Sorry Guys.

http://www.raysloan.com/sounds.html

I was having the problem with #soundcontent. In the end I had to specify width and height. However I have also had to do this with other elements elsewhere on the site because I was getting the same problem. I am correct in assuming that I should be able to declare padding: 1px; and have that take effect on every side ?

I appreciate your help.

smoker

[ray326]

Were you applying it to the H2s?

[smoker]

Yes I was. But I have also tried doing a little test using <p> text and it seems that I am fundamentally misunderstanding something, as the same thing happens. I just thought that if I declared something like

padding: 1px;

all 4 sides of the box would drop in tight up to the edges of the content, but this does not seem to be the case. The actual box still stretches to both sides of the window and the top & bottom come in tight to 1px. It seems that the only way I can physically reduce the width of the box is by declaring width ?

[ray326]

No, the default width for a block is 100%. Inline elements don't have width and height but can have borders and padding. The borders around an inline will be as tight as possible. The right markup for what you've got is an unordered list but the items are still inline. Maybe you could use <li><span>something</span></li> and style the span.

[Kravvitz]

To add to what Ray said, block-level elements like <p> and <div> take up all of the available width of their parent unless they have a specified width, are floated, or have their position property set to a valid value other than "static".

This is not valid. <a> is not an empty element. Also the alt attribute is only valid on img, area, input, and applet elements. I suspect you want the title attribute.

<a href="http://www.raysloan.com/mp3/uilleann.mp3" alt="sound sample of irish uilleann pipes" />

change them to

<a href="http://www.raysloan.com/mp3/uilleann.mp3" title="sound sample of irish uilleann pipes">Uilleann Pipes in 'D'</a>

[smoker]

Thank you guys.

I could see what was happening, and experience so far was telling me what was going on, but I want to completely 'understand' what is going on and why.

A month ago I couldn't do any css and I just feel that I need to understand fully before I can move on properly. I don't think it's good enough to simply develop my css in terms of knowing what happens through experience without understanding why it's happening.

So, it is legitimate to declare width to block level elements to bring the left & right borders in tight to the content, but you cannot declare width or height for inline - is this correct ? Is it also true to say that if it is not a block level element then it must be an inline element ? Is there anywhere I can find something like a listing of all block level elements?

Thank you also for the info' about the alt/title attribute kravvitz.

[Kravvitz]

You're welcome

1) yes
2) No. IE thinks so, but other browsers with better CSS2 support don't agree.
3) Here's a list. It's wrong about <dt> and includes deprecated elements.

You might want to read this: http://www.456bereastreet.com/archiv...le_attributes/

[smoker]

Thanks again Kravvitz et.al I really appreciate your help.

smoker