Hello all!
I was wondering if anyone could shed some light on a problem I'm
facing? I'm using Ganeshji Marwaha's jcarousellite to create a slide
show of three (possibly more later) definition lists for client
contact details. Each DL contains three contacts.
Each DL is held within an LI which is a child of an UL which is a
child of the containing DIV.
eg1:
<div id="carousel">
<ul>
<li>
<dl>
<dt class="h1" title="Contact NAME AND
DETAILS"><img src="/images/
contact/thumbs/headshot.jpg" width="80" height="100" class="left"
alt="Contact Image" />CONTACT NAME<br /><span>CONTACT POSITION</span></
dt>
<dd class="p">+44 (0)20 7### ####<br /><a
href="mailto:cona...@email.com"; target="_blank" alt="Contact CONTACT
NAME AND DETAILS" title="Contact CONTACT NAME AND DETAILS</a></dd>
<dt class="h1" title="Contact NAME AND
DETAILS"><img src="/images/
contact/thumbs/headshot.jpg" width="80" height="100" class="left"
alt="Contact Image" />CONTACT NAME<br /><span>CONTACT POSITION</span></
dt>
<dd class="p">+44 (0)20 7### ####<br /><a
href="mailto:cona...@email.com"; target="_blank" alt="Contact CONTACT
NAME AND DETAILS" title="Contact CONTACT NAME AND DETAILS</a></dd>
<dt class="h1" title="Contact NAME AND
DETAILS"><img src="/images/
contact/thumbs/headshot.jpg" width="80" height="100" class="left"
alt="Contact Image" />CONTACT NAME<br /><span>CONTACT POSITION</span></
dt>
<dd class="p">+44 (0)20 7### ####<br /><a
href="mailto:cona...@email.com"; target="_blank" alt="Contact CONTACT
NAME AND DETAILS" title="Contact CONTACT NAME AND DETAILS</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="h1" title="Contact NAME AND
DETAILS"><img src="/images/
contact/thumbs/headshot.jpg" width="80" height="100" class="left"
alt="Contact Image" />CONTACT NAME<br /><span>CONTACT POSITION</span></
dt>
<dd class="p">+44 (0)20 7### ####<br /><a
href="mailto:cona...@email.com"; target="_blank" alt="Contact CONTACT
NAME AND DETAILS" title="Contact CONTACT NAME AND DETAILS</a></dd>
<dt class="h1" title="Contact NAME AND
DETAILS"><img src="/images/
contact/thumbs/headshot.jpg" width="80" height="100" class="left"
alt="Contact Image" />CONTACT NAME<br /><span>CONTACT POSITION</span></
dt>
<dd class="p">+44 (0)20 7### ####<br /><a
href="mailto:cona...@email.com"; target="_blank" alt="Contact CONTACT
NAME AND DETAILS" title="Contact CONTACT NAME AND DETAILS</a></dd>
<dt class="h1" title="Contact NAME AND
DETAILS"><img src="/images/
contact/thumbs/headshot.jpg" width="80" height="100" class="left"
alt="Contact Image" />CONTACT NAME<br /><span>CONTACT POSITION</span></
dt>
<dd class="p">+44 (0)20 7### ####<br /><a
href="mailto:cona...@email.com"; target="_blank" alt="Contact CONTACT
NAME AND DETAILS" title="Contact CONTACT NAME AND DETAILS</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="h1" title="Contact NAME AND
DETAILS"><img src="/images/
contact/thumbs/headshot.jpg" width="80" height="100" class="left"
alt="Contact Image" />CONTACT NAME<br /><span>CONTACT POSITION</span></
dt>
<dd class="p">+44 (0)20 7### ####<br /><a
href="mailto:cona...@email.com"; target="_blank" alt="Contact CONTACT
NAME AND DETAILS" title="Contact CONTACT NAME AND DETAILS</a></dd>
<dt class="h1" title="Contact NAME AND
DETAILS"><img src="/images/
contact/thumbs/headshot.jpg" width="80" height="100" class="left"
alt="Contact Image" />CONTACT NAME<br /><span>CONTACT POSITION</span></
dt>
<dd class="p">+44 (0)20 7### ####<br /><a
href="mailto:cona...@email.com"; target="_blank" alt="Contact CONTACT
NAME AND DETAILS" title="Contact CONTACT NAME AND DETAILS</a></dd>
<dt class="h1" title="Contact NAME AND
DETAILS"><img src="/images/
contact/thumbs/headshot.jpg" width="80" height="100" class="left"
alt="Contact Image" />CONTACT NAME<br /><span>CONTACT POSITION</span></
dt>
<dd class="p">+44 (0)20 7### ####<br /><a
href="mailto:cona...@email.com"; target="_blank" alt="Contact CONTACT
NAME AND DETAILS" title="Contact CONTACT NAME AND DETAILS</a></dd>
</dl>
</li>
</ul>
</div>
Now in my CSS I style this as:
#carousel { overflow: hidden; visibility: visible; width: 600px;
height: 325px; position: relative; z-index: 2; width: 2000px; left:
-5000px; }
#carousel ul { margin: 0; padding: 0; list-style-type: none; }
#carousel li { width: 300px; }
#carousel dl { width: 300px; font-size: 11px;}
#carousel dt { height: 50px; }
#carousel dd { height: 40px; }
#carousel dt img { margin: 0 10px; }
#carousel .h1 { font-size: 20px; line-height: 0.8em; font-weight:
normal; }
#carousel .h1 span { font-size: 14px; }
#carousel .p { margin: 0 0 20px; }
Now, here's the kicker, and finally my question:
Why, will the LI's not adhere to the set width? Each of the DL's are
cut off by about 20px to the right, thereby slicing the text for the
contacts information if it reaches that far!
Please request online link for reference, as this is a client site!
I'm sure we all understand that!
Thanks for all your help!
