Forum Moderators: open
Anyway, I want to know what a browser establishes as 15% width (or height, but lets just concenctrate on width). What width do they take to multiply by .15, and do they round up or down when choosing the exact pixel?
The reason I ask is I would like to position elements very close, but have pixel control. This isn't really possible if you have already elements positined using the relative operator (%).
Essentially, if one could do this:
div{
width:15% + 3px;
}
I would be SO happy (though I have already tried lol: it didn't work! I am so surprised! :)) So, what is you guys favorite solution to such minute positioning?
THX!
If one COULD do as I posted in the fake div,
your page would still be very very relative.
I suppose one could be happy with "width:15.2%" or somethin of that nature, but then there could still be differences in distances between elements, for different resolutions. YOu know what? I think this post is meaningless. I am being too picky. If u have a good solution, plz post, but thx anyway :)
width:15% + 3px;
But as a rule of thumb, the width, if you're mentioning a %, SHOULD be based upon the containing element - If you have a div with a width of say 500px and you want another div in there at 80%, then that SHOULD be 400px wide. It doesn't work that way always. Some older browsers (NN4) used the screen width - So 80% of 800px was 640px. But the point is this, you cannot depend on just the width: and there was another post here that tedster gave a link to, I'll see if I can remember:
[w3.org...]
(that's not the exact link, it's a little higher up on the page because you want to know about widths.
This came from this discussion:
[webmasterworld.com...]
The point is, you're going to have to take into account borders, padding, margins, etc, then play with it and find out what works and doesn't work.
[edited by: tedster at 4:38 am (utc) on Sep. 25, 2002]
this is anther issue i have been dealing with:
Why is it that, a div, in IE, seems to have a minimum height? I have set a div to 1px in IE, and its at least 10 px. I think its for some reason defaulting to one line of text,
and Mozilla renders it fine.
THX!
So 80% of 800px was 640px.
-So, what's it suppose to be?
<html>
<head>
<title></title>
<script>
function AddToWidth() {
var a = document.getElementById('my-div').offsetWidth;
var b = Math.round(a)
var c = b + 3;
return c;
return null;
}
onload = function() {
alert(document.getElementById('my-div').offsetWidth)
alert(AddToWidth())
}
</script>
</head>
<body>
<div id="my-div" style="width: 50%">
content
</div>
<script>
function w(string) {
document.write(string);
}
w("Some Math Functions" +"<br>");
w("Abs val of -12 is " + Math.abs(-12)+ "<br>");
w("ceil for 12.45 is " + Math.ceil(12.45)+ "<br>");
w("floor for 12.45 is " + Math.floor(12.45)+ "<br>");
w("Minimum of 45, 65 & 85 is " + Math.min(45, 65, 85) + "<br>");
w("Maximum of 45 & 65 is " + Math.max(45, 65) + "<br>");
w("2 to the power 3 is " + Math.pow(2, 3) + "<br>");
w("12.36 rounded is " + Math.round(12.36) + "<br>");
</script>
</body>
</html>
[edited by: gph at 4:55 am (utc) on Sep. 25, 2002]
So 80% of 800px was 640px.-So, what's it suppose to be?
If you have a div with a width of say 500px and you want another div in there at 80%, then that SHOULD be 400px wide.
OK?
ignore me;)
Interesting: I have always searched for a correct way to query element's positioning (or most any css property).. but it seems that your code, using the property .offsetWidth, isn't going to help :(
Do u know that this number is different for IE vs other browsers? I believe it has something to do with... well I dont know what exactly:
here something for you: it returns 492,495 in alert boxes on IE, and 0,3 on Mozilla.
Whatcha think about THAT?! :)
Anyone else have any ways to use offsetWidth so that its cross-browser compatible? or anothe javascript way?
Are you using a strict doctype?
heh j/k. Well Yes, I am using a strict doctype, but I still get that problem... number wise....
what content did u add?
Are you saying your's now works?
Thx!
Ok now i get very similiar numbers.
So mozilla doesn't bother to initiate a div with nothing in it? I guess?
Hey, Since you seem so div savvy, can u explain my question from earlier?
Which was, why does a div, in IE, show up as a minimum of 10 or so pixels,even when u directly specify it as 1px in height? I do it with CSS AND javascript: still no dice ;(
Sorry I haven't noticed that before. I tried it and you're right the shortest I got was 19px.
Remember that the div width is in percent. Change it to pixels and they should alert the same.
<html>
<head>
<title></title>
<style type="text/css">
div {
font-size: 1px;
height: 1px;
background: red;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
Why is it that, a div, in IE, seems to have a minimum height? I have set a div to 1px in IE, and its at least 10 px. I think its for some reason defaulting to one line of text
Yes it is defaulting to one line of text. By default divs expand automatically if their contents are too big. If there is anything at all between the div's opening and closing tags, it will be one line high, as it is assumed there is some (text) content. So if you have even one space or line-break in your code this will happen.
Ok For key: well, i kinda figured that was part of the problem: but I will note that trying "font-size:1", makes the div size 2 pixels! (for instance, change a div to font-size:2, hit refresh and watch very closely :) you should see no change)
So, still, its not one pixel. Close though: might be my final solution.
Purple! Ok.. I took out everything between the div (which there was nothing but a text-editor line break in the first place)
<div class = "horizontalbarwhite" id ="horizontalbarwhite"></div>
div.horizontalbarwhite{
position:absolute;
left:0;
top:25%;
height:1px;
width:100%;
background-color:white }
this STILL gives me a big ol' 19 pixel sized div (thx GPH for more-correct pixel size info)
So, still, its not one pixel.
Picky, picky! I cut 17 pixels off of your 19 pixel div and I get nit picked for having 1 extra pixel? ;)
Here's a better solution:
div {
font-size: 1px;
line-height: 1px;
height: 1px;
background: red;
}
But you are now letting ME down :)
Cuz it still renders 2px.
So, whats Mr. Fancy-Pants have to say about THAT?
IE = trouble for small children, goats, and myself.
and its Definately two pixels
Hey why dont u open up your little purty test page in mozilla and see the "difference" ..
ill keep checkin... but its all there
<html>
<head>
<title></title>
<style type="text/css">
div {
font-size: 1px;
line-height: 1px;
height: 1px;
background: red;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
I see a one pixel line. Can somebody confirm?
I did do a bit of a check on that, roger, and its 1 pixel with your code, over and out, roger.
It seems there is an issue, here. Testing further: Updates WILL be made, sir.
YES! Your code works, and i have a wonderful, 1px line acroos my screen.
MY code still does not.
Ok, sooo, without any sort of text, IE will not properly initialize a div? That is the lesson of today, huh.
Thank you so much key_master. You do, in fact, hold the keys, and you are, in fact, a master.
Glad it worked out for you. Over and out! ;)
