question re writing valid css rollover popups

[flunn]

By using various how-to stuff i found on the web I figured out how to make rollover popups for the redesigned home page I've been working on. They seem to work fine but when I did a validity check on the page I found a lot of errors were reported because I had "attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>")."

I used <p> tags inside <span> element because I wanted to format the text in the popups.
Does anyone know of a way of doing this without making the code invalid?

In case anyone's interested the unfinished page is at

www. flesl.net/Experimental/newStart5.html

best regards to all from

flunn

[awasp67]

Have a look at A List Apart, I'm not sure exactly what you want will be there but something very similar will be.

[Arne]

You can set any inline element to display:block; e.g. as you have for "h4 a:hover span" where you don't need it if you change "h4 a span{display:none;" to display:block;

The validator don't know about the "hover" in the html since it does not hover anything. You should use unordered lists (with <li>) to make those lists, as they are - lists! By styling the lists you don't need to use that much of code for them. But I doubt you ever will be able to make those lists valid and look the way you want them to be.

[jmdirc]

Originally Posted by flunn

I used <p> tags inside <span> element because I wanted to format the text in the popups.
Does anyone know of a way of doing this without making the code invalid?

Just add a class to the span and format it with css. In the html use unordered list/li instead of <p> tags as Arne suggested.

.spanclass {
background-color: xxx;
border: 1px solid #000;
font-family: xxx;
font-weight: xxx;
--etc--
}

Also, if you want a smooth jump from your menu to the lists in the spans, place the top of the span exactly at the bottom of the menu item or a pixel up.

Someone will correct me if I'm wrong, but for this to work in ie 6, I think you will have to add at least a 1 pixel border around the span elements.

[flunn]

Thanks very much to awasp67, arne, and jmdirc for their replies.
It'll take me a while to look into their suggestions and to try to implement them but I'm sure they're going to be helpful.
I do have one additional question for jmdirc:
If I use the system of adding a class to the span and formatting it, will I be able to use different styles inside the span without making the code invalid? (In other words will I still be able to indent and bold some of the text in the popups as I have done on the current page?)
regards to all from
flunn

[webado]

Before you get too carried away use this:
http://tool.motoricerca.info/spam-detector/

[Arne]

Originally Posted by flunn

If I use the system of adding a class to the span and formatting it, will I be able to use different styles inside the span without making the code invalid?

Maybe I'm getting to "basic", but just in case I like to mention that the HTML validator don't validate CSS. It can give you a html error even if the style you use is valid. And your style is valid all the way, at least the last time I checked and can be checked again on http://jigsaw.w3.org/css-validator/
It's the html that must be correct to be valid, regardless of styled or not.

[flunn]

Thanks to Arne and webado for their replies.

1) in response to webado:
I checked the page on the spam detector site you mentioned and found that the text in the popups is regarded as "hidden." This apparently means that a search engine could consider the page as spam? Is this really likely to happen? If it did happen what would the likely consequences be? If it did happen, would it happen because I'd used "display: none;" in the css code, or would there be a danger of it happening with any sort of popup code.

2) in response to Arne:
I realize that the problem is a html problem and not a css problem. However, to use the method I'm trying to use for making rollovers, I have used <p> tags inside the <span> tags. And that is why the code is invalid html. I'm going to try using <li> tags as you suggest. (I'm not sure whether they are "block" or "inline"; if they are the former, then this might solve the problem.)

regards from

flunn

[Arne]

Originally Posted by flunn

(I'm not sure whether they are "block" or "inline"; if they are the former, then this might solve the problem.)

A list is a block element.

[jmdirc]

Originally Posted by flunn

...
I do have one additional question for jmdirc:
If I use the system of adding a class to the span and formatting it, will I be able to use different styles inside the span without making the code invalid? (In other words will I still be able to indent and bold some of the text in the popups as I have done on the current page?)
regards to all from
flunn

If you keep the css and html separate, you shouldn't have any problems. You can add a class to each element and format each seperately if you wish.

Instead of using 'display:hidden;' use 'display:none;'

Or, you can try using the z-index, it works in FF, Opera and Safari - thats the only places I've tested it.