[Solved] Background/wrapper div displaced in Firefox

[immel]

Hello everyone, I’m Martin and I’m new to this forum but I have been reading CSS-Tricks for a while.

I have a question about a problem that I have experienced on a few pages, it appears in Firefox, Safari and Chrome, but not Internet Explorer.

I’m writing here at CSS-Tricks because now I have this problem with one of my designs, which I started making yesterday and it’s based entirely on things I have learned from here.

The site: http://www.starkitecture.net (please don’t mind the mess, it’s being worked on)

The page design is basically a body with a background image, a wrapper div of 928px and various floated divs inside it.

When the browser window is resized below the wrapper width of 928px it pushes all the content to the right while the background strays to the left, breaking the layout in FF, Chrome & Safari. This does not happen in Internet Explorer (7), if you resize the window everything stays in its correct position. You can see the problem if you open the page in IE and FF/Safari/Chrome, resize the window width below 850px and scroll all the way to the right.

Any help would be greatly appreciated!

Thanks a lot,
Martin

I’m using FF 3.5, Safari 4, latest Chrome and IE 7.

I also tried the page in FF 3.0.12, that version makes some other crazy things happen with the menu – a lot of padding seems to appear for no reason, and it doesn’t seem to respect some other paddings/heights I have.

Edit,
I’ll provide code for specific elements upon request, but I’m not entirely sure where the problem lies and I think the easiest way is to check everything that is inside the wrapper div and the entire CSS (it’s pretty short and well organized)

CSS: http://www.starkitecture.net/wp-content … /style.css

[TheDoc]

It is because your background image is being applied to the body with a "top center". This means that no matter what, the background will be centered in the window, regardless of its width. Try applying the background to a wrapper of some sort instead.

[immel]

I will try that, I’m just wondering why it works fine in Internet Explorer but not in Firefox.

[TheDoc]

"immel" wrote:

I will try that, I’m just wondering why it works fine in Internet Explorer but not in Firefox.

You just need to look at it the other way around! It’s working as it should in Firefox, but is broken in IE!

[immel]

Yeah, I was thinking that’s probably how it is, and that my coding is so bad that I only get it to work in the bad browser :mrgreen:.

I tried removing the image from the body and applying it with a new DIV between the body and the wrapper div, I still had the same problem but now in both FF and IE. It’s probably something fundamental I am doing wrong.

This is what I tried in the CSS (if it looks very weird please remember this is my first time designing with CSS and DIVs – sorry)

Code:

#wrapper-bg { width: 100%; background: url(images/bg.jpg) no-repeat black;}
#wrapper-bg { width: 100%; background: url(images/bg.jpg) top no-repeat black;}
#wrapper-bg { width: 100%; background: url(images/bg.jpg) top center no-repeat black;}

And thanks a ton for your time and help!

[immel]

Sorry about a double post, but I have been trying around some more.

I keep the body background: black; and move the background image to this div, right inside the body:

Code:

#bgwrap {
margin: 0 auto;
background: url(images/bg.jpg) top center no-repeat black;
width: 1100px;
overflow: invisible;
height:100%;
}

This makes the background image stay in place when the window is resized, but creates some other problems that I do not know how to handle.

Firstly I don’t want a horizontal scrollbar to appear once the browser window is smaller than 1100px, I want that to happen only when the page is resized to be smaller than the actual page wrap of 928px.

Secondly I would like the entire image to be visible, without having to specify a pixel height for the div. Or if I can specify the pixel height without the vertical scrollbar appearing unless the content of the page requires it.

Visualization of my wishes with a screenshot (I hope it’s understandable):
[img]http://img268.imageshack.us/img268/6859/starkitecture1249429365.th.gif[/img]

Basically I want the image in the div to behave just like the body background, I don’t want it to trigger scrollbars to appear.

[immel]

Solved the problem by adding the background image to the wrapper (thanks, TheDoc) as well as the background. That way, when the browser window is resized, the image of the div will hide the displacement of the background image entirely, as long as the height of the page content is more than 800px (which wont be a problem).

Code:

body {
font-size: 62.5%;
font-family: Geneva, “Lucida Sans”, “Lucida Grande”,
“Lucida Sans Unicode”, Verdana, sans-serif;
color: #FFFFFF;
height: 100%;
[b]background: url(images/bg.jpg) top center no-repeat black;[/b]
}
#wrapper {
width: 928px;
margin: 0 auto -250px;
min-height: 100%;
height: auto !important; height: 100%;
[b]background: url(images/bg.jpg) top center no-repeat black;[/b]
}

If a browser window is resized below page content width, what Firefox/Chrome/Safari does to top center backgrounds is to keep them centered, no matter what, based on your browser window width. This results in that, if you have any kind of width on your page content, the content will remain in position but the background image will be displaced and only one side of the image will be pushed outside your browser window, while the other side can be seen by scrolling. But IE will keep the background centered, no matter what, in relation to your page content, which seems more logical to me, but I might have overlooked some fundamental use of how FF/C/S handles this.

[Author]

Posts