Welcome to WebmasterWorld Guest from 54.166.122.69

Forum Moderators: incrediBILL

Different Browsers show very different alignments

   
1:55 am on Feb 17, 2009 (gmt 0)

5+ Year Member



Someone recently told me a web site I developed for them is not aligning properly and they use firefox for their browser.

I checked the web site in multiple browsers and for the most part it appears ok except for firefox, netscape and chrome.

The page is was looking at is extremely basic - 3 tables all centered underneath one another. How can I found out what is wrong with my coding in the browsers where the alignment is out of skew?

2:05 am on Feb 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It may be necessary to post enough code to replicate the problem. Maybe there is simply some default margin or padding that is out of whack and needs to be specifically declared.

Not enough information to make many suggestions, but working in IE, and not several other browsers is a flag. This would indicate a coding problem and not a browser problem. How about Opera? If it is was designed with IE as the primary testing platform that is problem #1. Code to standard first, then fix IE.

2:44 am on Feb 17, 2009 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Your first step in curing any cross-browser display issues should be to use the W3C Validators:

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

Trying to fix display problems with invalid code can actually be impossible, like trying to win a whack-a-mole.

3:34 am on Feb 17, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



tedster is 100% correct. Declare a DOCTYPE and validate the HTML and CSS before anything.

The description of your tables not stacking correctly in some browsers or browser versions screams margin issues however, and my first bet sloppy code that validates, but doesn't render 'correctly'. It could be good code that just trips up and needs a fix, but that would be my second option.

7:25 am on Feb 17, 2009 (gmt 0)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



also as mentioned by D_Blackwell, the default margins and/or padding are typically different among browsers.
after validating, you might try setting all margins and padding to zero for the document and then specifying overrides where necessary:
* {
margin:0;
padding:0;
border:0;
}
 

Featured Threads

Hot Threads This Week

Hot Threads This Month