FireFox versus IE Problem

[Simon Dean]

Hi,

I wonder if someone can help me.

I thought I had it all worked out. I was trying to remove tables and
work with divs, having to rework what I do using more <p> tags, <span>
tags sparingly, <ul> and <li> instead of some tables for generating
menu's for example... trying to make the page accessible for people who
don't want to use styles.

http://simtext.plus.com/test.html

But now I've got a situation where I've been testing in Firefox, now
Internet Explorer won't render properly. When I wave the mouse over a
blank area of the <LI>, ie won't change the mouse over for the <A> tag
like FireFox. I thought it would, I liked how the gamespot website had
their site, and I liked the idea of not using JavaScript.

Unfortunately, the mouseovers don't work consistently between FireFox
and IE, and there's also that huge gap between <LI> elements shown in
IE. For visual purposes I've put a white border around the <A> tag and
it seems to be taking into account the display: block; property, but is
not responding to the hover.

Im confused.

I can't figure out and give in....

Seems like a pretty easy, then suddenly steep learning curve.

I hope it'll get easier again. Can anyone point me in the right
direction as to what Im doing wrong?

Thanks
Simon

 

[Philip Ronan]

http://simtext.plus.com/test.html

Your HTML is invalid:
http://validator.w3.org/check?uri=http://simtext.plus.com/test.html

Your CSS is invalid:
http://jigsaw.w3.org/css-validator/validator?uri=http://simtext.plus.c
om%2Fstyle4.css&usermedium=all

Are you still surprised it doesn't render properly?

 

[Simon Dean]

Simon Dean wrote:




Your HTML is invalid:
http://validator.w3.org/check?uri=http://simtext.plus.com/test.html

Your CSS is invalid:
http://jigsaw.w3.org/css-validator/validator?uri=http://simtext.plus.c
om%2Fstyle4.css&usermedium=all

Are you still surprised it doesn't render properly?

Yes. because the fault in question has nothing to do with these minor
discrepencies. The work is a work in progress, and I expect a few minor
issues before I go live, but thank you for your kind help none the less.

I would be interested to know if it's possible to have embedded lists...
it appears W3C.org does not allow it, so Im looking for a solution to
that particular problem if possible. I'm guessing it just means separate
<LI> element definitions.

I fixed my issue with added this to the a.item property: width:100%;

And adding overflow:hidden; to the menu div.

Regards,

 

[Steve Pugh]

I would be interested to know if it's possible to have embedded lists...
it appears W3C.org does not allow it,

Of course they do. Remember that the only allowed children of ul/ol are
li elements. But that li elements can contain any block level elements.

so Im looking for a solution to
that particular problem if possible.

Nest your lists properly.

I'm guessing it just means separate <LI> element definitions.

Not sure what you meanb by this, but if you mean doing

<ul>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>

intead of

<ul>
<li></li>
<ul>
<li></li>
</ul>
</ul>

Then you're on the right tracks.

Steve

 

[Simon Dean]

Simon Dean wrote:




Of course they do. Remember that the only allowed children of ul/ol are
li elements. But that li elements can contain any block level elements.




Nest your lists properly.




Not sure what you meanb by this, but if you mean doing

<ul>
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>

intead of

<ul>
<li></li>
<ul>
<li></li>
</ul>
</ul>

Then you're on the right tracks.

Steve

Hi Steve,

Thanks for the help.

Works a treat.

If anyone's interested, here's what we have so far:

http://www.acutec.co.uk/test/s3/aboutus.php

A little bit dumbstruck to be honest with the top right corner that says
ACUTEC Events. in IE it displays one way, Firefox another. I want it to
display in the middle, but so far, no joy.

I just hope it works in Opera.



Cheers
Simon

 

[Toby Inkster]

http://www.acutec.co.uk/test/s3/aboutus.php

Replace this:

<li><a class="itemon" href="aboutus.php">ABOUT US</a></li>
<li>
<ul class="submenu">
<li class="subitem">...
</ul>
</li>

With this:

<li>
<a class="itemon" href="aboutus.php">ABOUT US</a>
<ul class="submenu">
<li class="subitem">...
</ul>
</li>

This establishes a better structure, enforcing the relationship between
the "About us" item and the submenu below it.

 

[Simon Dean]

Simon Dean wrote:

http://www.acutec.co.uk/test/s3/aboutus.php

Replace this:
[snip]


With this:

<li>
<a class="itemon" href="aboutus.php">ABOUT US</a>
<ul class="submenu">
<li class="subitem">...
</ul>
</li>

This establishes a better structure, enforcing the relationship between
the "About us" item and the submenu below it.

Thanks for looking... I was just a bit unsure of that because I only
wanted that A element to be highlighted, and not quite understanding CSS
fully yet, I thought maybe the display:block would force the A element
to apply to whole of the LI element.

Bound to be wrong though.

I just discovered another problem, the overflow:hidden; I have on the
menu div, doesn't really work... it hides the extra space to the right,
but on FireFox 1.5, you can actually drag one of the larger roll over
links to the right and you can see the hidden content.

I still need a fix for this then. Im not sure how to do it. I havent
found anything yet. im guessing it works in other web designs, because
they have a horizontal menu... But Im probably talking waffle.

Cheers
Simon

 

[Simon Dean]

Toby Inkster wrote:

Thanks for looking... I was just a bit unsure of that because I only
wanted that A element to be highlighted, and not quite understanding CSS
fully yet, I thought maybe the display:block would force the A element
to apply to whole of the LI element.

Bound to be wrong though.

I just discovered another problem, the overflow:hidden; I have on
the menu div, doesn't really work... it hides the extra space to the
right, but on FireFox 1.5, you can actually drag one of the larger roll
over links to the right and you can see the hidden content.

I still need a fix for this then. Im not sure how to do it. I havent
found anything yet. im guessing it works in other web designs, because
they have a horizontal menu... But Im probably talking waffle.

Cheers
Simon

Think I figured out what to do... using some hacks:

#menu>ul>li>a.itemon { /* ie win cannot correctly parse child selector
rule */
width:auto;
}

#menu>ul>li>a.item { /* ie win cannot correctly parse child selector rule */
width:auto;
}

#menu { /* take advantage of underscore hack bug to not show clipped
data in ie*/
_overflow:hidden;
}

So I should be resetting the widths of itemon and item for Mozilla etc,
and turning overflow off in IE.

For some reason, when overflow:hidden in mozilla, there is an overflow
to scroll, even if there's nothing then. But when made visible, you
can't scroll. now in IE, when made hidden, it prevents scroll. When
visible, you get the nasty mess down the right hand side.