CHRIS can you explain

[cybershot]

I just checked out your recent article on the login pages. I am working right now to figure out how to align form elements with css. Can you explain why in your css you used display:block; on the input tag and how that affects the layout?

Thanks

[brandon]

I know I’m not Chris, but here goes. The input tag is an inline element. Most HTML elements can be divided into block and inline elements (list is another type IIRC). Block level elements (like div, p, h1, h2, h3…) typically have an intrinsic <br/> after them. IOW there’s 1 per line. Another characteristic of block level elements is being able to size and position them in the layout. In his example, he tells the browser to render his input tags as block elements so he can assign a width to it.

[Spunkmeyer]

As far as I know (at least I did this on my site), the actual <input> tag can have a class assigned to it like everything else. For example, it could have a #{position:absolute; left20px; width:200px;} or something on the tag without having "display:block" assigned to it. Brandon is absolutely right about the use of display:block; though.

However, I used the code and recreated the page at http://www.thedailyspunkmeyer.com/testingdirectory/login.html <i>without</i> the display:block, and in FF 3, Ie7, Opera and the latest version of Safari, there wasn’t a change at all. (*note, I also added "border: 1px solid #000;" so I could actually see the changes)

I did notice a slight change I noticed was in IE6. When the display:block was applied, it moved the login button button up slightly. When it was taken off, it moved down.

I’m guess it’s just a spacing issue of some kind. I have no idea, that’s what it looks like to me. (see below) Maybe Chris can shed some more light on it.
IE 6 TEST
[img]http://www.thedailyspunkmeyer.com/testingdirectory/ie6test.jpg[/img]

[Author]

Posts