Image sizes displaying differently in chrome and firefox

HTML & CSS
1

Hi,
I have images that are displaying at different sizes in Chrome and Firefox. Latest versions. On mac. Although it could well be others too.
It is a WordPress site.

I think if you look at the pages you will see what I mean, one layout looks reasonable the other crap. To enter the site you need to use a special address as it is behind a coming soon screen. Once in you can navigate to the pages.
start here http://cfquantum.com/cfq/$weat

Strange thing is on one page Chrome is wrong and Firefox is right (well what I want) http://cfquantum.com/cf-quantum/
On the other page it is the opposite Chrome is right, Firefox wrong. http://cfquantum.com/cf-indicator/

2

It’s not clear at all how to access the pages in question. :confused:

3

mgason,

I do not see any way to navigate the site.

Comparing the one page/image that IS visible, I do not see a difference between the way FF and Chrome render the image from either of the latter 2 links. I do see that the “floating” ad doesn’t scale down in FF. Adding a couple of properties to your local style sheet can fix that.

bootstrap.min.css (line 9)

img {
    border: 0 none;
    max-width: 100%;
    vertical-align: middle;
}

Add this to your local stylesheet. Increase specificity as needed so other images are not affected.

img {
    width:100%;     /* ADD This property to local stylesheet */
    max-width: 400px;  /* ADD This property to local stylesheet */
    height: auto;    /* ADD This property to local stylesheet */
}
4

They look the same for me as well.

Not a zoom or browser cache thing is it?

Got screen captures of what you’re seeing?

1 Like
5

Thanks for the responses. Apologies but the link to enter the site does not resolve properly when clicked from here.
This will get you into the site. Then the 2 pages are on the menu cf-indicator and cf-quantum

UPDATE, sorry its late. The URL to enter the site is simply http://cfquantum.com/ followed by the word sweat with the ‘s’ replaced by a dollar sign

6

I’m still not seeing any difference. Screen captures please

1 Like
7

Try removing the following:

Sorry! We found the following errors (633)

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fcfquantum.com%2Fcf-quantum%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Edit:
Different browsers guess at the incorrect CSS script and no doubt offer suggestions which account for the rendering discrepancies.

3 Likes
8

Thanks John, that is an overwhelming list.
The first enormous list appears to come from the coming soon plugin. I will take that up with them as it is a paid plugin. but if you login to the site it by passes that plugin. (also seems odd all those errors are in 2 bootstrap css files. I would have though bootstrap was solid.
Then a bunch of errors for the 2 pages which don’t really tell me where they come from. I will hunt.
What should I do about the huge warnings list. Most are -webkit and -moz, when I look some but not all of them up they seem legitimate. Again many if the errors seem to be coming from bootstrap css files? Isn’t bootstrap almost an industry standard now?

9

My knowledge of CSS is very limited and you really want a CSS Guru to help.

I believe it is best to be aware of any deviations from the recommended standards. I think the -webkit and -moz errors can be ignored and are to ensure old browser versions do not cause problems. The latest browsers do not require the -webkit and -moz declarations.

I think syntax is essential because it may effect more than the statement where the syntax is detected.

10

Thanks John. I actually turned the coming soon plugin off for a while. I still get a bunch of errors but at least they are ones I REALLY need to worry about for when the site goes live and that plugin is turned off.
Some I can see are just typos etc. I will be referring them to the theme developer. One would think a commercial theme developer might validate their product, but alas all too often not!

2 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.