# Solved: Browser Issues



## skyhigh007 (Jun 17, 2004)

Hi

I've just created a website using HTML and CSS. The way I created my site was I used a picture of the site set as background and then I just put elements on top of it to match the elements on the picture. Now, the problem is when I make the browser smaller, left or right, the background picture tends to slide and the elements on top of the pictures that I've placed won't match anymore. This kinda of problem only occurs in FireFox and Opera browsers. Anyone know how to fix it ?


----------



## tomdkat (May 6, 2006)

Are you using absolute positioning to place elements over various parts of the background image? I actually created a website that functions in the same manner you describe (a background image with elements positioned over various parts of it). In my case, the site has its elements mostly centered on the page but things adjust as necessary when the browser is resized.

Can you post a link to your site so we can see how it's actually behaving?

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I centered the background image and the elements that are over are centered too using 

wrapper {
position: relative;
width:780px;
margin: 0 auto;
height: 800;

}

Wish I can link it, but I can't because it's a starting company and it's not launched yet. Sorry.
My question is why only Firefox and Opera slides and not other browsers. Is there a specific settings that I need to write in CSS ?


----------



## tomdkat (May 6, 2006)

Ok, if you can't post a link to the site can you at least post ALL of the CSS so we can see how the elements are being positioned? Could you post a stripped down version of the HTML (without all the content or graphics) so we could see the "framework" you're using?

Peace...


----------



## jaymanson (Mar 18, 2007)

Hi,

Without seeing the code, the problem you are having sounds like it's due to the way in which different browsers deal with auto margins, especially when there is an uneven amount on each margin; i.e. your wrapper div of 800px in a window 821px wide can't be comlpetely centred - there must be 10px on one side and 11px on the other. Which side that is seems to depend on your browser! This is acceptable on most layouts but not when images need to be exactly matched up!

One way to fix this would be to centre the wrapper div as you have been doing (except there's no need for the position: relative attribute if that's the highest div on the body) and then relatively position the elements which need to be nested inside the wrapper. This way, the elements should always be in the exact same position inside the wrapper, regardless of where it is positioned. Here's a small example so you can see what I mean:


```
<html>
<head>
<style type='text/css'>
#wrapper {
	width: 600px;
	height: 600px;
	background-color: #0000FF;
	margin: 0 auto;
}
#element {
	width: 100px;
	height: 100px;
	background-color: #FFFFFF;
	position: relative;
	top: 250px;
	left: 250px;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="element"></div>
</div>
</body>
</html>
```
That's the best I can suggest without seeing your code - hope it works for you 

Jay


----------



## skyhigh007 (Jun 17, 2004)

I tried with your method, it still slides. Here's my code.

* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body{
background-image: url(../images/testing.jpg);
background-position:top center;
background-repeat: no-repeat;
text-align:left;
background-color:#brown;
}
#wrapper {
width: 780px;
margin: 0 auto;
height: 755px;
padding: 36px 0 10px 0;
}
.clear {
clear: both;
}

/*-------This is the menu bar*/
#menu {
position:relative;
top: 144px;
width: 408px;
}
#menubuttons{
margin: 0;
padding: 0;
list-style-type: none;
}
#menubuttons a{
display:block;
width: 87px;
height: 21px;
text-indent: -99999px;
text-decoration: none;
overflow:hidden;
}
#middleSpace{
position: relative;
top: 160px;
width: 780px;
height: 502px;


}
.shopping{
position: relative;
top: 30px;
left:30px;
width:720px;
height: 456px;

}

.ordering{
position: absolute;
top: 30px;
left: 85px;
height:450px;
width:610px;
}



#sidebar {
float: left;
width: 150px;
position: absolute;
top: 80px;
left: 50px;
text-align: left;
}
#rightside {
float: right;
width: 550px;
height: 450px;
position: absolute;
top: 35px;
left: 200px;

}
#rightside2 {
float: right;
width: 550px;
height: 450px;
position: absolute;
top: 35px;
left: 120px;

}
/*------This is the Footer-----*/
#footer {
position: relative;
top: 160px;
width: 780px;
height: 93px;
font-size:85%;
}
#footmenubuttons{
margin: 0;
padding: 0;
list-style: none;
position:absolute;
top: 20px;
left: 200px;
width: 600px;

}


----------



## tomdkat (May 6, 2006)

jaymanson said:


> One way to fix this would be to centre the wrapper div as you have been doing (except there's no need for the position: relative attribute if that's the highest div on the body) and then relatively position the elements which need to be nested inside the wrapper. This way, the elements should always be in the exact same position inside the wrapper, regardless of where it is positioned.


This is what I did. 

Peace...


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> I tried with your method, it still slides. Here's my code.


Ok, what if you make the changes below:


