Fluid Grid problem dreamweaver cc in IE11

Site made in dreamweaver cc with fluid grid layout. It looks and works fine in Safari en Google CHrome but the fluid grid does not work in IE11. Someone a solution? http://www.fvdc.be

Troubles with the fluid grid not entirely solved.
The solution was that i imported tables in the Fluid Grid and that was not a good idea!
At the moment i am one step ahead but still not satisfied with the result.
The appearance in IE11 looks better, never the less when i reduce the screen size, the layout does not follow all the way.
Even in Fire Fox, Safari and google chrome.
There is even an additional problem.
II do only get one direction right on mobile screens. Vertical or horizontal, but not both.
In adapting on Dreamweaver, when i set-up one scene size right for horizontal and vertical positioning then the layout of the other screen sizes change as well (in the wrong way)
In viewing our site you probably understand the problem better then in the explanation in this writing.
http://www.fvdc.be
Thanks for all the previous advice and we hope to get an answer to this post!
Thanks a head, greets from Frank

Similar Messages

Dreamweaver Fluid Grid Problems

I am having some weird issues since the upgrade to Dreamweaver CC 2014.1.1. I have Dreamweaver installed on an Asus laptop with the following specifications:
Windows 8.1 64bit
Intel Core i7-3630QM
NVIDIA GeForce GTX 670M 3gig
NVidia Graphics Driver 9.18.13.4752
24 gig ram
256 SSD Drive (Program installed on this drive)
750gb 7200 HD (files installed on this drive)
The problems I am running into are as follows:
When resizing the fluid grid in live view, I can select the right part of the div and drag it over to the left. When I try to click the left div and drag it over to the right it will not let me. I have to click to another view (for example from phone view to tablet then back to phone view) in order to drag the div over.
If I have several pages open and I switch from one page to another the code from previous page is showing until I do a refresh.
As many others are experiencing, it is slow when I type some text inside the div. Also when I change a CSS property (I have a separate attached CSS file) it takes a few seconds for the result to show in live view. All in all when dealing with all this, it gets somewhat frustrating.
I wasn't experiencing any problems like this before this upgrade.
Any thoughts on what I can do on my end to help with this?

