PDA

View Full Version : Trouble with IE only

RichGuyNetwork
Jun-28-2009, 08:35 PM
Hiya Folks.. Smugmug and its members are doing really good work for helping each other out.. :thumb

I'm having trouble with IE only.. been trying to figure this one out.

I've put up a navbar for a smugmug member at VirnaLow.com and it works fine with all browsers except for Internet Explorer.

The problem is that when there is a item that is linked, and falls behind the drop down menu, I'll loose the drop down as I drag my mouse to the bottom of the drop down menu. The drop down gets released because of item (or photo) behind it is linked to another location. If there are no links behind the drop down it works fine.

I created the CSS and HTML using three different sources.

I am aware of the
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> wrapped around the UL tag as noted on another forum I read.


My brain has been fried looking to see where I've screwed up with coding in reference to IE. L:rolleyes:rolleyesKING forward to answer answer.

Thanks
jfriend
Jun-28-2009, 08:55 PM
The navbar HTML is pretty messed up.

A normal navbar looks like this:

<ul>
<li><a href="xxxx">Text1</a></li>
<li><a href="xxxx">Text2</a></li>
</ul>

If you look at even the very beginning of the navbar, it's clearly not of this style:

<ul>
<li>Home
<ul>
<li><a href="http://virnalow.com">Home</a></li>
</ul></ul>


You're going to have to correct the HTML to be proper and legal HTML to get it to work properly in all major browsers.
RichGuyNetwork
Jun-28-2009, 11:22 PM
The navbar HTML is pretty messed up.

A normal navbar looks like this:

<ul>
<li><a href="xxxx">Text1</a></li>
<li><a href="xxxx">Text2</a></li>
</ul>

If you look at even the very beginning of the navbar, it's clearly not of this style:

<ul>
<li>Home
<ul>
<li><a href="http://virnalow.com">Home</a></li>
</ul></ul>

You're going to have to correct the HTML to be proper and legal HTML to get it to work properly in all major browsers.

Putting </li> kills the drop down.. and no anchor is needed..
I've seen other examples of code that is list such the way I've got it.

