SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Windsor, Berkshire
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Howcome sometimes the top and bottom padding is ignored?

    I've had this a few times recently, yesterday I had it with nav elements and today I'm getting it with an accordion which I am making, can anyone explain why this happens? Obviously a fix would be good, but a mere understanding of the problem and why it occurs would be a bonus to my learning

    Here's the code!
    Code:
    /* ACCORDION FOR SESSIONS */
    #accordion {
    	margin:20px 0px;
    	width:650px;
    }
    
    h3.toggler {
    	background:url(images/top_bar.jpg);
    	cursor: pointer;
    	padding: 10px 10px 6px 20px;
    	border-bottom:1px solid #002469;
    }
    
    div.element p, div.element h4 {
    	margin:0px;
    }
    .element{
    background-color:#d6ebf8;
    padding:10px;
    }
    
    blockquote {
    	padding:5px 20px;
    }
    #bottombar{
    background:url(images/bottom_bar.jpg) no-repeat;
    padding:32px 0 0 0;
    }
    HTML Code:
    <div id="accordion">
    		<h3 class="toggler">Module 1 Title</h3>
    		<div class="element">
    		  <h4>This is some introductory text about module 1</h4>
    			</div>
                <div id="bottombar"></div><div id="spacer"><P>&nbsp;</P></div>
    		
    		<h3 class="toggler">Module 2 Title</h3>
    		<div class="element">
    			<h4>This is some introductory text about module 2</h4>
    	  </div>
    		<div id="bottombar"></div><div id="spacer"><P>&nbsp;</P></div>
    		
    		<h3 class="toggler">Module 3 Title</h3>
    	  <div class="element">
    			<h4>This is some introductory text about module 3</h4>
    	  </div><div id="bottombar"></div><div id="spacer"><P>&nbsp;</P></div>
            <h3 class="toggler">Module 4 Title</h3>
    	  <div class="element">
    			<h4>This is some introductory text about module 4</h4>
    	  </div><div id="bottombar"></div><div id="spacer"><P>&nbsp;</P></div>
            <h3 class="toggler">Module 5 Title</h3>
    		<div class="element">
    			<h4>This is some introductory text about module 5</h4>
    	  </div><div id="bottombar"></div>
    	</div>
    Any ideas?

  2. #2
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there might be something over-riding the padding declaration

    try like this
    Code CSS:
    /* ACCORDION FOR SESSIONS */
    #accordion {
    	margin:20px 0px;
    	width:650px;
    }
     
    h3.toggler {
    	background:url(images/top_bar.jpg);
    	cursor: pointer;
    	padding: 10px 10px 6px 20px!important;
    	border-bottom:1px solid #002469;
    }
     
    div.element p, div.element h4 {
    	margin:0px;
    }
    .element{
    background-color:#d6ebf8;
    padding:10px!important;
    }
     
    blockquote {
    	padding:5px 20px!important;
    }
    #bottombar{
    background:url(images/bottom_bar.jpg) no-repeat;
    padding:32px 0 0 0!important;
    }

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What padding is being ignored? - seems to work fine for me.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If it were an issue then you could try giving the element hasLayout (if you are talking about IE). Some elements on there don't have it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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