Please help fix my code. Adobe slice happy Disaster!

I have this HUGE annoying white space at the bottom of my website layout. There’s a long white space at the bottom where the website layout would usually end.

No matter how many times I change the height of tags, it won’t go away.

I went SLICE HAPPY in Adobe Fireworks CS5 and I now have a whole bunch of unnecessary divs. I only deleted some, still working on it.


Here are the problems in my code


<div id="main">

<div id="top_float"></div>

<div id="left_float"></div>

<div id="colwrap2">

<div id="menu"></div>

<img src="images/header.jpg" id="header" alt="" />

<div id="content">
<div id="colwrap5">
<img src="images/notepad.jpg" id="notepad" alt="" />
<img src="images/business_group.jpg" id="business_group" alt="" />


body {
background-attachment: scroll;
background-image: url(images/mainbg.jpg);
background-repeat: repeat-x;
font-size: 62.5&#37;;

#menu {
background-image: url(images/navigation.png);
position: relative;
top: -96px;

#header {
margin-left: 0px;
margin-top: 0px;
display: inline;
position: relative;
left: 2px;

#content {
margin:0 auto;
display: inline;
position: relative;
top: -241px;
left: 2px;
float: left;
background-attachment: scroll;
background-image: url(images/content.jpg);
background-position: center center;
background-repeat: repeat-y;
width: 786px;
height: 378px;

#colwrap2 {
float: left;
width: 786px;
margin-bottom: 0;

#left_float {
margin-left: 0px;
margin-top: 0px;
overflow: hidden;
display: inline;
float: left;
height: 588px;
margin-bottom: 0;
width: 87px;

#top_float {
margin-left: 0px;
margin-top: 0px;
overflow: hidden;
display: inline;
float: left;
height: 132px;
margin-bottom: 0;
width: 960px;

PLEASE HELP ME. If any of you figure it out, you get a virtual cookie. I’ve tried everything.

I’m not sure what large gap you are talking about. Do you want your footer to sit at the bottom of the screen or something??

You’ve got one big background image on the body that is set to repeat-x… which means repeat horizontally. Do you want it to repeat down the page (i.e. vertically)? Change that to repeat-y, or just remove the repeat-x and let it repeat as much as it likes. But that won’t look too good, as the image won’t tile well. You could just specify a nice background color that will extend beyond the image.

Yes it’s basically a wrapper, with 100% height :stuck_out_tongue:

Sorry I wasn’t able to help you with the slice methods via PM. Perhaps the graphic design forum on here can help you. Shuffle on over there :wink:

Oh okay. So basically it’s a container/ wrapper.

Yes my entire setup is screwed up from my Adobe slice methods. I’m too lazy to start from scratch. You live and you LEARN! LOL

You’re welcome :).

To do a 100% high wrapper, wrap everything inside a <div> (give it id=“wrapper” just to give it styles)

Then give something like this

html,body{height:100%;}/*allow 100% heights*/
* html #wrapper{height:100%;}/*IE6*/

You need to specify the repeating’ness of hte image and also the URL, but that should suffice :slight_smile:

It might need a fix also depending on how your setup was on your page (I haven’t tested this code out personally)

:smiley: Thank you so much! I’m learning so MUCH! :smiley: The physical versus visually moving helped me a lot.

[COLOR=“Blue”]Now for clarity…

What do I change the margins for the Content and #footer? Change it to margin-top instead?

How do I do a 100% wrapper? I’ve done a 100 display set up.

I failed at the coding margins …once I added the menu graphic it shifted everything down and I used -top to move them back underneath each other lol

It’s fine I’m a bit on a health spree fit and working out a lot and eating right. It’s for the best :wink:

Thank you :slight_smile:

You did GREAT!

Here’s a virtual cat for you lol…I couldn’t find a cookie

I’m weird…

YES! Thank you. RyanReese. The margin-top worked perfectly! Large huge blank space is gone now.

If you mean the white space, that’s just because the content is just too big

You use top:-241px on the footer and the Content

If you change both them to margins then it’s fixed (I’d recommend moving that background image to a 100% high wrapper

You’re using entirely too much top:-xx px to move elements. Remember that if you use offsets like that you’re only moving the element visually, but not actually physically.

I’d change the top: crap to margin-top (although there really isn’t a need for you having that on every element, so I’d get rid of the lot of it and work from there) :slight_smile:

The image just tiles at the bottom but the large blank gap is still there.

Thank you for your input though. I am learning.

If you change the code as I showed in red, there should be no gaps. If there are, could you provide a screen shot and say what browser this is happening in?

For the background image, I would suggest you fade it to transparent and have a background color that it can nicely blend into.


I’m definitely going to have to edit the background to a vertical repeat, with a different size. I know it’s a shame but what can I say lol…

Thanks for the tips on that. Now if only I could figure out the inevitable blank space at the bottom…the invisible margin lol

Thank you so much for helping me. I’m going to bed. I’ll check this thread tomorrow. I need all the help I can get.

I think one issue is that my menu png image has a height that pushes ALL the other divs beneath it lower, causing the white blank space?

:frowning: I tried changing up the height. It’s transparent so I thought it would work easier

OK, so what do you actually want to achieve here? If you do this…

body {
	background-attachment: scroll;
	background-image: url(images/mainbg.jpg);
	background-repeat: [COLOR="Red"]repeat;[/COLOR]
	font-size: 62.5%;

… the background will cover the viewport. But is that what you want?

That’s GREAT. Now how do I eliminate the blank space all together? Did the height of my graphics or divs make the huge space?

:injured: I did damage to this code…SERIOUSLY lol.

I appreciate all your help. You move so quickly! :slight_smile:

:cool: Sure I just uploaded it for you. Don’t laugh lol. (I just laughed) I APPRECIATE YOUR HELP SO MUCH.

Thank you! A cookie and a slice of cake for you!

I will never do POINTLESS slicing from mock-ups again! Next time I will be smarter when it comes to my divs and images.

Can you post a live link? It’s really hard to trouble shoot with random bits of code. With a live link it’s easy to see what’s going on right away.

THANK YOU so much for responding. My other design layouts I have done the solid color edge for easy tiling and fade out.

When I do the repeat-y, the HUGE white space moves to the right and the space is filled in with the background but actual blank GAP is still there?

It’s weird. When I play with the tiling background or enlarge it, this does not affect the blank space

:frowning: I know my code is terrible but I’m trying to revive what I have lol