none
design view image problem RRS feed

  • Question

  • I have a SECTION container, and an IMG element 2500px by 2500px to place in this responsive layout. IMG should rest alongside of 10em wide NAV that floats right. Expression is unable to display this layout in Design view.

    ( nav float:right ) ( section margin:right  ( img ) section ) 

    The standard responsive layout assumes 100% width containers and we code margin and padding to fit layout content, in this case inline image and right sidebar. So the inline image is coded like this (in common practice, 100% fills only the container element)

    height="auto" width="100%"

    and inline or sheet to style the IMG container size

    SECTION { margin: 10em; }

    this looks good in all browsers and devices down to cell phone for this responsive layout. Looks great in Blumenthal's WeBuilder preview as well. But Expression preview shows only the top left corner in the right place. Otherwise the image shoves everything else out the way and asserts its full dimensions.

    { margin: 10em 15em; width: 70%; }

    Fixed size satisfies Expression Design View, but wrecks the responsive layout., the incorrectly coded 70% IMG covers the fixed width 10em sidebar, Tablet size and down.

    Grief! We don't design sites to fit Expression, folks it works the other way around. We do try and come up with a code model that works for site and for Expression. (Do they call this 'grandfathering'?)

    EXAMPLE workaround for Chris Meyer's background cover method. (which stopped working in design view last month. Alls we had to do is plug in some other correct element variables and values, more correctly express the specification.

    { background: pretty.jpg top center cover cover repeat fixed; }

    FAIL! so enhance to specification (actually worked this time!)

    { background-attachment: fixed;
    background-clip: content-box;
    background-fill: cover;
    background-image: url('_files/background4.jpg');
    background- top; top;
    background-repeat: no-repeat; }

    WORKS!

    My cover fix above seemed easy, but having no luck containing Expression Design View fluid image for responsive column-style (sidebar) layout. Remember, the code is standard and works fine. Problem is Expression Design View mess-up. Any ideas along the lines of a spec-tidy-up or any other ideas?


    2014... 30 years an artist (web design, not development, we do so wish)

    Tuesday, February 4, 2014 2:42 AM