Solved

image size problem in Chrome

Posted on 2014-09-17
12
375 Views
Last Modified: 2014-09-17
Another browser problem. =)

Using the latest version of Chrome: Version 37.0.2062.120 m

On this page, in Chrome, the images are very small:

http://www.hardrockteam.org/pages/Support-Office.cfm

In other browsers the images are correctly sized.

The HTML and CSS look OK to me. Any idea why Chrome is causing this problem?

Thank you as always for your advice.

Eric
0
Comment
Question by:Eric Bourland
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 334 total points
ID: 40328623
You have an image with no size inside a TD with no size, Chrome is doing what it thinks best
Remove the max-width on the image.
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40328652
Dear Gary, thank you for your note.

>>>You have an image with no size

I am a little confused by this. I think all of the images at
http://www.hardrockteam.org/pages/Support-Office.cfm

have a height and width specified? Am I missing something?

And, I don't see where max-width is specified?

Sorry for my confusion -- I think I am not seeing what you are seeing.

view-source:http://www.hardrockteam.org/pages/Support-Office.cfm

Thank you again for your help.

best from Eric
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 334 total points
ID: 40328680
kickstart-hyphen.css line 64
.grid img {
    height: auto;
    max-width: 100%;
}

That is the only sizing on the images and is not a real size - leaving the browser to implement it how it likes, FF & IE are just defaulting to the image size
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 83 total points
ID: 40328700
And Chrome is setting your first image to 11x8 and that <td> to 31x139.  You might want to set the width of that first <td> to something that will work.
0
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 83 total points
ID: 40328973
It appears that Chrome is totally ignoring the width and height attributes because of the max-width and height styles in css. I'm not really surprised that the "height: auto;" style is overriding the height attribute. But I am surprised that the "max-width: 100%;" style is overriding the width attribute. If you want the width and height attributes to be applied in Chrome, you'll need to remove those two styles from your css.
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40329264
Friends,

These are very helpful replies. I am going to work on this and get back to you later this evening. Thank you!

best from Eric
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40329353
OK. I tried this:

.grid img {
    height: auto;
    max-width: auto;
}

Open in new window


but no change.

The .grid img selector comes from the Kickstart framework at www.99lime.com ... so I wonder if other people have come across this problem.

Also, I wonder why no other images on the web site become tiny like this .... I assume because the images are inside a <td>.

Any other thoughts about this? I am trying a few other things. Thanks again for your help.

Eric
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 334 total points
ID: 40329358
Remove the max-width
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40329367
This fixed it:

.grid img {
    height: auto;
    max-width: none;
}

Open in new window


Gary -- I agree, it would be easy to remove it. But that would fork the code. I update the 99lime.com code now and then, because the developer changes it / updates it.

I added this fix:

.grid img {
    height: auto;
    max-width: none;
}

Open in new window


In an appended style sheet, which fixed it.

I will mention this situation to the developer at 99lime.com.

Does anyone here favor a particular HTML / CSS development framework? I have gotten used to 99lime.com -- I am curious about your thoughts.

Thanks very much for your help.

Eric
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 334 total points
ID: 40329368
max-width: none; is the same as removing it...(edit reread, you overrode it)

One other way to 'fix' it is to give the TD a width of 1%

Does anyone here favor a particular HTML / CSS development framework
Well don't use tables for layout (ahem). Apart from that Bootstrap is the most popular, crash course is here
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 40329370
Friends, thanks very much for your quick and expert help. As always, I learned a lot.

Wishing you all a great evening.

Peace,

Eric
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40329371
I don't do anything that requires me to use a framework so I don't.  But I mostly do PHP maintenance and coding.  And fixing my clients CSS and HTML.
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

813 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

15 Experts available now in Live!

Get 1:1 Help Now