Skip navigation
clementius
Currently Being Moderated

Fluid Layout woes on IE (Internet Explorer), mostly but not only 10

Sep 19, 2013 10:35 AM

Tags: #encoding #html5 #creative_cloud #ie_positioning #cc #ie_display

The pages are all here - http://gaisllc.com/y/ and reachable.

 

They all look fine on anything but IE, esp IE 10 (but not only IE 10). On the technology page in particular, the bullets on the bullet points sometimes move to the left of the image in the first section, for example, or just move far to the left (see list under Pegasus LIDAR section). Sometimes text hangs over into images, which occurs even on the main/default page. The nav changes to squared corners if I go into compatibility view, and the nav entries change alignment in the nav area. Customer is not satisfied, which is fine - neither am I!

 

This is my first shot at using fluid layout.

 

I have checked another thread here where the person asked why his fluid layout wasn't displaying correctly on IE 10. I believe the final answer was that he rebuilt the site (or page - don't recall which) and then it worked.

 

I did run the validation at validator.w3c.org and found odd errors/warnings I did not understand - http://validator.w3.org/check?uri=http%3A%2F%2Fgaisllc.com%2Fy%2F&char set=%28detect+automatically%29&doctype=Inline&ss=1&group=0&verbose=1&u ser-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

I wouldn't object to any suggestions about how to address this also. It seems to be saying the the HTTP header is iso-8859-1 for encoding, but the validator is using legacy windows-1252, but then objects to windows-1252 and says I should be using utf-8, which is in the meta. That isn't helping me much yet!


Would welcome suggestions.

 
Replies
  • Currently Being Moderated
    Sep 19, 2013 1:22 PM   in reply to clementius

    Best advice I can offer anybody using FGLayouts is DO NOT TAMPER with code in either the FluidGrid.css or boilerplate.css files.  Even experienced coders can muck things up in a hurry.  Use a separate external stylesheet for all your content styles.

     

    In smaller viewports, the page background is all black & hard to read.  Is this intentional?

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 19, 2013 2:34 PM   in reply to clementius

    In that case, start over.  Rule #1 in FGLayouts is build mobile first because everything else is based on that primary layout.  It doesn't need to be fancy but it must work.  If mobile doesn't work, nothing else will either.

     

    Then build Tablet layout.  Finally, build your Desktop layout.

     

    Don't dwell too much on content or styles etc....  Just get the layouts squared away first. Test and re-test in multiple browsers throughout development.  If something goes wrong, validate code and fix your errors.

     

    HTML - http://validator.w3.org/

    CSS - http://jigsaw.w3.org/css-validator/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 20, 2013 12:54 PM   in reply to clementius

    I'm saying, don't touch the FluidGrid.css or boilerplate.css files either manually or with CSS editor.  FluidGrid Layouts are very temperamental and will break without much effort.  Always use a separate external style sheet for your content styles.  That way if you make mistakes -- either manually or with the CSS editor, it won't break the site.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 20, 2013 6:21 PM   in reply to clementius

    I, for one, will not touch FG for the reasons that Nancy has mentioned.

     

    There are better frameworks out there like Bootstrap, Foundation or the commercial CSS Column Composer Magic

     

    For a discussion have a look here http://css-tricks.com/forums/topic/your-thoughts-bootstrap-3-vs-founda tion-4/

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 24, 2013 9:43 AM   in reply to clementius

    Boilerplate.css validation doesn't mean much because it's riddled with star hacks & vendor-prefixes to make various browsers conform to base rules.  

     

    Examples: 

    *display: inline; *zoom: 1;

    -ms-interpolation-mode: bicubic;

    -webkit-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%;

     

    Jigsaw doesn't like star hacks & vendor-prefixes because technically they are invalid CSS code. However, prefixes are a necessary evil until such time as all browsers catch up to modern standards.   So for now, just trust the code & don't fret about the errors.

     

    FG Layouts use respond.js to alleviate backward compatibility issues in pre-IE9 browsers.  I'm not aware of any issues in IE10.  So it's very likely something else is going on.   Without a link to the page, it's anybody's guess what that might be.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 24, 2013 10:56 AM   in reply to clementius

    I am curious about this - using the fluid grid controls in design view (the ones that let you dupe a div, move it up, swap places, change sizes, etc) - do not all of these change the fluidgrid.css file, and if so, should I avoid them as well? Or do you consider them safe enough?

    Everything you do in initial phase of FluidGrid Design mode effects the fluidGrid.css code.  That's how you define your layouts for mobile, tablet & desktop.  Safe?  Yes, I would say it's mandatory.

     

    things like ,zeroMargin_tablet or .hide_mobile - these seem to imply that they apply only to their respective contexts (or so I read it).

    Yes, that's correct.  Say you want to hide some divisions from smaller devices.  The CSS code for that might look something like this:

     

    /* Special Rules for Mobiles */

    @media only screen and (max-width: 480px) {

    #divName {display:none} /**hide div**/

    }

     

    /* Special Rules for Tablets, Desktops */

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

    #divName {display:block/**show div**/

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 25, 2013 9:37 AM   in reply to clementius

    I'm not using CC so my FGLayout features are different from yours.  I would say that the pre-defined classes should work in much the same way as my manual approach.   Give it a try and see what happens.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 12, 2013 2:33 AM   in reply to clementius

    Hi clementius,

     

    Sry for jumping in a bit late, but Just wanted to check if you are still facing the problem you stated above ?

    Also please let me know if you have any queries related to FG in DW.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 9, 2013 8:56 AM   in reply to clementius

    These two examples you gave did not use the classes I was asking about, though. They are predefined inside the fluidgrid.css. The two I gave are not the only ones, but they are close to the only ones among a very few. .zeroMarginTablet, or .hide_mobile are the ones I had mentioned. [link removed]

     
    |
    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