Solved

image size problem in Chrome

Posted on 2014-09-17
12
388 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
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.

 
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

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

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.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

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