4 replies [Last post]
rajeshbhatt
Offline
Enthusiast
Last seen: 10 years 29 weeks ago
Joined: 2005-10-18
Posts: 61
Points: 0

a bit unusual...

but tricky all the same.

i thought being it valentine tmrw and all and the flexibility CSS offers, it might be a good idea to create a valentine special....

howevwer it seems a little tricky...

as you can see

http://www.indigoideas.co.uk/

there seems to be an overlap about 100px from the top and i just can;t find out the reason why?

any clues?

all i did was change my normal bgd image to bgd_valentine.gif and left 2pixels gap in the top/bottom of the bgd image to have no hearts/

css

html, body{
margin:0;
padding:0;
text-align:center;
background-image:url(../images/bgd_valentine.gif);
background-position:center;
background-repeat:repeat-y;
background-color:#EEEEEE
}

other relevant css


#content {
width: 750px;
padding: 0px;
margin-top: 20px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
/* opera does not like 'margin:20px auto' */
background: #fff;
border: 1px solid #fff;
text-align:left;
/* part 2 of 2 centering hack */
width: 727px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 727px;
clear:both;
}
html>body #content {
width: 740px; /* ie5win fudge ends */

}


#navbar {
width: 750px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
/* opera does not like 'margin:20px auto' */
background-image: url("../images/nav_bgd.gif");
background-repeat:repeat-x;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
text-align:center;
/* part 2 of 2 centering hack */
width: 750px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 727px;
}
html>body #navbar {
width: 727px; /* ie5win fudge ends */
}


#banner {
width: 750px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
/* opera does not like 'margin:20px auto' */
background: #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
text-align:left;
/* part 2 of 2 centering hack */
width: 750px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 727px;
}
html>body #banner {
width: 727px; /* ie5win fudge ends */
}

#mainbody {
background-color: #ffffff;
height:100%;
min-height:100%;
width: 750px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
/* opera does not like 'margin:20px auto' */
background-color: #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
text-align:left;
/* part 2 of 2 centering hack */
width: 750px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 727px;
}
html>body #mainbody {
width: 727px; /* ie5win fudge ends */
}


thanks in advance as always to those taking the time to read and responnd!

rdb

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Which bit are we s'posed to

Which bit are we s'posed to be looking at?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

S8nsick66
S8nsick66's picture
Offline
Regular
Sweden
Last seen: 14 years 41 weeks ago
Sweden
Timezone: GMT+1
Joined: 2006-11-17
Posts: 39
Points: 0

I have no idea why the

I have no idea why the background image behaves like that, I've never seen that before. Very odd!

But if you change:
padding: 0px;
margin-top: 20px;

to:
padding-top: 20px;
margin: 0px;

it works, right? It does when I test it with Firebug. Hope it works, and that someone else can say why this happens.

Dennis

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

The problem is that you've

The problem is that you've put the background on both the html and the body. Just remove from html and all is well...

rajeshbhatt
Offline
Enthusiast
Last seen: 10 years 29 weeks ago
Joined: 2005-10-18
Posts: 61
Points: 0

SORTED!

thank you very much wolfcry911

its works a charm!

thanks to all the others who replied and took the time to look aat the issue!