The Clashing of Elements

[alexburi]

The Page in Question:
http://www.deborahbrakeley.com/faq.html

Hello,
If you visit the above page, you will see that when you open the drop-down menu (which is contained in transparent boxes), it clashes with the transparent box beneath it which runs the width of the page, and which will hold the page title. This is a problem because it sees through and also triggers the menu to close.

If I take the opacity css code out of the transparent box in the background then it gets covered up by the menu as it is supposed to.... does anyone know of a way to keep that box transparent as well as stop it from clashing with the menu?

The same problem also happens when I absolutely position the Page Title text in that box... it shows through the menu as well. It has to be absolutely position so that it rests on top of the transparent box, so maybe you also might know how to fix this problem as well...

Thanks to anyone that can help.

Alex

[alexburi]

the problem with the transparent box is only in Safari so far... both mozilla and opera properly cover up the transparent box when the list drops down. Still, the absolute positioned Page Title text shows through.....

[gits]

hi ...

it seems to me that FF has the same problem too that you desribed for safari? and may be you are after the z-index styleproperty? ;) refer to it here

kind regards

[drhowarddrfine]

You have 166 html errors and about 20 CSS errors. Fix those first.
Also, 'filters' are an IE only thing and not standard. They don't work in any other browser.

[alexburi]

You have 166 html errors and about 20 CSS errors. Fix those first.
Also, 'filters' are an IE only thing and not standard. They don't work in any other browser.

The errors in my html are saying:

"I can't have the tag: div within a <ul>"
and
"I can't have a <li> with the <div> tag"

why is it saying that, (I understand this structure is fine), and if it is wrong how do I get around it?

[alexburi]

hi ...

it seems to me that FF has the same problem too that you desribed for safari? and may be you are after the z-index styleproperty? ;) refer to it here

kind regards

I'm reading through it now... this looks like what I am looking for. Thanks :) Do either of you have any suggestions for the way I'm doing this menu bar?

Also, I want to make rounded corners on all the transparent boxes behind the menu bar and page title and throughout the rest of the pagebody. To do this, do I have to make images for each corner and then apply them within the background of a <div> and then apply the opacity settings....? I wish it could be easier.

[drhowarddrfine]

Look at the new CSS3 properties that have 'radius' in their name for rounded corners. But they only work in modern browsers and not IE. It will be at least eight years before IE catches up with the current state of things.

'Opacity' also works in modern browsers but not IE6 so that makes it easier.

So, yes, you may just have to create the images.

I would concentrate on fixing all the errors first. They will only create more grief as you go along.

[alexburi]

I would concentrate on fixing all the errors first. They will only create more grief as you go along.

Could you help me with this? :
Drop Down Menu in question: http://www.deborahbrakeley.com/faq.html
Please preview in any browser other than IE since i haven't fixed for IE yet

All the errors that are coming up are due to the fact that I have multiple <div> elements nested within my <ul> elements... The errors state that I cannot have a <div> element within a <ul> element and then it gets confused thinking that the <li> elements are floating in the middle of nowhere with no opening and closing <ul></ul> tags.

Here is an example of my code:

<div id="menubox"></div>
<div id="menu">
    <ul id="nav">
 
     <li>Home
            <div id="home"> (hook for positioning drop down list)
 
            <ul> (list that opens when "<li>Home" is hovered)
 
                <div class="listbox"></div> (hook for transparent background)
 
                <div class="col1"> (absolutely positioned column of text that appears in drop down list... needs to be absolutely positioned so the columns to the right of it stack up to the right and so it goes over top the transparent background.. may be another way to do this part)
 
                    <li><a href="home.html">Home</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                    <li><a href="about.html">About GBK</a></li>
                    <li><a href="">Meet the Artisans</a></li>
                    <li><a href="">Travel Information</a></li>
                    <li><a href="">GBK Photos</a></li>
                    <li><a href="">Fair Trade</a></li>
                    <li id="divider">.....................</li>
                    <li><a href="">Shipping</a></li>
                    <li><a href="faq.html">FAQ</a></li>
                    <li><a href="">Site Map</a></li>
                </div>
                <div class="footbox"></div>
                <div class="listfooter">
                <p>Welcome...</p>
                  </div>
            </ul>
            </div>
        </li>
 
<li>India
            <div id="india">
            <ul>
                <div class="listbox"></div>
                  <div class="col1">
                    <li><h1>Men's</h1></li>
                    <li><a href="">Shirts &amp; Tops</a></li>
                    <li><a href="">Jackets</a></li>
                    <li><a href="">Sweaters</a></li>
                    <li><a href="">Beanies &amp; Hats</a></li>
                    <li><a href="">Pants</a></li>
                    <li><a href="">Scarves</a></li>
                    <li><a href="">Belts</a></li>
                    <li><a href="">Sunglasses</a></li>
                </div>
                <div class="div1"></div>
                <div class="col2">
                    <li><h1>Women's</h1></li>
                    <li><a href="">Shirts &amp; Tops</a></li>
                    <li><a href="">Jackets</a></li>
                    <li><a href="">Sweaters</a></li>
                    <li><a href="">Beanies &amp; Hats</a></li>
                    <li><a href="">Pants</a></li>
                    <li><a href="">Dresses &amp; Skirts</a></li>
                    <li><a href="">Scarves</a></li>
                    <li><a href="">Belts</a></li>
                    <li><a href="">Purses</a></li>
                    <li><a href="">Sunglasses</a></li>
                    <li><a href="">Hair Accessories</a></li>
                </div>
etc............

Here are the errors generated:
1. document type does not allow element "div" here; assuming missing "li" start-tag.
<div class="listbox"></div>

2. document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag.
<li><a href="home.html">Home</a></li>


The <div> tags in bold are necessary to contain a transparent box behind the text. If the text in the lists were to be placed within the same element as the transparent box then the text too would become transparent.

Also, the transparent div's and the list div's have to be within the <ul> tags so that they open and close when they are hovered upon...

so basically, I am wondering if I should just ignore these errors because they are necessary or if there is another way to do this that complies to web standards?

thanks for reading through this...
Alex

[drhowarddrfine]

Just as it states, a <ul> contains a list of items. These items are marked with <li>, 'list item'. So while a list item can contain a div, a div cannot exist as the content of a list.

[alexburi]

Just as it states, a <ul> contains a list of items. These items are marked with <li>, 'list item'. So while a list item can contain a div, a div cannot exist as the content of a list.

So how do I get around the need for having a hook within the <ul>s to apply transparent background and positioning too?