CSS; For when you want to pull your hair out.

Heres one for the CSS gurus.

The Screens below are from two seperate computers. Both are running firefox 2.0.6 both are looking at exactly the same code and layout and CSS style sheet. The problem is the one on the right is showing the TEXTBOX elements of the .textfield class and the one on the right is not.

CSS Layout question

The style sheet called for this element is

“

.textfield{
background: transparent url(‘./images/textfield_bg.gif’) no-repeat;
background-color : #FFFFFF;
color : #343399;
border: none 0 #ffffff;
font-family : verdana,helvetica,arial;
font-size : 8pt;
font-weight: normal;
font: 1.1em;
height: 20px;
margin: 2px 4px 2px 4px;
padding: 2px 6px 4px 2px ;
width: 295px;
}
“

and the Element source looks like

<label for=town >Town</label>
	<br class=nobr >
	<input type=text class=textfield id=town name=town value='Maidstones'  >

So whats going on ?

Category: Commentary     Tagged:

Share This

3 Comments on “CSS; For when you want to pull your hair out.”

  1. And the layout is completely screwed for IE but then again im not designing for IE in any way , Firefox is pretty platform tolerant enough for me to design for it.

  2. “the one on the right is showing the TEXTBOX elements of the .textfield class and the one on the right is not.”

    hmmm…? 😉

    I would start by making sure you use NORMAL double-quotes around element values for a a start. Eg ”

    Never ever user ‘smart’ quotes. Ever. Nuff said (as you appear to have around ‘Maidstone’. Smart quotes are the dumbest things EVER. Very nasty code which doesn’t travel well.(Though it may be just from this blog post.)

    You have a space at the end of your padding line just before the end semicolon.

    border can simply be border:0px;
    In your sheet you’re saying it has no border, yet it is white.

    font:1.1em; on its own doesn’t do much, afaik.

    Open your FireFox Error Console and set to show ‘ALL’ – it may also provide more info as to what is burping the style.

    😉

    hth