I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox.
I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though.
I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns.
Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.
Chrome renders:
Safari renders:
I very much like the Chrome way of rendering the columns, so I was wondering if there is a way to force Safari to render the site this way, possibly without altering the html layout at all.
notes: Firefox renders the same as Chrome and needs no fixing. I'm not developing for IE, so I don't know how that renders.
I had the same issue but min-height didn't work. I had the column-count set on a Bootstrap .col-md-12 container and this was the issue for me.
I added a child div with the class required and it worked perfectly
add a min-height to <ul> seems to fix the issue
nav ul { ... min-height:50px; } /* < add */
tested on Safari 5.1.7 (7534.57.2) for PC
bug is referenced here too: http://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1
I had a similar problem with the columns content showing up on Safari with a height of 1px. I added "min-height: 100%" to the element and all looks good. I also have "height: 100%" on the body/html and containing elements, assuming this is how I got it to work properly.
Related
The full scope of my specific issue is likely too deep to include in a question here. Instead I am looking for clues.
The nature of the problem has to do with overflow: hidden. In Internet Explorer 11 it is working sometimes and at other times not. I have an element that is larger than the body and I have set the body element to overflow: hidden. Sometimes the page loads and works exactly as expected, but in about 60% of my tests the browser just ignores this property. If I look in the inspector the property and value are present, yet are not having any affect on the rendering of the page.
I have tried using a container element instead of the body, but the same thing happens. opening the inspector panel while scrolled to the top of the page will sometimes fix the issue. Any ideas?
There is a lot going on with this layout which is why there is no fiddle. Everything else works fine in IE. There are no errors in any browser and the layout works perfectly in all other browsers I have tested (Chrome, Safari, Firefox, Opera and IE 11).
Are you using a display properly on that div or element? If you have display: inline then try to change to display:block.
I am not sure why this worked but I just positioned the body fixed. That seems to work.
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.
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)
The anchor tag and div apply the margin-top property to the child elements just fine, however the button can not.
I have tested in latest versions of safari, chrome and firefox.
Firefox has no issues provided the -moz-focus-inner property is applied, i'm wondering if there may be a similar issue with webkit?
http://jsfiddle.net/Ym3BL/1/
Does anyone know how to make the three items style the same/ or how to allow for margin-top in webkit browsers?
Many Thanks
-Jai
So I figured it out and feel like a numpty.
The key property is -webkit-margin-top-collapse:separate; applied to the child element, this doesn't quite make sense to me still, as the parent element has no margin or padding so therefore why should i need to separate the margins?
however it works so i'm not complaining
http://jsfiddle.net/Ym3BL/2/
Obviously for Chrome, Firefox, and Safari (which use CSS 3) you would do
margin-left:auto;
margin-right:auto;
But how can I perfectly center in IE8?
This code already works in IE8, IE7 and IE6, and people have been using them to center things for a good long while now. Have you tried your code before assuming that the margin properties are new to CSS3 (when in actual fact they have been around since CSS1) or that just because something is part of CSS3 automatically means IE8 and older won't recognize it?
If that code doesn't work for you in IE, your page is probably being displayed in quirks mode.