I have no idea what is wrong. No links (Navigation or image links) work in Firefox but work perfect in IE and Chrome
http://graves-incorporated.com/test_sites/solera_new/index.html
Please help me out
-Dan
I don't have Firefox on my laptop unfortunately, but this problem is often due to another element sitting on top of the links. Usually this is caused by a layout element such as a table or div.
Do you have Firebug or similar installed? There are a few developer tools out there that give you a coloured outline of your elements as you select them. It might help you to identify if you have an element sitting on top the links.
Check element img#rightAligned, it over all your menu links.
try #layout_style_links {z-index:9999999;} or bigger then current your img#rightAligned z-index
You have a td with absolute positioning (!?) that seems to cover the entire page. Don't use absolute positioning on a td element, that's just wrong.
Or even better, don't use tables for layout at all. This isn't the 90s anymore.
This activated the links for me in FF:
td.imageholder {
position: absolute;
visibility: hidden;
z-index: 9999999;
}
Related
I'm making my personal website and encounter this problem.
On top left of the corner there's a button. It's supposed to be clickable but for some reason it is hidden behind an image (in a sense that you cannot interact with it but you can still see it). Using my debug skill, it leads me to a conclusion that the animated image (with -webkit-transform) (note you cannot test this on Firefox or other browser yet) is probably the reason that mess up the priority of elements.
I tried to fix it with z-index 100 or 10000 but still no work. Strangely, if I remove the elements .bg number 2,3,4, the button is clickable again.
If anyone can please tell me if it's a browser bug and if there's a workaround for it.
My website: http://iflyingangel.com/
position:fixed creates a new stacking context, so z-index isn't behaving as you would expect: http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Try this simple fix, let me know if it works for you:
.bg { pointer-events: none; }
Working on my portfolio and came into a problem with positioning - http://harden6615.com/portfolio/index.html - I have a fixed header nav that I used a jquery scroll on and works fine until it passes down through the work section of my site. The fixed header's depth is below the work images instead of above. Messing around with it, I realized it has something to do with position: relative, but do not know how to work around it.
I tried z-index: -1 to my work images, but this breaks the jquery hover I have on them. Anyone know of a solution to fixed positioning or if there is a solution?
I tried it in Google Chrome with the google developer tools and it works when i add this to #floatingbar:
position:fixed;
width:960px
z-index:10;
Set a higher index to your #floatingbar DIV, rather than lowering the portfolio squares.
#floatingbar {
z-index: 9999 !important;
}
Can you tell what I am doing wrong with the menu buttons? It works on IE8 and chrome but not in FF (9). I presume I've messed up something with positioning and z-index.
link to the site
Thanks.
Edit. It doesn't work on any FF and IE7.
Without downloading the site and playing with it myself, it's a bit tricky to work it out. But, I'd try adding position: relative; to div.content and then adjusting your img.menu(x) by setting left: NNNpx;.
Also, I don't understand why you use position:absolute; on the img tags when you're not using top or left attributes to set the position. Without a surrounding div with position:relative, the img tags will be referencing the absolute position of the entire window not the containing div.
Validate your html that list of errors. First thing noticed, id names must be unique to one element on a page. Also, make sure you are using FF or Chrome as your reference browser.
I'm having problems in ie7 with notification's that are styled using the p tag. I've used them before and they render fine in IE7, however, in my latest theme, they cut off the top border with no change to the code which is giving me a major headache trying to figure out.
Here's the problematic page, the notifications are at the bottom of the page.
Link
It's annoying because I've used the exact same html and css here in this theme
Link
Can anyone see what the problem with the buggy version is?
You have triggered some bug in IE7, but I'm not sure which one...
The difference between the pages is that you have specified a width for the notification elements in the page that works. If you specify a width for the elements in the other page, they work too.
Forcing layout seems to do the trick. You can read more here:
http://www.satzansatz.de/cssd/onhavinglayout.html
Try adding this:
<style>
.notification { zoom:1; }
</style>
I have been working on a site for a client and I am about to wrap it up.. but unfortunately IE6 is being a pain in the buttocks.
My main problems are on this page:
http://seaport.bythepixel.com/#storage
The list items dont have bullets
The spacing below the floated items are not being cleared correctly. I applied "clear:both" to my h2 tags and it is clearing.. but the spacing bellow the floated items doesnt seem right. If you compare any other browse with IE6 you will see the spacing issue I am speaking of.
maybe this is just an IEtester problem, but the background image I have applied to "#full" stops and starts randomly. You can see this on the storage page and the floor plans page. I am referring to the gray to white gradient that separates the left navigation column with the right content column.
Any help as always is greatly appreciated!
1) and 3) are clearly the hasLayout bugs. You need to give the elements in question a "layout". Start with giving the #full a position: relative; (validates) or a zoom: 1; (doesn't validate).
2) is likely caused by odd use of overflow: hidden; here and there. Try removing it all and see if that helps.
When you set an overflow (hidden if possible) to all floated elements there might already be a lot of problems solved.
maybe this is just an IEtester
problem, but the background image I
have applied to "#full" stops and
starts randomly.
I can confirm i see this on a machine with IE6 only installed.