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
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.
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%.
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 am trying to get this registration form to look consistent across all of the major browsers, or at least Firefox and Chrome.
http://www.lukaspleva.com/MoneyThink/new_mentor_application.html
It looks GREAT in Chrome, especially as far as the spacing between all of the input fields is concerned (it's equal). In Firefox, though, the spacing/padding is kind of all over the place.
Any idea how to fix this issue?
You already have each input/label in td-s, so either give td-s widths (if the input is 100px wide, make its td 120px wide), either increase the table's cellspacing property. However, using tables for layout is not recommended. Use CSS floats and padding/margins instead.
CSS width value = display width of inside?
or
CSS width value = display width of inside + CSS margin-left + CSS margin-right?
You have to make yourself familiar with the CSS Box Model. It explains where padding, margin and border as well as width work.
However do note that different browsers implement this differently: most notably, Internet Explorer has a box model bug (this is infamously present in IE6 -- I am not aware if this has been fixed in IE7 or IE8) that caused the infamous "quirks mode" CSS hack.
Briefly stated, Internet Explorer set their box model to include padding in computing the width, as opposed the official standard wherein width should only constitute the content.
As mentioned by others, the rule of thumb is the CSS box model. This works generally as advertised by browsers such as Opera, Firefox & Safari. Internet Explorer is your exception, where the "width" includes the margins, padding and borders.
There are some great tools out there that visually depict how the browser has rendered the content. For Firefox check out Firebug and for Internet Explorer check out the Developer Toolbar.
It not only depends from the browser and version you choose, but also from the doctype of your html document. Internet explorer in "quirks mode" is for example completely different from Internet explorer with doctype XHTML 1.0 Transitional.
Here you can see an animated diagram which "explodes" the box.
I think IE before version 6 incorrectly included borders and padding in width and height. See: Microsoft Admits IE 5 is Messed Up