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)
Related
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.
To start off with, I'm quite new to CSS still so I hope I haven't done anything horrendously stupid.
Basically, I have a design I'm doing built using Pure and the width is playing up in Google Chrome, while it works as intended in Firefox.
Here's a link to what I've done: http://egf.me/Rushd/rushdtest.html and screenshots:
Firefox: http://i.imgur.com/mn3GIbT.png
Chrome: http://i.imgur.com/44jLC6J.png
If you have a look at the page source, I haven't really done anything in my own CSS to change anything (I commented it all out as a check just to be sure) so I'm guessing I'm somehow using Pure wrong, since their own site renders fine on Chrome.
Also, inspecting the elements with Chrome's dev tools show that the div elements which should be next to each other have widths which add up to less than that of the parent. And nothing there seems to have buffers or padding. Also, if I manually reduce the widths to be very very slightly less, Chrome seems to magically fix everything.
The problem is that a space is rendered between your child divs.
The issue is neither margin nor padding - it's actually caused by the whitespace between your div tags in the HTML code!
Place the tags directly adjacent to eachother without any whitespace and your problem will be solved ;)
Example code
<!--whitespace in HTML = renders as a space between the divs-->
<div></div>
<div></div>
<!--no whitespace in HTML = renders edge to edge-->
<div></div><div><div>
I've got a development site (http://www.tentenstudios.com/clients/swls/our-surgeon) that works well in FF, Chrome, and IE8+ but the right-corner image breaks in IE7 and I can't seem to figure out what's causing the problem. The right-corner image is in a left-floated container DIV but there is also an absolutely-positioned graphic on top of it, not sure if that's got something to do with it or not.
Thanks for any help anyone can provide!
Per request, here is a JSFiddle with (I think) the relevant code: http://jsfiddle.net/HyVcG/
Also, to see this work you can open the link with IE and hit F12 to bring up the development console, then click Browser Mode: IE9 and change it to IE7.
The widths and interior margin for .eightcol and .fourcol add up to more than 100%. Some browsers may round decimal values differently than others.
65.4546% + 3.63636% + 30.9091% = 100.00006%
Here's a jsfiddle demo where you can see that the right column breaks in IE6/7 but is fine in all other browsers.
It's possible that this CSS grid wasn't built to support IE6/7. If all else fails, you could edit or override some of the widths or margin values in the CSS grid. But the changes would have to be reapplied everytime the CSS grid is upgraded. Not sure if there's an easier solution.
Edit: For comparison purposes, here's a version of the jsfiddle demo with integer percents that add up to exactly 100%.
Here is a snippet (if you are using Opera, check out this link).
As we can see In webkit browser we can see that background image respects padding while centering,
and in (at least Firefox and Opera) things go different.
So, the question is following - what behaviour is actually correct, and, far far more important, how can I unify layout?
UPD: don't waste your time trying to find appropriate rule in notorious css reset sets, since I've already tried )))
You're problem isn't the background-origin it's the box-sizing.
Looks like webkit's box-sizing is content-box and mozilla's is border-box making webkit's cell-height 242px (height + padding + border) and mozilla's 200px. And since your vertical background position is centered, it's creating extra vertical space. Simply set box-sizing:border-box for consistency between the two modern browsers.
Here's a new one: http://dabblet.com/gist/1621656
EDIT:
While the above fixes Chrome (webkit), it does not seem to fix Safari 5.1 (webkit). It appears that each browser has a buggy implementations of the box-sizing property for table-cells. In fact, if you even look at the Notes section of the MDN it says box-sizing isn't even applied in Mozilla.
Therefore, we must solve your height issue a different way. Good news, according to the CSS2.1 Spec we should be able to define the height we want from the TR. Here's a new that works in my Safari, Chrome and Firefox versions: http://dabblet.com/gist/1622122
I have a problem with our website at www.eat.vn. The site is fine in Firefox, Chrome, IE8 & IE9 and Safari, but in IE6 and IE7 we have a problem with a main design element.
Please see the attached image and you will understand that the stacking effect on the tabs is not what I wanted. I have tried to work around this bug, but can't manage to find a solution which does not mess up anything in the other browsers. Any help would be much appreciated!
I don't have IE6 or IE7 to hand to test this, so I'm shooting in the dark somewhat.
My guess is that the issue is related to the container element for the tabs (<div id="steps">). This has a style of float:left;, which I don't believe is necessary; it doesn't need to be floated since it doesn't have any other elements next to it.
However this float may be causing the IE6/7 bug; it looks as if this element has decided that it should only be as wide as one of the tabs inside it, which is then causing the tabs to wrap beneath each other.
I would therefore suggest taking the float:left away from this container element, and see if that helps.
(The tab elements inside it should still be floated, of course)