Topic: Border under scroll bars $Pages that link to <a href="https://ozoneasylum.com/backlink?for=9628" title="Pages that link to Topic: Border under scroll bars" rel="nofollow" >Topic: Border under scroll bars\$

Author	Thread
JJ Nervous Wreck (II) Inmate From: Lard Insane since: Apr 2003	posted 04-28-2003 13:13 see what i'm talking about, go here in IE: http://www.billboard.com/bb/index.jsp See the black pixel wide line around it all? I tried to see how thats done. I saved files, launched editors, but couldnt find it. I thank you to help me out. P.S. I'm new here. Hello
Xdreamer.ch Maniac (V) Inmate From: Switzerland Insane since: Mar 2001	posted 04-28-2003 13:20 which border are you talking about? i can't see a border under a scrollbar sorry... perhaps you can post a screeni in here, thanks and btw: welcome to the asylum :]
JJ Nervous Wreck (II) Inmate From: Lard Insane since: Apr 2003	posted 04-28-2003 13:55 its very thin, not exactly under, but most visible to the right of the scroll bar in IE (haven't checked in others) but its there, like frames
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 04-28-2003 14:57 JJ: OK I see it - there is a border style on your body - like: code: body { border: 1px solid #000; } It doesn't have wide browser support (works fine in IE/Win) but can be used to provide interesting effects - it just looks a bit ugly here. If you want to get rid of it ind the style and remove it. ___________________ Emps FAQs: Emperor
JJ Nervous Wreck (II) Inmate From: Lard Insane since: Apr 2003	posted 04-28-2003 16:33 It is ugly there but quite peculiar. What "interesting effects" have you for this?
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 04-28-2003 16:44 JJ: Its not that peculiar its just badly done there What kind of effects can you get? Plenty but one of the god ones is to use that trick (but get rid of the border and margin) and the CSS which allows you to grab the user's GUI colour scheme and integrate your web page into the browser like: http://webfx.eae.net/webboard/ See here for an explanation of the UI CSS colour schemes: http://webfx.eae.net/docs/environ.html ___________________ Emps FAQs: Emperor
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 04-28-2003 19:21 Not sure about the specific effect in question here, but I use a border on the body tag on my site, combined with a margin to get the red stripes down the left side. It works in IE/MO/NN and I'm pretty sure Opera as well (I'll have to recheck that when I get home ). The border part of it works in IE4 even...but not the margin. I am using mozilla here at work, and I do not see the black border on that site...so I'm wondering why I can see it my site but not that one...? [This message has been edited by DL-44 (edited 04-28-2003).]
ClevaTreva Obsessive-Compulsive (I) Inmate From: Insane since: May 2003	posted 05-16-2003 11:31 JJ I had a look and if you view the source and copy it and then display it from your own system (using a HTML editor, you will see an ordinary page). So, how did they do that? Easy. Set a page up with no content other than an iframe. Point this to the real file you want to display. Switch off the scroll bars on the blank page. Set borders as appropriate, and styles. I couldn't be bothered to exactly replicate the page you refered to, but this does something similar: <html> <head> <title>(Type a title for your page here)</title> <style type=text/css> body { margin: 0; padding: 0; border: 0 } iframe { margin: 0; padding: 0; border-width; 1 border-color: black; border-style:solid; overflow: visible } </style> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" scroll=no border=0 margin=0> <iframe border=1 height=100% width=100% src="anotherpage.htm"></iframe> </body> </html> To get a scroll bar the page must be longer than the window. The advantage of this is that if the page is not longer than the window, no scrollbar appears at all, giving a bit more width. Now, iframe is a bit IE'ish, not so good on other browsers, maybe why others don't see the same effect. Anyway, play around with the borders on both the body of the blank page and that of the source file. Trev "Good artists copy, great artists steal." Pablo Picasso
ClevaTreva Obsessive-Compulsive (I) Inmate From: Insane since: May 2003	posted 05-16-2003 20:21 Me again Spotted a typo, and got it right in all coding so it looks just right: Set a page up with no content other than an iframe. Point this to the real file you want to display. Switch off the scroll bars on the blank page. Set borders as appropriate, and styles. I couldn't be bothered to exactly replicate the page you refered to, but this does something similar: <html> <head> <title>(Type a title for your page here)</title> <style type=text/css> body { margin: 0; border: 0 } iframe { position: absolute; top:0; left:0; visibility:hidden; border: 1; border-width: 1; border-style: solid; } </style> </head> <body scroll=no> <iframe height=100% width=100% src="anotherpage.htm"></iframe> </body> </html> In the source file, the body needs some style too: <style type=text/css> body { margin: 0; border: 1; border-style: solid; border-width: 1; } </style> Only problem I can see is that you need to be rreal careful designing your source file to makes sure all frames and div's are positioned correctly, or they might move to odd places in an iframe, AND If the source page is small so it won't need scrollbars, they won't appear, leaving some unusable whitespace (or whatever your background color is) at the right. As my site has some bars across the top, it looks a little weird, but the site you refered to looks ok. Now, I can see some potential here, coz you won't need to reload the main page all the time. Watch this space for a cool page preloader script based on this! Trev "Good artists copy, great artists steal." Pablo Picasso

Topic: Border under scroll bars\$

Author

Thread

JJ
Nervous Wreck (II) Inmate

From: Lard
Insane since: Apr 2003

posted 04-28-2003 13:13

see what i'm talking about, go here in IE: http://www.billboard.com/bb/index.jsp

See the black pixel wide line around it all?

I tried to see how thats done. I saved files, launched editors, but couldnt find it. I thank you to help me out.

P.S. I'm new here. Hello

Xdreamer.ch
Maniac (V) Inmate

From: Switzerland
Insane since: Mar 2001

posted 04-28-2003 13:20

which border are you talking about? i can't see
a border under a scrollbar sorry...

perhaps you can post a screeni in here, thanks

and btw: welcome to the asylum :]

