Fluid Grid Colums NOT aligning

Hi everybody.
I am using Dreamweaver CS6 and I wanted to use the fluid grids for designing websites for Desktop/iPad/iPhone.
I understood the basic principle, but I have one problem.
The columns do not line up as they should.
I have made a composite of the different browsers and devices.
I run Mac OSX 10.7.5.
Does anyone have the same problem?
Thanks in advance
Markus Ziegler

If you've been using Dreamweaver a long time you should realize that:
a) Features added to address trendy issues (like responsive design) are
relevant to the "rapidly changing web" and as such they need to be kept
up to date. Unfortunately, Adobe ha a well documented history of not
updating such features.
b) Your friends using free solutions may i fact be using some of the
code that Adobe uses in its Fluid Grid feature, which is not an original
piece of work by Adobe. It is, instead, code acquired from several open
source solutions... that were very popular when CS6 was being developed
but which have now been pretty well replaced by better methods.
That said, Dreamweaver is a marvelous tool. Adobe can't really be blamed
for trying to take advantage of buzzwords to add "compelling" new
features, but an educated user needs to understand that what gets added
in in terms of client-side functionality (CSS + JavaScript) is not
Adobe's strength.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

Similar Messages

Symbol isolation mode, the pixel grid is not aligned to the ruler.

If you create a symbol that is pixel perfect, exit out of the symbol and go back in, the pixels bleed into each other because the pixel grid is not aligned correctly. Instead it is aligned to the global document grid which the symbol content is not placed in. It makes no sense to align the pixel grid to the global coordinates when the content by definition is not present in it.
This makes it impossible to use symbols to edit pixel perfect objects because any editing other than the original creation does not display pixels but pixel bleeds.
This is a valid bug in Illustrator CS6. Please specify:
1. Do you understand what I am specifying? If you do not I will provide images as I wish to resolve this functionality.
2. Please specify if it has been fixed in Illustrator CC. I do not have an available Win7 installation to test CC but if it is I will acquire one.

