Firefox issues - need some help !

Hi all,

I am having some problems with my arcade site in firefox !

Could someone help me out ?

Problems -

1) right hand side bar does not align as it it should ! I.e - like the left one !

2) the footer section is messed up !

URL IN MY SIG

If you can recomend any changes it will be very REPppreciated

 

Nope because the sites is made purposely for I.E not Firefox.
Try view the sites with I.E?

 

Not sure I get you, I am viewing them on I.E !

I need to make the arcade cross browser, firefox mainly !

 

Which will be difficult, as this:

<div class="footergamesh2"><h2>Top 10 games from each category</h2></div>

Code (markup):

and this:

input.button { 
...
  float : center;

Code (markup):

and this:

</center>
</body>
</html><!-- Script Execution Time: 0.100609-->
<!-- gzip successful -->

Code (markup):

are a few of the clues showing that this page was written by 'tards. No offense, but a page is lucky to show properly in any browsers let alone all of them with this kind of code. (note there's nothing invalid with the first example but there's no need for that bloat, when you could just have an h2, no extra divs or classes, and simply refer to it in the CSS as #footergames h2)

As for the actual problem, I didn't crawl through the layers of code, but I'm guessing IE6 is wrapping its floats like it tends to do, shoving the footer to the bottom where it belongs and enclosing the footergames. FF (and any other more compliant browser like Opera, Konqueror, Safari, or whatever.... IE8?) does not automatically wrap floats. I think either a float needs to be cleared (at least by the footer) or the container holding all the floats given overflow: hidden to make it wrap the floats (and thus also push the footer down to the bottom where it belongs).

Try that and let us know how it works.
I did not check the site out in IE7 but I THINK it would also wrap the floats improperly, but maybe they fixed that? Forgot.

*edit ah I couldn't even see that one sidebar was precisely positioned over the left... okay that's another problem, and here it is:
(after searching through 5 CSS sheets... if I can build a site with just one, can't a template-writer???)

.adside {

position:absolute;

	top:150px;

	float:right;
...

Code (markup):

Again, these guys didn't know what they were doing. Positioning absolutely has nothing to do with floating. Remove position: absolute and the top:150px (make that part margin-top: 150px; if you need to push it down after simply floating it right). IE picks float: right I guess, while FF is like, which the f*ck do I pick?? And pukes.

PS I love your avatar : )

 

haha thanks my avatar kinda sums up this posts !,, Im not sure when you looked at the site, i Have made some minor changes...browswer shots is so slow !

 

lol i never knew you could float: center; :s

 

That's why I don't use Browsershots... I've only ever managed to see two pages ever.

Okay, FF looks great now, but that strip with the dancing chick is still fux0ring stuff. The main part of the page in IE6 is pushed down to the bottom (but otherwise looks okay, or, looks like FireFox).

That adside stuff is still in the CSS but not in the HTML. Something's pushing down all that stuff in IE and it's likely a float. They've floated floats on top of floats here. I'm not sure which one it is, but we know that the thing causing the problem should be above the bulk of the page since the rest of it looks okay. Something between your top menu (topbackground) and the rest of the page.

There's a main, which has a width of 100px, and inside is a .container which is 820px (and clumsily centered by accident). Rightside= 580px and leftside=170px = 750 I think (never was good at math), so you'd think they'd fit... but if something in them is too wide, or something is floated without fixing IE6's double margin bug (sometimes IE6 doubles the margins on something floated, and adding display: inline magically fixes it.

For some reason the container was set to display: table as a "firefox hack"... not sure what that means or what they intended, but IE doens't know what that is and ignores it.

 

Float center ??? ahaha - This script is turning sour..

 

hmm now main content is pushed down as is left side bar!!!

Could be those floats as you mentioned ?

 

ok I have them main content where it should be *roughly !

Next the side bar ! Hows it looking in FF ?

 

OK - uP date

Both side bars look normal in ie 7 or 6 i think...not sure about FF (someone look please!!!)

But main content is down ! Ba*tard

Any solutions !

 

RIght now FF looks like it did at the beginning of the thread, except the footer stuff is okay. The only main problem I see in FF is that the stupid adside is still both absolutely positioned AND floated.

.adside {

position:absolute;

	top:150px;

	float:right;

	background: #ffffff;

	width:170px;

	padding:5px;
}

Code (markup):

You gotta pick one. Right now, in FF it's sitting right over the left sidebar, while in IE it's kinda near the right side (and in IE, the left sidebar is in place, but the middle part is pushed down, while the right sidebar is not quite in place).

What I'd prolly do is float all three parts left. That left sidebar left, the middle part left, and the right sidebar (adside) left. That should look ok in FF. IE6 will probably drop part of it because it thinks there's not enough room. Use display: inline to stop any doubling of margins (usually done on the float closest to the container so the left sidebar), and increase the size of their container (they're all in one box at some point, right?) until they can fit.
***********************
Or you can just float the left sidebar, leave the middle part alone (no set width, just a left and right margin equal to the widths of the sidebars) and you could absolutley position the right sidebar but then it needs to be positioned in relation to its parent. So that parent continer needs a position set (position: relative will do) and then you could do something like
.adside {
position: absolute;
right: 5px;
top: 5px;
width: 170;
}

FF is free, you can just download it so you can see what's going on in both FF and IE. There must be some reason why you can't? Since browsershots sux0rs so bad.

Just to be extra clear for anyone reading this (esp template makers): floats go left, right, none, or inherit. Nothin else. I've seen float: center so many times... one of these days I should figure out what browsers do with it.

 

Hi all,


I think the side bars are ok, but the main content is way down (in I.E)!

Any1 check it FF

 

^ see above ^

Ie thinks there's not enough room for the three columns, so it pushes the last one down.

 

Great !! So I need to increase some widths....(In a nutshell) I will carry on...

 

You might want to read this:
http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15
A couple of basics about float bugs in IE6.

Also, remember that at least on my IE6, the right sidebar isn't quite in place either. It's too far inwards.
Fix the code on that sidebar... and I guess I'll recommend the absolute positioning so that IE6 doesn't have a problem with the floats. Just remember that anything that's absolutely positioned doesn't see the page and the page doesn't see it. Meaning if it gets longer, it will not push the footer down at all. It will simply cover other elements up.
So float the left sidebar left, set no width at all on the middle part and give it like margin-left: 170px and margin-right 170px to make room for the sidebars and set a position on the right one (currently, there's no position at all set... and get rid of the float: right then too).

 

ok Thanks Stomme, I have repd you for your help...

Im kinda stuck on this one... So I will just keep on tweeking

 

ie7 doesnt have enough room for all 3, so center gets pushed below the other two.
ff does the same but with the left sidebar positioned over the top navbar.

just an fyi

[edit] another thing for firefox... the footer is pushed over to the right, hiding part of the text and forcing the page to be wider than you want it. in other words, the page is extended to the right, so a large dark blue block appears up top and in the footer, which is cutting off the footer text. of course, noone would notice unless they scrolled right to look at the ads. fixing the above mentioned problems could probably help fix this issue.

 

ok who wants to fix this for me ! Im fu*kd off !!!

 

right got it back working in I.E 7 (i think) But its proably screwed it FF