HelP? Page doesn't look good in Firefox

  • Raymond B
  • Newbie
  • Newbie
  • Raymond B
  • Posts: 6

Post 3+ Months Ago

Hello!
I am an novice, and really don't know much about making homepages, but I do try.
I have used Frontpage for a while, but has now tried to make a new site using Expression Web 2.0

The new page works as I wanted in Internet Explorer.
But the drop-down menu does not work properly in Firefox.
(The whole page is strange)
Can someone take a look and tell mw what to do?

The website is: http://www.kennel-kokopelli.com

(And pardon my bad english)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Code: [ Select ]
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:139px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul a:hover ul{
visibility:visible;
}
.menu ul li:hover ul{
visibility:visible;
}
  1. /* hide the sub level links */
  2. .menu ul ul {
  3. visibility:hidden;
  4. position:absolute;
  5. width:139px;
  6. height:0;
  7. }
  8. /* make the sub level visible on hover list or link */
  9. .menu ul a:hover ul{
  10. visibility:visible;
  11. }
  12. .menu ul li:hover ul{
  13. visibility:visible;
  14. }


Try changing the Z-index and see if that helps it to display over the underlying content. I have never used Frontpage or the new Expression web, but from the looks of the code it shoots out, I wouldn't want to. I am trying to figure out how the masthead might be involved in your problem. Try the Z-index first though and see if it helps any. :D
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

I just thought of something after I PM'd you - what is with all the conditional code for IE6 and IE7? It is only concerning itself with </a> tags most of the time in the markup. If the css z-index idea didn't work, after you ensure you closed it:

Code: [ Select ]
 
.menu ul li:hover ul{
visibility:visible;
z-index:8;
}<----closing tag
 
  1.  
  2. .menu ul li:hover ul{
  3. visibility:visible;
  4. z-index:8;
  5. }<----closing tag
  6.  


Another thought....

Code: [ Select ]

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
z-index:3;
width:139px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul a:hover ul{
    visibility:visible;
    position:absolute;
}
.menu ul li:hover ul{
visibility:visible;
position:absolute;
z-index:3
}
    
  1. /* hide the sub level links */
  2. .menu ul ul {
  3. visibility:hidden;
  4. position:absolute;
  5. z-index:3;
  6. width:139px;
  7. height:0;
  8. }
  9. /* make the sub level visible on hover list or link */
  10. .menu ul a:hover ul{
  11.     visibility:visible;
  12.     position:absolute;
  13. }
  14. .menu ul li:hover ul{
  15. visibility:visible;
  16. position:absolute;
  17. z-index:3
  18. }
  19.     


I noticed the descendent selector might be interfering with the positioning since you declared only you .menu ul ul tag to be positioned absolute. Try That out and see if it helps.....hopefully someone else can give some better insight.
  • Raymond B
  • Newbie
  • Newbie
  • Raymond B
  • Posts: 6

Post 3+ Months Ago

Thanks once again.
I now tried:

.menu ul li:hover ul{
visibility:visible;
z-index: 3;
}

But nothing changed, I'll try the other suggestion.
  • Raymond B
  • Newbie
  • Newbie
  • Raymond B
  • Posts: 6

Post 3+ Months Ago

Ok. I now tried:

# /* hide the sub level links */
# .menu ul ul {
# visibility:hidden;
# position:absolute;
# z-index:3;
# width:139px;
# height:0;
# }
# /* make the sub level visible on hover list or link */
# .menu ul a:hover ul{
# visibility:visible;
# position:absolute;
# }
# .menu ul li:hover ul{
# visibility:visible;
# position:absolute;
# z-index:3
# }

But that didn't seem to help.
Could there be something else than the menu that f***k up the page?
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Hmmm....

Code: [ Select ]
 
       #masthead {
    width: 670px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;(Try overflow:visible;)
    padding-top: 15px;
    padding-bottom: 15px;
}
 
 
  1.  
  2.        #masthead {
  3.     width: 670px;
  4.     margin-right: auto;
  5.     margin-left: auto;
  6.     overflow: hidden;(Try overflow:visible;)
  7.     padding-top: 15px;
  8.     padding-bottom: 15px;
  9. }
  10.  
  11.  


I am not sure what else would help. I noticed lots of conditional statements around anchor points but I wouldn't think that would be causing the problem. Maybe it's something concerning the css of your content where your dog picture is...hopefully someone can help out on this one.

I have a feeling using the tables as a means of drop down menus might be a problem since the elements in question are within the masthead DIV which has it's overflow set to hidden. You might try using some absolutely positioned divs as your drop down elements - Fireworks is what I use for these types of menus and it always seems to come out fine, but it generates tables within an absolutely positioned DIV.
  • Raymond B
  • Newbie
  • Newbie
  • Raymond B
  • Posts: 6

Post 3+ Months Ago

Couldn't work the last one out, it only appeared like text on the page...
  • Raymond B
  • Newbie
  • Newbie
  • Raymond B
  • Posts: 6

Post 3+ Months Ago

#content {
position: relative;

should be content {
position: relative;

Without # first in the style css file

This sorted out the green field, has to work more with the menu..
  • Raymond B
  • Newbie
  • Newbie
  • Raymond B
  • Posts: 6

Post 3+ Months Ago

Travis Coats - THANK YOU!
It sorted out when I just found the right menu.. :)
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

I am glad to see it is working, but by you changing the #content to content, you have basically nullified the css selector for your content DIV. The bacckground color disappeared. However, if that change affected the way your tables displayed then I would look over your content css code and see what exactly was causing it. You can still get it to look colorful without losing your menu drop-downs. I would play with the css a little and keep testing the page until you find the culprit.:)

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 71 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.