SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image not sitting inside DIV

    can someone explain why the image inside of the div called "projT" isn't surrounded by its container? There are 2 nexted Div, one with a white border and one with a grey, and I can't seem to make it contain the image completely.

    the page is here:

    http://www.aftermath-creative.com/te...nedy/projT.htm

    and here's the html:
    Code:
    <!-- Begin sister site panels buttons-->
    		<div id="sisters">
    			<div class="greyBorder">
    				<div class="projT">
    					<img src="images/teamUp_projT.jpg" width="189" height="171" border="0" alt="Team Up With Men Fighting HIV."/>
    					<p><a href="projectT.htm" onFocus="this.blur()">Frequently Asked Questions &raquo;</a><br>
    					<a href="#" onFocus="this.blur()">See the Campaign &raquo;</a><br>
    					<a href="#" onFocus="this.blur()">Get involved &raquo;</a></p>
    				</div>
    			</div>
    		<div class="clear"></div></div>
    		<!-- End sisters -->
    here's the relevant CSS taken from the css file:

    Code:
    #left {
    	position:relative;/*ie needs this to show float */
    	width: 621px;
    	background: #FFFFFF;
    	float: left;
    	border: none;
    	padding-top: 131px;/*needed to make room for header*/
    	font-family: arial, helvetica, verdana, sans-serif;
    	color: #818080;
    	font-size: 12px;
    	line-height: 20px;
    	padding-left: 30px;
    	font-weight: normal;
    }
    
    #sisters {
    	position: relative;/*ie needs this to show float */
    	width: 206px;
    	margin-right: 40px;
    	float: right;
    	text-align: center;
    	border: none;
    	display: inline;
    	background: transparent;
    }
    
    .greyBorder {border: #DCDDDD 3px solid; margin-left: 12px; margin-bottom: 15px;margin-top: 15px;}
    
    .projT { 
    	border: #FFFFFF solid 3px; 
    	text-align: left;
    	line-height: 14px;
    	background-color: #B71B8B;
    	color: #FFFFFF;
    	font-weight: bold;
    	padding-bottom: 15px;
    }
    html>body .projT {padding-bottom: 0px;}
    
    .projT p { margin-left: 13px; margin-top: 5px; color: #FFFFFF;}
    .projT a { font-family: arial, helvetica, verdana, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none;}
    .projT a:visted {color: #FFFFFF;}
    .projT a:hover {text-decoration: underline;}

  2. #2
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try changing width of #sisters to 213px. I did this using the Web Developer Edit CSS functionality in FireFox and this seemed to do the trick. Not sure what it will do in IE though.

    Regards,
    Andy.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  3. #3
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, that worked, though i thought that DIV tags are display:block by default and would automatically wrap around another block element like an image, especially if the width was undefined.

  4. #4
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you noticed in IE, the DIV was automatically expanding to fit your image, which is contrary to the specifications of the W3C I believe. You had defined a width on the containing DIV and Firefox obeyed that width declaration and your image spilled outside the bounds of the container.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.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
  •