Solved

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

Posted on 2013-11-12
4
243 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

734 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