Ajax Tabs Content Script IE6 css issue

[Irishjugg]

Ajax Tabs Content Script (v 2.2)

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem:

In IE6 (6.0.2900.2180 xp-sp2) when I have a stylesheet in the htm document that will be loaded by the ajax, the css stylesheet is not loaded. As a test case I have two files, righttemp.htm and lefttmp.htm, very very simple pages with 2 divs each using content.css and content2.css which are exactly the same except in each of them the width's of the divs are varied. For some reason in IE the files do not properly load and in my test case there are no background colors shown in the ajax loading div.

As a sidenote, maybe Im just having IE issues, I have css files with background-color: attributes commented out using the // single line comment, the backgrounds are still showing.

In general is this a normal issue with this script other people have or is my IE just well... being IE.

When using the Ajax Tabs Script in Firefox I experience no issues (I am just trying to make it work in ugly IE).

[ddadmin]

Actually, Ajax is has trouble transferring and applying any CSS within the external content. It's just that in FF, it's less restrictive, but this is a limitation with Ajax in general. What you can do is dynamically load the .css file as a separate process. The following tutorial talks about how to do this: http://javascriptkit.com/javatutors/loadjavascriptcss.shtml

[Irishjugg]

Alright, Ill give that a try. I apologize if the answer to this is in the link you posted as I haven't looked at it as more than a glance yet, but, if depending on the pages clicked there are two different stylesheets, will the page linked be able to choose the correct stylesheet set?

[Irishjugg]

Tell ya what, I looked at that page and answered my own question, I think this solution will be perfect, thank you very much for the quick reply.

There a good page on hacks to make things look right in IE that you or someone can reference me to? Layout is looking great in FF, not so much in IE still, few lingering issues with sizing (probably from the stupid border float and padding stuff IE forgets to handle)

[Irishjugg]

From the script you linked. I call it in my link with :

<a href="righttemp.htm" class="tablinks" rel="tabsect" onClick="javascript:loadjscssfile('content.css','css')">Promotions</a>

I just have the script directly in my page where the link is. inside script tags.

In IE Im getting nothing new. Any advice?

[ddadmin]

You're basically on track, though the onClick part cannot be inserted in the <a> tag in this case, since as a tab the script already assigns an onClick event to it, overwriting what you've defined. You can however, just wrap the link inside another tag (or the other way around) such as a <span>, and add the onClick event there:


<a href="righttemp.htm" class="tablinks" rel="tabsect"><span onClick="javascript:loadjscssfile('content.css','css')">Promotions</span></a>

Another thing you can try is just to directly add "content.css" to your main page as an external CSS file. When the Ajax page is fetched, the browser will know to style it using what's defined in content.css, as that was added to the page from the get go:


<link rel="stylesheet" type="text/css" href="content.css" />

[Irishjugg]

Okay cool thanks alot, I forgot to look through the script to see if onclick was already used. Silly of me of course it is =].

That first solution will work better for me because there are two "types" of pages, from a tob tab menu and from a left side menu, they have a slightly different stylesheet so I have to load them dynamically, or I can just change all the div names.

Thanks for all the help.