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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.