www.webdeveloper.com
Results 1 to 14 of 14

Thread: can't achieve even padding ?

  1. #1
    Join Date
    Apr 2005
    Posts
    158

    can't achieve even padding ?

    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

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Please show us your code.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  3. #3
    Join Date
    Apr 2005
    Posts
    158
    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;
    }

  4. #4
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    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.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  5. #5
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  6. #6
    Join Date
    Dec 2005
    Location
    McLean, VA
    Posts
    58
    I agree with Ray but which element is causing the problem? Posting your CSS without directing us to the problem doesn't help us.

  7. #7
    Join Date
    Apr 2005
    Posts
    158
    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

  8. #8
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Were you applying it to the H2s?
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  9. #9
    Join Date
    Apr 2005
    Posts
    158
    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 ?

  10. #10
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  11. #11
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    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.
    Code:
    <a href="http://www.raysloan.com/mp3/uilleann.mp3" alt="sound sample of irish uilleann pipes" />
    change them to
    Code:
    <a href="http://www.raysloan.com/mp3/uilleann.mp3" title="sound sample of irish uilleann pipes">Uilleann Pipes in 'D'</a>
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  12. #12
    Join Date
    Apr 2005
    Posts
    158
    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.

  13. #13
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    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/
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  14. #14
    Join Date
    Apr 2005
    Posts
    158
    Thanks again Kravvitz et.al I really appreciate your help.

    smoker

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles