Solved

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

Posted on 2013-11-12
4
240 Views
Last Modified: 2013-11-12
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
0
Comment
Question by:Rowby Goren
  • 3
4 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39641507
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39641518
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
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39641572
Fixed!  Thanks again!!!

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

Rowby
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39641598
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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).

862 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now