JJ
Nervous Wreck (II) Inmate

From: Lard
Insane since: Apr 2003

posted 04-28-2003 13:55

its very thin, not exactly under, but most visible to the right of the scroll bar in IE (haven't checked in others) but its there, like frames

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 04-28-2003 14:57

JJ: OK I see it - there is a border style on your body - like:

code:

body {

  border: 1px solid #000;

}

It doesn't have wide browser support (works fine in IE/Win) but can be used to provide interesting effects - it just looks a bit ugly here. If you want to get rid of it ind the style and remove it.

___________________
Emps

FAQs: Emperor

JJ
Nervous Wreck (II) Inmate

From: Lard
Insane since: Apr 2003

posted 04-28-2003 16:33

It is ugly there but quite peculiar. What "interesting effects" have you for this?

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 04-28-2003 16:44

JJ: Its not that peculiar its just badly done there

What kind of effects can you get? Plenty but one of the god ones is to use that trick (but get rid of the border and margin) and the CSS which allows you to grab the user's GUI colour scheme and integrate your web page into the browser like:
http://webfx.eae.net/webboard/

See here for an explanation of the UI CSS colour schemes:
http://webfx.eae.net/docs/environ.html

___________________
Emps

FAQs: Emperor

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 04-28-2003 19:21

Not sure about the specific effect in question here, but I use a border on the body tag on my site, combined with a margin to get the red stripes down the left side. It works in IE/MO/NN and I'm pretty sure Opera as well (I'll have to recheck that when I get home ). The border part of it works in IE4 even...but not the margin.

I am using mozilla here at work, and I do *not* see the black border on that site...so I'm wondering why I can see it my site but not that one...?

[This message has been edited by DL-44 (edited 04-28-2003).]

ClevaTreva
Obsessive-Compulsive (I) Inmate

From:
Insane since: May 2003

posted 05-16-2003 11:31

JJ

I had a look and if you view the source and copy it and then display it from your own system (using a HTML editor, you will see an ordinary page).

So, how did they do that?

Easy.

Set a page up with no content other than an iframe. Point this to the real file you want to display. Switch off the scroll bars on the blank page. Set borders as appropriate, and styles. I couldn't be bothered to exactly replicate the page you refered to, but this does something similar:

<html>
<head>
<title>(Type a title for your page here)</title>
<style type=text/css>
body {
margin: 0;
padding: 0;
border: 0
}
iframe {
margin: 0;
padding: 0;
border-width; 1
border-color: black;
border-style:solid;
overflow: visible
}
</style>

</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" scroll=no border=0 margin=0>
<iframe border=1 height=100% width=100% src="anotherpage.htm"></iframe>

</body>

</html>

To get a scroll bar the page must be longer than the window. The advantage of this is that if the page is not longer than the window, no scrollbar appears at all, giving a bit more width.

Now, iframe is a bit IE'ish, not so good on other browsers, maybe why others don't see the same effect. Anyway, play around with the borders on both the body of the blank page and that of the source file.

Trev

"Good artists copy, great artists steal." Pablo Picasso

ClevaTreva
Obsessive-Compulsive (I) Inmate

From:
Insane since: May 2003

posted 05-16-2003 20:21

Me again

Spotted a typo, and got it right in all coding so it looks just right:

Set a page up with no content other than an iframe. Point this to the real file you want to display. Switch off the scroll bars on the blank page. Set borders as appropriate, and styles. I couldn't be bothered to exactly replicate the page you refered to, but this does something similar:

<html>
<head>
<title>(Type a title for your page here)</title>
<style type=text/css>
body {
margin: 0;
border: 0
}
iframe {
position: absolute;
top:0;
left:0;
visibility:hidden;
border: 1;
border-width: 1;
border-style: solid;
}
</style>

</head>

<body scroll=no>
<iframe height=100% width=100% src="anotherpage.htm"></iframe>

</body>

</html>

In the source file, the body needs some style too:

<style type=text/css>
body {
margin: 0;
border: 1;
border-style: solid;
border-width: 1;
}
</style>

Only problem I can see is that you need to be rreal careful designing your source file to makes sure all frames and div's are positioned correctly, or they might move to odd places in an iframe, AND

If the source page is small so it won't need scrollbars, they won't appear, leaving some unusable whitespace (or whatever your background color is) at the right. As my site has some bars across the top, it looks a little weird, but the site you refered to looks ok.

Now, I can see some potential here, coz you won't need to reload the main page all the time. Watch this space for a cool page preloader script based on this!

Trev

"Good artists copy, great artists steal." Pablo Picasso

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Border under scroll bars

Insert Slimies »

Insert UBB Code »

Topic: Border under scroll bars $Pages that link to <a href="https://ozoneasylum.com/backlink?for=9628" title="Pages that link to Topic: Border under scroll bars" rel="nofollow" >Topic: Border under scroll bars\$