Solved

h4 element not rendering at the correct position in firefox

Posted on 2013-01-05
12
358 Views
Last Modified: 2013-01-11
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?
0
Comment
Question by:mmalik15
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
  • +2
12 Comments
 
LVL 16

Accepted Solution

by:
s8web earned 150 total points
ID: 38748412
First of all, you need a doctype.

Make this the first line:

<!DOCTYPE html>

Open in new window

0
 
LVL 16

Expert Comment

by:s8web
ID: 38748415
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
 
LVL 16

Expert Comment

by:s8web
ID: 38748421
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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 16

Expert Comment

by:s8web
ID: 38748424
Try commenting out your js and see if your h4's show up if it's not the missing doctype.
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 200 total points
ID: 38749462
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
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 38750083
0
 

Author Comment

by:mmalik15
ID: 38751580
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
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38767454
Hi,

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

Do i need to do anything else?
0
 

Author Comment

by:mmalik15
ID: 38767479
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
 
LVL 23

Assisted Solution

by:Roopesh Reddy
Roopesh Reddy earned 150 total points
ID: 38767663
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
 

Author Comment

by:mmalik15
ID: 38767686
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
 

Author Comment

by:mmalik15
ID: 38767707
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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question