I have following code in my WordPress website:
<div class="col-xs-12 col-md-5"><img class="img-fluid m-b-2" src="https://bwt.phpag.com/pimData/Images/hc/21/4245243.png"><img class="img-fluid m-b-2" src="http://localhost:8080/geha-printing/wp-content/themes/geha-printing-wordpress/images/geha-logo.png"></div>
My page: http://www.geha-printing.com/products/?Article_Number=4245243
First picture from external source (https) is not shown, second is shown without any problem. Do you have any idea why, or what can I do?
Issue is only in Microsoft Edge. IE, Firefor, Opera, GoogleChrome, Safari are OK.
This must be an issue with your browser. I just checked, and everything looks perfect in Edge, Chrome and Firefox.
You might try to clear cache or re-install Edge
Related
I am working on my website at the moment. And I realized, when looking at the mobile site that one of my images stretches/changes it's aspect ratio. Keep in mind this is only on iPhones. I had a few friends look at the site, and only the people with iPhones had the image stretched like this.
This is the page on the browser
This is the page on my iPhone 11
<div class="col d-flex d-md-flex d-xl-flex justify-content-center align-items-md-center">
<img class="d-xl-flex align-items-xl-center" src="assets/img/headshot.jpg" style="max-width: 90%;">
</div>
I originally had height: auto; in there as well, and when trying to solve this issue I found an older post saying that could be the issue. Sadly it did not resolve it.
I know I can easily solve this problem with media queries, but there must be a reason why this happens only on iPhone. I also only have in body styling on this image, you can see it on the browser preview on the inspector.
If you would like to look at it yourself. The Website URL is https://www.robinalexander.at/about-me
Try to remove the classes d-xl-flex align-items-xl-center from img and give it a display: block. The parent div will keep the img in place
I am having a strange issue while implying a transform effect at firebox browser.
Demo Link
"http://codepen.io/uzess/pen/zvOgmd"
Issue Explanation
1) The code works fine for chrome and safari, but the transform effect is not showing properly at Mozilla Firebox
2) The code also works fine for three images in all the browsers, but it didn't work properly at Firebox for four and more images.
Any help will be highly appreciated :)
Regards,
Biplab
It seems like when you add more than 3 items, there occurs errors ( irregularity ).
It is due to the css display properties.
Use
<div class="col-md-2" style="display: list-item">
or
<div class="mane1 contact" style="display: list-item">
Main thing here is display: list-item.
Please see fixed version here http://codepen.io/codersantosh/pen/yYLOvP
This is a weird "bug", I cant reproduce it always, but on the fiddle test case seems to fail more often. This is ONLY showing in chrome/windows, I couldn't reproduce it in IE at least and someone confirmed it doesn't happen in chrome/Linux.
The fiddle: http://jsfiddle.net/u25zr/2/
As you can see, text is not horinzontally aligned.
A weird thing: if you right-click on the text, click "inspector tools" and untick/tick again the font-family property, it magically fixes.
I attach an image so you can see what should happen:
Since I used a jsfiddle link, I need to add a code block also, so ill just add the markup, which is not related at all...
<div class="recipe">
<div class="recipe-top">
<div class="category">Text</div>
<h2>Test Recipe 1</h2>
<div class="date">12 Jan 2013</div>
</div>
</div>
EDIT: Moving the SVG font to the bottom so Chrome uses the woff instead of the svg fixes the problem. So it looks like the problem its in the SVG rendering.
Well, after some wasted hours this seems to be a (another) chrome bug.
https://code.google.com/p/chromium/issues/detail?id=95102
And i also found a solution here:
Chrome svg-Font-Rendering breaks Layout
Which is good, but doesnt validate CSS. Anyway nothing else we can do.
On this website: I've the following problem in Safari:
When clicking the 1st time on "KUNDEN" in the navigation, the complete header is invisible. In the dev console I saw, that the content of the header is already loaded - also in the source code.
But the content is not appearing until reloading the page or marking everything (STRG+A).
Does anybody have an idea, why this is happening? Could it be a Typo3 bug?
look at that screenshot:
I'm using Safari 6.0.5 on Mac 10.8.4.
You forgot to close a div tag.
Line 72:
<div style="clear:both" </div></header><div id="content">
should be:
<div style="clear:both"></div></header><div id="content">
See all W3C Validation errors:
http://validator.w3.org/check?uri=http%3A%2F%2F99-ideas.de%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0
The links on a site I'm working with are working in opera, chrome, and ie, but not in firefox or safari. www.dovetailrecords.com (click on "artists"). I've searched the forum and some other forums and tried some of the suggestions, but none seem to be working. It seems clear that I've got a css problem and some sort of problem with overlapping, but for the life of me, I can't figure it out.
I'm relatively new to this game, so I'm sure in the end the problem will be a simple one that I probably should have seen. In any case, any help is really really appreciated!!
Thanks,
Jack
The problem is that the <a> tags are not closed properly and not wrapping the <img> tags.
<a href="sads/bioback.html" target="back"</a><img src="sads/thesadslogo2.jpg" width="315" height="115" class="artimg2">
Close the <a and move the </a> to after the <img>. Like this:
<img src="sads/thesadslogo2.jpg" width="315" height="115" class="artimg2">
This doesn't make a lot of sense. Safari and Chrome use the same engine but you say this only works in Chrome so this is starting out weird. You aren't using a doctype and are in quirks mode. Add this to your very first line and see where we stand:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Also validate your html and css for those lists of errors.