Width of header/footer repeated image when window is shrunk
Hey all,
I have this interesting scenario and i'm wondering if someone could assist me since it's been something that even stumped my buddy who works in web dev.
I don't like giving out links usually so i will explain this problem using images.
My concern is when I minimize the browser below the initial width of my container; upon scrolling to the right, i notice that the repeated bg image i'm using for the header and footer are eventually stuck once i've scrolled beyond the new browsers width.
My width is set to 100%, so my css is just doing what it's told, however i'm wondering if anyone has a solution to this problem that I've seemed to had time and time again on other sites.
1.jpg
2.jpg
3.jpg
I have this interesting scenario and i'm wondering if someone could assist me since it's been something that even stumped my buddy who works in web dev.
I don't like giving out links usually so i will explain this problem using images.
My concern is when I minimize the browser below the initial width of my container; upon scrolling to the right, i notice that the repeated bg image i'm using for the header and footer are eventually stuck once i've scrolled beyond the new browsers width.
My width is set to 100%, so my css is just doing what it's told, however i'm wondering if anyone has a solution to this problem that I've seemed to had time and time again on other sites.
1.jpg
2.jpg
3.jpg
ASKER
Those are my current attributes.
Without seeing the code and debugging using FireBug, it may be a little tricky to find your problem!
That is not normal browser behavior - my first thought is to ask if you have validated both your HTML and CSS using a valid DOCTYPE ? [see w3.org]
Second, this can sometimes appear if there is a containing div (often used for content) that either applies this repeating background, or has its own interfering with it.
For the repeating bg, where is it applied? The <body>, or in <html> or in another containing <div> ?
Second, this can sometimes appear if there is a containing div (often used for content) that either applies this repeating background, or has its own interfering with it.
For the repeating bg, where is it applied? The <body>, or in <html> or in another containing <div> ?
ASKER
Yes, of course, i always validate my code.
The main gradient you see in the first picture is set in the body, however the header is completely separate from the container div.
My header div is by itself and spans a width of 100% with its own bg image. Below that the container begins, so they are two separate divs altogether and one is not contained in the other.
I've decided to upload my files and remove any particular wording. The footer is not included, but thats not important.
urology.zip
The main gradient you see in the first picture is set in the body, however the header is completely separate from the container div.
My header div is by itself and spans a width of 100% with its own bg image. Below that the container begins, so they are two separate divs altogether and one is not contained in the other.
I've decided to upload my files and remove any particular wording. The footer is not included, but thats not important.
urology.zip
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Arka3L>>The main gradient you see in the first picture is set in the body, however the header is completely separate from the container div.
I don't really see the need to have two separate background containers for that (one in header, one in body). Just take a single 1px-wide slice as high as needs be to grab both the header menu bit and the fading gradient and repeat it on body. Then, you can define an overlaying div for the header with Background: transparent. As for the following content boxes ( the ones with "serving your health" and "Welcome to Urology") just give them a margin:0 auto; to center, and apply the background color as needed.
I don't really see the need to have two separate background containers for that (one in header, one in body). Just take a single 1px-wide slice as high as needs be to grab both the header menu bit and the fading gradient and repeat it on body. Then, you can define an overlaying div for the header with Background: transparent. As for the following content boxes ( the ones with "serving your health" and "Welcome to Urology") just give them a margin:0 auto; to center, and apply the background color as needed.
ASKER
Most of the time is the obvious solutions that work best!
Arka3L>>Most of the time is the obvious solutions that work best!
I would test that in several browsers (Opera,Chrome,IE,FF,etc) - I have had unexpected results with min-width and min-height unless using the min-height fast hack:
http://www.dustindiaz.com/min-height-fast-hack/
I would test that in several browsers (Opera,Chrome,IE,FF,etc) - I have had unexpected results with min-width and min-height unless using the min-height fast hack:
http://www.dustindiaz.com/min-height-fast-hack/
html
{
width: 100%;
}
body
{
width: 100%;
}
#header
{
width: 100%;
}