General Community > WebsiteBaker Website Showcase

New site for a concert agency

(1/2) > >>

Vincent:
Hi to all bakers,

Here's a new one. I made it for a new Dutch concert agency (classical music). It'll be in english as well, but for now just Dutch: www.argusimpresaria at.nl

I had one problem though that I haven't been able to solve yet, so if anyone has an idea: submenu items that are longer than 1 'row' don't show properly in FF, they ovelap the next item  :|

Anyway: thanks for a great tool, the client is very happy because of its ease of use and flexibility.

Vincent

 

kweitzel:
really nice ... you do have an issue though with the menu ...

If I select the link "Muziektheater" the submenu only displays "Corona en Theater" but when I then hover the mouse over it, it displays "Corona en Theater Madoc" with Madoc in a second line which breaks the menu box ...

cheers

Klaus

Vincent:
Klaus, that's excactly what I meant with the problem I described...! Now If you also have the solution... :wink: I'd be very greatful.

Vincent

kweitzel:
Maybe I should have read ... ;-)

The issue is actually not FF, since it renders the CSS correctly, but IE, which doesn't ...

You have  the value "height: 2.2em;" in your CSS for the navigation. Like said above, FF displays it correctly but IE doesn't respect the height statement. Have a look here for the IE Bug (at least, I think it is a version of this bug you have there): http://www.positioniseverything.net/explorer/expandingboxbug.html

cheers

Klaus

Vincent:
Hi Klaus,

it took me a while to sort things out. I knew I was using a trick to let IE display the data correctly: if I removed the height statement it would show properly in FF but not in IE: there would be a gap between the list-items.

Eventually I found the solution :-D (which I never came across on tutorials or sites):
add
--- Code: ---border-bottom: 1px solid; 
--- End code ---
to the lists. So I ended up


--- Code: ---#menuBox li {
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-bottom: 1px solid; /*necessary for IE: otherwise the menu will gain height*/
border-color: #eee;
}
#menuBox a {
display: block;
color: #FFF;
padding: 5px 0px 3px 25px;
margin: 0;
}


--- End code ---

in stead of


--- Code: ---#menuBox li {
margin-top: 0px;
margin-bottom: 1px;
padding-top: 0px;
padding-bottom: 0px;
}

#menuBox a {
display: block;
color: #FFF;
height: 16px;
padding: 5px 0px 3px 25px;
margin: 0;

}

--- End code ---

Works fine now in all browsers. Pfff.
Regards,

Vincent

Navigation

[0] Message Index

[#] Next page