image size problem in Chrome

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
LVL 3
Eric BourlandAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eric BourlandAuthor Commented:
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
GaryCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Dave BaldwinFixer of ProblemsCommented:
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
Kim WalkerWeb Programmer/TechnicianCommented:
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
Eric BourlandAuthor Commented:
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
Eric BourlandAuthor Commented:
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
GaryCommented:
Remove the max-width
0
Eric BourlandAuthor Commented:
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
GaryCommented:
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
Eric BourlandAuthor Commented:
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
Dave BaldwinFixer of ProblemsCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.