CSS Background Issue

On certain browsers and mobile devices, my site's background doesn't go across the screen and leaves a white space on the right (see attached pic).  The background is just a solid color with a pattern overlay.  I know it's most likely a css issue but have no idea how to fix it.  The site is www.almaeasompta.com  Please help. :)

Background error on top right of image
LVL 3
E-DubFrontend Web Developer & Graphic DesignerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
How many guesses do I get to guess which browsers are a problem.

Cd&
0
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
LOL, actually you'd be surprised to know that it is NOT explorer but Firefox 7.
0
COBOLdinosaurCommented:
What I am seeing is just about every alligator I don't like to swim with.

In the CSS there is absolute positioning, proprietary hacks and even pie.htc. There an overload of javascript(jquery) and an ie7 hack to load a stylesheet.  Which tells me there are probably other ie 7 hacks and one of them is probably what is biting ff7.  The page looks fine in FF8.

This is the kind of thing that gets fixed by luck.  By someone coming along that had the same combo of elements an knows how to fix it, or trial and error.

So your best hope is that someone comes along that has seen it before.  You might want to ask Community Support to move it to the jquery or javascript topic where there might be an Expert who has played with these toys. It might be a CSS issue, but the fact that it is okay in FF8 indicates that perhaps the scripting is altering some ff7 needs.



Cd&
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

sunu340Commented:
I guess the problem is here:
div .header-color & .footer-color is defined with width:100% and position:absolute; while the other div .wrapper is defined with min-width:1062px.It enclosed other div having width:1034px;
So when browser width decrease beyond 1034px it comes with a scroll.As .header-color & .footer-color are defined with width:100% the background wont stretch upto the end of wrapper div and creates a white space.

U can try this...
.header-color {
    background: none repeat scroll 0 0 #1854AF;
    height: 354px;
    min-width: 1062px;
    position: relative;
}
.wrapper {
    margin: -354px auto 0px; //adjust accordingly
    min-width: 1062px;
}
.footer-color {
    background: none repeat scroll 0 0 #1854AF;
    min-width: 1062px;
    position: relative;
}

Hope this helps :-)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
NrisimhaCommented:

Well, I can't see correct this web page with Firefox 9.0.1, IE 8, Safari 5 and Google Chrome.
So, I hope these modifications will correct the code.

Nrisimha
0
s8webCommented:
You have a stray closing </div> tag that could be causing your problem.

http://tinyurl.com/847k2gv  <--W3 Validation

0
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
Thanks everyone for your help! I figured it out, I just needed to add the following code to the css and now it works. :)


body,.header-color,.header-color1 {
	min-width:1075px;
}

Open in new window

0
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
sunu340's comment gave me a good starting point and I was able to figure it out from there.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.