Log in

View Full Version : Yet Another IE Issue


masey
08-04-2006, 07:24 PM
You'd hope and think that one day IE will disappear forever and save us coders from all the BS that we have to go through to make it work!

OK... rant over... now here's my problem.

I am using the nifty TAB CONTENT (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm) script for a site I am working on. To spice it up a little I thought I would add a small 16x16 icon to the left of each tab heading. No worries in Firefox... but it ends up all jumbled in IE almost like it's treating the icon as a seperate tab to the heading on each occasion. You end up with something looking like this:

FIREFOX - you wonderful, beautiful browser you!
http://i16.photobucket.com/albums/b41/mrsquiggle2/ffx-tab.gif

IE - the less said about this crap the better!
http://i16.photobucket.com/albums/b41/mrsquiggle2/ie-tab.gif

Does anyone know what I need to do to prevent this?!?!?! It's driving me nuts... if you need any code provided that you can't see from source then please let me know or you can get it all to play with from HERE (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm).

Please help and please make the world a better place and spread the word about FIREFOX!!! :D
Twey
08-04-2006, 07:36 PM
Can you show us the page in question?
mburt
08-04-2006, 07:40 PM
DD's "Tab Content" script works fine in IE. We need to see the code, or the page to evaluate the problem
masey
08-04-2006, 08:07 PM
Unfortunately I can't show you the page in question at this stage but I can show you the ONLY thing I changed in the code. Note that I have NOT altered the original CSS files (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm) in any way.

Here's the way the code for the tabs portion is without the icons and which works fine in IE:


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">World</a></li>
<li><a href="#" rel="tcontent2">CA</a></li>
<li><a href="#" rel="tcontent3">US</a></li>
<li><a href="#" rel="tcontent4">UK</a></li>
<li><a href="#" rel="tcontent5">OZ</a></li>
<li><a href="#" rel="tcontent6">ENT</a></li>
<li><a href="#" rel="tcontent7">WEB</a></li>
</ul>

And this is all I have done to add in the icons. As you can see in the earlier illustrations, works beautifully in Firefox... rubbish in IE...


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1"><img src="../images/browser_omniweb.png" alt="World News" hspace="5" border="0" />World</a></li>

<li><a href="#" rel="tcontent2"><img src="../images/icon-cbc.gif" alt="CBC" hspace="3" border="0" />CA</a></li>
<li><a href="#" rel="tcontent3"><img src="../images/icon-nbc.gif" alt="NBC" hspace="3" border="0" />US</a></li>
<li><a href="#" rel="tcontent4"><img src="../images/icon-bbc.gif" alt="BBC" hspace="3" border="0" />UK</a></li>
<li><a href="#" rel="tcontent5"><img src="../images/icon-abc.gif" alt="ABC" hspace="3" border="0" />OZ</a></li>
<li><a href="#" rel="tcontent6"><img src="../images/icon-movie.gif" alt="BBC" hspace="3" border="0" />ENT</a></li>
<li><a href="#" rel="tcontent7"><img src="../images/cursor.png" alt="ABC" hspace="3" border="0" />WEB</a></li>
</ul>

HELP ME!!!!! ;)
Twey
08-04-2006, 09:04 PM
And is your page valid XHTML 1.0 Strict?

Note that XHTML isn't usually recommended for general-purpose sites. However, as you appear to be using it anyway, that's the one to go for.
masey
08-04-2006, 09:15 PM
This is my page type:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

What are you saying I should have it as? Will this solve the problem?
Twey
08-04-2006, 09:42 PM
What you should have it as? HTML4.01. See http://www.hixie.ch/advocacy/xhtml. However, as an interim measure, using XHTML 1.0 Strict and validating (http://validator.w3.org/) it will considerably help the debugging process.