14 replies [Last post]
mitcho
Offline
Enthusiast
Last seen: 13 years 9 weeks ago
Joined: 2006-04-01
Posts: 93
Points: 0

Hi Guys,

This question has to do with centering and repeating a background image.

my site i am building here (mitchellpage.com) uses a repeating background image so that it looks like the gray footer repeats all the way down. However in IE, i get the problem of it becoming unaligned when the browser window is resized.

I have gone through the sitepoint FAQ regarding the 50/50 issue but have had no success:

  • i tried doing the background-position: 50% 49.9%; but that didnt work
  • I then did the margin-right: -1px; but this created a horizontal scrollbar which was always visible.
  • Are the any other solutions to help solve my problem?

    Desdinova
    Desdinova's picture
    Offline
    Enthusiast
    Last seen: 9 years 2 days ago
    Timezone: GMT+1
    Joined: 2006-03-28
    Posts: 341
    Points: 4

    FF and IE6 are both fine

    FF and IE6 are both fine here?

    Edit: ooh I see what you mean.

    As a rule, I never touch anything more sophisticated and delicate than myself

    Desdinova
    Desdinova's picture
    Offline
    Enthusiast
    Last seen: 9 years 2 days ago
    Timezone: GMT+1
    Joined: 2006-03-28
    Posts: 341
    Points: 4

    set the wrapper to

    set the wrapper to min-height: 100%; height: auto !important; height: 100%; and give the background image (or just the color) to the wrapper.
    apply the clearfix if required.
    make sure there's no body padding or margin if you haven't already.

    As a rule, I never touch anything more sophisticated and delicate than myself

    mitcho
    Offline
    Enthusiast
    Last seen: 13 years 9 weeks ago
    Joined: 2006-04-01
    Posts: 93
    Points: 0

    Hi Desdinova. Thanks for

    Hi Desdinova. Thanks for your help.

    Unfortunately the solution didn't work.

    The background is not repeating all the way down the page anymore. and the gaps between each content section are filled with the gray color.

    i have attached an image of what im trying to achieve with the CSS

    AttachmentSize
    csslayout.gif 25.19 KB
    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 3 years 4 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi There I've been reading

    Hi There

    I've been reading this thread as it goes.

    You said that you have a repeating background image. Where?

    Can I take it that the image you have is what you want it to REALLY look like?

    If so, that is easily done, and I will show you if you wish.

    Desdinova
    Desdinova's picture
    Offline
    Enthusiast
    Last seen: 9 years 2 days ago
    Timezone: GMT+1
    Joined: 2006-03-28
    Posts: 341
    Points: 4

    Oh, set your body and HTML

    Oh, set your body and HTML height to 100% as well. I strongly think that was the problem.

    About the gaps between the content, mask that with divs with a white background color, fixed width and fixed height.

    As a rule, I never touch anything more sophisticated and delicate than myself

    mitcho
    Offline
    Enthusiast
    Last seen: 13 years 9 weeks ago
    Joined: 2006-04-01
    Posts: 93
    Points: 0

    Treva, I am very interested

    Treva, I am very interested to see your solution to this problem. Yes the image i sent is pretty much exactly how i want the page to look like.

    I have just tried Desdinova's solution and it didnt work out that well in IE. see www.mitchellpage.com.au/index2.html

    Could you please pass on information about your solution?

    thanks

    mitcho
    Offline
    Enthusiast
    Last seen: 13 years 9 weeks ago
    Joined: 2006-04-01
    Posts: 93
    Points: 0

    PS the repeating background

    PS the repeating background image is here: www.mitchellpage.com.au/images/grey-foot.gif

    it is removed from current CSS because i was trying desdinova's solution which only required background color not background image.

    i am happy to use the background image if it makes things easier.

    Desdinova
    Desdinova's picture
    Offline
    Enthusiast
    Last seen: 9 years 2 days ago
    Timezone: GMT+1
    Joined: 2006-03-28
    Posts: 341
    Points: 4

    remove * { height: 100%; }

    remove * { height: 100%; } since that doesn't make sense.

    html { height: 100%; } does.

    lets see how it works out, we'll work from there

    As a rule, I never touch anything more sophisticated and delicate than myself

    mitcho
    Offline
    Enthusiast
    Last seen: 13 years 9 weeks ago
    Joined: 2006-04-01
    Posts: 93
    Points: 0

    almost there.

    almost there.

    see www.mitchellpage.com.au/index2.html

    in firefox the filler div between footer and content section above doesnt appear. you can see this by comparing to IE. i put some text in there to show you what its doing.

    also in IE, i cant seem to specify the correct height of the filler divs. its something like 15px or 20px right now, and i cant get it below that value. its right in FF though.

    thanks

    Desdinova
    Desdinova's picture
    Offline
    Enthusiast
    Last seen: 9 years 2 days ago
    Timezone: GMT+1
    Joined: 2006-03-28
    Posts: 341
    Points: 4

    add overflow: hidden; to

    add overflow: hidden; to those divs

    As a rule, I never touch anything more sophisticated and delicate than myself

    Desdinova
    Desdinova's picture
    Offline
    Enthusiast
    Last seen: 9 years 2 days ago
    Timezone: GMT+1
    Joined: 2006-03-28
    Posts: 341
    Points: 4

    and float the filler div

    and float the filler div left Smile

    As a rule, I never touch anything more sophisticated and delicate than myself

    mitcho
    Offline
    Enthusiast
    Last seen: 13 years 9 weeks ago
    Joined: 2006-04-01
    Posts: 93
    Points: 0

    Its working - check out

    Its working - check out www.mitchellpage.com/index.html

    Thanks for all your time and patience.

    Just a few quick questions: what is the * represent?

    Why float the divs left?

    is the overflow like excess overhang from a div or something else?

    Many thanks again!

    Desdinova
    Desdinova's picture
    Offline
    Enthusiast
    Last seen: 9 years 2 days ago
    Timezone: GMT+1
    Joined: 2006-03-28
    Posts: 341
    Points: 4

    * means everything

    * means everything Smile
    use the search function on your computer, search for *.*
    you'll find every filename * with every extension *

    IE6 can be hacked by setting * html yourelement.yourclassname) {, because < IE6 has a mysterious containing element around the HTML element. no other browser has this (as far as I know).

    an overflow is content which flows out of the box. so say you have a 10x10px div, hell go wild, give it a border so you can see it, and you put within that a big image of 150x150px. the image will flow out of the div (watch the border and you'll see) when overflow: visible (which is default). overflow: hidden; makes sure nothing out of that div is visible. IE6 has some kind of bug that it's willing to show at least one line of text within a lot of things, on top of that, height in IE6 is easily expandable when the content within the div exceeds the height. and that's another bug. so use overflow: hidden; if you want to make sure nothing gets out of the fixed dimensions you've given.

    You had to float the div because floated and non-floated elements are (or should be) 2 very separate things. Imagine they are 2 different pages put over each other, the floated elements not wary of the non-floated elements and vice versa. So to put a non-floated div within a floated div page, you either have to use the clearfix (google) or you have to float it.

    As a rule, I never touch anything more sophisticated and delicate than myself

    mitcho
    Offline
    Enthusiast
    Last seen: 13 years 9 weeks ago
    Joined: 2006-04-01
    Posts: 93
    Points: 0

    Thanks for your in depth

    Thanks for your in depth explanations.

    Really you explained things well and i'm glad everythings working now.

    Now im better equiped for the next time this problem occurs.