Thank you submitted. Input from Adobe's developers or developer relations representatives on this forum to expedite a solution to this bug would be greatly appreciated. As Adobe's products are now on a subscription one would hope it's product roadmap would accelerate with regards to Illustrator considering the necessity of Vector graphics in a market with multiple largely varying resolutions.
If you create a symbol that is pixel perfect, exit out of the symbol and go into Symbol edit mode (from the Symbol Panel or when a symbol's dimensions have been modified) the Pixel Preview grid is not aligned correctly. The Pixel Preview grid is nonsensically aligned to the document's coordinates. It makes no sense to align the Pixel Preview grid to the document's coordinates in symbol edit mode as it causes an inability to see the Pixel Preview without bleeding.
This makes it impossible to use symbols to edit pixel perfect objects because any editing other than the original creation does not display pixels but pixel bleeds.
Again the fundamental issue is that: There is no reason to align the Symbol Edit mode to the global Pixel Preview grid. The Pixel Preview grid should align to the Symbol coordinates.
http://i.imgur.com/KB2CdEx.jpg
The screenshot is in Pixel Preview. Moving the contents of the Symbol in Edit mode from it's correct position to temporarily align to the Preview Pixel grid is incorrect:
1. Because you just moved the correctly placed contents. The Symbol placed in it's parent to prevent pixel bleeding is now incorrect.
2. On a subsequent edit it would be misaligned because as specified, Illustrator aligns the contents of Symbol editing mode nonsensically to the global Pixel Preview grid.
With regards to Align to Pixel grid
1. This is a bug regardless of improvements to Align to Pixel to facilitate an acceptable workflow.
2. Align to pixel grid is not an acceptable workflow:
a. Not possible to place path vertices in the middle of a pixel to facilitate pixel strokes.
b. Mangles rounded corners.
d. It is not prudent to rely on an arbitrary algorithm with regards to forward or backward compatability in creating anything, considering the possibility of mangling and/or changed behavior as specified above.
The workflow to create pixel perfect UI elements is to position vertices absolutetly.

Dreamweaver CC fluid grid divs not stretching out to cover 100% of the screen

Hi there,
I am doing another responsive layout using DW CC and I have come across a problem.
The design has coloured divs stretching across the page at 100% with a coloured background and borders.
I have already done the design up as a fixed width layout to get the colour codes etc and that is working fine, with the colours stretching across the screen.
Now I am putiing the design into DW CC using fluid grid layout and there is a white border outlining the website.
I can't work out how to get rid of this. Below are extracts of my two lots of CSS stylesheets, one for a fixed grid layout and one for a responsive layout
FIXED WIDTH CSS
body,td,th {
    font-family: Calibri;
    font-size: 14px;
    color: #000;
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
*/This header wrapper stretches across the entire screen no matter what the size and does not have a white border on the left and the right
#headerWrapper {
    background-color: #000;
    height: 101px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #BDDB6D;
FLUID GRID CSS
The fluid grid layout CSS has the following in it:
.fluid {
    clear: both;
    margin-left: 0;
    width: 100%;
    float: left;
    display: block;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
    clear: none;
    float: none;
#div1 {
*/This header wrapper stretches across the grid layout only and has a white border on the left and the right
#headerWrapper {
    max-width: 100%;
    height: 101px;
    background-color: #000;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #BDDB6D;
What do I need to add to the fluid grid layout to make the headerWrapper div stretch across the screen, no matter what the width?
What do I have to put in the fluid grid CSS to get it to do this?
Thanks in advance!

I did it! I can't believe it. The code I used is follow. The bar divs set the colour and border across the entire page and the wrapper divs contain the content in the various bars across the page.
I must say that DW CC fluid grids are much more stable to work with and can take a lot of hand coding now. It is a great improvement on when I tried to use Fluid grids on a project last year.
IN THE PHONE MEDIA QUERY SECTION
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          clear: none;
          float: none;
#headerBar {
          background-color: #000;
          min-height: 101px;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          border-bottom-color: #BDDB6D;
          padding-top: 2.735px;
#headerWrapper {
          width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
          clear: none;
    float: none;
          margin-left: auto;
#menuAnimationBar {
          background-color: #B7B7B7;
          height: 293px;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          border-bottom-color: #BDDB6D;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(153,153,153,1.00)),color-stop( 100% , rgba(192,192,192,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
display: none;
#contentBar {
          background-color: #F8FCF1;
          min-height: 200px;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(245,251,234,1.00)),color-stop( 100% , rgba(251,253,247,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
#contentWrapper {
          width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
          clear: none;
    float: none;
          margin-left: auto;
#socialMediaBar {
          background-color: #000;
          min-height: 83px;
          border-top-width: 2px;
          border-bottom-width: 2px;
          border-top-style: solid;
          border-bottom-style: solid;
          border-top-color: #BDDB6D;
          border-bottom-color: #BDDB6D;
#socialMediaWrapper {
          color: #FFF;
          width: 86.45%;
          padding-left: 2.275%;
          padding-right: 2.275%;
          clear: none;
          float: none;
          margin-left: auto;
          padding-top: 2.275%;
#footerBar {
          color: #FFF;
          background-color: #AAAAAA;
          min-height: 176px;
          background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(153,153,153,1.00)),color-stop( 100% , rgba(185,185,185,1.00)));
          background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
          background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
#footerWrapper {
          width: 86.45%;
    padding-left: 2.275%;
    padding-right: 2.275%;
          clear: none;
    float: none;
          margin-left: auto;
IN THE TABLET MEDIA QUERY SECTION
.gridContainer {
          width: 100%;
          padding-left: 0%;
          padding-right: 0%;
          clear: none;
          float: none;
          margin-left: auto;
#div1 {
#headerBar {
#headerWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#menuAnimationBar {
display: none;
#contentBar {
#contentWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#socialMediaBar {
#socialMediaWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#footerBar {
#footerWrapper {
          width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
          clear: none;
    float: none;
    margin-left: auto;
#menuAnimationWrapper {
IN THE PC MEDIA QUERY SECTION
.gridContainer {
          width: 100%;
          max-width: 1920px;
          padding-left: 0%;
          padding-right: 0%;
          margin: auto;
          clear: none;
          float: none;
          margin-left: auto;
#headerBar {
#headerWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#menuAnimationBar {
          display: block;
#contentBar {
#contentWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#socialMediaBar {
#socialMediaWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#footerBar {
#footerWrapper {
          width: 88.5%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#menuAnimationWrapper {
          width: 88.5%;
          height: 293px;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
          clear: none;
    float: none;
    margin-left: auto;

Fluid grid layout - not being able to resize divs

Hi,
I've been woring on a fluid grid layout... found somethings I wanted to change but when I launch DW there are no resize handles on my divs
Second issue is that I moved the Styles tab up next to the File tab and after relaunching it's back in another panel group.
Thoughts??
Debi

debibrighthope wrote:
Second issue is that I moved the Styles tab up next to the File tab and after relaunching it's back in another panel group.
Hi
Forgot to answer this one.
Did you save your 'custom' workspace?
It's at the top r/h, next to the search box. Click on the arrow next to the workspace name and select 'New Workspace'.
PZ

Fluid grid guides not showing up.

I checked to make sure that they are checked on in the visual aides options and they are. Dreamweaver says it cannot find the Fluid Grid Style, no idea how it got lost or what that means or how to fix that. Multiscreen preview isn't working either.
Please help,
Thanks!

Start with this:
Deleting Corrupted Cache and/or Configuration folder in DW
http://forums.adobe.com/thread/494811
If that doesn't fix things, try this:
Restore Preferences
http://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver-cs4-cs5.html
If that still doesn't fix things, you may need to do a clean re-install.
http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html
Nancy O.

Fluid Grid guides not showing

Anyone else having trouble with getting fluid grid guides to show? I've tried all the obvious solutions... Also, anyone having touble getting the "View in Browser" button to work?

Start with this:
Deleting Corrupted Cache and/or Configuration folder in DW
http://forums.adobe.com/thread/494811
If that doesn't fix things, try this:
Restore Preferences
http://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver-cs4-cs5.html
If that still doesn't fix things, you may need to do a clean re-install.
http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html
Nancy O.

Pixel grid does not match pixels

hi,
please see the attached.
I have a document that is 1in x 1in and the resolution is 10ppi. The grid spacing is 1px but you can see the grid is not aligned with the pixels (which are coloured green in this image).
I am using CS6 and for some reason you have to set up the gridline every 2px with a 2px subdivision. Does anyone know why this is?
thank you

Sorry, I tried but can't reproduce it here. When I set the grid lines to 1 per pixel and 1 division per grid line it looks like this:
I'm going to guess it must have something to do with the display driver.
-Noel

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

Pixel grid does not line up with rulers

AICS 5.5 - I'm working in a doc with measurement set to pixels, showing the grid set to increments of 1 pixel. I reset the rulers by double-clicking on the origin. The grid does not align to the ruler pixels. It's about halfway between on the y axis and about 3/5 of the way off on the x axis. When I create objects with the origin and width/height set to even pixels (which makes them fall between the pixel grid lines) and save for web, the edges are antialiased.
How do I make the rulers and pixel grid register with each other? It seems odd this wouldn't be the default.

Aha - it turns out the artboards were not placed precisely on the pixel grid. Their origins were set between whole pixel values. The rulers went with the artboards, so their pixels didn't match the grid pixels.
Should be possible to just move the artboard and get everything lined up again.
Still - I would think the grid would readjust to the origin of whatever artboard you are currently working on, just as the rulers do. It not doing so is unexpected behavior.

Footer text-alignment in fluid grid layout and another color in white space, not the body

I'm working in a fluit grid layout. Everythings works almost perfekt. Accept for de alignment in Opera mini. Mini works not with %. So it must be padding, line-height and something else. But then the footer does not stick.
In Opera mini
If i want the footer to stick to for example the bottom. I'm may not use padding in de footer.
De <p> i used for alignment in from the text. Now my footer must have a alignment in the middle of the footer (center). With padding in footer, it wil work, but then my footer will not stick to the bottom anymore.
and i have also another question, about the white spaces in de fluid grid. I don't want to give the header, body, footer another color. But that outside of my website.
With a normal website you give the html and the body grey and the content white. But if i do this with the fluid grid. The content because grey. Is there also a code for.
This is what it must be. It is a example, not for real. But i really want to know the code for it.

I found the wright code for the footer. Thanks a lot. I'm happy.
I'm also searching for a code for max-height. For example one page i have less text, so the page is not filled to the bottom. I want for designing reasons this. So the page is always fitt from header to footer.
It must not scrolled. Just complete for the desktop-computer and laptop. Is there a code for. Because there is already internet-tv and that are big-screens. It must be for all the browser also ie7, ie 6, opera, safari, chrome and more.

Fluid Grid not displaying correctly in Chrome

I'm laying out a simple 3 column design using fluid grids in CS6.
I want only one colum to show in mobile, with the other two hidden. Two columns should show in tablet, with the third hidden and all three columns should be visable in desktop mode.
I'm currently only testing between chrome and safari as I just want to get the hang of the feature.
When I preview in safari, everything works as it should but when I preview in chrome, the browser seems to ignore the desktop settings and shows a large version of the two column tablet design.
I'm using 4, 8 and 12 columns respectivly in my fluid grids.
Has anyone else had this issue? I haven't been able to find any references to a similar problem.

Has anyone else had this issue?
Nope. You're the only one.
Please show us your code. My guess is that your media queries are messed up.
How exactly are you defining the divs to show or not show?
Nancy O.

Fluid Grid Layout Alignment Issue

I'm using Dreamweaver CC Fluid Grid Layout. This is my first time using Dreamweaver, (and first time posting to Adobe Community) so I don't have a ton of experience. Somehow, the whole body of all my pages has been aligned left and I can't find anywhere in the CSS or the HTML of the individual pages that would make it do so. I even tried inserting a body: align: center in the CSS and also in the HTML of each page and it just won't respond. Does anyone have any ideas? I'd really REALLY appeciate some help with this because I'm totally at a loss. Below is my CSS and the HTML for my index.html .
CSS
@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:                    4;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          12;
          dw-gutter-percentage:          25;
          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/
.fluid {
          clear: both;
          margin-left: 0;
          width: 100%;
          display: block;
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
          float: left;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 86.45%;
          padding-left: 2.275%;
          padding-right: 2.275%;
          clear: none;
          float: none;
body {align-content:center}
#top {
          margin-left: auto;
          margin-right: auto;
          text-align: center;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 600;
#top {
          background-color: #1f1f1f;
#mainnav {
          background-color:#1F1F1F
#menuSystem {
.menuItem {
          margin-top: 9px;
          margin-bottom: 2px;
          padding-top: 2px;
          padding-bottom: 2px;
          text-align: center;
          color: #FFFFFF;
          background-color: #1f1f1f;
          width: 100%;
          clear: both;
          margin-left: 0;
          padding-left: 0px;
          -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
          letter-spacing: 2pt;
          text-transform: uppercase;
.gridContainer.clearfix #top h1 {
          color: #FFFFFF;
          font-family: fredericka-the-great;
          font-style: normal;
          font-weight: 400;
          text-align: center;
          text-transform: uppercase;
          letter-spacing: 5pt;
#hero {
h2 {
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
          text-align: center;
          margin-right: 0%;
          margin-top: 10%;
          text-decoration: overline;
          color: #FFFFFF;
#footer {
          background-color: #1F1F1F;
          color: #FFFFFF;
          text-align: left;
#wrapper {
          background-color: #2D2D2D;
          font-family: source-sans-pro;
          position: static;
          display: inline;
#childpageimage {
          width: 59%;
          padding-top: 0px;
          padding-bottom: 0px;
          padding-right: 2px;
#content2 {
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 400;
          text-align: left;
          text-indent: 0px;
          padding-left: 10px;
          padding-right: 10px;
          width: 100%;
          clear: both;
          margin-left: 0;
          float: left;
contentgallery {
          color:#FFFFFF;
table {
          color: #FFFFFF;
          font-family:source-sans-pro;
#childpageimage2 img {
          width: 50%;
          float: left;
          top: 0px;
          padding-top: 5px;
#content3 {
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
          text-align: left;
          padding-left: 10px;
          padding-right: 10px;
#contact {
          width: 100%;
          clear: both;
          margin-left: 0;
          float: right;
#contenttitle {
          width: 100%;
          color: #FFFFFF;
          text-decoration: overline;
body {align-content:center}
#content {
          width: 100%;
          clear: both;
          margin-left: 0;
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 90.675%;
          padding-left: 1.1625%;
          padding-right: 1.1625%;
          clear: none;
          float: none;
          margin-left: auto;
a {
          color:#FFFFFF;
          text-decoration:none;
a:hover {color:#843F93;
#top {
#mainnav {
#menuSystem {
.menuItem {
width: 23.0769%;
clear: none;
margin-left: 2.5641%;
#hero {
#footer {
#wrapper {
position: static;
#childpageimage {
width: 100%;
#content2 {
width: 100%;
clear: both;
margin-left: 0;
#content3 {
#contact {
          width: 10.2564%;
          clear: both;
          margin-left: 0;
#contenttitle {
width: 100%;
#content {
width: 100%;
clear: both;
margin-left: 0;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* 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.5%;
          max-width: 1232px;
          padding-left: 0.75%;
          padding-right: 0.75%;
          margin: auto;
          clear: none;
          float: left;
          margin-left: auto;
#top {
#mainnav {
#menuSystem {
.menuItem {
          width: 23.7288%;
          margin-left: 1.6949%;
          clear: none;
#hero {
#footer {
#wrapper {
          position: relative;
          height: 0%;
#childpageimage {
          width: 49.1525%;
#content2 {
          width: 57.6271%;
          font-size: large;
          margin-left: 1.6949%;
          clear: none;
#content3 {
#contact {
          width: 6.7796%;
          margin-left: 1.6949%;
          clear: none;
#contenttitle {
width: 32.2033%;
#content {
width: 40.6779%;
margin-left: 1.6949%;
clear: none;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
index.html
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kate Farrow</title>
<style type="text/css">
body {background-color:#1F1F1F;} </style>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluidgrid.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n6,n4:default;fredericka-the-great:n4:default. js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix"><div id="wrapper" class="fluid">
<header id="top" class="fluid"><aside id="contact" class="fluid">
    <div align="center"><a href="http://www.linkedin.com/in/farrowkate" style="text-decoration:none;"><span style="font: 80% Arial,sans-serif; color:#0783B6;"><img src="http://s.c.lnkd.licdn.com/scds/common/u/img/webpromo/btn_in_20x15.png" width="40" height="30" alt="View Kate Farrow's LinkedIn profile" style="vertical-align:middle" border="0"></span></a></div>
</aside>
    <h1 align="center">Kate Farrow</h1>
    <nav id="mainnav" class="fluid">
      <div align="center">
        <ul id="menuSystem" class="fluid fluidList">
          <li class="fluid menuItem zeroMargin_desktop zeroMargin_tablet"><a href="index1.html">Home</a></li>
          <li class="fluid menuItem"><a href="about.html">About</a></li>
          <li class="fluid menuItem"><a href="work.html">Work</a></li>
          <li class="fluid menuItem"><a href="resume.html">ResumÉ</a></li>
        </ul>
      </div>
    </nav>
</header><div id="hero" class="fluid"><img src="140210_Kate_044.jpg" alt=""/></div>
<div id="contenttitle" class="fluid">
    <h2>Who am I?</h2>
</div>
<article id="content2" class="fluid">
    <p>My name is <strong>Kate Farrow</strong>. </p>
    <p>I’m a creative spirit with a great imagination, a passion for writing, and a knack for web strategy. Check out my work to see what I’m talking about.</p>
</article>
<footer id="footer" class="fluid">
    <p> </p>
    <p>© Kate Farrow 2014. Photography © L. Farrow and J. Sandhu</p>
    <p> </p>
</footer>
</div></div>
</body>
</html>

The "align" attribute is obsolete. See centering Pages, Images and other elements with CSS
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
FluidGrids are for experienced web designers who already understand the core concepts of HTML, CSS and Advanced CSS Media Queries. Don't bite off more than you can chew for a 1st project. Start with a stable, fixed-width layout. When you become proficient with that, then you can take on more challenges.
Go to File > New > Blank page > HTML. Select a layout from the 3rd panel. Hit Create.
Creating your first web site in DW - (5-part tutorial)
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Nancy O.

Fluid grid with added media queries not working with {display: none}

Fluid grid layout using added media queries to fix break points will not use {display:none} properly. When I try to hide a div in moble view it hides the div in all views. I was able to hide the div using width: 0% which works in all browsers except for Safari.
Here is the css
@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%;
hr {
color: #e1e1e1;
width: 90%;
text-align: center;
td {
color:#7d7e7f;
element.style {
    width: 150px;
color:#7d7e7f;
margin-right:20px;
/* Top Talent subscribe to email */
.inputTTemail {
width: 130px;
height: 35px;
background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/submitArrow.png) ;
background-repeat: no-repeat;
background-position: right center;
background-color: #ec8423;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
text-align: left;
color: #FFF;
border: none;
padding-top: 5px;
#ttEnewsletter {
width:250px;
background-color:#FFF;
padding:10px;
input[type="text"],input[type="email"] {
width:200px;
font-family:Tahoma, Geneva, sans-serif;
font-size:1em;
color:#7d7e7f;
margin-bottom:1em;
padding-left:15px;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
span.dropt {border-bottom: thin dotted;}
span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
border-style:solid; border-color:#7d7e7f; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 2%; background: #ffffff;}
span.dropt span {position: absolute; left: -9999px;
margin: 4px 0 0 0px; padding: 5px 5px 5px 5px;
border-style:solid; border-color:#7d7e7f; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;}
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 6;
dw-num-cols-tablet: 10;
dw-num-cols-desktop: 14;
dw-gutter-percentage: 25;
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: 87.9666%;
padding-left: 1.5166%;
padding-right: 1.5166%;
background-color:#FFF;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
background-color:#FFF;
#logo {
clear: both;
float: left;
margin-left: 0;
margin-bottom:0px;
padding-top:10px;
padding-bottom:10px;
width: 100%;
display: block;
background-color:#FFF;
text-align:center;
#phone {
clear: none;
float: left;
margin-left:0px;
width: 100%;
display: block;
text-align:center;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
#login {
clear: none;
float: right;
margin-left:-2000px;
margin-top:-2500px;
width: 31.0344%;
display: block;
text-align:center;
.redBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #bd2137;
line-height: 1.23em;
.orangeBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #ec8423;
line-height: 1.23em;
.purpleBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #643f99;
line-height: 1.23em;
.RedHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #bd2137;
font-weight: bold;
.OrangeHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #ec8423;
font-weight: bold;
.PurpleHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #643f99;
font-weight: bold;
a.redBodylink {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #bd2137;
line-height: 1.23em;
.redBodylink:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color:#ec8423;
line-height: 1.23em;
a.orangeBodylink {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #ec8423;
line-height: 1.23em;
.orangeBodylink:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color:#bd2137;
line-height: 1.23em;
a.purpleBodylink {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #643f99
line-height: 1.23em;
.purpleBodylink:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color:#ec8423;
line-height: 1.23em;
#mobile{
width: 100%;
background-color: #bd2137;
display: block;
float: left;
#mobileHP{
width: 100%;
background-color: #FFFFFF;
display: block;
float: left;
color: #bd2137;
a.mobileMenuhpHP {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
color:#bd2137;
text-align:center;
padding-top:10px;
padding-bottom:10px;
text-decoration:none;
a.mobileMenuhpHP:hover {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
color:#ec8423;
text-align:center;
padding-top:10px;
padding-bottom:10px;
text-decoration:none;
a.mobileMenuhp {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
color:#FFF;
text-align:center;
padding-top:10px;
padding-bottom:10px;
text-decoration:none;
a.mobileMenuhp:hover {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
color:#ec8423;
text-align:center;
padding-top:10px;
padding-bottom:10px;
text-decoration:none;
#topnav {
clear: both;
float: left;
margin-left: -1000px;
width: 100%;
display: block;
#midnav {
clear: both;
float: left;
margin-left:-1000px;
width: 100%;
display: block;
#MenuBar1 > li:hover > a {
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
#bodycontent {
clear: both;
float: left;
margin-left: 10px;
margin-right: 30px;
margin-top: -135px;
margin-bottom: auto;
width: 95%;
display: block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
.GreyHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #58595b;
font-weight: bold;
.BodyCopy {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #58595b;
padding-right:20px;
.BodyItal {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-style:italic;
font-size:.85em;
line-height:1.5em;
color: #58595b;
a.redLink {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#bd2137;
.redLink:hover {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#ec8423;
a.orangeLink {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#ec8423;
.orangeLink:hover {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#bd2137;
a.purpleLink {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#643f99;
.purpleLink:hover {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#ec8423;
a.Lrg-redLink {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.5em;
color: #bd2137;
.Lrg-redLink:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.5em;
color: #ec8423;
#blogroll {
clear: both;
float: left;
margin-right:-2500px;
width: 100%;
display: block;
#footer {
clear: both;
float: left;
margin-left:0px;
width: 100%;
display: block;
a.viewSite {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
color: #bd2137;
text-decoration: underline;
a.viewSite:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
color: #ec8423;
text-decoration: underline;
#socialMediaMobile {
float: right;
width: 45%;
height:auto;
padding-top:5px;
padding-bottom:5px;
margin-top:0px;
margin-right:0px;
text-align:right;
line-height:35px;
#mobile-menu {
clear: none;
float:left;
margin-left:3%;
width:31.0344%;
display: block;
text-align: center;
background-color: #bd2137;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
padding-top: 10px;
padding-bottom: 10px;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFF;
border-left-color: #FFF;
#mobile-backHP {
clear: both;
float: left;
margin-left: 0;
width: 31.0344%;
display: block;
text-align: center;
background-color: #FFF;
color: #bd2137;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
padding-top: 10px;
padding-bottom: 10px;
#mobile-loginHP {
clear: none;
float: right;
margin-left: 0%;
width: 31.0344%;
display: block;
text-align: center;
background-color: #FFFFFF;
color: #bd2137;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
padding-top: 10px;
padding-bottom: 10px;
#mobile-back {
clear: both;
float: left;
margin-left: 0;
width: 31.0344%;
display: block;
text-align: center;
background-color: #bd2137;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
padding-top: 10px;
padding-bottom: 10px;
#mobile-login {
clear: none;
float: right;
margin-left: 0%;
width: 31.0344%;
display: block;
text-align: center;
background-color: #bd2137;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
padding-top: 10px;
padding-bottom: 10px;
#missionStatement {
clear: both;
float: left;
margin-left:0px;
margin-top: 10px;
width: 100%;
display: block;
background-color: #7d7e7f;
padding: 0px;
.missionStatement {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #FFF;
text-align: center;
font-style: italic;
#footerCopy {
float: left;
width: 100%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.85em;
text-align:center;
color: #bd2137;
#footerCopyMobile {
float: left;
width: 100%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.85em;
text-align:center;
#connectUs {
float: right;
width: 100%;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
#social-media {
width: 100%;
float:left;
text-align:center;
#smicon {
width: 100%;
float:left;
text-align:center;
margin-bottom:10px;
#column1 {
width:100%;
float:left;
#column2 {
width: 100%;
float:left;
#column3 {
width:100%;
float:left;
#column4 {
margin: 0px;
padding: 0px;
float: left;
width: 100%;
margin-top:-20px;
#column5 {
float:left;
width: 100%;
margin: 0px;
padding: 0px;
margin-top:-20px;
#rowColumns {
float: left;
width: 100%;
margin-bottom: 20px;
#rowClmn1 {
float: left;
width: 100%;
margin-left: 10px;
#rowClmn2 {
width: 100%;
margin-left: 10px;
float: left;
#rowClmn3 {
float: left;
width: 100%;
margin-left: 10px;
#newsletter {
width:200px;
height: auto;
margin-right: 20px;
padding: 5px;
float: left;
text-align: center;
border: thin groove #CCCCCC;
background-color: #EFEFEF;
#corpBuild {
background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/building-tab.jpg );
background-repeat: no-repeat;
background-position: left top;
float: left;
width: 100%;
height: 136px;
padding-bottom:20px;
#corpBuildLin {
background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/lincoln-office-p ic.jpg);
background-repeat: no-repeat;
background-position: left top;
float: left;
width: 100%;
height: 136px;
padding-bottom:30px;
#mobileContactPg {
margin-bottom:0px;
padding: 0px;
float: left;
width: 100%;
height:auto;
text-align:center;
line-height:50px;
#desktopContactPg {
margin-top:-5000px;
padding: 0px;
float: left;
width: 100%;
#icons {
text-align: center;
float: left;
width: 0%;!important
#ptBoarder {
padding-right:15px;
padding-bottom:15px;
float:left;
width: 50%;
margin-top:20px;
margin-bottom:20px;
#eoq {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#eoq1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#eoq2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#SafetyTip {
clear: both;
float: left;
margin-left: 0;
width: 90%;
display: block;
padding: 10px;
border: thin solid #CCC;
#NationalRates {
clear: both;
float: left;
margin-left: 0;
margin-bottom:25px;
width: 100%;
display: block;
#metroRates {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#tables {
margin: 0px;
padding: 0px;
float: left;
height:auto;
width: 100%;
#charts {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#chart1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#chart2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Tablet Layout: 592px. Inherits styles from: Mobile Layout. *************************************/
@media only screen and (min-width: 592px) {
.gridContainer {
width: 91.14%;
padding-left: 0.93%;
padding-right: 0.93%;
background-color:#FFF;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 69.3877%;
display: block;
background-color:#FFF;
#logo {
clear: both;
float: left;
margin-left: 0;
margin-bottom:10px;
width: 59.1836%;
display: block;
#login {
clear: none;
float: right;
margin-left: 2.0408%;
margin-bottom:10px;
margin-right:20px;
margin-top:50px;
width: 18.3673%;
display: block;
text-align:right;
a.login {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.6em;
color: #bd2137;
text-decoration: none;
text-align:right;
a.login:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.6em;
color: #ec8423;
text-decoration: none;
text-align:right;
.redBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #bd2137;
line-height: 1.23em;
.orangeBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #ec8423;
line-height: 1.23em;
.purpleBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #643f99;
line-height: 1.23em;
#topnav {
clear: both;
float: left;
margin-left: 0;
margin-bottom:10px;
width: 100%;
display: block;
#tl {
height: auto;
width: 14.2857142857143%;
padding-top: 10px;
float: left;
text-align:center;
font-size:1em;
a.topnav {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #58595b;
padding-top: 0px;
padding-right:0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left:0px;
margin-right:0px;
text-decoration: none;
.topnav:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #bd2137;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left:0px;
margin-left:0px;
margin-right: 0px;
text-decoration: none;
text-align: right;
.topnav:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #58595b;
padding-top: 0px;
padding-right:0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left:0px;
margin-right:0px;
text-decoration: none;
#midnav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height:100%;
display: block;
#MenuBar1 > li:hover > a {
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
#isbtn-findAjob {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #bd2137;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findAjob:hover {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #bd2137;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findAjob:active {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #bd2137;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findTalent {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #ec8423;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findTalent:hover {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #ec8423;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-forEmployees {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #643f99;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-forEmployees:hover {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #643f99;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#bodycontent {
clear: both;
float: left;
margin-left:20px;
margin-right:20px;
width: 95%;
display: block;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px 0px opx 0px;
.GreyHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #58595b;
font-weight: bold;
.RedHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #bd2137;
font-weight: bold;
.BodyCopy {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #58595b;
.BodyItal {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-style:italic;
font-size:.85em;
line-height:1.5em;
color: #58595b;
a.redLink {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#bd2137;
.redLink:hover {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#ec8423;
a.Lrg-redLink {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.5em;
color: #bd2137;
.Lrg-redLink:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.5em;
color: #ec8423;
#blogroll {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#mobile{
width: 100%;
background-color: #bd2137;
display: block;
float: left;
margin-left:-5000px;
#mobile-menu {
clear: both;
float: left;
margin-left: -1000px;
width: 18.3673%;
display: block;
#mobile-back {
clear: both;
float: left;
margin-left:-1000px;
width: 31.0344%;
display: block;
text-align:center;
#mobile-login {
clear: none;
float: left;
margin-left: -1000px;
width: 31.0344%;
display: block;
text-align: center;
border-right-width: thin;
border-right-style: solid;
border-right-color: #F66;
background-color: #bd2137;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
#missionStatement {
clear: both;
float: left;
margin-left: 0px;
width: 100%;
display: block;
background-color: #7d7e7f;
padding:0px;
.missionStatement {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #FFF;
text-align: center;
font-style: italic;
a.viewSite {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
color:#FFF;
text-decoration: underline;
a.viewSite:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
color: #ec8423;
text-decoration: underline;
#footerCopy {
float: left;
width: 50%;
text-align:left;
#connectUs {
float: right;
width: 100%;
text-align: right;
#social-media {
width: 50%;
float: right;
text-align: right;
#social-mediaHP {
width: auto;
float: right;
text-align: right;
padding-right: 0px;
padding-top: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
#smicon {
width: 100%;
float: right;
text-align: right;
#desktopContact {
float: left;
width: 100%;
#column1 {
width:45%;
float:left;
margin-right:30px;
#column2 {
width:45%;
float:left;
#column3 {
width:45;
float:left;
#column4 {
margin: 0px;
padding: 0px;
float: left;
width: 70%;
#column5 {
float: right;
width: 25%;
margin: 0px;
padding: 0px;
#column6 {
width: 30%;
float: left;
margin-right: 20px;
#column7 {
width: 30%;
float: left;
margin-left: 0px;
#column8 {
width: 30%;
float: left;
text-align: left;
margin-left: 10px;
margin-right: 0px;
#newsletter {
width: 160px;
height: auto;
padding: 5px;
float: left;
text-align: center;
border: thin groove #CCCCCC;
background-color: #EFEFEF;
#corpBuild {
background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/building-tab.jpg );
background-repeat: no-repeat;
background-position: left top;
float: left;
width: 100%;
height: 136px;
padding-bottom:20px;
#mobileContactPg {
margin-left:-5000px;
padding: 0px;
float: left;
width: 100%;
#desktopContactPg {
margin: 0px;
padding: 0px;
float: left;
width: 100%;
#icons {
text-align: right;
float: left;
width: 100%;
#ptBoarder {
padding-right:15px;
padding-bottom:15px;
float:left;
width: 35%;
margin-top:20px;
margin-bottom:20px;
#eoq {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#eoq1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#eoq2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#SafetyTip {
clear: both;
float: left;
margin-left: 0;
width: 97%;
display: block;
padding: 10px;
border: thin solid #CCC;
#NationalRates {
clear: both;
float: left;
margin-left: 0;
margin-bottom:25px;
width: 100%;
display: block;
#metroRates {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#tables {
margin: 0px;
padding: 0px;
float: left;
height: auto;
width: 100%;
#charts {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#chart1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#chart2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Tablet Layout: 768px. Inherits styles from: Mobile Layout. *************************************/
@media only screen and (min-width: 768px) {
.gridContainer {
width: 91.14%;
padding-left: 0.93%;
padding-right: 0.93%;
background-color:#FFF;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
background-color:#FFF;
#logo {
clear: both;
float: left;
margin-left: 0;
margin-bottom:10px;
width: 59.1836%;
display: block;
text-align:left;
#login {
clear: none;
float: right;
margin-left: 2.0408%;
margin-bottom:10px;
margin-right:20px;
margin-top:50px;
width: 18.3673%;
display: block;
text-align:right;
a.login {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.6em;
color: #bd2137;
text-decoration: none;
text-align:right;
a.login:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.6em;
color: #ec8423;
text-decoration: none;
text-align:right;
.redBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #bd2137;
line-height: 1.23em;
.orangeBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #ec8423;
line-height: 1.23em;
.purpleBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #643f99;
line-height: 1.23em;
#topnav {
clear: both;
float: left;
margin-left: 0;
margin-bottom:10px;
width: 100%;
display: block;
#tl {
height: auto;
width: 14.2857142857143%;
padding-top: 10px;
float: left;
text-align:center;
font-size:1em;
a.topnav {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #58595b;
padding-top: 0px;
padding-right:0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left:0px;
margin-right:0px;
text-decoration: none;
.topnav:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #bd2137;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left:0px;
margin-left:0px;
margin-right: 0px;
text-decoration: none;
text-align: right;
.topnav:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #58595b;
padding-top: 0px;
padding-right:0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left:0px;
margin-right:0px;
text-decoration: none;
#midnav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height:100%;
display: block;
#MenuBar1 > li:hover > a {
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
#isbtn-findAjob {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #bd2137;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findAjob:hover {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #bd2137;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findAjob:active {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #bd2137;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findTalent {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #ec8423;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findTalent:hover {
font-family: "Century Gothic";
font-size:1.8em;
color: #FFF;
text-decoration: none;
background-color: #ec8423;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-forEmployees {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #643f99;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-forEmployees:hover {
font-family: "Century Gothic";
font-size:1.8em;
color: #FFF;
text-decoration: none;
background-color: #643f99;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#bodycontent {
clear: both;
float: left;
margin-left:20px;
margin-right:20px;
width: 95%;
display: block;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px 0px opx 0px;
.GreyHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #58595b;
font-weight: bold;
.RedHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #bd2137;
font-weight: bold;
.OrangeHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #ec8423;
font-weight: bold;
.PurpleHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #643f99;
font-weight: bold;
.BodyCopy {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #58595b;
.BodyItal {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-style:italic;
font-size:.85em;
line-height:1.5em;
color: #58595b;
a.redLink {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#bd2137;
.redLink:hover {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#ec8423;
a.Lrg-redLink {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.5em;
color: #bd2137;
.Lrg-redLink:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.5em;
color: #ec8423;
#blogroll {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#mobile{
width: 100%;
background-color: #bd2137;
display: block;
float: left;
margin-left:-5000px;
#mobile-menu {
clear: both;
float: left;
margin-left: -1000px;
width: 18.3673%;
display: block;
#mobile-back {
clear: both;
float: left;
margin-left:-1000px;
width: 31.0344%;
display: block;
text-align:center;
#mobile-login {
clear: none;
float: left;
margin-left: -1000px;
width: 31.0344%;
display: block;
text-align: center;
border-right-width: thin;
border-right-style: solid;
border-right-color: #F66;
background-color: #bd2137;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
#missionStatement {
clear: both;
float: left;
margin-left: 0px;
width: 100%;
display: block;
background-color: #7d7e7f;
padding:0px;
.missionStatement {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #FFF;
text-align: center;
font-style: italic;
a.viewSite {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
color:#FFF;
text-decoration: underline;
a.viewSite:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
color: #ec8423;
text-decoration: underline;
#footerCopy {
float: left;
width: 50%;
text-align:left;
#connectUs {
float: right;
width: 100%;
text-align: right;
#social-media {
width: 50%;
float: right;
text-align: right;
#smicon {
width: 100%;
float: right;
text-align: right;
#desktopContact {
float: left;
width: 100%;
#column1 {
width:45%;
float:left;
margin-right:30px;
#column2 {
width:45%;
float:left;
#column3 {
width:45;
float:left;
#newsletter {
width: 165px;
height: auto;
padding: 5px;
float: left;
text-align: center;
border: thin groove #CCCCCC;
background-color: #EFEFEF;
#corpBuild {
background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/building-tab.jpg );
background-repeat: no-repeat;
background-position: left top;
float: left;
width: 100%;
height: 136px;
padding-bottom:20px;
#mobileContactPg {
margin-left:-5000px;
padding: 0px;
float: left;
width: 100%;
#desktopContactPg {
margin: 0px;
padding: 0px;
float: left;
width: 100%;
#column4 {
padding: 0px;
float: left;
width: 70%;
margin-top: -20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
#column5 {
float: right;
width: 25%;
padding: 0px;
margin-top: -20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
#column6 {
width: 50%;
float: left;
margin-right: 50px;
#column7 {
width: 30%;
float: left;
margin-left: 50px;
#column8 {
width: 20%;
float: right;
text-align: left;
margin-left: 0px;
margin-right: 100px;
#rowColumns {
float: left;
width: 100%;
margin-bottom: 20px;
#rowClmn1 {
float: left;
width: 25%;
margin-left: 20px;
#rowClmn2 {
width: 25%;
margin-left: 10px;
float: left;
#rowClmn3 {
float: left;
width: 25%;
margin-left: 10px;
#icons {
text-align: right;
float: left;
width: 100%;
#ptBoarder {
padding-right:10px;
padding-bottom:15px;
float:left;
width: 35%;
margin-top:20px;
margin-bottom:20px;
#eoq {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#eoq1 {
clear: both;
float: left;
margin-left: 0;
width: 27.5362%;
display: block;
#eoq2 {
clear: none;
float: left;
margin-left: 1.4492%;
width: 71.0144%;
display: block;
#SafetyTip {
clear: both;
float: left;
margin-left: 0;
width: 98%;
display: block;
padding: 10px;
border: thin solid #CCC;
#NationalRates {
clear: both;
float: left;
margin-left: 0px;
width: 100%;
display: block;
margin-bottom: 25px;
padding: 0px;
#metroRates {
clear: both;
float: left;
margin-left: 0px;
width: 100%;
display: block;
#tables {
margin: 0px;
padding: 0px;
float: left;
height: auto;
width: 100%;
#charts {
clear: both;
margin-left: 0;
width: 100%;
display: block;
#chart1 {
clear: both;
float: left;
margin-left: 0;
width: 40%;
display: block;
margin-bottom: 0px;
#chart2 {
clear: both;
margin-left: 0;
width: 45%;
display: block;
float: right;
/* Tablet Layout: 1000px. Inherits styles from: Mobile Layout. *************************************/
@media only screen and (min-width: 1000px) {
.gridContainer {
width: 91.14%;
padding-left: 0.93%;
padding-right: 0.93%;
background-color:#FFF;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
background-color:#FFF;
#logo {
clear: both;
float: left;
margin-left: 0;
margin-bottom:10px;
width: 59.1836%;
display: block;
text-align:left;
#login {
clear: none;
float: right;
margin-left: 2.0408%;
margin-bottom:10px;
margin-right:20px;
margin-top:50px;
width: 18.3673%;
display: block;
text-align:right;
a.login {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.6em;
color: #bd2137;
text-decoration: none;
text-align:right;
a.login:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.6em;
color: #ec8423;
text-decoration: none;
text-align:right;
.redBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #bd2137;
line-height: 1.23em;
.orangeBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #ec8423;
line-height: 1.23em;
.purpleBody {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.23em;
color: #643f99;
line-height: 1.23em;
#topnav {
clear: both;
float: left;
margin-left: 0;
margin-bottom:10px;
width: 100%;
display: block;
#tl {
height: auto;
width: 14.2857142857143%;
padding-top: 10px;
float: left;
text-align:center;
font-size:1em;
a.topnav {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #58595b;
padding-top: 0px;
padding-right:0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left:0px;
margin-right:0px;
text-decoration: none;
.topnav:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #bd2137;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left:0px;
margin-left:0px;
margin-right: 0px;
text-decoration: none;
text-align: right;
.topnav:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #58595b;
padding-top: 0px;
padding-right:0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left:0px;
margin-right:0px;
text-decoration: none;
#midnav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height:100%;
display: block;
#MenuBar1 > li:hover > a {
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
#isbtn-findAjob {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #bd2137;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findAjob:hover {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #bd2137;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
#isbtn-findAjob:active {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #bd2137;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findTalent {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #ec8423;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-findTalent:hover {
font-family: "Century Gothic";
font-size:1.8em;
color: #FFF;
text-decoration: none;
background-color: #ec8423;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-forEmployees {
font-family: "Century Gothic";
font-size: 1.8em;
color: #FFF;
text-decoration: none;
background-color: #643f99;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#isbtn-forEmployees:hover {
font-family: "Century Gothic";
font-size:1.8em;
color: #FFF;
text-decoration: none;
background-color: #643f99;
background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
background-repeat: no-repeat;
background-position: right center;
height: 35px;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom:10px;
padding-left: 0px;
#bodycontent {
clear: both;
float: left;
margin-left:20px;
margin-right:20px;
width: 95%;
display: block;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px 0px opx 0px;
.GreyHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #58595b;
font-weight: bold;
.RedHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #bd2137;
font-weight: bold;
.OrangeHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #ec8423;
font-weight: bold;
.PurpleHeader {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #643f99;
font-weight: bold;
.BodyCopy {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #58595b;
.BodyItal {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-style:italic;
font-size:.85em;
line-height:1.5em;
color: #58595b;
a.redLink {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#bd2137;
.redLink:hover {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.5em;
color:#ec8423;
a.Lrg-redLink {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.5em;
color: #bd2137;
.Lrg-redLink:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.5em;
color: #ec8423;
#blogroll {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#mobile{
width: 100%;
background-color: #bd2137;
display: block;
float: left

Thanks!
"Nancy O." <[email protected]> wrote:
Nancy O. created the discussion
"Fluid grid with added media queries not working with "
To view the discussion, visit: https://forums.adobe.com/message/6496730#6496730
>

Div options toolbar not displayed correctly in fluid grid layout

When I select an inserted element in fluid grid layout, the options to hide, duplicate or delete the Div are not displayed. I only have the 'move up a row' arrow displayed. How do get the other options to display on the mini toolbar? My DW CS6 version is V12.0 Build 5861.

It is called as the 'Smart HUD' and was made available in 12.2 CCM (Creative Cloud) update. Your version is 12.0 which looks like a regular non-cloud license.
Are you actually a Creative Cloud subscriber? If not, you'll have to wait for a perpetual license upgrade in order to see/ use this feature.

Fluid grid layouts do not work in IE 7/8

Hello,
I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
IE 9 shows it right.
When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
Later I will upload some screenshots.
All other browser work fine.
Where is the problem here?

When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
Reason: You added styles to your FluidGrid Desktop but not mobile & tablet.
In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
I find it's much safer to use a separate style sheet for content. When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

Fluid Grid Colums NOT aligning

Similar Messages

Maybe you are looking for