?
Solved

image size problem in Chrome

Posted on 2014-09-17
12
Medium Priority
?
453 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
[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
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 1336 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 1336 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 332 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 332 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 1336 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 1336 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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).
Suggested Courses

770 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