css troubleshooting...

In the image below, I have a white gap I want to get rid of it.
css-1.pngQuestion: How can I adjust my css file to achieve this?

Please see the attached file for html/css and related images.
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
Chris StanyonCommented:
Here's an edited copy of your image - I've converted the transparent part to green - you'll see that the right hand side of it has a white, non-transparent bit at the top - that's what's causing your white gap

Chris StanyonCommented:
Any chance you can post a link to a page that demonstrates the problem?
Chris StanyonCommented:
Right - the white gap is actually part of your background image. You'll need to edit it in an image editor.
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The way to get rid of that white gap is to remove the image.   See here http://jsbin.com/nadoti/1/edit?html,css,output  no image, no white.

The body has a top margin you may want to play with as well.
    font-family:"Tahoma","sans-serif";/* background-color:rgb(238,238,238);*/
    background : url(../images/body.gif) repeat-x; 

    color : #5a1c46; /*text-align : center;*/
    padding-top: 50px; 

Open in new window

Something to consider, your css you are starting with is from 2011.  That is ancient times in web dev.  In April 2011 firefox was just introducing version 6 and now we are on version 36.

Consider checking out bootstrap or foundation.

These are both modern, up to date responsive libraries of css and js. Will work with current browsers and built mobile first so phones and tables should also be good.    While foundation has a lot more content about responsive, I personally prefer using bootstrap and probably because I have used it over and over.
Mike EghtebasDatabase and Application DeveloperAuthor Commented:

The image which you also have copy of it (html.gif) doesn't have any white space on the top. There must be another reason for it. How did you come up with your finding?


I just saw your post. brb
Chris StanyonCommented:
The image with the white gap at the top is body.gif - not html.gif. I came up with my finding my looking at the image!
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
I was looking at wrong image, sorry.
Mike EghtebasDatabase and Application DeveloperAuthor Commented:

I have corrected per your comment and now it works ok.


Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.