Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why should one not use width:100%-6px?

    Hi there

    I've read many times I shouldn't use something like width: 100%-6px;

    But take this style:

    .titlebox-smaller100percent {
    font-size:100%;
    font-weight:bold;
    color:#F33A3A;
    width:100%-6px;
    padding: 3px;
    clip: auto;
    background-color: #FFFFFF;
    border:#F00000 1px solid;
    display: block;
    text-transform:uppercase;
    }

    Whenever I use padding and width 100% I get too long block :-( The only way I have found is by substracting padding from the 100% like I did in my example above.

    But why should I not use this and what shoudl I do to get 100% width properly.

    Let me say that this style works properly in IE 6, Opera 9, FF 1.5 and 2.0 and IE 7 final. I didn't test others like IS 5 because I don't have it.

    Yours

    Jerry

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you post the html? Chances are you are trying to make a div 100% width when it already is 100% width by default so no need to add width:100%. If possible set the width in pixels.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No math

    As far as I know, compliant browsers do not support arithmatic formulations like that and will therefore either ignore the whole property-value set, or stop after "100%", ignoring the "-6px". Try it without that and you should get a similar result.

    At any rate, it is not recommendable to use "width: 100%" anyway; I don't know what kind of element this rule applies to , but if it's block level by default (and is not positioned) or set to display: block like you did, width: auto should fill the available width anyway, which for block level elements is the default width setting.

    Edit: Heh... beaten again...
    Last edited by ronaldb66; 10-26-2006 at 02:13 PM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Jun 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, html code is simple:

    <span class="titlebox-smaller100percent">OBVESTILA</span>

    on body...

    html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, tr, fieldset {
    margin: 0;
    padding: 0;
    border: 0;

    }

    body {
    font-family: Tahoma, Helvetica, sans-serif;
    background-color:#FFFFFF;
    background-image:url(solnice/tile.gif);
    background-repeat:repeat-y;
    font-size: 100%;
    height:100%;
    }

    I know it is not right, but it works. Without it it is 6px wider block, with it it is correct size. I will try auto.

  • #5
    New Coder
    Join Date
    Jun 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, stupid myself. Seems the answer lies in using auto or even better, deleting the width altogether... I used it for another simmilar style that had 460px and I changed it to 100% but this is not good, yes...

    Thanx for clarification.

    PS - But 100%-6px works in all browsers I had a look at

  • #6
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by ronaldb66 View Post
    As far as I know, compliant browsers do not support arithmatic formulations like that and will therefore either ignore the whole property-value set, or stop after "100%", ignoring the "-6px". Try it without that and you should get a similar result.
    Any compliant browser MUST completely ignore the property, and use the last width that is understood.

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You get the same result if you don't specify a width at all, i.e. let it default to 'auto' (which is what happens anyway when you have an illegal value).

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Off topic but @ Error 404: What is that link about? It looks kind of interesting but I'm not too sure I understand!

    IE supports CSS Expressions (why it does this but does not adhere to the things it should do I don't know!) which is more what you're aiming for with the 100%-6px, but as said above; you shouldn't need it.

    width:expression(some javascript goes here);

  • #9
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by mark87 View Post
    Off topic but @ Error 404: What is that link about? It looks kind of interesting but I'm not too sure I understand!
    It's RFC 2119, which is referenced in (literally) thousands of specifications, including many from the W3C such as the HTML 4.01 specification. If you're implementing almost any web spec, you'll probably end up reading it.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why are you using a span for a title? Why not an h1?
    Code:
    <h1 class="titlebox-smaller100percent">OBVESTILA</h1>
    Now you won't need to specify the width:100% as that is default of block level elements.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Jun 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hm, why not using H1? Because I am a begginer :-( That's why. Thanx for the info.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •