On this site, the header image displays fine in Chrome and Firefox, but not in Internet Explorer 8.
If I use IE8's developer tools, and disable the CSS rules specifying max-width: 100%, nothing changes.
Update
Turning on Compatibility Mode in IE8 reveals the logo.
However, the navigation menu is floating over the top of it:
Related
I have a html file along with CSS which gets properly loaded in Standalone FireFox browser and also in Web Preview control(Chromium ) for Chrome. Same script does not show up rightly in on GeckoWebBrowser. CSS is not taking effect.
Buttons which are to be stacked vertically are all displayed horizontally aligned.
Currently Ia m using Chromium for Chrome and GeckoFX for Firefox.
Please suggest any other latest web browser control which can be used for Firefox.
Please suggest what could be wrong.
Long time browser, first time caller....
I have recently re-written my website to use responsive images (which I am new to), but my s7 chrome seems to always load the "medium" sized image, which is the default src.
I have tried clearing cache and using incognito. It still appears that the medium image is loading, although the only way I'm deducing that is by selecting the image and loading in a new tab and reading the url. I'm not sure if this is accurate.
I've also tried changing the default src to the small image, but the medium is still loading.
However, on FF and Chrome desktop, even with developer tools set to mobile device, it seems to work correctly. Here's the relevant code:
<img
class="vertical"
src="../galleryphotos/doveinsnow_medium.jpg"
sizes=" (max-width: 675px) 271px,
(max-width: 1920px) 620px,
(min-width: 1921px) 1240px,
100vw"
srcset="../galleryphotos/doveinsnow_small.jpg 271w,
../galleryphotos/doveinsnow_medium.jpg 620w,
../galleryphotos/doveinsnow_large.jpg 1240w"
alt="Dove In Snow photograph"/>
Here is a link to the page with the above image, although every page on the site behaves the same way:
http://herschbachphotography.com/gallery_index/doveinsnow.html
What am I missing?
As far as I can see, everything is working well. I checked with Chrome Version 69.0.3497.100 (Official Build) (64-bit) and I can see all 3 versions of your image if I change the viewport from 675px to more than 1920px.
Here are 2 ways you could confirm which image is being shown.
If you place a different marker on each of the 3 images it will be easy to tell which one is being displayed.
Another way is to use Web Inspector (from within your browser, right click on your page then choose 'inspect')
Click the network tab, select img, then reload the page. You'll get full details of all the images on the page.
I hope this helps!
In the Chrome DevTools I can inspect an element to see its CSS and the related media query:
As you can see in the Styles panel, Chrome intelligently shows my current media with min-width: 1200px. However, Chrome is currently sucking lots of my computer's memory and therefore I have to switch back to Firefox, i.e. Firebug).
However, Firebug misses the media query part:
Is there any possibility/extension in Firefox that can show the CSS rules along with their current media queries?
Update 2019
To show current media queries open settings (F1 from dev tools) and check "Show Browser Styles" under the Inspector section.
The media query will be shown just to the right of the file name and line number.
Firebug doesn't have that feature implemented. It was requested in issue 5329, though Firebug is discontinued now, so it won't be implemented anymore.
Though the Rules side panel of the Firefox DevTools does show #media queries.
To get them displayed uncheck the option Show original sources within the options panel.
As [upcoming versions of Firebug will integrate into the DevTools][4], they will inherit this feature.
I've grabbed the exaple code for simplemodal straight off the simplemodal site. While the examples on that website work fine on ie8 from that website, after I copied and pasted everything into my own page (and copied over the relevant js files) the modal window opens at the bottom of the html page, not centred over the top of it. This only happens in ie8 - it works fine on Safari in both iOS6 and OSX. Any clues?
Most probably IE8 is opened in quirks/compatibility mode in your case. Use IE Developer Tools to manually control rendering mode. It is also possible to force IE to render in standard mode.
Is anyone noticing any websites being rendered differently on windows 7. I don't beleieve this is a browser it. example:
i have a site with drop down menu. on my computer running windows 7 the dropdowns are correct in IE8 but misaligned in IE7. I looked at the site on a co-workers computer and the dropdowns looked correct in IE7 but misaligned the other way on IE8.
I also think i have noticed differences with fonts. In ALL of my browsers the font is bold, but in co-workers computer the font is not bold.
Any insight would be awesome.
Which font are you using? Do the fonts exist in both PCs? If you check Developer Tools in IE8, do the fonts actually show as bold in the CSS, or do they only appear as bold in your PC?
Also, are the two browsers in strict mode, or quirks mode? Try running IE8 in compatibility mode, and check if it matches IE7.