Skip navigation
Currently Being Moderated

Layout problems with Chrome

Jun 16, 2013 1:00 PM

Tags: #help #dreamweaver_cs6 #layout_problem

CSS margin-left:10%;is  being ignored by Google Chrome Any ideas please, folks?

 

My code and CSS have been successfully W3C validated and everyworks in all other browsers, but Chrome ignore the margin-left parametres.

Has anyone come accross this before please and if so what is the solution.

 

My boilerplate fluid grid website has been created with Dreamweaver CS6 and for any one interested the address is:

 

http://www.marycliff.co.uk

 

Many thanks.

 

Tomski

 
Replies
  • Currently Being Moderated
    Jun 16, 2013 1:16 PM   in reply to Pianomad

    You have 5 CSS files.  Where exactly did you put the 10% margin?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 2:42 PM   in reply to Pianomad

    What happens when you remove the left margin and justified text?

     

     

    @media only screen and (min-width: 769px)

    #MainTable {

    width: 80%;

    float: left;

    font-size: 18px;

    font-weight: bold;

    line-height: 22px;

    color: #000;

    margin-left: 10% !important;

    margin-top: 0;

    margin-bottom: 2%;

    text-align: justify;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 3:06 PM   in reply to Pianomad

    You seem to have quite a few conflicting styles for #MainTable with different widths and margins in all of them.  Very confusing.

     

    #MainTable  {width: 80%; float: left; font-size: 18px; font-weight: bold; line-height: 22px; color:#000; margin-left: 10% !important; margin-top: 0%; margin-bottom: 2%; text-align: justify;}

     

    #MainTable  {display: table; width: 92.5%; float: left; font-size: 16px; font-weight: bold; line-height: 18px; color:#000; margin-left: 4%; margin-top: 0%; margin-bottom:2%; text-align: justify;}

     

    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

    @media only screen and (min-width: 481px) {

    #MainTable  {width: 88%; float: left; font-size: 16px; font-weight: bold; line-height: 20px; color:#000; margin-left: 6%; margin-top: 2%;}

     

    /* Desktop Layout: 769px to a max of 1600px.  Inherits styles from: Mobile Layout and Tablet Layout. */

    @media only screen and (min-width: 769px) {

    #MainTable  {width: 80%; float: left; font-size: 18px; font-weight: bold; line-height: 22px; color:#000; margin-left: 10% !important; margin-top: 0%; margin-bottom: 2%; text-align: justify;}

     

    I think you need to streamline your CSS code.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 3:47 PM   in reply to Pianomad

    As an experiment, I disabled maintable.css.  

     

    I added this to grid-links-dream.css

     

         .gridContainer div {padding:0 2%; clear:both;}

     

    You may need to tweak a couple of  things, but I see no reason to keep redundant & conflicting styles in maintable.css when you don't really need it.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2013 4:45 PM   in reply to Pianomad

    In my opinion, it's a fool's folly to tamper with boilerplate.css, default FluidGrid.css or respond.js as these files drive the entire Fluid Grid system.  And FGLs are very temperamental.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 11:34 AM   in reply to Pianomad

    Unfortunately, IE is the least standards compliant browser on the planet. In the past, MS just made up their own rules and web developers had to find ways to workaround IE's bugs.

    http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

     

    I build my layouts to perform well in Firefox, Chrome, Safari and Opera.  Then I test in IE and use conditional comments for pre-IE9 when needed.

     

    To credit a correct or helpful answer, log-in to the web forum.

    http://forums.adobe.com/message/1877494#1877494

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points