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 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!

IE - the less said about this crap the better!

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.

Please help and please make the world a better place and spread the word about FIREFOX!!!

**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 in any way.

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

Code:

<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...

Code:

<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:

Code:

<!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 it will considerably help the debugging process.

Thread: Yet Another IE Issue

Thread Tools

Search Thread

Yet Another IE Issue

Bookmarks

Bookmarks

Posting Permissions