```
.ordering{
      position: [b]relative[/b];
	  top: 30px;
	  left: 85px;
	  height:450px;
	  width:610px;
}

#sidebar {
     float: left;
	 width: 150px;
	 position: [b]relative[/b];
	 top: 80px;
	 left: 50px;
	 text-align: left;
}

#rightside {
     float: right;
	 width: 550px;
	 height: 450px;
	 position: [b]relative[/b];
	 top: 35px;
	 left: 200px;
	 
}

#rightside2 {
     float: right;
	 width: 550px;
	 height: 450px;
	 position: [b]relative[/b];
	 top: 35px;
	 left: 120px;
	 
}

#footmenubuttons{
	margin: 0;
	padding: 0;
	list-style: none;
	position:[b]relative[/b];
	top: 20px;
	left: 200px;
	width: 600px;
	
}
```
I coded up a mock-up page and used your CSS above. When I changed the size of the browser window (I'm using Opera), most of the content shifted to be centered while some DIVs stayed in their original locations. Attached are screenshots. I added borders so I could get an idea of how things were poisitioned.

So, the above positions of "relative" I identified are "absolute" in your original CSS. See if changing them to relative helps.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

The Side bars are in absolute because they are within the middleSpace, so I didn't use relative. Anyway, I changed to relative, it still slides. Gotta be something that has to do with firefox.


----------



## jaymanson (Mar 18, 2007)

skyhigh007 said:


> The Side bars are in absolute because they are within the middleSpace, so I didn't use relative.


I think we really need to see the HTML as well, as the CSS has no context for us without seeing what it's actually being used for on the page. Otherwise we're just guessing at solutions here 

Jay


----------



## tomdkat (May 6, 2006)

jaymanson said:


> I think we really need to see the HTML as well, as the CSS has no context for us without seeing what it's actually being used for on the page. Otherwise we're just guessing at solutions here


I agree. I don't even know how accurate my mock-up was.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<titleWelcome


Home
About
contact
Shop

Welcome to the site

Whats New

xx,xx,xxxx[/SIZE][/B]

Launched!

xx,xx,xxxx[/SIZE][/B]

Launched!

Coming Soon!

xx,xx,xxxx[/SIZE][/B]

Back!

xx,xx,xxxx [/SIZE][/B]

middle

xx,xx,xxxx [/SIZE][/B]

Front!










Please Come Back Later


Home
home2
home3
home4
home5

Copyright © 2007 All Rights Reserved


----------



## tomdkat (May 6, 2006)

Thanks for posting the HTML! Ok, I see what's going on now. What's going on is as the browser window is manually resized (grab the window edge and make the window wide or narrow), the *background image* is sliding back and forth so it remains centered on the page. As the browser window width changes, the background image must be recentered, so it moves. This breaks the alignment of the elements that are positioned over the specific areas of the background image.

skyhigh007, one thing you can try is instead of setting the background image for the body tag, set it for the wrapper DIV.

Change this:

```
body{
background-image: url(../images/testing.jpg);
background-position:top center;
background-repeat: no-repeat;
text-align:left;
background-color:#brown;
}
```
to this:


```
body {
text-align: left;
background-color: brown;
}
```
Change this:

```
#wrapper {
width: 780px;
margin: 0 auto;
height: 755px;
padding: 36px 0 10px 0;
}
```
to this:

```
#wrapper {
width: 780px;
margin: 0 auto;
height: 755px;
padding: 36px 0 10px 0;
background-image: url(../images/testing.jpg);
background-position:top center;
background-repeat: no-repeat;
}
```
Now, the background image might need to be tweaked a bit OR the dimensions of the wrapper DIV might need to be tweaked but doing this causes the background image to remain more "stationary" as the browser window is resized. The background image won't be completely stationary but it should move with *everything else* in the wrapper DIV and should preserve the desired element alignment.

Give that a shot. 

EDIT: Mozilla Firefox and Opera will both adjust the position of the background image (when the body element has the background) as the browser window is changed. Safari 3 (beta on Windows) doesn't do this, for some reason.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

The problem is that the body background image is set to 1200 x1100 and the wrapper is set to 780. so, the body background image won't fit on the wrapper.
how do I set the body background image in center with that size since I cant use "top center" for background-position ? The reason I need to center it because the content in wrapper tag has to match the background image so it will create an effect.


----------



## tomdkat (May 6, 2006)

Well, the simplest thing you can do is change the size of the wrapper DIV. Make the wrapper DIV have the desired dimensions to hold the background image. Then, place the elements that go INSIDE the wrapper DIV in the correct spots, using relative positioning.

Since the wrapper DIV will have a fixed size, it shouldn't be resized when the browser window is resized and the elements should stay in place and scroll bars will appear.

Alternatively, you can leave the wrapper DIV alone and put a NEW DIV, maybe called "page-background" around the wrapper DIV, like this:

```
<div id="page-background">
<div id="wrapper">
(wrapper DIV stuff goes here)
</div>
</div>
```
Then the style for the 'page-background' has the background image that is centered and set to the actual width of the background image:


```
#page-background {
width: 1200px;
margin: 0 auto;
height: 1100px;
padding: 0;
background-image: url(../images/testing.jpg);
background-position:top center;
background-repeat: no-repeat;
}
```
 Then, when the browser window is resized, the "page-background" DIV will retain it's full dimensions, scroll bars will appear, and the elements should remain where they should be.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you SOOOOO much!


----------



## tomdkat (May 6, 2006)

Did you get things working the way you wanted? What did you end up doing?

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Yea, I got the way that I wanted to work. What I did was using your method of adding another page wrapper of the first wrapper.


----------

