4

I am stuck with this problem and not able to come out of this. Please help me.

enter image description here

In my webpage, I have used 3 divs inside a container div.I am trying to remove the unwanted gap between the div.

  • (1)Top bg image
  • (2)Middle bg image
  • (3)Bottom bg image

I am trying to adjust these 3 divs so that it can look like one bg image. My middle part and bottom part are adjusted completely but top part and middle part have some gap in between that i am trying to remove but not able to.

Please refer to the image which i have attached here which shows the gap between top and middle part.Please refer the stylesheet data I had used for placing the images.

Thanks in advance.

#main_container {
    background-repeat:no-repeat;
    width:645px;
    float:left;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
}
#middle_part {
    background-image: url('/DiscoverCenter/images/apps_mid.png');
    background-repeat:repeat-y;
    width:645px;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#top_part {
    background-image:url('/DiscoverCenter/images/apps_top.png');
    width:645px;
    top:0px;
    height:47px;  /* actual height of the top bg image */
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#bottom_part {
    background-image:url('/DiscoverCenter/images/apps_btm.png');
    width:645px;
    height:24px; /* actual height of the bottom bg image */
}
Douglas B. Staple
  • 10,510
  • 8
  • 31
  • 58
Gendaful
  • 5,522
  • 11
  • 57
  • 76

8 Answers8

11

Have you considered using a reset?

* {
    padding: 0px;
    margin: 0px
}

Add that to the top

However, while we are on the subject: Are you using images to get rounded corners? You can use CSS to get rouned corners nowadays!

Here is a website which can help with those:

http://www.css3.info/preview/rounded-border/

Dbz
  • 2,721
  • 4
  • 35
  • 53
  • @dbz: Rounded corner is not my explicit requirement, I have to use 3 images to fill my content that is needed and i m not able to adjust them properly :( – Gendaful Feb 28 '11 at 01:44
  • @user515990 can you post a copy of your code to jsfiddle.net? – Dbz Feb 28 '11 at 02:50
  • Can you put the pictures you're using online? – Dbz Feb 28 '11 at 14:01
  • @Dbz: Pls refer to https://picasaweb.google.com/hemish.kapadia/Feb282011?feat=directlink# – Gendaful Feb 28 '11 at 15:16
  • Are you still having the same problem? If so, can you post a jsfiddle with working images? – Dbz Feb 28 '11 at 16:14
  • @Dbz:I have added a pagination container, so i think it is related to that.I am trying to debug it, Lets c ..thanks a ton for ur help. – Gendaful Feb 28 '11 at 16:30
  • Okay @user515990, but if it doesn't fix the issue, try linking a working jsfiddle so I can debug it =p – Dbz Feb 28 '11 at 17:22
1

Some adjustments will fix it:

#main_container, #top_part, #middle_part, #bottom_part { margin:0; padding:0; width:645px; }
#main_container {
    float:left; 
    } /* setting height:auto and overflow:hidden won't do anything */

#top_part {
    background:url('/DiscoverCenter/images/apps_top.png') no-repeat;
    clear:both;
    height:47px;
    }
#middle_part {
    background:url('/DiscoverCenter/images/apps_mid.png') repeat-y;
    display: block; /* only needed if you're assigning this id to an inline element */
    min-height: ?? /* assure this element can expand, but never collapses completely */
    vertical-align: bottom;
    }
#bottom_part {
    background:url('/DiscoverCenter/images/apps_btm.png');
    height:24px;
    }

top_part, middle_part, bottom_part can all have margins or padding as long as it's not a "side" that touches the other (ie: bottom of #top and top of #middle need to touch and not move)

Start here, and see what presentation adjustments need to be made. I removed positioning from top, middle, bottom because it isn't relevant for the desired effect. You may need to add them in for absolutely positioning items inside of them, but that's another post.

