border & percentage

angiras

12-24-2003, 05:00 PM

it seems that Internet explorer and Mozilla doesn't recognize

border:1% solid #F6F7EB;

it works fine for Opera

do you know why ?

me'

12-24-2003, 07:00 PM

Are you sure? It seems fine based on the CSS spec, although you have to be careful with percentages. Is it a vertical, horizontal or both borders that aren't recognised?

angiras

12-24-2003, 07:31 PM

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" style="width:100%;height:100%;padding:0px;border:0px;margin:0px;">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>titre</title>
</head>
<body style="width:100%;height:100%;padding:0px;border:0px;margin:0px;background-color:ivory;">
<form id="MainForm" style="width:100%;height:100%;">
<div style="width:200px;height:100px;border:2% outset #990000;overflow:auto;text-align:center;padding:2%;background-color:tan;position:absolute;top:10%;left:15%;"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>
</form>
</body>
</html>

this works perfectly for Opera , but not at all for Mozilla or IE .. the border of course

brothercake

12-28-2003, 11:59 PM

Maybe one or two percent is computing to less than one pixel, although clearly it shouldn't. What happens if you try 10% - does that work?

angiras

12-29-2003, 07:22 AM

I have looked in the w3c >>> CSS2
and there is NO percentage for borders !!

:-(((

.....yes I have tried with border:20%;

then it seems totally uncoherent if you want a box total width = 100% with a border !

me'

12-29-2003, 10:09 AM

Really? I checked, and:<length>
The border's thickness has an explicit value. Explicit border widths cannot be negative.[quote source (http://www.w3.org/TR/REC-CSS2/box.html#value-def-border-width)]

Doesn't say anything about percentages.

angiras

12-29-2003, 10:17 AM

they say nothing because it doesn't work . look for padding and you will see >>> length or percentage

I hope CSS3 will accept it

me'

12-29-2003, 10:19 AM

Yeah, it says you can have a length or a percentage for padding, meaning you can have a percentage.

angiras

12-29-2003, 10:27 AM

yes and you cannot for borders :-))

me'

12-29-2003, 10:46 AM

Okay, I'm with you now!

Wierd.

Mhtml

12-29-2003, 01:59 PM

I'm pretty sure that it's not CSS2 at least last I read the CSS2 data I noticed it didn't say anything about it like usual (as you stated).. I never use variable width borders myself but I don't see why they did not include it in the standard.

Perhaps liorean will appear here shortly, he seems to know reasons behind most things..I'd like to know where he gets all his infos from though :confused:.

angiras

12-29-2003, 02:10 PM

it can be so practicle to write

border:1% solid red;
padding :0.1%;
margin:1%;
width:80%;

if just the border doesn't want all fall down

Mhtml

12-29-2003, 02:17 PM

I hardly ever do anything beyond;

border: solid 1px #2266AC /* random color ;) */

or

boder: none; /* :p */

I don't really see the use of a variable border width. Sure I could come up with a situation but fixed width is far more practical and theoretically would speed up load time (although that'd have to be one slow computer/browser combo!) ...

angiras

12-29-2003, 02:34 PM

then how do you fix a total box width = 100% , with a border ?

in that way it works >>>

border-width:1% solid red;
padding :1%;
margin:1%;
width:97%;

me'

12-29-2003, 02:35 PM

Don't set a width. The UA will calculate the correct width.

The float model screws this up though.

Mhtml

12-29-2003, 04:09 PM

>> The float model screws this up though.
lol, unfortunately true... perhaps a few browser generations into the future all browsers will work on a uniform float/box model and all be perfect.

me'

12-29-2003, 04:11 PM

I wasn't talking about browser support. By default, block level elements stretch the entire width of their parents, sometimes useful. With the float model, they're 'shrink wrapped' to only take up as much width as necessary.

angiras

12-29-2003, 04:13 PM

for me' >>> I don't want a width : auto , I want 100% full screen all together box-width + padding + margin + border , then I have not to let any calculation free...

yes in the future :-)))

me'

12-29-2003, 04:15 PM

Originally posted by angiras
for me' >>> I don't want a width : auto , I want 100% full screen all together box-width + padding + margin + border , then I have not to let any calculation free... Sure. Get rid of padding and margin on body and html, then don't set a width on your element. (If it's not block you need to specify this as well). Set all the padding, margins etc. you want. There's no problem in letting UAs do calculations for you ;)

brothercake

12-29-2003, 04:50 PM

Or you could put another element inside the main container, and put the border on that, then you won't get box-model discrepancies.

angiras

12-29-2003, 04:58 PM

yes of course , but you must allways find a "truc" ......