So I designed this in CSS, the idea is to have a header and the rest as scrollable content.
(there's a link to a live demo at the bottom)
Alas, in Safari it is broken and looks like this:
As you can see, the height of the header is miscalculated, causing the green box to overflow.
I narrowed down the problem to a wrong calculation of flex-basis of the header. Or so I believe.
Live demo here: http://jsbin.com/zusavefoqu
Any idea how to fix it?
Thanks!
You may need to add vendor prefixes.
Currently, flexbox is supported by all major browsers, except IE 8 & 9.
Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.
For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
Also, it seems like there are two problems with your layout in Safari:
the header overflow, and
the vertical scrollbar on #more is missing.
For a list of common flex bugs and their workarounds see this page: Flexbugs.
Related
I am having a really annoying issue with a Bootstrap Menu in Safari on OSX / IOS devices.
If you have a look at this page:
Link Removed
In chrome or Firefox you will see how it should look, however if you look in Safari, the middle section of the menu isn't flush to the top. This causes issues when viewing on an iPad as the text overlaps. It should look like this:
How it should look on tablet http://www.nick-harper.co.uk/howitshouldlook.gif
However, it is like this:
How it looks http://www.nick-harper.co.uk/ipad.gif
I have tried various different things but can't seem to figure out what causes it specifically in Safari.
Are there any common issues that could cause it I am missing?
Summarizing comments under the question, the problem was float:left. It made height of a few elements to be equal 0. Also position:unset is invalid so position:absolute from another selector was in use.
Here's a Design I've started. Fairly simple.
It's a Container Div with 3 main Div's Header, Content, Footer.
Header, Content, Footer have background-images sliced from image.
It shows correctly in FF (all), Chrome (all), Android, Safari, IE >6 and <= 9 and IE 11
Only in "IE10" the footer background-image seems to disappear or something?
The header and the footer are pretty much identical in styling etc. and no
probs with header.
Validates, w3c.
I've tried everything I can think of...... every element attribute I can think of. Even re-saved
footer slice image in various formats.
The only way I can get to show is by putting IE into quirks mode. I don't want
to do that. emulating other IE modes doesn't work either until I get to quirks mode.
I must be missing something?
Here's an image of the issue...
http://inkspotpens.net/ie-prob-1.jpg
Also a live link to the R&D server
http://www.inkspotpens.net
Any suggestions?
I am working on a wordpress project. The issue is though the container where the content area and sidebar along with the top logo positions seems perfect in chrome with 30px margin-top.
But in firefox the margin seems to go down more, though the margin value is same. Any recommendation for FF compatibility with css would be great...
Hard to see without code, but you may have some problems with the two browsers' base CSS styles being different. You could try using a thing like normalize.css as a way of normalising these styles before your own stylesheet.
You could also use the web inspector/Firebug in firefox to see what surrounding elements have an effect on the positioning.
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
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.