Solved

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

Posted on 2013-11-12
4
242 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

830 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