Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Nov 2006
    Posts
    5
    Member #
    14434
    http://mytechsupport.com/~johnp/test-width.html
    If you look at the source you will see all three things on this page
    are equidistant, however, when viewed in Firefox OR Internet Explorer,
    on a PC, it is adding about 5 pixels or 6 pixels. On a mac, it looks
    fine in FF, IE, and Safari. In Dreamweaver, it looks correct too.

    Now, they only become unequal when a doctype is declared. I have tried
    HTML, XHTML, Transitional, and Strict, all with the same effects. Once
    I reomve the Doctype, it looks fine in all broswers, on all platforms
    (PC and MAC).

    What is going on here? I am not a hard core CSS coder, so please be
    clear in any answer you may provide. I saw its a simple problem, but answer has eluded everyone I have asked so far !

    Here is a copy of the source code for convenince:

    Code:
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
     
      <html> 
      <body bgcolor="#99CCFF"> 
     
      <form> 
        <select style="width: 250px;"> 
           <option>Search By sCategory sdfsdfs daf sdf</option> 
         </select> 
      <br> 
         <input style="width: 250px;"> 
      </form> 
     
      <table border="1" style="width: 250px;"><tr><td> 
      This is here to show the correct width 
      </td><tr></table> 
     
      </body> 
      </html>

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    Your website will actually be fine without using !DOCTYPE.

    Using !DOCTYPE is a recommendation .
    It tries to force the browser to follow certain rules (which IE won't anyhow).

    Your site will not "validate", but if that's not an issue ...

    Here's some more information:
    http://www.ferrysoft.com/developmenthowtousedoctype.htm


  4. #3
    Senior Member
    Join Date
    Feb 2005
    Location
    Canada
    Posts
    435
    Member #
    8983
    FireFox, and other browsers like it operate in two different modes, when there is a doctype declared, and well yes it willn ot be compliant, there is no real reason to have it unless, it is important for a site to be compliant, and this it really does not have to be
    Thee Pyro Wolf

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    When you enter standards mode -- which is enabled by using a Doctype -- you enter the world of the CSS box model. The CSS box model specifies that, when you say [minicode]width: 250px;[/minicode], it excludes padding, margins, and borders. It turns out, both select boxes and input boxes have borders. The easiest way to fix the problem is to do a:
    Code:
    border: 2px inset white;
    width: 246px; /* 250px - 2px left - 2px right */
    That should work for both select and input boxes.

  6. #5
    Junior Member
    Join Date
    Nov 2006
    Posts
    5
    Member #
    14434
    In response to both previous responses, the doctype must be declared. For a few reasons. One of which is I am working on my clients sites, and they declare the doctype (big website which I have no say in).

    Also, not declaring a doctype can cause many other problems I have experienced/seen. Quoting Jeffrey Zeldman in "A List Apart," and many other sites: "As mentioned in previous ALA articles (and in other interesting places), DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win."

    Doctypes are funny things

  7. #6
    Junior Member
    Join Date
    Nov 2006
    Posts
    5
    Member #
    14434
    I thought I had tried this originallly, but I guess not. The alternative answer is this:

    border:0px;


    since it seems that text boxes by default add a small border.

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, yes, but nuking the border just makes it a white box in the middle of your page, which I assumed was something you wanted to avoid :-)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com