I was very surprised when I found that a <div> with a size of - say - 200px becomes 220px wide if you give it 10px padding. It just makes no sense to me, the external size should not change when an internal setting does. It forces you to adjust the size every time you tweak the padding. Am I doing something wrong, or is there a reason f...
Hello, I have more of theoretic question: do you know why in the world, input type=submit acts on different box-model even if I tell it do display:block? (just a note: nothing I couldn't go around... It just surprised me, that this time, every browser seems to work the same way padding and border included in total width second note: i...
Does adding a box-shadow property to a div change it's dimension? For example, what is the correct width in compliant browsers for the div MyDiv? 202px (borders and width) 203px (borders width and horizontal shadow size) 207px (borders width and shadow blur) None of the above div.MyDiv { width:200px; border:1px solid #cccccc; -moz-...
I need to get height of an element that is within a div that is hidden. Right now I show the div, get the height, and hide the parent div. This seems a bit silly. Is there a better way? I'm using jQuery 1.4.2: $select.show(); optionHeight = $firstOption.height(); //we can only get height if its visible $select.hide(); ...
I am trying to show/hide a users twitter feed when the icon is clicked on. The issue is that my markup looks like this: <a href="#"><img src='images/twitter.png' id='twitterImg' /></a> <span id='twitter_msg'><? include('PHP/twitterJSON.php'); ?></span> And my jquery uses the slideToggle() $('#twitterImg').click(function() { $('#twitt...
Why do most developers consider the W3C box-model to be better than the box-model used by Internet Explorer? I know it's very frustrating developing pages that look the way you want them on Internet Explorer, but I find the W3C box-model to be counter-intuitive. For example, if margins, padding, and border were factored into the width,...
When I draw rectangles etc in ActionScript, using the Flash Player's drawing API (i. e. the Graphics class), is the border line of that shape drawn on the outside or the inside of the shape? I. e., which of the following diagrams correctly depicts a rectangle drawn a the border of a content area in a custom component? I looked at the ...
Let's say I would like to create a simple calculator. It consists of 3 fields. Text field to show result, field with checkboxes to select system and field with numbers. What kind of component should I use for each element ? How can I position elements in my window ? How can I position elements inside component (ie checkboxes) ? This is...
Is there any CSS filter can be applied to detect IE6's standard mode and quirk mode? The story is that a jQuery script is using $.support.boxModel to handle different rendering mode. But the CSS use the *width hack to define the dimension. But this hack can only filter whether the browser is IE but not the real rendering mode IE is on. ...
Hello all, Perhaps I am missing something, but I can't explain this from any IE bug I know of. Why in this example do the margins of the <p> and <hr> elements collapse as expected in standards compliant browsers (i.e. FF3, IE8, etc) but not in IE7 (including IE8 compatibility mode)? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit...
The CSS2 box model tells us that adjoining margins collapse. I find it quite annoying, being the source of many design bugs. I hope that by understanding the purpose of collapsing margins, I will understand when to use them and how to avoid them when they are not needed. What is the purpose of this feature? ...
I understand that the height of a box in CSS is the height of the contents, excluding the margin and padding, but why with this sample, if you uncomment the border: line in the containing div, does the background color of the div extend above the first paragraph while if you have no border it doesn't? <html> <head> <LINK REL=StyleSh...
It appears (at least in IE 8 and Firefox 3) that for <input> elements the width refers to the content, but for <select> elements the width refers to the content + borders. I am explicitly specifying the width in the CSS style. What's the deal? I would have thought that both are inline replaced elements and would behave identically. I...
I colour code of different form input fields, according to what their contents should be (mandatory/option/string/integer/float/etc) by using background an dborder. I would like to have a table showing a key to this, with an example of each. However, some of them are only distinguishable by their borders (e.g, red border on a field whic...