Announcement

Collapse
No announcement yet.

Layouts different in all browsers

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Layouts different in all browsers

    Hi
    I've just uploaded a first draft 'trial' site but the layouts are showing differently in all browsers:

    This page is probably the best example of what I'm talking about:
    http://trials.actinic.com/trials/tri.../adhesives.htm

    In Internet Explorer 1) the site is left justified (should be centred), 2) the background images for the top and middle section of page don't show (but the background of the bottom section DOES show??!!!), 3) however on the product area, the products ARE aligning against each other (which is what I want them to do, but aren't in any other browser)

    In Safari 1) the product menu down the left hand side, for some reason the menu item boxes are repeating beneath each other (ie, one menu item, then an empty box, then next menu item, then an empty box, etc etc)

    In Firefox, Safari and Chrome the site IS centred (great), all the background images show (great), but the products are showing one per line (in the mid-section)

    Here is the css I've used for the centreing, background images, and the products areas:

    Code:
    #header {
    	background-image: url('header-bkgd.jpg');
    	background-repeat: no-repeat;
    	width: 970px;
    	margin-left: auto;
    	margin-right: auto;
    	height: 130px;
    	padding: 10px;
    	font-size: 12px !important ;
    }
    #content {
    	margin-left: auto;
    	margin-right: auto;
    	background-image: url('content-bkgd.jpg');
    	background-repeat: repeat-y;
    	overflow: hidden;
    	width: 970px;
    	margin-top:0px;
    	padding: 10px;
    	height: auto;
    	margin-bottom: 0px;
    }
    .productbox {
    	width: 260px;
    	padding: 10px;
    	float: left;
    	border: 1px solid #666666;
    	margin-right: 10px;
    	font-size: 12px !important;
    }
    If someone could help me with this I'd be very grateful

    #2
    I suggest you first work in Firefox with Firebug and check all your css widths, paddings, margins, and inheritance.

    Comment


      #3
      I would suggest you take a look at your code tags and the doctype declaration, as you are triggering quirks mode in IE and thats the reason for the unexpected results. FF is far more forgiving but it doesn't necessarily make it right...!

      Comment


        #4
        Thanks, the DOCTYPE appeared to be causing the cross-browser layout issue...

        Comment

        Working...
        X