Div too long (missing something obvious?)
Posted: 19 May 2009 03:49 AM   [ Ignore ]
Newbie
Rank
Total Posts:  9
Joined  2008-02-11

[added Tuesday morning, 10:40 am Eastern
I just realized that I left out a class (class=pictures_full) - I have added it in a new code section.]

I have a page that is running a slideshow - using a script called innerfade.

The script and slideshow are working fine, but the div that contains the slideshow extends farther down than it should - it is set to height:280px; The pictures in the slideshow are all set to 250 px tall, so there should be about 30 pixels under the picture - just enough for a line of text with a little space above and below. But when I display the page in a browser (IE8 or Firefox) the div ends down about what would be two more lines of text - maybe an extra 40 to 50 pixels. 

There are no references to any styles in the divs or anywhere else in the vicinity.

Here is the code for the html - I have only included 4 images; there are actually 10:

<div id="slideshow">
             <
div id="proj">
            <
img alt="Family outings can be active fun!" src="pictures/FamilyFun.jpg" class="pictures_full" />
            
Family outings can be active fun!<br />
    
        </
div>
        <
div id="proj">
            <
img alt="Basketball gives a great workout!" src="pictures/Basketball.jpg" class="pictures_full" />
            
Basketball gives a great workout!<br />
        </
div>
        <
div id="proj">
            <
img alt="A personal trainer can help you be fit." src="pictures/PersonalTrainer.jpg" class="pictures_full"/>
            
A personal trainer can help you be fit.<br />        
        </
div>
        <
div id="proj" >
            <
img alt="Swimming is great low impact exercise." src="pictures/Swimming.jpg" class="pictures_full" />
            
Swimming is great low impact exercise.<br />
        </
div>
    </
div

And here is the relevant CSS:

#slideshow {
    
float:right;
    
width:350px;
    
height:280px;
    
border:3px solid #0099CC;
    
margin-left:5px;
    
overflow:hidden;
    
margin-top:0px;
    
margin-bottom:0px;
    
}

#proj {
    
text-align:center;
    
font-weight:bold;
    
margin-top:0px;
    
margin-bottom:0px;
    

Here is the new section showing the class .pictures_full

.pictures_full {
    border
-bottom:1px #0099CC solid;

And here is a link to where you can see the page displayed:

Sample Page

Thanks - I have stayed up way to late trying to figure this out - I will be surprised if I am not missing something obvious.

Profile
 
 
Posted: 19 May 2009 03:49 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  9
Joined  2008-02-11

I found the problem - there was a setting in the script that was causing the div to have a larger height.

Profile