Annoying gap between div bg image & div above

HTML & CSS
1

http://mrcpsychmentor.com/testsite/

if you compare the homepage versions above the following will make sense

i want to get rid of the white gap between the background image on the ‘branding’ div & the blue border above it (which is part of the horizontally tiled background image of the ‘header’ div above - but crucially, not at the bottom of it). http://mrcpsychmentor.com/testsite/ shows this

[ NOTE: you may notice that the main site (http://mrcpsychmentor.com/) doesn’t actually have a background image on the ‘branding’ div at all - the tape measure background image is actually applied to a div contained within it, called ‘brandingImage’, but i’ll be changing this in time ]

basically, i wanna have a background image on the ‘branding’ div that stretches - vertically - from the blue border below it to the blue border above it. WITHOUT THE ANNOYING WHITE GAP. if you do inspect element on Firebug on the header div it should be clear why the white gap is there in the first place

i can probably fix it by altering the CSS & HTML of the header, but apart from being messy i’m not sure if the guy who does the HTML/PHP coding will be ok with that

so, does anyone have any ideas for a quick & easy solution? doesn’t matter how hacky it is. something like perhaps adding an extra div somewhere, maybe with an absolute positioning value, or something else possibly with margins?

any ideas welcome anyway, as per

PS: you have to view the site with a window size greater than 1150px. otherwise the image on the testsite will just be another tape measure - not the ‘exam note’ image i replaced it with so you can clearly see the white gap

PS2: i couldn’t attach images before. i tried creating this post with just screenshots instead of links, & whilst sitepoint seemed to let me upload the images it wouldn’t insert them into the post. anyone know why this might’ve been?

2

Is this too extreme?

Looks like the height of the header is too tall. The background image at the top of the page is height:104px as should be the height of the header box in which it resides, not height:120px, so:


mrc_index_main.css  Line 70

#header {height:[COLOR="#FF0000"]104px[/COLOR];}     /* from 120px */

The white line below the brandingImage will not exist after you increase the height of the container in which the brandingImage resides (by 16px to compensate for the reduced height of the header box).


mrc_index_main.css  Line 187

#branding {height:[COLOR="#FF0000"]324px[/COLOR]}    /* from 308px */

Regarding the Mentor logo:


mrc_index_main.css  Line 16

#pagewidth  [COLOR="#FF0000"]{position:relative[/COLOR]}    /* add this property */

common.css  Line 43

#header {[COLOR="#FF0000"]position:relative[/COLOR]}    /* delete this property */

mrc_index_main.css  Line 79

#headerimage {
    position: absolute;
    top: 30px;
    [COLOR="#FF0000"]z-index: 1[/COLOR];    /* add this property */
}

I think that’ll do it.

Speculation:

My feeling is that you will not like the 3px dithered-to-white line above the brandingImage, but that’s part of the header image. The height of the box for the brandingImage could probably be extended 3 more pixels and could be given a negative margin-top of 3px to extend it over the header image.

3

An alternative would be to reduce the height of the header (say 102px), remove the overflow: hidden on the header, and set the logo image to z-index: 100 (or any number). That will move the branding section up, though, so you’ll have to adjust that next.

4

Nice, Ralph!

5

cheers ralph. bacon saved again