h4 element not rendering at the correct position in firefox

on this web page http://109.109.245.194/nkarch/the-work.aspx I m using  h4 element inside list li element. Its rendering fine in Chrome but not in firefox or IE. Any ideas what changes I need to make in the CSS?
mmalik15Asked:
Who is Participating?
 
s8webConnect With a Mentor Commented:
First of all, you need a doctype.

Make this the first line:

<!DOCTYPE html>

Open in new window

0
 
s8webCommented:
You really need to validate the page and correct the reported errors before you troubleshoot further. Otherwise you're working with a house of cards.

http://validator.w3.org/check?uri=http%3A%2F%2F109.109.245.194%2Fnkarch%2Fthe-work.aspx&charset=%28detect+automatically%29&doctype=Inline&group=0

Some of your scripts aren't loading (404).

Make sure you add the doctype before you validate.
0
 
s8webCommented:
You probably don't need the extra containers inside your li's.

In your attached classes. is
all HealthAndFitness

Open in new window

supposed to be two classes, all and HealthAndFitness? That's how the parser will see that.
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
s8webCommented:
Try commenting out your js and see if your h4's show up if it's not the missing doctype.
0
 
LZ1Connect With a Mentor Commented:
I would personally try giving the #ProjectsGrid ul li a position:relative.

Then set the h4 to position:absolute; top:0;left:0; and see where that puts you.
Also remove the div container. All you really need is the h4.
0
 
mmalik15Author Commented:
Thanks for all the comments.

The issue is mainly sorted except in firefox when I hover over the heading h4 inside ul li, its not working but working fine in IE and Chrome.
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

I tested in Firefox and IE and seems to be working fine!

Do i need to do anything else?
0
 
mmalik15Author Commented:
thanks for the comment again roopeshreddy.

the page has moved here http://nkarch.lifeintheuktest.co/the-work.aspx

all i m looking is when we hover over the list li the h4 element should have red background. At the moment the background is changing only when we hover over h4 not the whole li element
0
 
Roopesh ReddyConnect With a Mentor IT AnalystCommented:
Hi,

i tried the same in Firefox 17.0.1, and here is the result!

Firefox
Check the screenshot and let me know, whether is the desired result?
0
 
mmalik15Author Commented:
thanks for the comment again but what i m asking is if we hover over the image the h4 element should turn red. At the moment when we hover over h4 element, only then it is turning red.
0
 
mmalik15Author Commented:
the following css has got it working

#ProjectsGrid ul li:hover h4
{
      cursor: pointer;
      opacity: 1; /* css standard */
      filter: alpha(opacity=100);
      background-color:#760602 !important;
      
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.