but cant seem to get rid of it on live machine.

If we are talking about a button element – i.e , this is an inline element as correctly stated by Justin. An inline element cannot work with the ‘box model’ by definition.

If we are talking about taking a semantic approach, like a horizontal menu where the markup is made out of an ordered/unordered list where the list is set to display inline, then we already have a clear problem.
The list is set to inline. You can set the list items to display:block, but of course now the list is no longer displaying on a single horizontal line. TO complete this task you have to float the list elements.

Note however, that this is only required for the list items, or buttons to be styled as desired, borders, padding, line-height and so on in IE7 ONLY.

inline-block is not supported cross browser, and quite often will cause you more problems and even more markup. I think it is also uncertain whether it is going to be re-emerge into the CSS3 model.

gwi suggests using box-sizing. I am sure that gwi is aware but hasn’t perhaps explained perfectly, that what they are describing is a style with a vendor prefix. This means that it is a style that is not globally accepted or in a final document from W3C.

In this example box-size is a CSS3 style which is not currently supported, and is not intended for this sort of example. Not to say that it couldn’t be used in this way, I just wouldn’t.

I don’t actually think that the issue presented relates in any way to browser mechanics. Bottom line is you are looking at an inline level element not a block level element.

It’s all to do with the fact that you are trying to set a height. Don’t, just use padding to attain your height, because what you are not factoring is the line height of the element content.

1)I want to start a blog where I need a format of two columns. The layout should be such that comments can be entered in either column independent of each other down the entire page. I think this could be accomplished by tables and then entering the code for the comment section, but I do not know how to actually layout the code. I would like the comment format to be identical to how it is displayed on CSS Newbie with an dual option for ‘name’, email and as stated above, the comments sections. The columns should be separated by a 25px space. Of course there should be space on the outer sides of both columns.

2) As you can see on my current blog much is lacking. Can you tell me what font is good to use and recommended a font size? I have just learned HTML and CSS is so new to me! I do not understand it and cannot locate any clues to the font, font size, font color etc. when viewing a source code. I like a clean interface and the font type on this site is ideal for me. As well, do you have a tutorial and/or article primer, i.e. CSS 101 with regard to page formatting, styles of blogs, and all the simple basics for the newest newbie you ever saw!

Keep up the good work,
Anonymous

.button { box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; display: block; }

e.g. if you want “input type=’submit’ class=’button’” and “a class=’button’” to appear identically. This does not answer the quetsion “why” but it works around this issue.