The most basic mistake in CSS
The most basic mistake in CSS
Well, we use CSS, no matter how complex the style sheet becomes, we tend to do some very basic mistakes that might result into catastrophic results. Today I will cover a very simple mistake. Let us assume this piece of style which seems correct
|
#pa { Background: red; font-family: Arial,georgia,sans-serif; font-weight: bolder; font-style: normal; text-decoration: underline; font-variant: ; font-size: 0px; width:500px; height:300px overflow: auto; } |
It seems like a perfect style sheet, but it will not actually have a scroll bar in it. No matter how much text is entered. So where is the problem, the problems exists in the line
height:300px
it has no terminator at the end of the property. The property overflow is treated as being related to height some how. But this is wrong.
So the correct code is
|
#pa { Background: red; font-family: Arial,georgia,sans-serif; font-weight: bolder; font-style: normal; text-decoration: underline; font-variant: ; font-size: 0px; width:500px; height:300px; overflow: auto; } |
Now on entering excess text we see there is a scroll bar. Regardless of the number of property, you should always put the terminator (i.e. ; ) at the end of each property so when you decide to add a property later you don’t get to face any problems. It is a basic problem that we often face.
