7 replies [Last post]
jay019
Offline
newbie
Last seen: 13 years 41 weeks ago
Timezone: GMT+9.5
Joined: 2007-07-23
Posts: 7
Points: 0

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

index.html

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

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;
}

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

Alternatively. If someone knows a better way to execute what I am attempting, your knowledge would be greatly appreciated. After all, i'm just a lowley java/php coder trying to learn css. lol Smile

jay019
Offline
newbie
Last seen: 13 years 41 weeks ago
Timezone: GMT+9.5
Joined: 2007-07-23
Posts: 7
Points: 0

$10 to anyone who can get it

$10 to anyone who can get it to look the same in firefox and ie based on the pre-existing code at http://jay019.com/test/

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 10 years 52 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Sorry Frens

:bigoops: :bigoops: :bigoops:
Very Very Sad Topic ....
This is the Forum site not the business site. You would be better try in different place.
:shrug: :shrug:

jay019
Offline
newbie
Last seen: 13 years 41 weeks ago
Timezone: GMT+9.5
Joined: 2007-07-23
Posts: 7
Points: 0

Where would that be?

Where would that be?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

http://validator.w3.org/check

Verschwindende wrote:
  • CSS doesn't make pies

jay019
Offline
newbie
Last seen: 13 years 41 weeks ago
Timezone: GMT+9.5
Joined: 2007-07-23
Posts: 7
Points: 0

thepineapplehead

Valid HTML would be a start Wink

lol. doesnt help that it was saved from a dynamically generated site and as such all the time and effort put into getting it to validate went out the window.

I guess thats an issue that Firefox needs to address, munging up xhtml when it is saved.

Will fix the test page up tho to make life easier on everyone.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 40 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi, Well this is really

Hi,
Well this is really basic... Firefox is a modern browser, so whatever firefox shows, is lets say right. While almost all designers consider firefox as their God, i would suggest you fix up your site to look exactly as you want in firefox.

Then, go on fixing all those mistakes that IE 6 does. And beforedoing any of this, try validating your site.

And if you are just not able to fix it for IE, then use a conditional comment, and then do the necessary changes. Google that.. or ask anybody here.. they will giv u the code.

mihir. Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

jay019
Offline
newbie
Last seen: 13 years 41 weeks ago
Timezone: GMT+9.5
Joined: 2007-07-23
Posts: 7
Points: 0

[SOLVED]

mihirc wrote:

i would suggest you fix up your site to look exactly as you want in firefox.

Done, it looks great in firefox.

mihirc wrote:

Then, go on fixing all those mistakes that IE 6 does. And beforedoing any of this, try validating your site.

And if you are just not able to fix it for IE, then use a conditional comment, and then do the necessary changes. Google that.. or ask anybody here.. they will giv u the code.

mihir. Smile

I was using a conditional comment from the very start. Best idea I have ever had as fixing something for IE usually breaks the same thing for Firefox. Anyway, I managed to get it all working (http://jay019.com/test/) so I am a happy camper now.

Although, sometimes borders dissapear but meh, as long as it looks the same. It would also be good to have the hover work for the whole button (li) and not just the "a href". But oh well. Can't complain.