Having CSS layout issues with FF 1

[ColdPhreze]

Here's a test page of the template only for a website I'm working on:

http://wrapurl.com/directory/test.html

The site originally used page templates with tons of tables, and I'm trying to get rid of most of the tables and use primarily CSS, however I'm having 2 minor issues and 1 major problem...

The trouble is nearly all in FF:
1) In the category box, I cannot get the "{$category_2}" column to be left-aligned at the middle of the box. If it's right in IE6, it's wrong in FF, and vice versa. Right now I have it so it's right in FF.

2) The right margin of the "What's Up" and "Statistics" boxes are not aligned properly in FF. In IE6 they are fine. If I fix it for FF, it's wrong in IE6.

3) This is the major problem. If I can fix this I will be happy: The "New Links" and "Popular Links" boxes, and the 2 Google ad boxes, and the Copyright text work as expected in IE6: Vertically they stay where they should be, and the New Links box remain aligned with the left of the Category box and the right edges of the Popular Links and Category box are aligned. (I'd really prefer the two smaller boxes strech, but couldn't make that work...)
However, in FF, at 800x600, it's fine, at 1024x768, the copyright text goes awry, and at 1280x1024 the google ads jump up where they shouldn't be. At other sizes, different odd things happen.

Please help me out. I'm not that great with CSS - I can usually do what I want, but this has got me stumped.

Thanks!

Check out my DeVry Senior Project:

http://www.remotewheels.com,

and my CarPC Hardware:

http://www.thecarpcstore.com,

and my Spam-Fighter forums:

http://www.thecarpcstore.com/phpbb2

 

[ColdPhreze]

Ok, On #3, I figuered out how to fix part of the problem, but not all. I managed to get the New Links and Popular Links boxes to resize with the browser window properly, so that fixed the google ads from moving where I didn't want them.

However, I still have the copyright text getting messed up between the two google ads in Firefox, and problems #1 and #2 are still there.

Thanks for any help!

Check out my DeVry Senior Project:

http://www.remotewheels.com,

and my CarPC Hardware:

http://www.thecarpcstore.com,

and my Spam-Fighter forums:

http://www.thecarpcstore.com/phpbb2

 

[Vragabond]

1. It will be hard to do it the way you're doing it right now. I suggest you float both columns and make their widths around 50%. That should work more consistently.

2. This is actually the problem of the top banner and not the boxes, which are in the same place in both browsers. And even the top banner is not at fault, but your body element. All inline attributes are deprecated and you should move its declarations to css. Remove all the margin attributes from body and add [tt]margin: 0; padding: 0;[/tt] to your css body declaration. You should move the background colour to css as well.

3. Adding [tt]clear: both;[/tt] on the copyright div should make it push below the google ads. I cannot see any other problem in FF or differences from IE6.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ColdPhreze]

Thank you Vragabond, Star for you for #2 and #3. Those fixes worked great!

However, on #1, I'm not sure if it is something I did wrong or what, but floating the 2nd column screws it up in FF. Seems fine in IE.

Check the link from my 1st post to see what I mean. You probably will have to refresh to see the changes...

Thanks!

Check out my DeVry Senior Project:

http://www.remotewheels.com,

and my CarPC Hardware:

http://www.thecarpcstore.com,

and my Spam-Fighter forums:

http://www.thecarpcstore.com/phpbb2

 

[Vragabond]

You cannot fit two columns with widths 49% and 48% and margins of 1% and 210px all in one line. If you remove the pixel margin you should almost be there. The categories box will then compress to a single line, but that is a common problem with floated elements inside containers and you can use any of the solutions offered online: adding [tt]overflow: auto;[/tt] to the parent, apply [google]clearfix[/google] method or even add a clearing element.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ColdPhreze]

Excellent! Learn something new every day. I'll have CSS down eventually Another star for you.

Now if I could just make this new 3rd google ad box work the way I want in both FF and IE. FF is ok, but IE has issues.

Explanation: There is some javascript that makes the third ad disappear/reappear based upon browser window size... Problem is, even though it's hidden, in IE it's still taking up space, and at smaller browser sizes the ad gets pushed down, which pushes my copyright down below the invisible ad. I used JS to set the height to 1px, which works for FF, but not IE. IE still pushes the copyright down. Also, at certain window sizes, IE causes the 2nd ad box to drop down too. Ugh, I hate IE.

Thanks!

Check out my DeVry Senior Project:

http://www.remotewheels.com,

and my CarPC Hardware:

http://www.thecarpcstore.com,

and my Spam-Fighter forums:

http://www.thecarpcstore.com/phpbb2

 

[Vragabond]

Use display: none; and display: block; instead of the visibility: hidden; and visibility: visible;. The latter just makes the element invisible while the former makes it go away. And height: 1px works in FF because FF respects the height. IE6 will always expand the container to fit what is in it.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ColdPhreze]

Thank you! This was the hardest page I had to do, so hopefully I've got it all under control now.

Thanks for all your help

Check out my DeVry Senior Project:

http://www.remotewheels.com,

and my CarPC Hardware:

http://www.thecarpcstore.com,

and my Spam-Fighter forums:

http://www.thecarpcstore.com/phpbb2