My problem is that images on my page (iutm.pl) are displaying properly for instance in Firefox (then I assume there is nothing wrong with my code), but on WebKit or Blink browsers (such as Chrome or Opera) they doesn't.
Maybe it is Paperclip fault which I use to store images (there is need to keep relation between database and images) cause images stored explicitly in assets display properly.
Anyway, i have no idea why everything works in Gecko, but not with other engines.
Thanks in advance.
Bootstrap overrides width and height of your images. The simplest solution is to add width and height attributes to existing styles where you define border for images. This code does the trick.
.event_frame .frame-top .frame-img img {
width: 200px;
height: 200px;
border: solid;
border-color: #b2b2b2;
border-width: 1px;
}
Related
I'm using the new gatsby image plugin, and StaticImage. I have got a few images on the website, all works perfect normally beside one that only has the black background
(source of black, change the bg color attribute to red for example change the view to red)
The<picture> tag has 0X0 pixels
Another weird thing is the auto-created div container has a max-width of 47px, though the image is bigger than that (in all rest cases the max-width actually corresponds to the image dimensions)
relevant code
// js
<div className="advertising">
<StaticImage
className="advertising-img"
src="../images/advertising.png"
alt="advertising"
/>
//scss
.advertising {
position: relative;
margin: 123px 162px 150px 536px;
.advertising-img {
width: 260px;
height: 230px;
position: absolute;
left: -460px;
top: -15px;
}
page lookout (for understanding the CSS a little bit and show another picture that working..)
any help will be appreciated, thanks in advance! :)
edit
live site - https://catsh-landing-page.netlify.app/
The request to advertising image is blocked by the browser, as you can see by opening the dev tools.
In addition, the fact that is working on my mobile phone (screenshot below):
Makes me think that the image is blocked by the browser itself or by some extensions (AdBlock, etc) because of the name to avoid advertisers or publicity by default.
Try changing the name of the image or try disabling the extensions.
On one of our Joomla 2.5 websites the images here
http://rodoyo.com/flatnews/index.php/benefits/event-organiser-benefits
appear correctly in firefox but are thumbnails in Chrome
Why is that?
have checked that the image sizes are correct in the backend
The problem is happening in all WebKit based browsers I currently have at hand i.e. Chrome (Win/OSX/IOS) and Safari (Desktop & Mobile)
In your bootstrap.css you will notice this:
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Specifically the max-width: 100% — I think you will find that as it's set to 100% of the container (in this case the surrounding <td></td>) that the problem lies in the width of the <table> columns.
Given that max-width percentages are used to calculate the width from the size of the containing block, not the element they are attached to the WebKit browsers are doing the right thing and Firefox apparently isn't (anyone with better insight please chime in here).
You could fix this by specifying the width of the first <td> like this:
<td style="width:102px;">
Or a better approach would be to not use tables for layout, as that's not what they are meant for.
Read more about using here and here.
I am using this animated banner in my website.
Now I've copied the exact code from the tutorial but for some reason in my version the images seemed to be placed at the bottom of the table and cut off instead of as in the example. I've tried a number of possible solutions but either I've done them in the wrong place or they just don't work.
Normally I would add in the code but in this case (as you'll see from view page source) it's too long to post.
Any help will be appreciated
Well, I just opened Chrome Inspector changed few css properties and it worked. Here they are...
.photobanner
{
height: 232px;
width: 984px;
}
#container2
{
width: 748px;
overflow: hidden;
margin: 50px auto;
background: white;
}
I guess this would work.Tested in chrome..try your self with other browser and you should reduce margin of <h1> tag
I'm using the FB like box widget on my website. I noticed that bigger images published on FB are appearing distorted in the box.
I'm seeing that the css responsible for this is:
.uiScaledImageContainer img {
height: 100%;
min-height: 100%;
}
Is there a way I can force height: auto in my css?
Apparently anything I declare for this element in my sytlesheet is ignored, even using !important.
You can't edit the CSS in Facebook's iFrame.
I'm having the same issue but there is another bit of code that is overiding the "height:100%" with "height: auto" and i'm getting the same outcome. If I change the min-height to "auto" it seems to fix it.
The original code is:
.fan_box .uiStreamStory .uiStreamAttachments .photoRedesignAspect .img, .fan_box .uiStreamStory .uiStreamAttachments .photoRedesignCover .img, .fan_box .photoRedesign .img, .uiStreamStory .videoRedesign .uiVideoThumb img {
height: auto;
left: 0 !important;
width: 100%;
And
.uiScaledImageContainer img {
height: 100%; <!-- this is being overwritten -->
min-height: 100%;
position: relative;
Now we just need someone to update facebook's likebox.php.
Surprisingly, IE is the only browser that this isn't a problem. And for some reason firefox doesn't load the app altogether...
since nothing has changed until now here are some more details I found out to this problem:
It only appears to me on images that are in an album, not single
images that were uploaded in a post.
It appears to me in chrome browser and on iphone and android devices, not on firefox and
internet explorer.
Maybe that helps.
I need use a modal plugin and colorbox looks great.
How do I load it w/o the rounded borders?
Given my page size, the thick border taking too much space.
Anyway to hide it or make it thinner and hide the border if needed on some calls?
You can hide the borders in easy way:
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
and add class with border style if you want with this way :
.thin_border {
border: 10px solid blue;
border-radius: 10px;
margin: 10px;
box-shadow: 0 0 25px blue;
}
and then add it with jquery
$("#cboxContent").addClass("thin_border");
I think colorbox isn't actually using the property "border" to get that huge black border going around. It seems like its being incased in a 3 x 3 div which uses images to create that border. Im sure you could remove it but its going to require messing with the actual colorbox javascript. You could try messing with the CSS as well.
You consider looking into a diffrent plugin like lightbox2 or shadowbox? I personally use slimbox (nice little clone of lightbox). If you want to mess with the code go for it. Otherwise I would just pick a diffrent plugin.