Welcome to WebmasterWorld Guest from 3.92.92.168

Forum Moderators: open

Message Too Old, No Replies

menu not working with XHTML code, but working with HTML 4.01 code?!

     
12:33 pm on Oct 11, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 7, 2006
posts:694
votes: 0


I started out with a free template (which I simplified and removed all unnecessary code, etc. etc. to come up with a template I can use as a base for my future designs). The original template was coded in xhtml, but I have come to the conclusion, that I better use html 4.01 for the foreseeable future.

I changed the doctype to html 4.01 and I used a validator for html 4.01 and was shown 12 errors (which I removed, so that now the document validates). I had to change <br /> to <br>, etc., but there were a few more things, that have made me wonder:

1) This is the thing I found REALLY strange and am trying to make sense of:

The original template had a menu on the left side of the page. I changed a ton of the whole document and in the end I had a problem: the buttons of the left-hand side menu would frequently move to the right and back (and back) when I was moving the mouse over them! It's been a while since I started out with that template and I'm not sure anymore, if those were always the same buttons or if it happened to all of them, but obviously that was a BIG issue with the left-hand sie menu.

I don't remember the train of thought I had back then, but I thought using this line of code (for the highlighted/selected button):

...
<span class="selected"><li><a>...</a></li></span>
...

instead of this one:

...
<li class="selected"><a>...</a></li>
...

might remove the issue. I was surprised, because it actually did work! The buttons remained in the same place, now if I was moving the mouse cursor over the left-hand side menu.

However, this line of code didn't validate in the html 4.01 validator.

Now, I'm wondering: Why did it not validate? The reasons I was given were something along the lines "starting tag for li ommitted" or something like that which wasnt really true imho. Is it not allowed to place a span-element around a <li><a></a></li> element?

2) What is even more strange: Now, that I had to remove that span element and use the line of code I had used before:

...
<li class="selected"><a>...</a></li>
...

is working perfectly! The buttons stay in the same place and don't move to the right. I tried to use the xhtml doctype again wondering if it was all about the doctype, but its even working with the xhtml doctype, now.

Is it possible that my using some xhtml-code caused this problem? Ive read the post of using xhtml to deliver text sometimes causing problems....maybe that was the case here? I somehow doubt it, to be honest, would be too cool an explanation :-).

Thanks!

1:52 pm on Oct 11, 2008 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9074
votes: 6


span
is an inline element, whereas
li
is a block-level element - so you cannot place a
span
outside a list item and still validate.

The change of code should not be necessary (assuming you are using an appropriate doctype [webmasterworld.com]) - the problem is more likely to be with your CSS rather than your markup.

2:53 pm on Oct 11, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 7, 2006
posts:694
votes: 0


Hi Encyclo,

thanks for the replies! Actually, now it is working perfectly without the span-tag. But a few months before (I was busy in college, so didnt do anything with it) I had to make this change, because it wasn't working. I didn't change anything about the CSS, though! I also read that post you made on the appropriate doctype, which is why I went with html 4.01 as a doctype.

But...well, it's working now so I shouldn't complain, I guess ;)

Could I have placed a div element outside the li and a elements, because that would have been a block element? (I mean technically, even if it looks ugly ;))

3:30 pm on Oct 11, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


>>div instead of span

It might have worked but it still wouldn't validate, as the only parent of an <li> element should be either <ol> or <ul>..

>>CSS
maybe, but more likely an IE hasLayout error possibly added to by a Quirks/Strict rendering mode difference?

can I just ask if this happened to be IE where you saw the "moving". In my experience moving menus, or to be more correct moving lists containing block level links is almost always an IE issue rather than a HTML/CSS coding one!

and the Doctype change could have fixed it for you if the switch also caused IE's rendering mode to change,
If you were you using the <xml prolog> before your XHTML one then that would've been putting IE into Quirks rendering mode (and that could've possibly invoked some older IE bugs!)

A simple swap from XHTML to HTML should not have caused code to fail/fix nor should you be required to invalidate (X)HTML to make it work.. if it does/did I guarantee there's something else going on

as you say it's not really an issue now if it's now working, but don't confuse the validation errors with a browser rendering bug is all I'm saying, You should never actually need to use invalid (X)HTML to fix a rendering error, regardless of if doing so actually fixes it.. we know how to fix any remaining rendering errors IE has and still keep code valid, so if you track it down or come across it again come over to CSS and see us :)

3:40 pm on Oct 11, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 7, 2006
posts:694
votes: 0


Hehe, I'm really confused, now!:-)

I didn't know that a <li> element should only have ol or ul as a parent element. Now, that makes sense, of course. Had I known it was incorrect code, I probably wouldn't have used the span-element to "fix" it (neither the div).

Unfortuantely, I dont know if it happened in firefox, too, because I started this design multiple months ago (had trouble in college and wasnt able to do any worko n that site), so I just dont remember..but it's possible.

3:44 pm on Oct 11, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


I didn't know that a <li> element should only have ol or ul as a parent element.

Not to derail the thread, but if you need a span where you had it, put it inside the li, that is valid. Or just set the class on that li or the anchor inside it.

3:57 pm on Oct 11, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 7, 2006
posts:694
votes: 0


That's what I'm doing, now (setting the class on the li), but before it wouldn't work and only worked when I used the span around the <li> and <a>. I know it's strange! LOL. But anyway, now it does work the way you suggested so it's all good :)