Personally, I'd just go back to the older version and keep an eye on the forums until Adobe comes up with something. This is becoming much more commonplace with the latest release.
You can roll back using the Creative Cloud Desktop App by clicking the Apps tab, then scroll down to the Filters and Previous Versions link. That will turn the Install icons into dropdown menus with the available older versions.
I stopped upgrading DW with CC 2014.0 (last June's release), it has been rock solid for me. That version isn't available through the app though, you would have to download it directly from the link below:
http://download.adobe.com/pub/adobe/dreamweaver/win/cc/Dreamweaver_14_LS20.exe

Fluid Grid Layout Dreamweaver CC

Hi guys!
How is everybody? I am creating a fluid grid layout in Dreamweaver CC and when I use the visual design, I go to insert and insert either a paragraph or an h1. It always makes me create either a class or a id. Is that normal for a fluid grid layout? It will not let me insert as just h1 of p, I always have to either create an id or a class. Thanks a ton.

Hi Nancy. Thanks for getting back to me. I'm sorry I didn't get to go into more detail. I was in a phone call while I was typing. I am not so good at multitasking. With the visual view in a regular html document, I can easily insert tags like an h1 or p and am not required to create an id or class. it works just fine. However, when I use the fluid grid layout which I absolutely love, if I am using the visual view and I go to structure insert h1 or p, I am prompted to either make it a class or a div. I just find that a bit odd and am wondering why they require you to do that. I did take your advice about just going to the code view and typing out the tags. I can still go back to the visual view and create the selectors.
I just found that to be a bit odd as it doesn't prompt in a basic document.

Unable to edit elements in Fluid Grid Layout - Dreamweaver CC

Hello. I have an issue whereby the elements inserted in to a Fluid Grid Layout designed webpage become 'locked' (??) I can no longer edit them and when they are clicked on I just get a blue border. No handles, eye, delete button etc..
I cannot find any pattern on why this is happening and seems to be random. Although I am happy to accept I am doing something wrong..
Any ideas?

aytonwest
Are you removing/modifying any of the comments in the related CSS file (custom styles file and not the ones provided by boilerplate/JQuery/etc)
DW uses some comments to identify the page as a FG page. If you happen to remove/modify any of that, DW will stop recognizing it as a FG page.
The comment block would look similar to:
                Dreamweaver Fluid Grid Properties
                dw-num-cols-mobile:                    7;
                dw-num-cols-tablet:                      11;
                dw-num-cols-desktop: 11;
                dw-gutter-percentage: 67;
                Inspiration from "Responsive Web Design" by Ethan Marcotte
                http://www.alistapart.com/articles/responsive-web-design
                and Golden Grid System by Joni Korpi
                http://goldengridsystem.com/

How to convert existing website to fluid grid in dreamweaver cc

Is there a way to convert an existing website to a fluid grid site in Dreamweaver cc

Nope. There's no magic button. You must start over.
Build mobile layout first. Then tablet. Finally desktop.
When you get your layout all situated and working well in all device widths, copy and paste content from old site into new layout.
Nancy O.

Hide / Show fluid grids on Dreamweaver CC 2014.1

Hello !
How can we hide the fluid grid on the 2014.1 release ?
Thanks a lot !

Hide how exactly?
Do you mean you want to use FGLayouts in 2014.1 with Design View?
Open your Fluid Grid CSS file and add an X as shown below. This will trick DW into thinking it's a normal layout so you can use Design View, spell check, copy & paste text, etc...
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:     X 4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
=====================================
Nancy O.

CSS Transitions Fluid Grid Layout Dreamweaver Cs6 'stops working'

I am unable to use the CSS Transisions panel at all in Fluid Grids Layout.
I open the panel but when I select the + to add a transition, the program crashes.
This is my second website, the same happened when building my first website, but I did without as I could not get a solution (about 18 months ago).
I need it on this website.
Some people in Adobe support have my files but can't seem to find a problem. I have Windows 8 on a powerful computer.
We've tested CSS Transitions on a brand new Fluid Grid Layouts page and it works.
But never for a page I have content in.
I began seeking help on this about a month ago and now I'm really being held up.
I'm disappointed and frustrated that Adobe isn't being more pro-active in finding the solution for their customer.
I can't email customer service to flag my problem, I am reliant on people who don't get back to me in a timely manner.
What can I do as this Adobe product has not been working for me and I am relying on it.
Thank you

Add a link to jQuery's Latest Library to your document <head> tags.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Add the jQuery function code to <script> tags in your document. I typically put them right above the closing </body> tag.
<script>
$(document).ready(function () {
    $("#one").click(function () {
        $("#one-a").toggle('slow');
    $("#two").click(function () {
        $("#two-a").toggle('slow');
    $("#three").click(function () {
        $("#three-a").toggle('slow');
</script>
</body>
As to why DW is closing you down, I don't know. That's not an expected behavior.
Without seeing your code, I'm going to guess that your CSS transition logic is incorrect or you're attempting to add transitions to the FluidGridLayout.css which is never a good idea. Always use a separate, external style sheet for your manually added content styles. Changes to either boilerplate.css or the temperamental FluidGridLayout.css files can result in problems.
Nancy O.

Background images in fluid grid layouts Dreamweaver CS6

How can I get a background image png or jpg original size 1040w by 840h to scale down in the tablet and mobile layouts in Dreamweaver CS6 fluid grid layout?

Adding one of these in your CSS should do the trick...
background-size:contain;
or
background-size:cover;
Depending on the layout of your background image, one may work better than the other.

Missing handles fluid grid layout dreamweaver cc

I have seen the other postings to correct the problem with resolving the missing handles with a div in dreamweaver cc BUT it is not working when I try it.
very frustrating... when you set up the initial design the boxes are there to resize, move up, hide divs BUT once you save the design and return to the page, they are missing.
HOw are you to design a web site in one sitting.. bit ridiculous!
Please help with this issue!
Donna

Did you manually edit any of the FluidGrid CSS code? It's very temperamental and prone to failures if you tamper with it. I always advise people to use a separate external style sheet for content styles.
Nancy O.

Fluid grid problem design view

Need Help, Dreamweaver CC, operating on Windows 7 64 bit
My design view panel is set to 480 x 800
From the CSS Designer Panel, I select my fluid_grid.css from the sources section
I select GLOBAL from the @Media section
For some odd reason, my mobile size is changed to 1129 x 603
If I go back and set the screen size for 480 x 800, the @Media GLOBAL is deselected........ HELP!
I have uninstalled and reinstalled.
Thanks in Advance,
Bryan

GLOBAL targets the section of your style rules that is not subjected to media queries.
only screen and ( min-width: 481px ) targets the style rules that are subjected to that media query.
and so forth
The reason that screen widths less than 481px are not subjected to media queries is because the design is mobile first. In other words, if there were no media queries in your CSS, then all screen sizes would have the same style rules applied as if they were less than 481px.

Problem in desktop layout in "Building fluid grid layouts in Adobe Dreamweaver CS6"

In this tutorial you taught to design a responsive site ....but the Terrestrial Nursery completed page doesnot work well in Internet Explorer in 14 inches Square Monitor........that you have placed the three columns in the same alignment...but while viewing those three columns comes down one by one..........but works well in wide screen......is there any problem in the size of the monitor..........

Here is the link to the tutorial......
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
It doesnot work well in Internet Explorer 8....What to do for the responsive site to work well in all the older versions of IE....

Fluid grid layout problem

I am trying to create a fluid grid layout. In fact it is why I purchased Dreamweaver CS6. Problem is after I create the first div which I named header it works fine. However, on inserting the next div Dreamweaver inserts the following text in my index.html:
@charset "utf-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile:3; dw-num-cols-tablet 8; dw-num-cols-desktop: 12; dw-gutter-percentage 20; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 85.9444%; padding-left: 2.5277%; padding-right: 2.5277%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 91.0625%; padding-left: 0.9687%; padding-right: 0.9687%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.75%; max-width: 1232px; padding-left: 0.625%; padding-right: 0.625%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } }
I suspected the respond.min.js file was causing the problem so I downloaded an update but it didn't help. At this point I am not able to use this feature of Dreamweaver. Any help will be appreciated.

Thanks for the help. I am using version 12.0 build 5861.
I was trying to follow the example in a book I have called Dreamweaver CS6 – The Missing Manual. When I got to the section discussing Fluid Grid Layout, I attempted to follow the example step by step. I was able to insert the first div which I named header. I looked at my css file and it had placed the #header.
I knew that I had to remain within the container div. I went into the code view and placed the cursor to the right of the header div. I then clicked the insert Fluid Grid Layout Div Tag button. That’s when it automatically inserted all of the code I indicated in my post.
I then started to follow the example in http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html . I got the same results.
I’m beginning to wonder if there is an error in the Dreamweaver software itself.
Any help you can give will be appreciated.
Sheridan

What must i do to get Insert Fluid Grid Layout Div Tag on dreamweaver?

Why an i not able to get the Insert Fluid Grid Layout Div Tag on dreamweaver?
I am using Creative Cloud

Hi Leroy, this post in the Adobe Dreamweaver Team Blog may assist you with the updates to Dreamweaver: http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Let me know if you still require assistance.

Dreamweaver Fluid Grid and Twitter Bootstrap

Does anyone know if it's possible to graft the Twitter Bootstrap styling, elements and functioning onto the Fluid Grid in Dreamweaver CS6? If so how?
I think it would be great to be able to have the ease of manipulating the rows and columns using the Fluid Grid and have all the cool styling and all from Twitter Bootstrap.

Here is the complete grid css file that I'm using. It is modified from the original bootstrap. Different class names. It's wrapped in a media query so that the grid only applies above 768px. It gives you a 12 grid system.
@media only screen and (min-width: 768px) {
/* Grids only applied to desktop and tablet
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12
    display: inline;
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.127659574%;
*margin-left: 2.0744680846382977%;
-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
.row [class*="col"]:first-child {
margin-left: 0;
.row .col12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
.row .col11 {
width: 91.489361693%;
*width: 91.4361702036383%;
.row .col10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
.row .col9 {
width: 74.468085099%;
*width: 74.4148936096383%;
.row .col8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
.row .col7 {
width: 57.446808505%;
*width: 57.3936170156383%;
.row .col6 {
width: 48.93617020799999%;
*width: 48.88297871863829%;
.row .col5 {
width: 40.425531911%;
*width: 40.3723404216383%;
.row .col4 {
width: 31.914893614%;
*width: 31.8617021246383%;
.row .col3 {
width: 23.404255317%;
*width: 23.3510638276383%;
.row .col2 {
width: 14.89361702%;
*width: 14.8404255306383%;
.row .col1 {
width: 6.382978723%;
*width: 6.329787233638298%;
/* Prefix Extra Space >> 12 Columns
.prefix_1 {
    padding-left: 8.333%;
.prefix_2 {
    padding-left: 16.667%;
.prefix_3 {
    padding-left: 25.0%;
.prefix_4 {
    padding-left: 33.333%;
.prefix_5 {
    padding-left: 41.667%;
.prefix_6 {
    padding-left: 50.0%;
.prefix_7 {
    padding-left: 58.333%;
.prefix_8 {
    padding-left: 66.667%;
.prefix_9 {
    padding-left: 75.0%;
.prefix_10 {
    padding-left: 83.333%;
.prefix_11 {
    padding-left: 91.667%;
/* Suffix Extra Space >> 12 Columns
.suffix_1 {
    padding-right: 8.333%;
.suffix_2 {
    padding-right: 16.667%;
.suffix_3 {
    padding-right: 25.0%;
.suffix_4 {
    padding-right: 33.333%;
.suffix_5 {
    padding-right: 41.667%;
.suffix_6 {
    padding-right: 50.0%;
.suffix_7 {
    padding-right: 58.333%;
.suffix_8 {
    padding-right: 66.667%;
.suffix_9 {
    padding-right: 75.0%;
.suffix_10 {
    padding-right: 83.333%;
.suffix_11 {
    padding-right: 91.667%;
/* Push Space >> 12 Columns
.push_1 {
    left: 8.333%;
.push_2 {
    left: 16.667%;
.push_3 {
    left: 25.0%;
.push_4 {
    left: 33.333%;
.push_5 {
    left: 41.667%;
.push_6 {
    left: 50.0%;
.push_7 {
    left: 58.333%;
.push_8 {
    left: 66.667%;
.push_9 {
    left: 75.0%;
.push_10 {
    left: 83.333%;
.push_11 {
    left: 91.667%;
/* Pull Space >> 12 Columns
.pull_1 {
    left: -8.333%;
.pull_2 {
    left: -16.667%;
.pull_3 {
    left: -25.0%;
.pull_4 {
    left: -33.333%;
.pull_5 {
    left: -41.667%;
.pull_6 {
    left: -50.0%;
.pull_7 {
    left: -58.333%;
.pull_8 {
    left: -66.667%;
.pull_9 {
    left: -75.0%;
.pull_10 {
    left: -83.333%;
.pull_11 {
    left: -91.667%;
/* Clear Floated Elements
/* http://sonspring.com/journal/clearing-floats */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-ha ck */
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
.row:after {
clear: both;
.row {
    display: inline-block;
* html .row {
    height: 1%;
.row {
    display: block;
.row .first {
    margin-left: 0;

Adobe has made upgrades with the Dreamweaver CS6 fluid grids. Is there a better tutorial than this?

It there a better tutorial than this anywhere http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html ? I can't seem to understand this guy. I know he means well. I really want to learn fluid grids. Thanks any reconmandations?

If you want to learn to make responsive Web pages, do not rely on
Adobe's fluid grid system. Learn CSS yourself. If you need to rely on a
grid framework, then you are barking up the wrong tree. I can absolutely
guarantee that if you do not fully understand the theories behind
responsive design and you use the Adobe fluid grid (or the open source
frameworks/scripts that Adobe uses) your site will eventually break.
Study and learn. If you are sharp enough, you will quickly come to
understand that nearly every article and tutorial on the subject is
plain wrong. The essence of responsive design is very easy and does not
require anyone's code but your own.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

Fluid Grid problem dreamweaver cc in IE11

Similar Messages

Maybe you are looking for