css problem with firefox and chrome

Hello,
I am trying to position my info next to login box, and the problem rises when I check in chrome, the page is good, but when I try it in firefox the text jumps up all the way to the top. Can someone please tell me what am I doing wrong here?

The site is the WebSite and here is the css for the positioning too in case:

.content {
width: 680px;
float: left;
padding: 0 5px 20px 0;
height: 328px;
margin-top: -300px;
}

Thanks in advance

 

Can you show a demo or something?

 

Thank you wiicker95 for the response, the website link is there.

 

I fixed the issue now, for the text, but another problem has risen:
1. The background image is over flowing really big not, that forces the browser to move to right site, here is the code for the background image:
.body {
margin: 0 -344px 0 ;
height: 300px;
background-image: url(website_url/bg.jpg) ;
background-repeat: repeat-x;
}

2. Also if you you are using zoom and a smaller screen, the text will jump up instead of staying in position and this is the code I am using:
.index_login{
position: fixed;
width: 680px;
color: white;
font-size: 26px;
line-height: 1.8em;
margin-top: -90px;
overflow: hidden;

}

How can I fix these issues, and thanks for the help.

 

Oh I see, it's a mess on all possible browsers, since you don't clear the floats. But why do you use these floats anyway??

 

This is the css I use, and don't see any float in the css:
.body {

margin: 0 -344px 0 ;
height: 300px;

background-image: url(http://www.shoutor.com/bg.jpg) ;
background-repeat: repeat-x;
}
.custom-index {
top: 50%;
height: auto;
width: 990px;
margin: -154px 0 0 -510px;
}
.custom-index{
position: absolute;
left: 50%;
width: 990px;
}


.index_right{

padding-left: 15px;
padding-right: 15px;
float: right;

width: 310px;
height: 328px;
margin-right: -350px;
margin-top: 250px;
}
.index_left{

background: url(http://www.shoutor.com/shoutz.png)right bottom;

height: 280px;
width: 360px;
float: right;
margin-top: -90px;
}
.sidebar {
width: 310px;
float: right;
margin-top: 20px;
}

.index_login{
position: fixed;
width: 680px;
color: white;
font-size: 26px;
line-height: 1.8em;
margin-top: -90px;
overflow: hidden;

}
.main {

padding-right: 15px;
float: left;

width: 680px;
height: 328px;
margin-right: -350px;
margin-top: 220px;

}
.leftcontent {
width: 680px;
float: left;
padding: 0 5px 20px 0;
overflow: hidden;

display: inline;
}
.leftcontent .content-container {
width: 190px;
margin-right: 30px;
float: left;
font-size: 20px;

}
.leftcontent .content-container h3 {
color: #014467;
border-bottom: 1px solid #014467;
margin-bottom: 10px;
padding-bottom: 10px;
font-size: 16px;
}
h1, h2, h3 {
text-transform: uppercase;
font-weight: normal;
line-height: 100%;
font-family: 'GothamBoldRegular';
}
.content-container p{
line-height: 1.1em;
align: justify;
font-size: 14px;
}

 

Well, it's not positioned propely...

Do you have a PSD file for it? If so, send it, I'll code it for free

 

Sorry I don't have psd, just the css and php code.

 

OK, so let's try something else, if no PSD.

The following text :

"Welcome to Shoutor

[You Win] - virtually every activity rewards points which can be exchanged for cool prizes."

Why is the position fixed?

It shows quite fine on chrome, only the fixed position is the issue, I'll code it from a screenshot.

 

Another thing, don't repeat-x the bg file, it goes where it shouldn't. Center the bg image as div, and then use background-position (for sprites) to repead the edge of it.

 

.body {
margin: 0 -344px 0 ;
height: 300px;
background-image: url(http://www.shoutor.com/bg.jpg) ;
background-repeat: repeat-x;
}

So what should I do here?

 

.body is not a good name for a class, since it can be confounded with the "body".

So there's what you should do :

For HTML :

<div class="bluebackgroundbg"><!--The repeated part of bg.jpg or any bg file-->
<div class="bluebackgroundglow"><!--The centered glow (bg.jpg or any bg file)-->
</div>
</div>

For CSS :

.bluebackgroundbg {
background-image: url(http://www.shoutor.com/bg.jpg);
background-repeat: repeat-x;
background-position: -989px 0;
width: 100%;
height: 300px;
position: absolute;
top: 94px; /* Not sure about that one, the distance from the top to the image */
left: 0px;
}


THIS DOESN'T WORK PROPERLY! YOU HAVE TO DO THIS :

Or you can just slice a 1px in width and 300px in height image file, and just repeated the same way as this one, with the same position.

.bluebackgroundbg {
background: url(http://minordesigns.com/PORTFOLIO/bg.png) repeat-x;
width: 100%;
height: 300px;
position: absolute;
top: 94px; /* Not sure about that one, the distance from the top to the image */
left: 0px;
}
And then for the glow:


.bluebackgroundglow {
background: url(http://www.shoutor.com/bg.jpg) no-repeat;
width: 990px;
height: 300px;
margin: auto; /* This might not work, depending of your current code. If it doesn't, I'll tell you what to do;
}

Try this...

If it doesn't work, let me know.

 

OK I've tested it and it works:

http://minordesigns.com/PORTFOLIO/test.html

Just tell me one thing, why did you fix that text by the logo?

 

Thanks @wiicker95, this code worked
.body {
background-image: url(http://www.shoutor.com/bg.jpg);
background-repeat: repeat-x;
background-position: -989px 0;
width: 100%;
height: 300px;
position: absolute;
top: 94px; /* Not sure about that one, the distance from the top to the image */
left: 0px;
}

but the issue of the text and image moving up and down by size of the browser is still there. Also if you use zoom the text and image will move around.
How would I fix that? This is the css for those 2 content:
.index_left{

background: url(http://www.shoutor.com/shoutz.png)right bottom;
height: 280px;
width: 360px;
float: right;
margin-top: -90px;
}
and
.index_login{
position: absolute;
width: 680px;
color: white;
font-size: 26px;
line-height: 1.8em;
margin-top: -90px;
overflow: hidden;
margin-top: -90px;
}

 

It's because it's centered vertically. Use "top:" and "left:" instead of margin, combined with position: relative; (the footer has to move down if the height changes).
I don't really see how you built your containers, so I can't say anything else other than this...

Note that margin and top, left, right do NOT do the same thing, and you are using margin where you shouldn't, or in the incorrect way. You've been also double-defining the same element, and that one is also NOT to be done.

 

OK so basically the problem is actually this :

.custom-index {
height: auto;
margin: -154px 0 0 -510px;
top: 50%;
width: 990px;
}
.custom-index {
left: 50%;
position: absolute;
width: 990px;
}

Remove both parts (it's really some nonsense), and put this :

.custom-index {
width: 990px;
height: /* put the height here, or 100% if the divs inside are relative */
position: relative;
top: /* adjust the top */
margin: auto;
}

 

Didn't work out, everything basically jumped up and all over the place.

 

Something hasn't been formated correctly (well, almost everything). But anyways, I see that the footer is not relative.

I'll HTML+CSS the website from the screenshot ASAP.

 

please search it "Browser.php Detecting a user browser from PHP | Chris Schuld"