Dawson
  • 7,567
  • 1
  • 26
  • 25
  • @Dawson:Thanks for the all effort. If I am taking background-image:url('/DiscoverCenter/images/apps_btm.png') no-repeat; then my images are not appearing.Whats wrong here, pls help – Gendaful Feb 28 '11 at 02:12
  • Sorry. Try removing 'no-repeat'. Editing post to match. – Dawson Feb 28 '11 at 02:22
  • @Dawson: I inspected the element in firebug and actually the problem is that, there is a gap between top and middle, so i can see the bg image of the container div.I dont think, top is repeating. – Gendaful Feb 28 '11 at 02:28
  • Two things...1. comment out all of your code above #main_container and see if the problem persists. If so, it's the CSS within. 2. post a link to the page, or post the HTML so everyone can see what you're doing. It sounds like you're still padding something, or there is a margin set on either #top or #middle. Hard to say without all of your code, or at least the portion that's causing you trouble. – Dawson Feb 28 '11 at 04:01
  • @Dawson:I put the margin 0 important in my code to take precedence.You can refer the link http://jsfiddle.net/axEbC/ , i shared my html there. Pls give some pointers if you got to know anything. Thanks a lot – Gendaful Feb 28 '11 at 04:12
  • Please fix the URLs of the CSS sprites. Without them, and adding borders to all
    the code looks right...I'm still assuming it is not.
     – Dawson Feb 28 '11 at 05:08
  • In the jsfiddle code you posted, there are a lot of closing paragraph tags, yet no opening tags. Additionally, it looks as if the first p tag in each link block is intended as an opening tag `

    `; if so, you don't want to nest block elements inside of inline elements `

    ` = bad....it may even be the root of your gap.     – Dawson Feb 28 '11 at 05:27
  • @Dawson:Thanks for your help and time. I checked on this perspective and found no issue with this.Issue is something else.Dont know,whats happening here :( – Gendaful Feb 28 '11 at 15:26
  • @user - Agreed, it was more for me to see what was happening. I added div { border:1px dotted gray } to the css, and everything looks like it's lining up correctly (jsfiddle anyway). Thought having art inside the divs would help clarify. If you haven't tried building JUST this section of your page alone, I would. – Dawson Feb 28 '11 at 15:59
  • @Dawson:Thanks anyways, :) . I am close to the sollution, as soon as i get it, i ll post it here, I think, it is related to pagination div. – Gendaful Feb 28 '11 at 16:29
  • @user - very cool. would def like to see what the fix was. Good luck. – Dawson Feb 28 '11 at 18:21
0

margin reset works perfect for me in such cases

DotCreatives
  • 1
  • 1
0

I came across the same issue, the only way I could fix this is by using InspectElement in browser & keep changing the margin to some -ve value.

Naga
  • 2,368
  • 3
  • 23
  • 33
0

You may want to set the padding to 0 rather than 10px and set the height of the divs explicitly rather than using auto.

Or alternatively create a wrapper div that accommodates the entire background image so that you don't have to worry about them not aligning in some browsers...

Rob
  • 10,004
  • 5
  • 61
  • 91
  • I am filling the content dynamically, so i cant set it explicitly.I have to set it as per the content size. I have already taken a wrapper div(container div) which wraps all 3 divs.Thanks for the suggestion. – Gendaful Feb 28 '11 at 01:42
0

It was the Problem with the Top bg image size. Size of the image is 45 pix and I took it the size of the div as 47 pix. By decreasing the size of the div had solved my problem.Thanks a lot to Dawson and DBz for the help.

Gendaful
  • 5,522
  • 11
  • 57
  • 76
0

I managed to solve the problem myself by

margin:-16px
Graham Smith
  • 25,627
  • 10
  • 46
  • 69
Saeed-rz
  • 1,435
  • 1
  • 20
  • 38
-1

This worked when i had three (top, middle, bottom) backgrounds and each was a div tag

margin:-8px;

Alex
  • 1