DOCTYPE problem in html and px solves it !

You know sometimes when have to develop a complex website with sophisticated controls, you have to find the optimal solutions, the most friendly interface to add a proper vision to your website. So sometimes we have look for a strange solutions to satisfy our clients. This is one of the cases I faced!

I was working on dynamic control that will be always visible to the user as long as they scroll the window up and down, and that will be used in one of the newspaper websites. I found out the AjaxToolKit provides the easiest way to implement this control using AlwaysVisibleControlExtender control. AjaxToolKit solved many strange problems and gave my page a better look.

But suddenly i noticed that this control is not working at it should be until we add to the master page the following line:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

And we all know that when adding the DOCTYPE to a webpage, it will render the website in a different way, and validate the HTML and CSS used. I tried to google the problem, I read more about the DOCTYPE to see that it goes over the CSS file and in case of any unknown style it ignores it. For this reason, if we have any paddings or heights… used in the page they will be ignored and the page will look weird!!

I went over the style again and found something strange, if we put:

.Class

{

padding:5;

}

if fails, and the browser will ignore the padding, then everything will be mess.

but it you put

.Class

{

padding:5px;

}

If will work like magic, and everything goes fine.  So when specifying the pixel unit in the padding or the heights and widths. So these 2 small letters “px” solved the whole issue.

See how small things in this world can save our life 🙂

Advertisements

One thought on “DOCTYPE problem in html and px solves it !

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s