Solved

image size problem in Chrome

Posted on 2014-09-17
12
348 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
 
LVL 82

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 21

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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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 82

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Joomla Website Malfunction 9 53
jQuery or CSS 9 38
Urgent Help with HTML CSS Positioning 9 22
Datepicker in PHP 9 21
Several part series to implement Internet Explorer 11 Enterprise Mode
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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…
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 …

746 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

10 Experts available now in Live!

Get 1:1 Help Now