IE Experts please help. Positioning problems...

[jay019]

Hi all.

My site http://jay019.com/test/ works great in Firefox. For some reason it wont work in Internet Explorer. In particular the drop down lists are not displaying the way one would expect. Can someone please help me work out how to get the site working in IE. To make matters worse I dont get much time to test it in IE being the linux user that I am. Anyway, any help would be appreciated.

The styles in particular are held in the file /test/products.css and I have file specifically for Internet Explorer name /test/retardstyle.css

The main offenders seem to be expander, expander1, menuheaders and menubuttons.

Here is the code involved...

Code: Select all

index.html

         <div class="sidebox">
            <ul class="expander">
            <li class="menuheaders"><a href="javascript:toggle('submenu1')">Geek Toys</a></li>
            <li style="display: none;" id="submenu1">
                <ul class="expander1">
                    <li class="menubuttons"><a href="#">Remote Control</a></li>
                    <li class="menubuttons"><a href="#">Fun Stuff</a></li>
                    <li class="menubuttons"><a href="#">LED and Laser</a></li>
                </ul>
            </li>
            <li class="menuheaders"><a href="javascript:toggle('submenu2')">Wireless</a></li>
            <li style="display: none;" id="submenu2">
                <ul class="expander1">
                    <li class="menubuttons"><a href="#">Analyzers</a></li>
                    <li class="menubuttons"><a href="#">Toys</a></li>
                    <li class="menubuttons"><a href="#">RFID</a></li>
                </ul>
            </li>
            <li class="menuheaders"><a href="javascript:toggle('submenu3')">Computers</a></li>
            <li style="display: none;" id="submenu3">
                <ul class="expander1">
                    <li class="menubuttons"><a href="#">Media Centres</a></li>
                    <li class="menubuttons"><a href="#">Servers</a></li>
                    <li class="menubuttons"><a href="#">Laptops</a></li>
                </ul>
            </li>
            <li class="menuheaders"><a href="#">Books</a></li>
            </ul>
         </div>

Code: Select all

the css...

.sidebox {
   background-color:#cccc99;
   border:1px solid #000;
   border-top:0px;
   margin-top: 0px;
   line-height: 14px;
   padding:5px;
   font-size:8pt;
}

.sidebox ul li a:hover {
   background: #DDDD99;
   color: #000000;
   text-decoration: none;
}

.menuheaders a, .menuheaders li
{
   border: 1px solid #000000;
   padding: 4px 4px 5px 9px;
   margin: 0px -6px -1px -36px;
   display: block;
   text-decoration: none;
   color: #000000;
}

.expander {
   list-style-type: none;
   list-style-image: none;
   margin: -6px 0px -6px -10px;
}

.expander1
{
   list-style-type: none;
   list-style-image: none;
   margin: 1px -6px -1px -76px;
   padding: -1px 0 0 0;
}

.menubuttons a, .menubuttons li
{
   background: #e7e7ba;
   border:1px solid #000;
   border-left: 1px;
   border-right: 0px;
   border-top: 1px;
   display: block;
   margin: 0 1px 0 1px;
   padding: 5px 0px 7px 10px;
   text-decoration: none;
   color: #000000;
}

Code: Select all

the javascript...

function toggle(list){
   var listElementStyle=document.getElementById(list).style;
   if (listElementStyle.display=="none")
   {
      listElementStyle.display="block";
   }
   else
   {
      listElementStyle.display="none";
   }
}

The files involved...
http://jay019.com/test/index.html
http://jay019.com/test/products.css
http://jay019.com/test/retardstyle.css

Cheers.

Jay

[MikeHopley]

For a start, you need to quote your IDs in javascript. This is wrong:

Code: Select all

var listElementStyle=document.getElementById(list).style;

This is correct:

Code: Select all

var listElementStyle=document.getElementById("list").style;

[jay019]

Originally Posted by MikeHopley

For a start, you need to quote your IDs in javascript. This is wrong:

Code: Select all

var listElementStyle=document.getElementById(list).style;

This is correct:

Code: Select all

var listElementStyle=document.getElementById("list").style;

Cheers Mike,

It worked without quotes so I figured it was fine, but I will now start adding quotes to all my javascript just to be sure.

Still cant get it to display the same in IE tho. Doesn't help that I dont even have windows and can only test it out at friends places or at the library.

Jay

[MikeHopley]

Um...

It appears the element with ID "list" does not exist!

Also you should really fix your XHTML. Invalid code causes unpredictable errors.

