SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question FF background color of containing div

    Greetings,
    I've got a couple problems. One, I'm trying to apply a background color to a containing div (cpa with altCell adding the bg color) that has a couple other divs inside it (floatL and floatR). It looks correct in IE, but FF is only giving it about a 1 line height. If I manually add a height in px in the CSS it will enlarge, but it doesn't appear to expand automatically depending on the height of the divs within it.

    Code:
    <div class="cpa altCell">
    	<div class="floatL"><p class="bold">Personnel (Salary/Wage Rates): Are the rates generally in line with standard rates of the industry?</p>
    	</div>
    	<div class="floatR">
    		<input type="radio" name="costAnalPerRateInd" value="Y" /><p class="inlinep">Yes</p><br />	
    		<input type="radio" name="costAnalPerRateInd" value="N" /><p class="inlinep">No</p> <p class="cpap">- Salaries and level of efforts have been reviewed and appear reasonable for the proposed scope of work</p><br />
    		<input type="radio" name="costAnalPerRateInd" value="" /><p class="inlinep">N/A</p>
    		<p><a href="#" class="bold">[Add/Modify Documents]</a> (1 attachments)</p>
    	</div>
    </div>
    I'm also having a spacing issue. Where I have the p.cpap class for the explanation of the selection, it causes whatever follows after it to have too much space. I've attempted to give a 0 bottom margin and padding to the p.cpap and even a negative margin and padding, but can't seem to tighten it up.

    The page I'm working on is HTML and CSS

  2. #2
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does your XHTML validate?

    I didn't know you could declare two different class names within one class property.

    i.e. <div class="cpa altCell"> instead of <div class="cpa_altCell">
    No, I REALLY dislike having to use Joomla.

  3. #3
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Good Fix!

    Quote Originally Posted by all4nerds
    Hello

    move your clear div, and for FF < 1.5 give it a height
    head+body .clearer{clear:both;height:1px;overflow:hidden;margin-top:-1px;}
    That worked brilliantly all4nerds, now why did it work like that?

    Any thoughts on my spacing issue?

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't know you could declare two different class names within one class property.
    Yes, you can.

  5. #5
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, setting a global padding and margin of 0 didn't seem to do the trick.
    Definitely something strange going on.

  6. #6
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm talking specificly about the spacing between the No and N/A areas, places where there is a description and it pushes the next radio button down.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are using position:relative in your cpap class to move the element upwards. While this appears to work visually, position:relative doesn't actually move anything at all. The element always occupies the same space it always did but just appears to be somewhere else.

    The space you see is the space where the element would have been. You need to re-think the method you are using and possibly float the elements instead so that they are alongside rather than trying to drag them upwards which will always be a bit hit and miss.

    Otherwise if you use position:relative then you will need to move everything else that follows on the page using position:relative as well which would be a nightmare to maintain.

  8. #8
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Thanks

    Thanks Paul,
    I wasn't sure if that was problem or not. The way you explain it makes sense. I thought tha might have been the space where the div would have contained and that's why I originally tried to use a negative bottom padding/margin the same amount I moved it up. I'll try your float suggestion and see if I can get that to work.

    Cheers

  9. #9
    SitePoint Enthusiast adaler1's Avatar
    Join Date
    Feb 2005
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is a bit more complicated of code, but I did get it to work. Thanks all for the help This is what I ended up doing
    Code:
    <div class="cpa altCell">
    	<div class="floatL"><p class="bold">Other Costs: Are all other costs separetly itemized and proced correctly?</p>
    	</div>
    	<div class="floatR">
    		<input type="radio" name="costAnalOtherCostInd" value="Y" /><p class="inlinep">Yes</p>
    	  <div class="floatL">
    		<input type="radio" name="costAnalOtherCostInd" value="N" /><p class="inlinep">No</p>
    	  </div>
    	  <div class="floatR"><p>- All other costs, including per patient costs, consultant costs and when applicable(i.e., when subcontractor is a for-profit entity), profits or fees, have been reviewed and appear reasonable.</p>
    	  </div>
    	   	<div class="clearer"></div>
    		<input type="radio" name="costAnalOtherCostInd" value="" /><p class="inlinep">N/A</p>
    		<p><a href="#" class="bold">[Add/Modify Documents]</a> (1 attachments)</p>
    	</div>
    	<div class="clearer"></div>
    </div>
    The developers will just have to pay attention when putting it in their app


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
  •