I have a site that is a work in progress ...
It uses Zurb's Foundation ...
There is a row with four images that are spread across evenly ... (Children, Counseling, Senior Services, & Support Groups)
When you resize the window, it stacks two by two in FF, and Safari on Mac. (haven't checked IE yet).
Anyway, the problem arises in Chrome. The four images don't stack neatly two by two as they do in other browsers.
I've gone over everything with a fine-toothed comb and still am baffled as to why it's doing this.
It also does this on my iPhone with the default browser (ie, Safari), and that also bothers me to no end because that's Safari, and yet it plays nicely on the desktop version).
Anyway, any ideas why it's not playing nicely in Chrome?
Thanks in advance for any ideas, suggestions, etc ...
Removed link as the problem is fixed.
EDIT 1
Forgot to mention that this uses Foundation's version 4.
I believe you have two issues:
The text above the images is not scaling properly. When I remove the <h3>'s it corrects most of the issues.
The images for "Children & Family" and "Seniors Services" have the width and height attributes set with in the <img /> tag. When I remove the the width and height it fixes the rest of the issues within Google Chrome.
I hope that helps.
Related
Edit: I found out that the issue is exclusive to iPhones. I tested with an android device and it worked fine when I tried viewing the page on two different iPhones it broke on both.
This issue is mobile related, since when I shrink my browser window to the size of a mobile screen, everything looks fine. However, when I view the site on my actual mobile device, the drop shadow "breaks" at seemingly random places. If I zoom in and out these breaks will change their locations.
The current effect being used is
filter: drop-shadow(20px 10px 4px #707070);
After further research into this, I found that the issue was not specific to my website. If you go onto the Mozilla MDN Docs on a recent iPhone device, you'll notice that it gives you the exact same effect when zoomed in. I'm going to post this as an issue on Github as suggested in the docs. Here is what my mobile phone showed when viewing the Firefox Logo drop shadow effect.
As suggested in a comment, changing to a simple box-shadow fixed the issue, although the edges are more hard-lined and slightly less faded (using the same parameters). It's not enough to break this specific project and I know there are CSS features available that enhance this, so all is good!
Morning all,
I need assistance with iPhone viewport issues. I have sifted through all kinds of posts, all from 8+ years ago. Some had a similar issue, some had the exact issue. Seems none actually found a fix.
I have developed a site and cannot for the life of me work out why only on iPhone the viewport is cutting off the left of the content. The site works as expected on android, macbook and desktop. I do not have access to an iPad. All completely responsive. When I say "cut-off" I mean you cannot scroll to the left at all.
I tested on an iPhone 8 and thought, ok, it is a bit old, probably just limited to older phones but alas, when I checked with friends on an iPhone X and 11 pro they both had the same issue. It is not an issue in landscape, only portrait.
Please see below screenshots:
Iphone issue where you can see that the content is shifted to the left
Galaxy S10 where you can see the content is centered as expected
As you can see from the above, it is like the phones are readying the viewport size correctly but they are shifting the content to the left. The banner at the top is set to width: 100%; and yet it does not stretch to the far right.
Also, bizarrely it seems that the nav is happily centered but all other content is not.
I am at a loss.
This must be a common issue with an easy fix that just isn't asked, I hope. I have built this using purely CSS and HTML so nothing fancy.
Entire code can be found here in my previously unanswered post which had a little less detail.
link to the site
For anyone in the future looking into this or a similar issue, it seems that iPhone's have challenges interpreting tags. This is not limited to Safari as I tested the code on Opera and firefox on an iPhone 8 and iPhone X and the same issue occured.
Not only did the CSS applied to the tag not take effect on the iPhone but it created some form of break in the page entirely.
tags are a little outdated as I understand however it added a nice aesthetic. Instead I created the same visual effect by entirely removing the tag and using bottom-border on the SVG.
I hope this helps someone in the future.
I currently have a WordPress theme online and appears to work fine but one of my clients noted that the blog page layout is broken in Google Chrome. The sidebar appears right underneath the page content. So I checked his website and my demo and it does indeed look broken. So I have spoken to another programmer and he says it's not broken and he uses the latest version of Chrome too. I have never encountered such an issue, it works for some but not for others.
EDIT: The issue has been fixed with thanks to Joseph Erickson.
Looks like it has to do with the width of the #sidebar. If you shrink it just a little bit, it'll fit properly.
Why is this happening? Who knows. These little pixel shifts with floats can be hard to track down. I would recommend not trying to fit everything so snug together and allow some wiggle room when putting two fixed-width floating elements inside the same element.
I am having alignment problems with a website I'm designing on IE6. It works great in all browsers (Firefox, Opera, Chrome, Safari, etc.) including IE7, IE8 and IE9. Basically, I troubleshooted and found that there is 25 extra pixels that are being added to either the main body of the page or the right body column of the page (these are divs #body_box or #right_box in the JS Fiddle below). They should be displayed inline but instead the #right_box overlaps and is displayed underneath #body_box and floating to the right.
The way I know this is that I expanded the div #Complete_Layout to 1025px (as opposed to the 1000px that it's set at now) and that's when it worked in IE6. I tried 1026px and 1024px and it didn't line up. I checked the dimensions of the background images which are accurate and I even attempted to change the width of the two divs (body_box and right_box) to percentages (75% and 25%) but it gave the same result. I'm out of ideas on what else to try.
http://jsfiddle.net/cRcXq/
It should be noted that I am doing this in PHP and the body_box and right_box sections are part of include files (don't know if that changes anything). I've added a comment on the HTML of the JSFiddle on where index.right.php begins. Thanks for the help.
This looks like the infamous "IE 6 box model bug," a well-known difference between IE 6 and other browsers from the time. Essentially, IE 6 counts the padding and the border as part of the width and height of an element, but any other browser from that time follows the same model as newer browsers.
Seriously, though, why are you designing a website for IE 6? It's ten years old and insecure, and it has less than 1% market share in the US. Microsoft has put up a website devoted to getting people off of IE 6. You wouldn't write code for Office 2000, or Mac OS 9, or PHP 3, so why are you developing code for a browser that was popular around the same time as those products?
I'm building a pretty heavy J.Query website and, as always, it looks great in the modern browsers - but I am coming across all types of alignment issues in IE 6 & 7. More severely in IE 6. I'm working on building a conditional IE Style sheet for those browsers and am wondering - is there a way to align all divs with CSS? Can I permanently position everything to be, and stay center throughout all browsers and window sizes?
Ultimately; any suggestions on fixing margin issues that occur in older IE's? Stuff that looks great in modern browsers and pushed off to the right and top in IE 6 & 7. ..If the conditional is the inevitable route, what's a good way to start defining the parameters within?
are we talking horizontally or vertically?
Horizontally, the "margin:0px auto" should always center the div horizontally along the screen, so long as the width is set. This works for all browsers IE6+ i believe.
There's a pretty good forum here : http://www.webmasterworld.com/forum83/8003.htm
It sounds to me like your problem is that you have poorly written CSS. Certainly, IE6 has plenty of issues, but if you're seeing problems in other modern browsers, then your problems are with your CSS, not standards conformance.
If I were you, i'd just ignore IE6. It's down to less than 5% of the market (some surveys say as little as 2%). Just let it die.
As RCNeil says, using margin centering works with everything. If it's not working, then you have something else causing your problem and we can't possibly guess without seeing your page.
NOTE: in older versions of IE, if your document is being rendered in quirks mode, then you will have problems with auto margin. Make sure your document renders in standards mode.