I used Firefox while working on the website.
Once completed, I opened the page in Chrome and noticed that the images are ignoring margins. Can anyone provide insight on why this is happening?
The CSS:
.serviceImages{
margin-left:23%;
max-width:212px;
height:249px;
}
I am using Bootstrap.
Related
I'm struggling with a Chrome-specific bug. Sometimes, when resizing the window, the border of a button will disappear. I'm sorry, I can't provide a minimal and reproducible example even though I tried to reproduce the bug on a separate document.
I'm hoping that's a known bug and that there is a fix for it. I've tried the following solutions already, without success:
Fix for Chrome not rendering 1px borders - MuffinMan
Bug? Chrome 62.0.3202.62 1px borders disappear at some scales. - Google Chrome Help
Configuration:
Chrome 92.0.4515.159
Yesterday, I noticed a large space on the right hand side of my WordPress website. I haven't made any CSS or HTML changes recently, so I'm not sure that styling is to blame. I've tried deactivating all of the plugins on the site, but that hasn't had any effect.
My website
It appears that the problem is limited to Chrome, specifically when looking at the site on a desktop. On Mobile and other browsers, website appears unaffected.
I can generally troubleshoot most issues like this with Chrome's Inspect tool, but this one has left me scratching my head.
Any help would be greatly appreciated.
The .s2 calss has a rule of float: right; removing the float rule should solve your issue. Try it in your browser as per the screenshot below.
I've used the fix in this question to resize images in one single line and it works perfectly, that is until you get into IE then IE just decides to ignore it completely. Does anyone have a fix?
Here's what I used:
How to get multiple images to auto resize and stay centered within a div
Here's the page I'm working on in Chrome:
Chrome Visual
Here's the page I'm working on in IE:
IE Visual
Thanks :)
I'm encountering a strange issue.
I have a facebook button at the bottom of a page. When clicked, the facebook "Comment/share" box pops up.
The behaviour is correct under FF and IE, but not in Chrome, where the box is cut by the bottom of the page. In other words, the page isn't resized as it is under FF and IE.
The page has a min-height and max-height, and the containers have an overflow:visible attribute as the facebook docs advises to avoid some display issues of the share iframe.
The curious thing is that the bug disappears by simply opening the developer tools, and checking/unchecking any CSS attributes of any parent element of the FB-button.
My guess is that the resize of the window isn't captured by Chrome when the button is clicked, but it is when using the developer tools.
I tried to explore other sources of the problem (max-height not working properly or a higher element having a overflow:hidden) but I found nothing conclusive.
Thank you for help.
You may have an issue if you're running a theme in Chrome. If you are, try resetting to the default theme:
options > personal stuff > themes > reset to default theme
Also, make sure you aren't zoomed out or in. Chrome gets a little funky with the zooming.
Assuming those aren't the issues, try putting the Share code in a div with a unique ID or class:
<div id="myFacebookContainer">Plugin HTML Here</div>
Your CSS would include something along the lines of this:
#myFacebookContainer span{
height:25px;
}
#myFacebookContainer iframe{
height:25px;
}
I hope one of those suggestions helps!
I am trying to create a landing page here: http://www.serik.me and it looks good in Chrome & Safari but is not working in Firefox. Specifically, the #bottom ID is getting pushed up into the #righthalf ID.
When I tried to validate the CSS I ran into a bunch of errors with the embedded flash. I also tried all sorts of positioning fixes (absolute, relative, floats etc) but nothing seems to work.
Is it a problem with my in the HTML?
Any idea what I am doing wrong? I want the three rounded tables at the bottom to be centered across the entire page below the content above it. Thanks in advance!
Add this to your stylesheet:
.bottom {clear:both}
That should be all you need. Sorry I can't explain why it's working in Chrome and not Firefox, but this should at least get you on your way. (Tested in FF4)
The bottom isn't really centered, but it looks the same in Chrome as in FF with that fix.
I didn't see any major problems with your html, although it didn't validate for alt attributes and the embed stuff. Those shouldn't be affecting your layout though.
Good luck, the site looks nice.