Solved

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

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

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.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…
Suggested Courses

631 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