...

View Full Version : Help needed on drop-down differences between FF and IE (yes, another one!!!)



ian-d
11-01-2008, 03:17 PM
Hi guys,

With the help of codingforums I've managed to get almost there with my drop-down for a online shop I have.

Whilst it's working perfectly in FireFox, I'm still encountering problems in InternetExplorer! The problem is that whilst the drop-down appears when hovering over the main bar, it disappears if I try to move the cursor down over it!

I've set the code up on a non-shopping cart website and it works fine in both browsers, but when I place in the main online shop, it doesn't, which would suggest a conflict somewhere.

Can anyone please have a look at the drop-down menu in IE and see what might be the problem. If you need more information on specific code used that might not show as available (because it's a shop) then let me know:

www. sat buyer .co.uk (apologies for splitting the url, I don't want the search engines picking up on it for customer appearance reasons!)

Hope someone may be able to help me out.

effpeetee
11-01-2008, 03:38 PM
What are the problems? Superficially it seems OK with IE7 except that the drop down on Site Information button does not does not show.

Incidentally, Google found the url you gave immediately!

Frank

ian-d
11-01-2008, 03:44 PM
In terms of google, I was just meaning that I don't want customers when searching for the company name to find me asking about how to sort coding on the site :)

The problems are that if (I hope it's the same for you) you hover over the main menu bar in IE, the drop down appears, but try then selecting from the drop-down, does it let you? On my browser the drop-down disappears again!

Works fine in FF.

Not sure if it has anything to do with that line of approx. 2 pixel height that is appearing before the shadowing, but doesn't appear on FF or my example coding on another non-shopping cart site!!!

effpeetee
11-01-2008, 03:51 PM
I have edited my former post. But to answer your latest question, I find the same as you. I also find that if one holds the mouse down and then drags on to the drop down; it is possible to select. Strange. I can not think why but I am sure some better coder than I will soon help.

I have not been able to download your css.

Frank

ian-d
11-01-2008, 04:04 PM
Yeah, I too find that holding down on the menu text allows me to select from the list! I'm really struggling with this, I cannot understand why it's causing such a problem, especially since I sorted the hover code for IE!

Anyone else up for the challenge? I only really have this weekend before I'll have to remove the code so it doesn't look messy for my customers.

bazz
11-01-2008, 04:06 PM
OK, since you asked, I dtook a quick peek beofre I go to get bored watching F1. (it re-invogrates my willingness to work, honestly).

You have bigger probelm than just your flyout. in FF, the apparent container for the whole page, sits too far to the right. This means that a full screen-width page, sits off to the right introducing the dreaded horizontal scroll-bar.

I'l take a look tmz to see if I can help with the flyout.


bazz

effpeetee
11-01-2008, 04:33 PM
You do have some html errors. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.satbuyer.co.uk%2F)

and here css errors. (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.satbuyer.co.uk%2F)

Frank

ian-d
11-01-2008, 06:48 PM
I think there are probably lots of errors because of the make up of the cart. I don't really fancy tackling them as the SEO and SERP are ok.

Any more for any more :D

itsallkizza
11-02-2008, 01:57 AM
Also consider sliding doors for your menu bgs, it takes awhile to load even with my cable (http://www.alistapart.com/articles/slidingdoors/ & http://www.alistapart.com/articles/slidingdoors2/).

Or just give the list items a black/grey background color as well, so while the rollover image is loading the user doesn't see white text on white background.

ian-d
11-02-2008, 10:38 AM
Thanks guy, it is my intention to cover off all those areas but for now, I'm just really desperate to try and sort the drop down issue on IE. There must be a simple explanation for it...i hope!

abduraooft
11-02-2008, 12:03 PM
Thanks guy, it is my intention to cover off all those areas but for now, I'm just really desperate to try and sort the drop down issue on IE. There must be a simple explanation for it...i hope!
Yes you're right! Don't apply top padding to vertically align some text or an inline element inside a container. All that you need is to put a line-height having the same value as that of the height applied there. With that said, have a try with


span.space-1 {
height: 29px;
line-height:29px;
cursor: default;
background: url('menu_break_middle.gif') 0 0 no-repeat;
float: left;
padding: 0px 16px 0 16px;
/*line-height: 12px;*/
font-size: 11px;
}
span.space-1.starting {
.........
height: 28px;
line-height:28px;
padding: 0px 17px 0 17px;;
}
Good luck!

PS: Your CSS looks too cluttered with a lot of unwanted IE specific styles and other CSS selectors.

ian-d
11-02-2008, 04:04 PM
Thanks abduraooft, tried but failed. When I add in those variables the text goes to the top of the menu bar, but still the same problem with the drop-down menu.

Appreciate the css is cluttered, I'm no expert that's for sure, so maybe there's a conflict somewhere in there, but don't understand why it works for FF, but not IE...and only on the shopping cart, not when uploaded to a free domain without a shopping cart setup!

Any further help appreciated, I'm really worried that I'll never resolve this :(

bazz
11-02-2008, 07:58 PM
I think there are probably lots of errors because of the make up of the cart. I don't really fancy tackling them as the SEO and SERP are ok. :D

If you aren't going to validate your code, then you can't expect different browsers to show the page the same way. validation should make no negative difference to seo and serp but, in fact, may help to improve it.

I have a flyout menu and it wasn't until I validated the code that I found it possible to make it work in ie.

bazz

ian-d
11-02-2008, 08:03 PM
Is there any obvious error within the validation that might be causing the issue, as I'm not the best at resolving these errors, as most of the reports don't make sense to me. The trouble is that the surely can't be the code within the menu itself as it works fine when on a seperate domain.

Apostropartheid
11-02-2008, 08:24 PM
Enabling standards mode by adding a proper DOCTYPE (i.e. not a transitional one) fixes the problem for me. If you write validly, you're much less likely to get these problems.

ian-d
11-02-2008, 08:32 PM
I have no idea what a proper DOCTYPE is? Any chance you have the code available that works for you?

Apostropartheid
11-02-2008, 08:48 PM
A DOCTYPE is that bit at the top of the document beginning, aptly enough, with <!DOCTYPE .... An appropriate one to solve the issue would be:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

ian-d
11-02-2008, 11:17 PM
CyanLight, thank you so much, that worked perfectly. Fair enough it's caused a few problems on FF now, like duplicating the blue dots on the left hand menu, but I'll work on them!

A few follow on questions for anyone, if you use the drop down on 'Site Informatio...' the options appear behind the fixed menu bars from manufacturer and search. Any idea how I bring the menu on top of them?

Also, why would </br> no longer work on the index page with FF? Fine on IE, but now have to use <br> on FF just for the index page, fine on the rest!

Plus the bottom_line_bg.gif line at the bottom is duplicating itself on FF, but not in IE. Any ideas why this would happen?

.

ian-d
11-03-2008, 01:45 PM
Right, have changed the DOCTYPE to:


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

and that has resolved issues with duplication of background images etc. Have no idea whether that DOCTYPE is ok, but seems the best so far!

Trouble now is that if you use the drop-down menu in IE, you get some links on hover as white (how they should be) and some as orange! Any ideas why?

I've resolved a few of the css errors, but the html ones remain as I don't understand a single one of them LOL

Help appreciated.

bazz
11-04-2008, 02:52 AM
OK, I took a look at your page in the validator.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.satbuyer.co.uk%2F&charset=(detect+automatically)&doctype=Inline&group=0&verbose=1&user-agent=W3C_Validator%2F1.591

If you go through each error which has the OMITTAG NO error and replace the end of it with '/>' instead of '>', this will go and take some of the errors with them.

Then you'll see a shorter list that I can return to tomorrow and help further with.

bazz

ian-d
11-04-2008, 01:12 PM
Down to 170 errors now, have sorted a large number of them but struggling with some, and can't find the code for others. Will continue plugging away. ;)

ian-d
11-04-2008, 02:43 PM
Down to 87 now but could do with your help on working out what's wrong with the CONTENT="NOODP" tags.

Also, why is it requesting I close out </tr> and </td> codes, as surely the / is closing them out anyway?

bazz
11-04-2008, 02:49 PM
what does content noodp do? yoou have the previous line with the robots content anyway. I would consider making the word 'CONTENT' 'content' and if that doesn't fix it, I would see if I could remove it without any downside.

I'll look later for more, especially the </tr></td> thing.

look at line 459 in the validation output. You have a td tag there. then the next line is JS code and from then down is another table within that td tag. The poroblem then is in the first line after that table - line 516. You declare another TD tag, which you aren't allowed to do / doesn't make sense.

Remove one of those tags - or merge them and a lot of your errors should go.

bazz

ian-d
11-04-2008, 02:55 PM
what does content noodp do? yoou have the previous line with the robots content anyway. I would consider making the word 'CONTENT' 'content' and if that doesn't fix it, I would see if I could remove it without any downside.

I'll look later for more, especially the </tr></td> thing.

bazz

Lowercase did the trick, amazing hey!

Not sure what the NOODP does to be honest, I was given it as code many moons ago as being useful for bots searching the site. I have used it on a number of sites and always had successful SEO and SERP results, so never removed it just incase.

bazz
11-04-2008, 03:07 PM
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=35264

ian-d
11-04-2008, 03:13 PM
Ah yeah, that was right, it was to prevent the search engines grabbing random words from the site to make a sentence :D

ian-d
11-05-2008, 08:40 AM
look at line 459 in the validation output. You have a td tag there. then the next line is JS code and from then down is another table within that td tag. The poroblem then is in the first line after that table - line 516. You declare another TD tag, which you aren't allowed to do / doesn't make sense.

Remove one of those tags - or merge them and a lot of your errors should go.

Hi Bazz, don't suppose you can help me with that one, I'm useless at tables and cannot see what I should adjust? I removed the TD tag from line 516 which had no damaging affect on the site, but increased the errors from 75 to 121 so maybe that wasn't right.

Help appreciated, as always. :)

abduraooft
11-05-2008, 09:00 AM
<table cellpadding="0" cellspacing="1" border="0" align="center">
<tr>
<td>

<form action="index.html" method="post" name="featuredproductform_24">
<input type="hidden" name="target" value="cart" />
<input type="hidden" name="mode" value="add" />
<input type="hidden" name="product_data[24][product_id]" value="24" />
<input type="hidden" name="product_data[24][amount]" value="1" />

<div class="price" align="center">Out of stock, contact us for availability</div><p></p>

</form>



<br /><br /></td>
</tr>
</table>
I've highlighted the issues around line number 516. There is a closing tag for div, with no opening tag.

ian-d
11-05-2008, 09:33 AM
Isn't <div class="price" align="center"> the opening tag?

What would the solution be, any ideas?

abduraooft
11-05-2008, 10:29 AM
Umm... I missed that in the table soup :)

ian-d
11-05-2008, 10:49 AM
Yeah sorry, is a little messy. Any ideas what the cause might be?

On the whole the sites are fairly similar now which is good, but another couple of questions you may be able to help with?

1) The right hand menus (basket, search, manufacturers) seem to have the titles aligned to the right, but there is no code for this, any ideas?

2) When using the drop-down in IE, if you click on one of the sub categories the text disappears before the page refreshes/reloads. If you try that same sub category again, it remains, so something is causing it to disappear the first time the page has been opened. Any ideas?

