Removing white space from right & buttom

Cougar · #1 (**permalink**) Oct 31st, 2007, 13:46

Hello, I'm going out of my mind on this for days, after reading Web Forumz FAQ and coming across this:

How do I get rid of the space on the top and left of the browser window?
html, body {
margin: 0;
padding: 0;
}

I have done that, and yet my image still does not touch the right or buttom of the browser window, it touches the top and left perfectly. I've even played around with making the image bigger in hopes and nothing just scrolling I get. It's a background image in a style and it's in a <div>

I hope someone can help me with this ?

Also

Can you not apply a link to a style or a layer or both (link as to another page or external link to a page outside your web page?)

alexgeek · #2 (**permalink**) Oct 31st, 2007, 13:51

try

Code: Select all

* {margin: 0; padding: 0;}

instead

marSoul · #3 (**permalink**) Oct 31st, 2007, 13:53

use this code

Code: Select all

<style type="text/css">
<!--
body {
    margin: 0px;
}
-->
</style>

karinne · #4 (**permalink**) Oct 31st, 2007, 13:55

Quote:

Originally Posted by alexgeek

try

Code: Select all

* {margin: 0; padding: 0;}

instead

No ... don't use the * unless you know it's implications!

No Margin For Error

Please provide a link so we can help you further.

Quote:

Originally Posted by marSoul

use this code

Code: Select all

<style type="text/css">
<!--
body {
    margin: 0px;
}
-->
</style>

You're missing the padding: 0 in there for IE and you don't need the px. See Make your CSS efficient

Cougar · #5 (**permalink**) Oct 31st, 2007, 15:03

This is my CSS for my background. How can I relate the code you gave into this style or is that put on the HTML level?

.background {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-repeat: no-repeat;
position: absolute;
overflow: visible;
background-image: url(../background.png);
background-position: left top;
padding: 0px;
z-index: 2;
visibility: visible;
}

<body>
<div class="background" id="style-background"></div>

This is the HTML, where does that code fit in ?

karinne · #6 (**permalink**) Oct 31st, 2007, 15:06

Add this to your CSS

Code: Select all

html, body, div {
    margin: 0;
    padding: 0;
}

Cougar · #7 (**permalink**) Oct 31st, 2007, 15:19

I added that code, nothing has changed what I added is in bold (as seen below my style code)

.background {
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-repeat: no-repeat;
position: absolute;
overflow: visible;
background-image: url(../background.png);
background-position: left top;
padding: 0px;
z-index: 2;
visibility: visible;
}

karinne · #8 (**permalink**) Oct 31st, 2007, 15:21

Put this online so we can see ...

Monie · #9 (**permalink**) Nov 1st, 2007, 05:11

You got it all wrong..
That code you gave us, is for the div style, not your body style, which you got the problem with the spaces.

HTML: Select all

html, body, div {
margin: 0;
padding: 0;
}
.background {
    bla bla bla..
}

Cougar · #10 (**permalink**) Nov 3rd, 2007, 15:37

moonie this code:

html, body, div {
margin: 0;
padding: 0;
}

goes ontop of my style ?

http://www.walkfar.ca/creativesheep_main_page2.html

this is the link you'll see the background does not fit the browser window at the buttom and right ? Also how come after uploading the css styles to the server the button on the right and left flick away ?

One last thing how can you apply a link to a style to link to another part of your page or another web page ?

Monie · #11 (**permalink**) Nov 5th, 2007, 02:51

Yup, that code goes on the top of your CSS style!

How come you got so many css embeded style in your page?
There is also some external style...? It's confusing...

Quote:

...how can you apply a link to a style to link to another part of your page or another web page ?

If you want all your page to use the same CSS Style, just put this line in your <head> and point that link to your CSS file (YourCSSstyle.css)

<link rel="stylesheet" type="text/css" href="YourCSSstyle.css" />

Cougar · #12 (**permalink**) Nov 5th, 2007, 15:49

That did align the image perfectly to the browser left and top. Although what am I exactly after is this:

http://www.cssplay.co.uk/layouts/background.html

You'll notice that you can resize the browser window and so does the background image.

Also what I meant by linking is, how can I apply a link to another part of my page or a outside web page on a style sheet or layer ?

Marc · #13 (**permalink**) Nov 5th, 2007, 19:45

Have you tried this for your resizing background image?

CSS:

Code: Select all

html, body {width:100%; height:100%; overflow:auto;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}

HTML

HTML: Select all

<html><body><div><img id="background" src="rabbit.jpg" alt="" title="" /><div id="scroller"><!-- Keeps the background image fixed --><!--  content here --></div> </body></html>

I am only trying to use the code that Stu Nicholls is using... Not 100% sure it will work! Hope this helps! (Not sure about other question..)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
ie6 white space under div	AndrewChip	Web Page Design	1	Jun 11th, 2008 13:15
Add white space using RegEx	Access	JavaScript Forum	2	Feb 8th, 2008 03:30
Big white space	mikemay123	Web Page Design	5	Nov 6th, 2007 00:30
Removing the White Box around an image in Dreamweaver...	kidflavor	Graphics and 3D	3	Feb 6th, 2007 22:38
white space at top of page	mdb01	Web Page Design	2	Nov 26th, 2006 21:39

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Removing white space from right & buttom