here is an example from Steve Allen (http://allen-steve.smugmug.com/gallery/2327835)


<ul>
<li><a href="Link">Menu 1</a></li>
<li><a class="drop" href="Link">Menu 2
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">Drop 1</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="Link">Menu 3</a></li>
<li><a href="Link">Menu 4</a></li>
<li><a href="Link">Menu 5</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

on mine you'll see the difference that HOME is not a link.
changing it to a link did no good as they are already on the home page.
making it a link drops the text and the lettering for "HOME" is
offset from the rest of the menu.

I put the </li> after ABOUT and as you might see it kills the
drop down list. exact same thing that was just suggested.

so where is the code not proper?
the only browser I was having trouble with is IE.
all other browsers work fine.
jfriend
Jun-28-2009, 11:35 PM
Putting </li> kills the drop down.. and no anchor is needed..
I've seen other examples of code that is list such the way I've got it.

here is an example from Steve Allen (http://allen-steve.smugmug.com/gallery/2327835)


<ul>
<li><a href="Link">Menu 1</a></li>
<li><a class="drop" href="Link">Menu 2
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Link">Drop 1</a></li>
<li><a href="Link">Drop 2</a></li>
<li><a href="Link">Drop 3</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="Link">Menu 3</a></li>
<li><a href="Link">Menu 4</a></li>
<li><a href="Link">Menu 5</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

on mine you'll see the difference that HOME is not a link.
changing it to a link did no good as they are already on the home page.
making it a link drops the text and the lettering for "HOME" is
offset from the rest of the menu.

I put the </li> after ABOUT and as you might see it kills the
drop down list. exact same thing that was just suggested.

so where is the code not proper?
the only browser I was having trouble with is IE.
all other browsers work fine. Examine your HTML. It does not look like Allen's example at all.
RichGuyNetwork
Jun-29-2009, 06:36 AM
Examine your HTML. It does not look like Allen's example at all.

second time you stated that after to direct questions...

I guess you might of forgotten that in the first posted I stated that I referenced code from THREE DIFFERENT SOURCES. so of course my code is not going to look exactly like Allen's.

AND my direct question "Where is the code not proper?" was not answered.

If someone can give me a direct and more detailed answer to my question, I would appreciate it.

as of this writing I'm rewriting the code and it's not going to look exactly like Allen's. it won't be updated until later this after noon as I have many other things to work on as well....
Allen
Jun-29-2009, 07:15 AM
second time you stated that after to direct questions...

I guess you might of forgotten that in the first posted I stated that I referenced code from THREE DIFFERENT SOURCES. so of course my code is not going to look exactly like Allen's.

AND my direct question "Where is the code not proper?" was not answered.

If someone can give me a direct and more detailed answer to my question, I would appreciate it.

as of this writing I'm rewriting the code and it's not going to look exactly like Allen's. it won't be updated until later this after noon as I have many other things to work on as well.... If you use this html and the CSS on this page (http://allen-steve.smugmug.com/gallery/2078255) it will work great.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="#">About
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/8721589_h59tT">Virna</a></li>
<li><a href="#">New Eye Movement</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="/gallery/6344090_FC6Ua">Contact</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Portfolio
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="#">Portraits
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Individuals</a></li>
<li><a href="#">Couples</a></li>
<li><a href="#">Families</a></li>
<li><a href="#">Wedding</a></li>
<li><a href="#">Boudoir</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#">Commerical<!-- fully working sample -->
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/7917966_TcryT">Culinary</a></li>
<li><a href="/gallery/8316748_JrU9n">Produce</a></li>
<li><a href="/gallery/8198931_fzcBB">Jewelry</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="#">Shows
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/8718149_eGyB7">Coming soon</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#">Events
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/8657631_y66aS">Free Hugs</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#">Clients
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/galleries">Virna</a></li>
<li><a href="#">Mejia</a></li>
<li><a href="#">Haswell</a></li>
<li><a href="/gallery/8198931_fzcBB">E1 Jewelry</a></li>
<li><a href="#">Vivian &amp; Howard</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Services
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Photoshoot</a></li>
<li><a href="#">Workshop</a></li>
<li><a href="#">Speaking</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
RichGuyNetwork
Jun-29-2009, 12:37 PM
If you use this html and the CSS on this page (http://allen-steve.smugmug.com/gallery/2078255) it will work great.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="#">About
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/8721589_h59tT">Virna</a></li>
<li><a href="#">New Eye Movement</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="/gallery/6344090_FC6Ua">Contact</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Portfolio
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="#">Portraits
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Individuals</a></li>
<li><a href="#">Couples</a></li>
<li><a href="#">Families</a></li>
<li><a href="#">Wedding</a></li>
<li><a href="#">Boudoir</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#">Commerical<!-- fully working sample -->
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/7917966_TcryT">Culinary</a></li>
<li><a href="/gallery/8316748_JrU9n">Produce</a></li>
<li><a href="/gallery/8198931_fzcBB">Jewelry</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="#">Shows
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/8718149_eGyB7">Coming soon</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#">Events
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/8657631_y66aS">Free Hugs</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="#">Clients
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/galleries">Virna</a></li>
<li><a href="#">Mejia</a></li>
<li><a href="#">Haswell</a></li>
<li><a href="/gallery/8198931_fzcBB">E1 Jewelry</a></li>
<li><a href="#">Vivian &amp; Howard</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="#">Services
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Photoshoot</a></li>
<li><a href="#">Workshop</a></li>
<li><a href="#">Speaking</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>


Thanks you for your response Allen. Assuming you're the same Allen. Using the code from the forums I redid my own.

I am still having the same problem where the menu gets dropped. After looking into it further I'll see if I can best explain this.

Looking at VirnaLow.com if you were to have two sheets of paper.. one paper being the menu the other being the photographs that comes up at the home page. Which ever piece of paper is on top is going to have priority over the other. If you look at the menu that is place over the photograph and try to use the drop down. you will see what I mean.

Even though the menu is visually on top, it is acting as though is has the lowest priority on the page. or its the page on the bottom of the stack.

This only happens with IE. all other major browsers work fine..

thanks again for you help. I'm still looking around to solve this issue.
Allen
Jun-29-2009, 04:13 PM
Thanks you for your response Allen. Assuming you're the same Allen. Using the code from the forums I redid my own.

I am still having the same problem where the menu gets dropped. After looking into it further I'll see if I can best explain this.

Looking at VirnaLow.com if you were to have two sheets of paper.. one paper being the menu the other being the photographs that comes up at the home page. Which ever piece of paper is on top is going to have priority over the other. If you look at the menu that is place over the photograph and try to use the drop down. you will see what I mean.

Even though the menu is visually on top, it is acting as though is has the lowest priority on the page. or its the page on the bottom of the stack.

This only happens with IE. all other major browsers work fine..

thanks again for you help. I'm still looking around to solve this issue.
One thing I noticed is there is no background on the dropdowns. Works with
Firefox but iE is stupid and needs a background color. make them black and
see if it works.
RichGuyNetwork
Jun-29-2009, 09:07 PM
One thing I noticed is there is no background on the dropdowns. Works with
Firefox but iE is stupid and needs a background color. make them black and
see if it works.

It works.. and yes IE is stupid..
not exactly what Virna wanted but she is accepting it for now.

Thanks for the help.. if I find a real solution to this I'll be sure to post it.