Originally Posted by jay019

It worked without quotes so I figured it was fine, but I will now start adding quotes to all my javascript just to be sure.

Remember that this only applies to strings, such as ID names. For example, getElementsByTagName(div) should not have quotes.

[jay019]

Originally Posted by MikeHopley

Um...
It appears the element with ID "list" does not exist!

But if you look into the html you will see that this is called with list being replaced with the name of the list in question...

Code: Select all

<a href="javascript:toggle('submenu2');">

then the very next line is...

HTML: Select all

<li style="display: none;" id="submenu2">

Therefore in this case the "list" is actually "submenu2"

Get it???

[MikeHopley]

Originally Posted by jay019

Therefore in this case the "list" is actually "submenu2"

Get it???

Ah, right. In that case, you should not use quotes. getElementById("list") will look for an element of ID "list", whereas getElementById(list) will use the value of the variable list.

In other words, reverse the change that I suggested.

You still haven't fixed your HTML, however. I strongly recommend validating your HTML.

Often IE behaves better if you use object detection. Try:

Code: Select all

function toggle(list){
var x = document.getElementById(list)
if (x) {
if (x.style.display=="none") { x.style.display="block" }
else {x.style.display="none" }
}
}

[jay019]

Thanks Mike for all the suggestions, but we are way off topic here.
The problem is getting the page to display the same in Firefox and IE6.

If anyone can come up with the fix $10 into their paypal account.

Jay

[Lchad]

Jay a quick question for you. In FF the left nav is showing as blue text links with bullets. In IE 6 the left nav is showing as green/tan boxes. Which one do you want?

I think the two different css files have very different things in them. I'll take a look if you can shed some light on which style you want.

[MikeHopley]

Originally Posted by jay019

Thanks Mike for all the suggestions, but we are way off topic here.
The problem is getting the page to display the same in Firefox and IE6.

No, we're not off topic. This is very important to understand:

Invalid code causes unpredictable rendering errors.

Fix the code, and your error might disappear. And since you should fix the code anyway, why not do it now?

[jay019]

Originally Posted by MikeHopley

No, we're not off topic. This is very important to understand:

Invalid code causes unpredictable rendering errors.

Fix the code, and your error might disappear. And since you should fix the code anyway, why not do it now?

OK, fixing this now.

I just figured the code was fine as it worked as I expected. You click on a link and the hidden submenu becomes viewable. Will see how it looks after fixing the code tho.

Jay

[jay019]

Originally Posted by Lchad

Jay a quick question for you. In FF the left nav is showing as blue text links with bullets. In IE 6 the left nav is showing as green/tan boxes. Which one do you want?

I think the two different css files have very different things in them. I'll take a look if you can shed some light on which style you want.

OK, had a few issues with the page, was trying someone elses suggestion, decided to revert back to its original state.

The effect I am after is the one you will now see in firefox, that is the box of four links (Geek Toys, Wireless, Computers & Books) now in firefox clicking on the first three of these links will make a submenu appear.

The two different files do have different things in them as I was trying to get the same effect in IE and FIrefox, but not being all that good at CSS I was failing badly.

[Lchad]

Jay I'll have a look at it tomorrow...
In the meantime if you are bored, here is a tutorial I used to build a couple of pop out navs. It worked and had fixes for IE 6.

[jay019]

Looks like I get to buy myself some beer with my $10.
Actually got it to work! Phew!!!

Thanks to Mike for helping me to understand better javascript. And thanks to Lchad for attempting to help, sorry the page was broken when you saw it.

Anyway, as long as it now looks the same in IE and Firefox I guess I'm done and can now do the php which I much prefer.

Yay.

[Lchad]

Oh good for you! I think you need the beer after this experience. Sorry I couldn't have made it easier!

[jay019]

Not your fault. Out of interest does it also look the same in IE7 or is that a whole new headache?

Jay

PS. Is there any way to mark the thread as [SOLVED]? I can do this in the Ubuntu forums once things are working, but not too many other forums seem to do it.

[Lchad]

Oh boy, you are not going to be happy !
See screenshot.

We cannot mark the thread solved. We don't have that feature yet... but we are going to soon!

[jay019]

Originally Posted by Lchad

Oh boy, you are not going to be happy !
See screenshot.

We cannot mark the thread solved. We don't have that feature yet... but we are going to soon!

Damn, is that IE7? If so, then thats fine, its a battle for another day.

If its IE6 then I'm confused, worked fine in my version.

[Lchad]

Yeah that's IE 7!