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.
Related
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.
Here is the site: http://lju-silenter.rhcloud.com . If you load the site on chrome and then click on the yellow section, then the section completely fills the entire screen, however in firefox, there appears to be some problem with margins. I've looked through firebug, I can't seem to find what is causing the issue. Here are two images just to clarify what's going on:
Chrome version:
Firefox version:
Any insight into the issue would be really helpful. Thanks!
By navigating to #three, the browser may scroll to bring that element into view, even if you have overflow:hidden. It appears IE and Firefox do this, while Chrome does not.
You should change the ID of the target element to something like id="box-three", then make sure you adjust selectors accordingly to add that prefix.
i have spent 3 days trying to figure out this issue and cannot come up with a viable solution.
ive even tried using javascript to load stylesheets tailored to each browser, but even that didnt work.
my problem is my horizontal menu (http://mydomainsample.com/fire_rebuild) is displaying perfectly fine i n chrome, but when i load in safari or firefox, the child menu is way out of position. oddly enough IE(9) is closer to being correct than the other two, but even thats not quite correct.
i have played with the stylesheet trying to figure it out, but when i get it right in fff, safari, or ie its screwed up in chrome.
i cant seem to find a solution that works in all browsers.
can someone please help me find a solution to this?
ive tried using a different menu but this one looks the best and any vertical drops ive used give me z-index problems between the menu and the slideshow that i cant seem to fix.
I do not think src is an optional attribute for link tags. Replace it with hrefs like the first two. When I look at the page in firefox, I do not see two files above being imported.
The order of the files in those link tags are very important as well.
href="stylesheets/reset.css"
href="stylesheets/coda-slider-2.0.css"
I do not know if you already have them but firefox and chrome has the firebug and web developer plugins that makes life easier.
jQuery has been updated to v1.7.2; I would update all your plugins & see if that helps.
First of all, remove all the javascript you applied to match for different browsers.
Then Remove the width:750px; and left: 548px; on style.css line 83 (ul#nav li:hover > ul)
Hope this will solve your problem
Also your page width is 1220px. Stick with the 960px width in order to compatible with small screen sizes.
I've been searching for answers, but unfortunately still havn't found one the right one..
I'm creating buttons using images and the button itself looks good in ALL browsers..
The thing is though that the text is placed differently (vertically) depending on which browser you are viewing it from. I've tried applying both line-height, padding/margin, top/bottom and several other attributes, but without success..
Isn't there a way (with CSS) to place the text correctly in all browsers? (Opera, Firefox, Chrome, Safari)... Don't worry about Internet Explorer - I'll apply some speciel CSS for this!
I've put up an example here to play around with: http://jsfiddle.net/GydjP/1/
button::-moz-focus-inner {border:0;padding:0;margin:0;}
and adding Line-height to the buttons is apparently the best solution I can find for my buttons so far.. It doesnt work in very old versions of Firefox + Chrome though
can someone look at this site for me I have a serious problem with the sub pages content div going over to the right bar this issue the site renders fine in all other browsers except safari firefox and iphone
www.firstavenuedesign.co.uk/demo
http://www.firstavenuedesign.co.uk/demo/offers.aspx
if u look at the above page in ie it will display fine and chrome any ideas anyone
It looks as though the problem you are having relates to your parent DIV 'collapsing' on your floated child elements.
The following article explains how to resolve this issue (in the Collapsing section) a long with other approaches for laying out floating elements:
http://www.alistapart.com/articles/css-floats-101/
Validate your html and css for those lists of significant errors. Then get this working in a modern browser before seeing how IE screws things up. The other browsers are showing what you wrote. IE makes things up as it goes along. Never, ever trust IE to do anything right.
Also, you have space before the doctype. Some versions of IE go into quirks mode in that situation.