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
Related
I'm currently faced with a weird inconsistency issue between my pages that are in Quirks mode and in non Quirks mode (i.e. IE9 Mode). In my CSS, I set one of the div tag to have width:100%, but the behavior of the same div tag is different when I put it on the two different pages. In non quirks mode, the div tag will span slightly longer than when the div tag is in the Quirks mode. I'm really having trouble trying to figure out why there is this inconsistency when the CSS is exactly the same. Anyone has a clue on this?
Before Quirks Mode
In CSS 1 and 2, the W3C dictated that width and height shall describe only the dimensions of the "content" of an element, disregarding its padding, border, and margin, which would be added expanding around those dimensions.
However, Internet Explorer, from versions 4 through 5.x, did things differently by also considering padding and border as part of width and `height:
The above illustration is from a great Wikipedia article on the subject.
Quirks Mode
Internet Explorer 6 fixed this bug by following the W3C's specification, but changing this behavior would break the appearance of many websites that depended on this bug, so Quirks Mode was introduced to emulate the behavior of older versions if an old page was suspected.
That's why Quirks Mode can make the same page look different even if the CSS is exactly the same, as you described: it causes elements to be sized differently in order to emulate old browsers. The inconsistency is intentional and expected. Microsoft has a page detailing the effects of Quirks Mode in Internet Explorer 9.
CSS3
With CSS3, the W3C introduced a property named box-sizing that allows specifying this behavior. This doesn't really relate to Quirks Mode (since Quirks Mode ignores CSS3), but I thought it might be worth mentioning since it's related to the box model.
What to do?
What I recommend is to avoid Quirks Mode. With the complications it entails and its non-standard behavior (both in that it does not conform to standard and also in that it means different things to different browsers), it might save you a lot of work to bring all your pages to be displayed under the same rules.
Here's a great bit more about the emulation of old versions of Internet Explorer and how to set it:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
It seems that a range of browsers (some device specific) don't support the background-color property. I've created an isolated test here:
http://jsfiddle.net/laustdeleuran/u7WBq/
So far, it seems that IE9 and IE10 doesn't adhere to this property, while Chrome, FF, Opera and Safari (all on PC) do. I'm updating the fiddle as I test.
In some test cases, I do see a quick flash of the red background color on IE10, before the video renders. But the video then renders with black over the red background color, which I'm guessing is probably due to the whole area being hardware accelerated.
This post on a Metro HTML5 app might be related as well as this post on background-color on videos on iPad.
I suggest wrapping your <video> element in a <div>. Do your styling on the outer div wrapper and set the width and height of the video element to inherit.
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)
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 am using a CSS style hover on some image links on my page.
When a user hovers over an image, it's background position changes, providing a highlight effect.
When I hover over the image in i.e.6 my page gets pushed down by 40px.
Why is this?
IE6 is a dog. Try:
a{zoom:1}
Which version of IE are you using? You should provide example code here. However, you may try to add following dirty css trick to the image which is hovered upon.
<style type="text/css">
img:hover
{
_margin-top:-40px;
}
</style>
Above style will only target IE, other browsers will ignore it.
Using hover with Internet Explorer can cause strange style issues.
you can avoid Browser Issues by using Conditional Comments.
Stackoverflow Question regarding browser characteristics
Stackoverflow Question regarding why Conditional Comments always will be needed
Edit:
Internet Explorer 6 support the CSS ":hover" attribute only on "a" elements
ReEdit:
Just for documentation...if you really want or have to use "hover".
Try this example:
Hover in Internet Explorer 6
But that is a really rough solution.
The ole' Box Model snafu! IE6 presents a different box model than what the W3C presents. The width of an IE6 Box (hope I get this right) is a total, including the padding and border. The W3C box model is width declared, period. The margin, padding, and border are in addition to the width of the object.
Examples of how the different box models work:
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug