Img shows in i.e., firefox --- but not in chrome

Hello CSS experts,

I noticed that on the calendar on this page Right and left Calendar arrows not showing on Chrome and Safari

They show fine on Firefox and IE

Is there a fix?  Perhaps an !important fix (not sure exactly what !important actually does, or if it is relevant in this case.

Is there a css fix or do I have to dig into the html, which I would rather not do.

Thanks

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Chris StanyonConnect With a Mentor Commented:
Actually, you can do this with CSS, using the nth-child selector:

.extcal_navbar td:nth-child(1) { width: 10%; text-align:left; }
.extcal_navbar td:nth-child(2) { width: 80%; }
.extcal_navbar td:nth-child(3) { width: 10%; text-align:right; }

Open in new window

0
 
Chris StanyonCommented:
The problem is that that the navigation row is made up of 3 TDs. The left and right hold the Arrows, and the middle one holds the Month name. In Chrome, the middle TD is set to a width of 98%, which leaves 1% for each of the Arrow cells (not enough room to show the images). The width attribute of a TD is not supported in HTML5, so Firefox (correctly) drops this. Chrome however, keeps it which is causing your problem. There doesn't seem to be a CSS fix for this as you can't identify the middle cell, so you may have to edit the HTML. If it's created with a plugin, then that might prove a little tricky..

<td width="98%" valign="middle" nowrap="nowrap" height="18" align="center" class="extcal_month_label">

Open in new window

If changing the HTML is too much hassle, another option is to again leverage jQuery to remove the width attribute:

jQuery('.extcal_month_label').removeAttr('width');

Open in new window

0
 
Rowby GorenAuthor Commented:
Fixed!  Thanks again!!!

What "exactly" is the nth-child 1 2 3???

Rowby
0
 
Chris StanyonCommented:
It basically selects the child based on position. So .extcal_navbar td:nth-child(1) selects the 1st TD child of .extcal_navbar, and .extcal_navbar td:nth-child(2) selects the 2nd TD child of .extcal_navbar.

If you have this:

<div id="myDiv">
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <p>Paragraph 3</p>
</div>

You can style the 2nd paragraph with:

#myDiv p:nth-child(2) { background-color: red; }

It's a CSS3 selection, so only CSS3 aware browsers will support it (which is all modern browsers)
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.