ian-d
11-10-2008, 04:18 PM
Hi all,

Can anyone possibly help me with a further problem (getting there!).

On IE, when I use the top drop-down menu for the last option 'accessories', a couple of the categories go behind the search and manufacturers boxes. I presume this is some kind of coding issue where by it sits in front.

Any ideas what code I would need to use to resolve this, even if it's a code that I use for the whole menu, as it should always remain on top.

Web address: www. sat buyer .co.uk (split the url to stop google finding me asking for questions on here, doesn't look professional to potential customers!)

abduraooft
11-11-2008, 06:55 AM
This is a common bug with IE6, as it doesn't support z-index property on <select> (http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx)

There are some workarounds for this, see http://www.hedgerwow.com/360/bugs/css-select-free.html or http://20.targetprocess.com/2006/07/ie6-select-and-z-index-problem.html

ian-d
11-11-2008, 12:10 PM
I think unfortunately that option is well beyond my expertise, I cannot understand any of it, mainly because my menu is made up of loads of css code and I'm not sure specifically which part it relates to.

I've tried adding it pretty much as the examples you gave, but when I do that the menu disappears completely.

Is there an easy way to implement, as I'm not understanding it. If there's maybe a javascript way which is easier, I'd consider that...unless it will have a negative impact!

bazz
11-11-2008, 02:07 PM
If it makes you feel better, I don't get it either.

It soundes like a useful thing so I shall try to work it out later, using a copy of your page. If successful, I'll send it to you and then make it work for me somewhere.

bazz

bazz
11-11-2008, 10:46 PM
Ian, you might find this easier to grab hold of.

http://jetlogs.org/2008/05/09/jquery-fix-ie-select-box-z-index-bug/

or this

http://www.morgan-systems.com/tools/Dev_OverLib.asp

I wouldn't worry about it being JS driven because your nav menu needs js just for IE6 anyway. If they were to disable js in ie6 then your menu won't work. but if they use FF or safari et al, then the whole thing is irrelevant :)

bazz

ian-d
11-12-2008, 04:38 PM
Bazz, they have confused me even more, the example in the first doesn't even match that of the js files. I'm stuck on this, I guess it's because of the large number of css I already have, plus the divs associated with them!

bazz
11-17-2008, 06:50 PM
just in case you aren't aware, you have a coding issue on your homepage in the noscript section. It shows the actual html (of your stat counter), in the web page :(

Maybe you would prefer to have only a message showing in the noscript tags? eg.
<noscript>You need Javascript swithed on to get the most from this page.</noscript>.

I have pm'd you :)

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum