CSS margins on my website display differently on Firefox / ie / Chrome

HTML & CSS
1

I need help with this website they dont display correctly on on the browsers.

Check the website : http://www.gtcbusiness.net/scmc/

on chrome and firefox.

How do i resolve this issue i know it is from the CSS margin i used.

2

Hi,

It looks the negative margin bottom on #page is being ignored by webkit. I’m not sure what its doing there anyway (unless it was an abandoned attempt at a sticky footer).

If you make these changes then both browers will be the same and you can work from there:


#u2297-4{margin-top:0}
#page{margin-bottom:0}

However, I didn’t check any of the other pages so I don;t really know what you were doing with that negative bottom margin anyway so you will need to check.

3

Thanks, it worked , lastly i have one last problem that i have at http://www.gtcbusiness.net/snowflakes/4/ the circles are not well aligned on all browsers and screen sizes .

4

When I try to check your page, Chrome is killing it. The script your a using for your slider conflicts in the JS.
Second, this is maybe something you not going to like. Your (snowflakes/4) page is build with tables. After 2003 this is not a smart and reliable way to make a layout and get a good flow in your page.
If you want to have easy access to your CSS for styling your page, loose the tables and insert div’s. You are using to much inline css to style your page this results in slow pages and shows different in browsers. It’s more work maybe now, but at the end you will be thankful you changed it.

5

Hi,

As mentioned above this is quite awkward with that table structure. It is also compounded by the use of absolute positioning (with inline styles) which don’t work well in a table context.

This is a quick fix for that page but as there are no real hooks to target this code you will need to check it doesn’t hit other pages in error.


#image + div{left:0!important;right:0!important;margin:auto!important}

Or remove the inline styles from that div and apply via class instead.

i.e. This is the div I am talking about.


<div style="position:absolute; top:160px; left:125px; background-color:transparent; width:880px; height:350px; float:left"> 
			<!-- The content. -->

If it’s an old site then you have an excuse for using tables but it might be time for a re-design :slight_smile: