Tab Content Misalignment

[CrystalSC]

1) Script Title: Tab Content

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex17/tabcontent2.htm

3) Describe problem: The tab list and tab content are misaligned from one another. The tab list are shifting right. I have changed nothing in the css or html other than aesthetic changes (font size, colors, etc...)

Screenshot: (click for full size)


This is the code used in the item description including the tab content.

<img src="https://system.netsuite.com/core/media/media.nl?id=658&c=978039&h=b1d7e463c247bccaff3c"><br><br><b>Professional dictation can be so easy</b><br>With the Pocket Memo 488, you can switch the microphone sensitivity from dictation to conference recording. The end-of-letter index tone identifies saved recordings for efficient transcription.
<br>
<br>
<font style="font-family: Tahoma; font-weight: bold;" color="#ad1f1f" size="1">Alternate Large Views</font></br>
<a href="/altviews/philips/PSP-488-front_hq.png" rel="facebox"><img src="/altviews/philips/th_PSP-488-front.png" border="0" title="PSP-488 Philips Portable Minicassette Recorder; Front View"></a> <a href="/altviews/philips/PSP-488-pack_hq.png" rel="facebox"><img src="/altviews/philips/th_PSP-488-pack.png" border="0" title="PSP-488 Philips Portable Minicassette Recorder; Package"></a>
</br>
</br>
<ul id="tablist">
<li><a href="features.htm" class="current" onClick="return expandcontent('sc1', this)">Key Features</a></li>
<li><a href="specs.htm" onClick="return expandcontent('sc2', this)" theme="#e9e9e9">Specifications</a></li>
<li><a href="pack.htm" onClick="return expandcontent('sc3', this)" theme="#e9e9e9">Package Contents</a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
<li>uses MINI CASSETTE TAPES only</li>
<li>End-of-letter index tone indicates the start of each document and number of recordings</li>
<li>Sensitivity switch for conference or close-range recording</li>
<li>Voice-activated recording for hands-free dictation </li>
<li>Fast access to any part of the tape with turbo wind </li>
</div>

<div id="sc2" class="tabcontent">
<li>Weight: 120 grams</li>
<li>Dimensions: 128 x 62 x 25 mm</li>
<li>Acoustic frequency response: 400 - 4,000 Hz</li>
<li>Output power: > 100 mW</li>
<li>Earphones socket</li>
<li>Microphone socket</li>
<li>Power Supply socket </li>
</div>

<div id="sc3" class="tabcontent">
<li>Pocket Memo 488</li>
<li>30 minute Mini Cassette 005</li>
<li>2x AA Batteries</li>
<li>Pouch</li>
<li>Wrist Strap</li>
<li>Lapel Microphone</li>
</div>

</DIV>
<br>
<br>
Regular Price: <s>$349.00</s><br>
<font size="2"><font style="font-family: Tahoma;" color="#71a5cd" font-weight="bold"><b>SPECIAL ONLINE PRICE:</b></font></font>

I appreciate any and all tips on how to correct this!

[CrystalSC]

Just to clarify - this is happening in Firefox 3.5.7 and Google Chrome. It actually looks fine in IE8.

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[CrystalSC]

http://www.dtpss.com/store/Philips/PSP-0488

[CrystalSC]

Just thought I'd check one more time. Anyone got any suggestions? Thanks!

[ddadmin]

The URL you posted appears broken to me...

[CrystalSC]

Sorry. The url was changed since I posted that.
http://www.dtpss.com/store/Mini-Cass...rders/PSP-0488

[CrystalSC]

It's been 10 days so I thought I'd check one last time. I appreciate any and all help. Thanks!

[ddadmin]

This definitely is just a CSS issue (rather than something to do with the script itself). I tried playing around with some values in your #tablist CSS ID, though wasn't able to remove the indent for some reason. My guess is some other styles on your page that also target the UL element in general is affecting #tablist, which is a UL itself.

Try disabling all styles except those for the tab content script and go from there. If you still need help then, I can try and find time to do some more poking around.

[CrystalSC]

Thank you so much. I will look into this!!!

Heeeeeyyy, I fixed it! Not sure what I did, but it's fixed! lol I just tried moving the tablist style around within the head and all of a sudden it worked. So, sorry I can't point out the error to anyone else who might check this thread.

But thanks for your help ddadmin!

My query is resolved.