Hi,
here is a weird one that hopefully has a simple answer that i’ve missed.
So i have a megadropdown menu on here http://beta.mcsuk.org/ and this uses divs to sort each of the menu panels. This means i have a problem as i can’t use div’s inside the panel as it picks up the menu panel settings and everything goes a bit crazy.
At the moment i have cheated and used spans around tables so that i can get the 2 tone effect you’ll see in the link above. This however will not validate as you shouldn’t have tables inside spans.
I could probably do it all with tables but that would be annoying.
Is there a tag that i can use that will allow everything inside like a div but is not a div, and will allow me to validate?
No there is no other tag you can use but it seems that you do not need the span around the table anyway as the table can be styled as you want. You have no real styles applied to that span so I don’t know what use you wanted it for?
The correct answer though is to add a class to the div and avoid affecting all divs inside from the start.
e.g.
ul#menu div
Change all those types of rules to something like:
ul#menu .drop {}
Then add a class to the div:
<div class="drop">
That will stop the styles being applied to any inner divs.
Alternatively if ie6 support isn’t required then use the child selector to style only the immediate child.
e.g.
ul#menu > div {etc....}
Do that for all the styles that target the dropdown div.
awesome thanks so much for that. Think i’ve got it sussed. I was a bit nervous about changing the div classes as i thought there would be loads to change in the javascript but it seems to just be the css that needed tweaking (as you said) and its fine.
Although the top span did not have styles i was using a span with styles at the bottom to add the second colour. But won’t have to now as i can get back to good old divs. Might even remove the tables.