Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Backgrounf image not showing yet font weigth is

Posted on 2009-04-23
9
Medium Priority
?
332 Views
Last Modified: 2012-05-06
Hi Experts,

I;m having problems with my CSS  in regards that I am using code to assign the css class to a list item.

As you will see from the example site i have a hover class working that makes the link background go light yellow and the text bold. I am using the same class settings to set my active link class.

The problem is that the active link bolds the text but it doesn't change the background image.

My test site is at http://test.taylormadedesign.co.uk/home.aspx

If you hover over the top line of links (visitor info, what's on, etc) you will see the lighter yellow background. You will also notice that visitor info is bold, click on what's on and the bold will move t what's one, but the light yellow background doesn't get applied.

This doesn't appear to be browser specific as i have testing in ie7 and Firefox.

Hope this makes some sense, any questions or more information needed please ask.

Regards
Steve


0
Comment
Question by:fusioninternet
  • 4
  • 4
9 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24213980
When I move my mouse over the links in Top line.. the Text is turning bold and background image is changing.. Checking on Firefox..
please clarify where the problem lies?
0
 
LVL 1

Author Comment

by:fusioninternet
ID: 24213990
The problem is when you click on the link, the button you click on stays bold but the background image doesn't stay, yet the css contents are exactly the same
0
 
LVL 13

Expert Comment

by:myderrick
ID: 24215482
You are assigning the active tab wrong. Currently it is on Visitor info. Assign it to the active page.

.active_tab is the class.

MD
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 1

Author Comment

by:fusioninternet
ID: 24222907
I have deliberately made visitor info active for the home page.

The assigning of the class isn't causing me a problem, even without clciking onto another page you can see the problem.

The visitor info button you will notice is in bold it also should have a light yellow background as per when you hover over it as both entries for the hove and the active link are the same.


0
 
LVL 13

Expert Comment

by:myderrick
ID: 24223290
Well I cannot see what you are describing. I can see the light yellow when you hover. I have tried on FF and others.

See attached.

MD
active.jpg
hover.jpg
0
 
LVL 1

Author Comment

by:fusioninternet
ID: 24223455
The issue is not with the hover but the active state. The ligth yellow background should be shown on the active tab as well as the hovered tabs.

As you can see from your screen caps the tab for visitor info has bold text, yet the css class that is assigned at that point also has the light yellow background also, but the background isn't being shown.

Here are the css entries for both the hover and the active_tab

#mainnav ul a:hover {
      background-image: url(../../images/nav/rns_nav_bg_on.png);
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
}

.active_tab
{
      background-image: url(../../images/nav/rns_nav_bg_on.png);
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
}
0
 
LVL 13

Accepted Solution

by:
myderrick earned 2000 total points
ID: 24223792
Ok.


the active tab should read

#mainnav ul li a.active_tab {
background-image:url(../../images/nav/rns_nav_bg_on.png);
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
}


and apply it like this:

<li > 
            <a class="active_tab" id="ctl00_repMainNav_ctl00_LinkButton" href="javascript:__doPostBack('ctl00$repMainNav$ctl00$LinkButton','')">Visitors Info</a></li>

Good luck

MD
0
 
LVL 1

Author Closing Comment

by:fusioninternet
ID: 31573718
That's sorted it.

Thanks very much myderrick
0
 
LVL 13

Expert Comment

by:myderrick
ID: 24223916
Glad to be of help.

MD
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

581 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