Responsive css woes

I am reluctantly converting some website to be responsive and have a few problems. This is one of the websites http://www.beautybyfelicity.co.uk/Eyes.php

On the page above there are a row of buttons below the main navigation and on a normal width screen they all work. When the screen width reduces the buttons start to drop down onto a new row. When they do this they stop working, the html is not changing so I assume it is something to do with the css?

There are other strange problem that I did not have before like row background colours not being displayed, the border around the content not working etc. but it would be helpful if somebody could point out what is causing the above problem first.

I have just noticed some of the pages are totally crap in Firefox:
Text outside the container:
Main links highlighted as selected when not
The buttons above when dropped down work on some pages but not others

IMHO removing float: left from #navcontainer_b would be a good start.

Hey there. Basically the buttons aren’t working because they are being covered up. You see the <div class="center"> below #navcontainer_b? That element is snagging on the above floated #navcontainer_b (not sure why it’s even floated). So you can either remove the float from #navcontainer_b or add clear:both; to the <div class="center"> element.

Thanks @RyanReese I have just found the problem as well!

I do not know what has happened to the Firefox view source as it used to display warnings and I miss that. I would have found the problem sooner if it was still working.

It is strange I was getting two different problems depending which browser I was using. I suppose this shows that different browsers interoperate things differently.

I moved 7 posts to a new topic: Identifying cause of McAfee Site Adviser warning

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.