We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Why aren't these 2 link litems displayed?

lapucca
lapucca asked
on
Medium Priority
243 Views
Last Modified: 2012-05-11
Hi, at this page if you look at the source, under division id=sidebar-nav, there are 2 <a link that are not displayed on.  Can someone tell how to fix this?  It seems like a CSS problem.  thanks.
http://keck.usc.edu/Education/Academic_Department_and_Divisions/Department_of_Pathology.aspx
I also noticed that you would need to view the source in IE's Developer tool.  In FF it doesn't show these 2 links at all.  I am attaccing a screen shot of this.  
html-soruce.jpg
Comment
Watch Question

Carlos VillegasFull Stack .NET Developer

Commented:
Hello, check your ccs file:
http://keck.usc.edu/style/KSOM/skin/css/_secondary_sidebar.css

Look for:
#content a.widget.red:hover {
    background-position: 0px -69px;
    color: #fff;
}

Open in new window


color: #fff; is the problem I think...
Carlos VillegasFull Stack .NET Developer

Commented:
Oh this too in the same css file:
#content a.widget.red {
    background-position: 0px 0px;
    color: #fff;
}

Open in new window


Try with color: black; or color: #000000;

Author

Commented:
Shouldn't that be #fffff?
Carlos VillegasFull Stack .NET Developer

Commented:
Inspection

Author

Commented:
Y, we want the text to be white.  I think we're missing the background red image.  can you tell from the html where is the background image file it's looking for?  thanks.
Carlos VillegasFull Stack .NET Developer

Commented:
Oh ok, I misunderstood the question then...

This image dont exist in your server...
http://keck.usc.edu/style/KSOM/skin/img/global/widget-small-bg.jpg
Carlos VillegasFull Stack .NET Developer

Commented:
Then the problem es here in your css file:

#content a.widget {
    position: relative;
    display:block;
    padding: 0;
    margin: 0 0 10px 10px;
    border: none;
    width: 205px;
    height: 69px;
    /* css3 rounded corner */
    -moz-border-radius: 0; /* FF1+ */
    -webkit-border-radius: 0; /* Saf3+, Chrome */
    border-radius: 0; /* Opera 10.5, IE 9 */
    background: url(/style/KSOM/skin/img/global/widget-small-bg.jpg) -410px 0px no-repeat;
    font-family: "Georgia", Palatino, Palatino Linotype, Times, Times New Roman, serif;
    font-size: 11px;
}

Author

Commented:
Y, thank you that is the problem, missing background image.  I have a copy of that file on my local pc but I don't see how that would work.  The copy if Have has 6 background image for this widget into one file.  I'm not a CSS person but that doesn't look right even to me.  Would that work if I just upload this file to the server?  thanks.
widget-small-bg.jpg
Full Stack .NET Developer
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
got it.  Thanks.
Carlos VillegasFull Stack .NET Developer

Commented:
Glad to help!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.