Header/Menu links inside container don't work in FF

  • Resolved pigeon7081

    (@pigeon7081)


    11 years, 11 months ago

    I’m having problems with the header links (navigation menu) on a site that I’m building. The header is made up of a container div with a div floated left with an image and a div floated right with the navigation inside it. When using Firefox and Chrome, none of the links work when they’re inside of the container (if I take them out of the container they work fine but then the layout is all screwed up). They do work in IE.

    The page that’s actually put together right now is: http://www.itrsonline.org/Jessica/FieldReport/professional/ (other pages haven’t been laid out completely yet).

    Note, this site has been built for FF, I haven’t fixed the other problems with IE or Chrome yet.

    W3C validates the header (there are other problems that I have yet to fix but I think they’re unrelated).

    Thanks in advance for any help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter pigeon7081

    (@pigeon7081)

    11 years, 11 months ago

    The link is wrong – here’s the right one: itrsonline.org/Jessica/FieldReport/professional/

    WPyogi

    (@wpyogi)

    11 years, 11 months ago

    Not sure if it’s the cause of the problem, but you have the whole section of styles in the body of the page (rather than in the head section) — starting on line 155.

    Validating the page finds that error first off. You have some other errors that you might want to check out also. Another illegal style section on line 499, a few unclosed p tags…

    Thread Starter pigeon7081

    (@pigeon7081)

    11 years, 11 months ago

    That first error is for the Google Search Bar. I removed it, no change to the link functionality though. I’m working on the other errors, but they were there before this problem started, so I don’t think they’re related.

    Incidentally, the other illegal style section is from the template I used (WordPress Default), seems strange…

    Any other ideas?

    WPyogi

    (@wpyogi)

    11 years, 11 months ago

    How did you create the menus? They don’t look anything like typical drop-down menus — no list structure at all.

    Perhaps look at the Menu info in the Codex?

    http://codex.wordpress.org/WordPress_Menu_User_Guide

    http://codex.wordpress.org/Navigation_Menus

    http://codex.wordpress.org/Appearance_Menus_Screen

    Thread Starter pigeon7081

    (@pigeon7081)

    11 years, 11 months ago

    They’re controlled mostly with CSS. The list structure is only under the submenu class. But as I went to look at them again, I noticed that the submenu containers aren’t inline with the buttons themselves – that might have something to do with it.

    This is a site that I originally started before v3.0 of WP, I’m just now getting to finishing it. I’ll check out those links to the Codex and see where it gets me.

    Thanks

    Thread Starter pigeon7081

    (@pigeon7081)

    11 years, 11 months ago

    Even if the internal WP menus will make better menus, I don’t think that solves my problem.

    That yellow box that’s in the top left corner is a link. I moved it into headerContainer just to see, and it stopped working. So I’m still stumped as to what that container is doing to my links.

    I’m thinking it has something to do with z-index or the floating, but I’ve tried troubleshooting those to no avail.

    Thread Starter pigeon7081

    (@pigeon7081)

    11 years, 11 months ago

    Just figured it out.

    I had absolute positioning and a z-index on the first parent container that has the header’s background. When I took that off and raised the z-index of the other divs so they’re above the baseline, it fixed the problem 🙂

    Thanks for the help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Header/Menu links inside container don't work in FF’ is closed to new replies.