...

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



jerry2
10-26-2006, 02:50 PM
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

_Aerospace_Eng_
10-26-2006, 02:59 PM
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.

ronaldb66
10-26-2006, 03:00 PM
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.

Heh... beaten again... :rolleyes:

jerry2
10-26-2006, 03:24 PM
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.

jerry2
10-26-2006, 03:28 PM
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 :D

gsnedders
10-26-2006, 05:43 PM
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 (http://www.ietf.org/rfc/rfc2119.txt) completely ignore the property, and use the last width that is understood.

zcorpan
10-26-2006, 10:36 PM
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).

mark87
10-27-2006, 12:08 AM
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);

gsnedders
10-27-2006, 12:30 AM
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 (http://en.wikipedia.org/wiki/Request_for_Comments) 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.

_Aerospace_Eng_
10-27-2006, 02:33 AM
Why are you using a span for a title? Why not an h1?

<h1 class="titlebox-smaller100percent">OBVESTILA</h1>
Now you won't need to specify the width:100% as that is default of block level elements.

jerry2
10-27-2006, 02:25 PM
Hm, why not using H1? Because I am a begginer :-( That's why. Thanx for the info.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum