/    Sign up×
Community /Pin to ProfileBookmark

Different element size with doctype

Copy linkTweet thisAlerts:
Oct 03.2007

Hi all!

I have 2 elements on a page (dropdown box and text box) like:
dropdown box<br>
text box

Now I want them to have same widths. So I wrote in css for both of them the same widths i.e. 200px. Without doctype both elements have same width but with doctype on page the text box is bigger for 4px!
I attached a photos.

Can somebody tell me why is that? And how can it be fixed.
Thanks.

Bosko

I forgot to mention that doctype is HTML 4.01 Transitional

[upl-file uuid=85f069d1-f64c-42d1-b8b6-587787f5e26c size=1kB]elem_doctype.gif[/upl-file]

[upl-file uuid=72375993-1fa0-4a77-844c-b89d3a9a720e size=1kB]elem_no_doctype.GIF[/upl-file]

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelOct 03.2007 — 
  • * {margin:0; padding:0;}


    • as your first CSS rule, might be the first step towards solving this one. This removes default margin & padding, from every element that you can name or create. 'Compliant browsers' tend to do this anyway, so this won't affect them. It mostly is for IE, but "zero" margin and "zero" padding is the respective same, -no matter what browser.

    You are probably getting some default margin or padding on one element. I sometimes add "border:0;" to the above 'universal selector', -just to make sure that there are NO border unless I specifically call for one. ?
    Copy linkTweet thisAlerts:
    @boskoauthorOct 03.2007 — Thanks for the tip but I already tried that. Doesn't work. Any other ideas?
    Copy linkTweet thisAlerts:
    @felgallOct 03.2007 — If they are separated by a <br> then they are presumably inline elements. Inline elements should not have a width defined for them as they should have their width defined be their content and the containing block element.

    Try validating your markup as you probably have invalid nesting.
    Copy linkTweet thisAlerts:
    @boskoauthorOct 04.2007 — Hi Felgall!

    Thanks but the code is so simple that there's nothing to validate here:
    [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type='text/css'>
    .elem{
    width: 300px;
    }
    </style>
    </head>
    <body>
    <select class="elem">
    <option>text...</option>
    </select>
    <br>
    <input type="text" class="elem">
    </body>
    </html>[/CODE]

    ?????

    What should I do??
    Copy linkTweet thisAlerts:
    @ray326Oct 04.2007 — [code=html]
    <body>
    <form action="#" method="get">
    <div>
    <select class="elem">
    <option>text...</option>
    </select>
    <br>
    <input type="text" class="elem">
    </div>
    </form>
    </body>[/code]    That will come closer to validating.
    Copy linkTweet thisAlerts:
    @boskoauthorOct 05.2007 — You're right. But still elements has different widths. I can make same widths with javascript but there must be a way to do this with css.
    Copy linkTweet thisAlerts:
    @CentauriOct 05.2007 — The width of a select box seems to include the default border width, whereas an input box follows the standard box model of excluding the borders from the set width. You should be able to use [COLOR="Blue"]select.elem[/COLOR] and [COLOR="Blue"]input.elem[/COLOR] to set different widths to take the borders into account.
    Copy linkTweet thisAlerts:
    @Jeff_MottOct 05.2007 — I submitted a [url=https://bugzilla.mozilla.org/show_bug.cgi?id=398716]bug report[/url], so hopefully it will be fixed in an upcoming release.
    Copy linkTweet thisAlerts:
    @Jeff_MottOct 05.2007 — There's an update to the bug report. They say this is on purpose. It's for compatibility reasons -- that is, for compatibility with what IE does. But you can tell Firefox to work differently:

    /* make selects use the W3C box model */
    select { -moz-box-sizing: content-box }

    /* -or- */

    /* make sure _everything_ uses the W3C box model */
    * { -moz-box-sizing: content-box }
    Copy linkTweet thisAlerts:
    @boskoauthorOct 05.2007 — So it's a bug on purpose?

    Ok, now it's ok with Firefox but I don't understand this 'compatibility' thing when it's doesn't work in IE, Opera, Safari... It's a 'compatibility' to not work?
    ×

    Success!

    Help @bosko spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.14,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...