scroll bars showing up! [Archive]

View Full Version : scroll bars showing up!

Crash1hd

01-05-2004, 06:29 AM

In the following code I am having trouble with scroll bars showing up what am I doing wrong?

<STYLE TYPE="text/css">
.Box{
position: absolute;
border-style: Solid;
border-color: Black;
background-color: Green;
width: 100px;
height: 100px;
Z-index: 1;
}
</STYLE>
</head>

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="red">
<Div Class=Box>
<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
1
</Div>
</Div>
<Div Class=Box Style="left: 50%;margin: 0 0 0 -50px">
<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
2
</Div>
</Div>
<Div Class=Box Style="left: 100%;margin: 0 0 0 -100px">
<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
3
</Div>
</Div>

<Div Class=Box Style="top: 50%;margin: -50px 0 0 0">
<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
4
</Div>
</Div>
<Div Class=Box Style="left: 50%;top: 50%;margin: -50px 0 0 -50px">
<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
5
</Div>
</Div>
<Div Class=Box Style="left: 100%;top: 50%;margin: -50px 0 0 -100px">
<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
6
</Div>
</Div>

<Div Class=Box Style="top: 100%;margin: -100px 0 0 0">
<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
7
</Div>
</Div>
<Div Class=Box Style="left: 50%;top: 100%;margin: -100px 0 0 -50px">
<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
8
</Div>
</Div>
<Div Class=Box Style="left: 100%;top: 100%;margin: -100px 0 0 -100px">
<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
9
</Div>
</Div>

I know that if I do just this

<STYLE TYPE="text/css">
.Box{
position: absolute;
border-style: Solid;
border-color: Black;
background-color: Green;
width: 100px;
height: 100px;
Z-index: 1;
}
</STYLE>
</head>

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="red">
<Div Class=Box>1</Div>
<Div Class=Box Style="left: 50%;margin: 0 0 0 -50px">2</Div>
<Div Class=Box Style="left: 100%;margin: 0 0 0 -100px">3</Div>

<Div Class=Box Style="top: 50%;margin: -50px 0 0 0">4</Div>
<Div Class=Box Style="left: 50%;top: 50%;margin: -50px 0 0 -50px">5</Div>
<Div Class=Box Style="left: 100%;top: 50%;margin: -50px 0 0 -100px">6</Div>

<Div Class=Box Style="top: 100%;margin: -100px 0 0 0">7</Div>
<Div Class=Box Style="left: 50%;top: 100%;margin: -100px 0 0 -50px">8</Div>
<Div Class=Box Style="left: 100%;top: 100%;margin: -100px 0 0 -100px">9</Div>

It works fine! so I know it has to do with this part

<Div Style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
3
</Div>

on the ones on the outside so 3 6 7 8 and 9 all cause the problem but 1 2 4 and 5

Any thoughts?

Mhtml

01-05-2004, 06:45 AM

Well for starters fix your code, make all tags and attributes lowercase and use quotes (I prefer ") on all attributes ..

And of course USE CODE TAGS PLEASE!

YOUR CODE HERE!!

Crash1hd

01-05-2004, 07:00 AM

Like this

<div class="box" style="left: 100%;top: 100%;margin: -100px 0 0 -100px">
<code style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;z-index:1;">
9
</code>
</div>

or this

<code class="box" style="left: 100%;top: 100%;margin: -100px 0 0 -100px">
<code style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;z-index:1;">
9
</code>
</code>

Mhtml

01-05-2004, 07:06 AM

I mean use the code tags around your actual code you're posting ...

See http://www.codingforums.com/misc.php?action=bbcode for more information

Crash1hd

01-05-2004, 07:09 AM

Ok but I am useing code tags around the code above??

Crash1hd

01-05-2004, 07:13 AM

Ok I have updated the code as you had indicated to :)

<html>
<head>
<title>Box Positions</title>
<style type="text/css">
.box{
position: absolute;
border-style: solid;
border-color: black;
background-color: green;
width: 100px;
height: 100px;
z-index: 1;
}
</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="red">
<div class="box">
<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
1
</div>
</div>
<div class="box" style="left: 50%;margin: 0 0 0 -50px">
<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
2
</div>
</div>
<div class="box" style="left: 100%;margin: 0 0 0 -100px">
<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
3
</div>
</div>

<div class="box" style="top: 50%;margin: -50px 0 0 0">
<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
4
</div>
</div>
<div class="box" style="left: 50%;top: 50%;margin: -50px 0 0 -50px">
<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
5
</div>
</div>
<div class="box" style="left: 100%;top: 50%;margin: -50px 0 0 -100px">
<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
6
</div>
</div>

<div class="box" style="top: 100%;margin: -100px 0 0 0">
<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
7
</div>
</div>
<div class="box" style="left: 50%;top: 100%;margin: -100px 0 0 -50px">
<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
8
</div>
</div>
<div class="box" style="left: 100%;top: 100%;margin: -100px 0 0 -100px">
<div style="position: relative;left: 50%;top: 50%;margin: -10px 0 0 -5px;height: 20px;width: 10px;Z-index:1;">
9
</div>
</div>

</body>
</html>

But it still going over the window screen width? and height?