1

I have following textbox in my first HTML page:

<input tabindex="4" type="text" class="search_textbox roundedCorners" id="search_query" name="search_query"/>

.roundedCorners{        
  border:1px solid black;
  padding-left: 5px;
  padding-right: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}
.search_textbox {
  position: absolute;
  width: 187px; 
  height: 21px;    
  left: 96px;
  top: 96px;    
  padding-right: 29px;
  padding-left: 48px;
}

When I see it in the browser, in the first page the "final" width of search_textbox is 187+48+29=264px. But when I insert the same thing in the second page and open it with the same browser the "final" width of search_textbox is only 187px.

I am testing it in Chrome and Mozilla. All of them show exactly the same picture.

Why? Am I doing something wrong or what?

UPDATE 1

I have noticed that in the second page Chrome is adding following style automatically, while in the first page it is not adding it:

input:not([type="image"]), textarea {                    user agent stylesheet
  -webkit-box-sizing: border-box;
}

I think this property is causing this error with the width, right? But I have searched in all my .css files and couldn't find that property at all. How Chrome is adding that property itself in one page and not adding in another page?

UPDATE 2

I have solved the problem. I have noticed that in the first page I had <!DOCTYPE html> statement but in the second one no, so once I have added that statement into the second page the problem has been solved. But still I just wonder why?

Bakhtiyor
  • 7,198
  • 15
  • 55
  • 77
  • 2
    Do both pages load the identical css? I'm just wondering if one of your pages loads extra CSS that has over-ridden one of your styles. – David Sep 11 '11 at 11:30
  • 1
    Can you show us an example of this? Otherwise we don't really have anything to go on to reproduce this result. – ClarkeyBoy Sep 11 '11 at 11:30
  • I have added updated section for additional info. Thnx – Bakhtiyor Sep 11 '11 at 11:34
  • Do you have a URL we can go to where we can see this in action? There must be a different between the two pages otherwise Chrome would be treating both the same. – ClarkeyBoy Sep 11 '11 at 11:37

1 Answers1

2

Seeing as you've fixed your problem, this answer is a little superfluous, but whatever :-)

You probably know this already, but the textareas width of 187px is the default for your browser, which leads us nicely on to my next paragraph.

The reason CSS styles aren't fetched and parsed by a document with no doctype is due to the fact that, technically, it's not a valid document. Once you add the doctype, problem solved.

Bojangles
  • 99,427
  • 50
  • 170
  • 208
  • I see, thanks, now I am reading http://stackoverflow.com/questions/414891/whats-up-doctype to understand more. – Bakhtiyor Sep 11 '11 at 11:45