First off I would like to start by explaining my issue, it is as follows:
In all browsers except for Safari my website http://www.hamiltonseniorcity.com/dean/location-category/health-wellness/?passedpageid=28&box=1 appears normal and scales down appropriately on this page, in Safari and on my iPad the page distorts and does not scale down to smaller screens properly. Also it appears that the div that holds the left and right content areas expands to full screen. I believe the issue is caused by how Safari is rendering my divs table and table cell properties, I could be wrong. Does anyone have a solution for this issue or any suggestions?
I've tested the page on the iPad and I can reproduce your problem.
The issue is caused by this CSS rule:
.equal-columns > div {
display: table-row;
}
It's overwriting this code:
.equal-columns > div {
display: table-cell;
}
with the help of this the media query addressing the iPad:
#media screen and (max-width: 768px)
I think Safari gets into trouble, as there's no table cell within the table row now. If you fix this and set it to display: table-cell; no matter what resolution, it works again in Safari on the iPad. I guess it will also fix it on the Safari 5.1.7 on PC.
Also note that Safari is no longer developed for PC. 5.1.7 is the latest and last release from May 2012. All the new Webkit stuff from Apple will not be available on PC. Unfortunately. …
Related
I have this old website that needs to kinda work on mobile. The whole thing is built on tables. On mobile I need the columns to take up 100% of the screens width and essentially go on a new line. In chrome, IE, FireFox.. it just works. However on IOS and Safari it will not go on a new line and the rest of the columns just crunch into the corner (looks real bad)
CSS I have tried: td { display: block; width:100%; float: left; }
Anyone know why on safari only it will not go on a new line?
For anyone else stuck with this issue. Safari will override table styles (without notice) unless you add <!DOCTYPE html> to the top of the file
I've been brought in to help deal with a rendering issue with a website. Specifically, a flexbox element goes all wonky when displayed on tablets. Desktop testing has shown that the issue only crops up when the width and height of the page are set to, say, iPad or iPad Pro in chrome dev tools.
has a section called "Our Top Areas Of Practice". In a desktop or mobile view this section works beautifully but at 768x1024 this section is stuck in a column to the right of the viewport. Any ideas on what would make Flexbox go all wonky like this?
Add this css that would center the elements
#media (max-width:768px) {
.fusion-layout-column .fusion-column-content-centered {
display: inline-block;
}
.fusion-layout-column .fusion-column-content-centered .fusion-column-content {
text-align: center;
}
}
I'm having a CSS styling problem between Chrome/Safari and Firefox. In both Chrome and Safari, the hidden drop down is correctly positioned, but in Firefox, the subnav menu is off by a few pixels. After looking into the issue with the inspection tools of both browsers, it seems that Firefox is making the #main_nav_bar ul 10px wider than Chrome. The issue I'm having is that I'm not sure how to change this while not messing up the way the nav bar looks.
The link is http://www.tamidgroup.org.
Any suggestions on a fix are much appreciated.
Definitely add a doctype in there. You could also target those browsers with a media query.
Example for chrome and safari
#media screen and (-webkit-min-device-pixel-ratio:0){
//add your browser specific code here
}
That way you can target specific issues you see from one browser to the other.
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.
I realy need your help as this is driving me nuts.
On my website www.markett.nl I have 2 divs floating next to eachother.
All the browsers seem to load nicely, accapt when I view the website on the iPad the div is pushed downwards as if its wide is to large.
I have read it mayby has to do with some css padding issues, but I believe padding is not used on these div elements. I use firebug for insight in css but cant solve my problem.
I've uploaded 2 images so you can see what the probem is:
Image 1 as is loads on most browsers.
Image2 will show the problem.
You have #media queries in your CSS file for responsive layout. Find this in your CSS (around line 2640):
#media (max-width: 800px) {
/* Simplify the basic layout */
#main #content {
margin: 0 7.6%;
width: auto;
}
and remove the margin attribute from that rule. Also you don't have to test on iPad the result - you can simply change the width of your browser window.
You're using media queries to do different things depending on the width of the viewport.
If you load your site in any browser (I'm testing with Firefox, for example) and reduce the width of the window enough, the same problem happens.
To fix it, follow Zoltan Toth's instructions.