close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

Data Assist repeating table and fluid grid design.

Thread began 2/01/2014 10:40 pm by larry268887 | Last modified 2/07/2014 5:08 pm by larry268887 | 2110 views | 11 replies

larry268887

Tried but can't get it to work.

It seems to work in chrome but not in internet explorer or firefox.
Here is my code.

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

<link href="/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="/css/screen-styles.css" rel="stylesheet" type="text/css">


<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/css/respond.min.js"></script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/alex-brush:n4:default;source-sans-pro:n2,i2,n4,i4:default.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<!-- Begin Header Code -->

<!-- End Header Code -->
<!-- Begin Main Content Code -->
<div class="fluid maincontentwrap">
<!-- Begin Section Content Code -->
<div class="fluid sectionwrap"><section class="fluid intro">
<div class="fluid table">
<table width="100%">
<tr>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
</tr>
</table></div></section>
</div>
<!-- End Section Content Code -->
<!-- Begin Aside Content Code -->
<div class="fluid asidewrap"><aside class="fluid sidecontent">This is the content for Layout Section Tag "aside"
</aside>
</div>
<!-- End Aside Content Code -->
</div>
<!-- End Main Content Code -->
<!-- Begin footer Code -->

<!-- End Footer Code -->
</div>
</body>
</html>

Here is my css file.

@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: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 24;
dw-gutter-percentage: 15;

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%;
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: 97.3913%;
padding-left: 1.304%;
padding-right: 1.3043%;
clear: none;
float: none;
}
#header {
background-color: #004080;
}
#headertext {
font-family: alex-brush;
font-style: normal;
font-weight: 400;
color: #ffffff;
font-size: large;
}
#mainnav {
}
#mainnavlist {
margin-top: 4px;
margin-bottom: 4px;
padding-top: 3px;
padding-bottom: 3px;

width: 100%;

margin-left: 0;

}
.mainnavitem {
text-align: center;
width: 100%;
clear: both;
margin-left: 0px;
background-color: #252122;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 4px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}
.mainnavitem a {
color: #FFFFFF;
text-decoration: none;
font-family: source-sans-pro;
font-style: italic;
font-weight: 400;
}
.mainnavitem a:hover {
color: #cc0000;
text-decoration: none;
font-family: source-sans-pro;
font-style: italic;
font-weight: 400;
}
#footer {
background-color: #004080;
color: #ffffff;
text-align: center;
}
.footernav {
width: 100%;
clear: both;
margin-left: 0;
}
.footermenulist {
width: 100%;
margin-left: 0;
margin-top: 5px;
margin-bottom: 5px;
}
.footermenuitem {
width: 100%;
clear: both;
margin-left: 0;
}
.fluid.footermenuitem a {
color: #FFFFFF;
}
.fluid.footermenuitem a:hover {
color: #cc0000;
}
#footernav2 {
}
#footernavlist2 {
}
.footernav2 {
}
.footernavlist2 {
width: 100%;
margin-left: 0;
margin-top: 5px;
margin-bottom: 5px;
}
.footernavitem2 {
width: 100%;
clear: both;
margin-left: 0;
}
.footernav2 .fluid.fluidList.footernavlist2 .fluid.footernavitem2 a {
color: #FFFFFF;
}
.footernav2 .fluid.fluidList.footernavlist2 .fluid.footernavitem2 a:hover {
color: #cc0000;
}
#footerdiv {
}
#footer #footerdiv a {
color: #FFFFFF;
}
#footer #footerdiv a:hover {
color: #cc0000;
}
#container {
margin-left: auto;
margin-right: auto;
}
.fl {
float: left;
margin-left: 5px;
margin-right: 5px;
}
.fr {
float: right;
margin-left: 5px;
margin-right: 5px;
}
#container .fr a {
color: #FFFFFF;
text-decoration: none;
font-family: source-sans-pro;
font-style: italic;
font-weight: 200;
}
#container .fr a:hover {
color: #D52349;
font-family: source-sans-pro;
font-style: italic;
font-weight: 200;
text-decoration: none;

}
.maincontentwrap {
background-color: #FFFFFF;
}
.maincontentsection {
width: 100%;
padding-left: 0%;
padding-right: 0%;
}
.rtsidebar {
width: 100%;
clear: both;
margin-left: 0;
}
.borderdiv {
border: 1px solid #CCCCCC;
border-radius: 5px;
padding-left: 2.0%;
padding-right: 2.0%;
padding-top: 2.0%;
padding-bottom: 2.0%;
width: 96%;
background-color: #FFFFFF;
text-align: center;
}
.borderdivfill {
border: 1px solid #CCCCCC;
border-radius: 5px;
background-color: #9FCFFF;
padding-left: 2.0%;
padding-right: 2.0%;
padding-top: 2.0%;
padding-bottom: 2.0%;
width: 96%;
}
.sidebarh3heading {
text-align: center;
}
.sidebarh4heading {
text-align: center;
}
.fluid.borderdiv a {
text-align: center;

}
.headertext {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: medium;
}
.sectionwrap {
width: 100%;
}
.asidewrap {
width: 100%;
clear: both;
margin-left: 0;
}
.intro {
}
.sidecontent {
}
.breadcrumb {
}
.puppyforsale {
border: 1px solid #252122;
border-radius: 5px;
}
.puppyforsalecontainer {
}
.puppyforsaleimage {
width: 100%;
}
.puppyforsaleinfo {
width: 100%;
clear: both;
margin-left: 0;
}
.puppyintro {
}
.linkclaw {
}
.yorkiename {
text-align: center;
}
.puppyinfolist {
}
.puppyinfoitem {
}
.puppyavailability {
}
.avail {
color: #CC0D10;
font-size: x-large;
}
.spacer {
}
.prodinfo {
color: #160CEB;
font-size: large;
}
.puppyname {
}
.button {
margin-top: 0.2%;
margin-bottom: 0.2px;
}
.fluid.button a img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0%;
margin-bottom: 0%;
}
.fluid.puppyforsaleimage img {
display: block;
margin-left: auto;
margin-right: auto;
}
.test {
width: 100%;
}
.test3 {
}
.table {
}
.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: 98.3695%;
padding-left: 0.8152%;
padding-right: 0.8152%;
clear: none;
float: none;
margin-left: auto;
}
#header {
}
#headernav {
}
#headernavlist {
}
.headernavitem {
width: 23.7569%;
clear: none;
margin-left: 1.6574%;
}
#headertext {
color: #ffffff;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: x-large;
}
#mainnav {
}
#mainnavlist {
width: 100%;
margin-left: 0;
}
.mainnavitem {
width: 100%;
clear: both;
margin-left: 0;
}
.footernav {
width: 100%;
margin-left: 1.6574%;
clear: none;
}
.footermenulist {
width: 100%;
margin-left: 0;
}
.footermenuitem {
width: 100%;
clear: both;
margin-left: 0;
}
.footernav2 {
}
.footernavlist2 {
width: 100%;
margin-left: 0;
}
.footernavitem2 {
width: 100%;
clear: both;
margin-left: 0;
}
#footerdiv {
}
#container {
}
.maincontentwrap {
}
.maincontentsection {
width: 100%;
}
.rtsidebar {
width: 100%;
clear: both;
margin-left: 0;
}
.borderdiv {
}
.borderdivfill {
}
.sidebarh3heading {
}
.sidebarh4heading {
}
.headertext {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: large;
}
.sectionwrap {
width: 100%;
}
.asidewrap {
width: 100%;
clear: both;
margin-left: 0;
}
.intro {
}
.sidecontent {
}
.breadcrumb {
}
.puppyforsale {
}
.puppyforsalecontainer {
}
.puppyforsaleimage {
width: 100%;
}
.puppyforsaleinfo {
width: 100%;
clear: both;
margin-left: 0;
}
.puppyintro {
}
.linkclaw {
}
.yorkiename {
}
.puppyinfolist {
}
.puppyinfoitem {
}
.puppyavailability {
}
.spacer {
}
.puppyname {
}
.button {
}
.test {
width: 100%;
}
.test3 {
}
.table {
}
.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: 89.5108%;
max-width: 1232px;
padding-left: 0.2445%;
padding-right: 0.2445%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#headernav {
}
#headernavlist {
}
.headernavitem {
width: 12.0218%;
clear: none;
margin-left: 0.5464%;
margin-right: 0px;
}
#headertext {
color: #ffffff;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: x-large;
}
#mainnav {
}
#mainnavlist {
margin-right: 0px;
margin-left: 4.1894%;
margin-top: 4px;
margin-bottom: 4px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
width: 91.6211%;
}
.mainnavitem {
width: 13.1212%;
margin-left: 0.5964%;
clear: none;
}
#footer {
}
.footernav {
width: 100%;
clear: both;
margin-left: 0;
}
.footermenulist {
width: 70.6739%;
margin-left: 16.7577%;
}
.footermenuitem {
width: 22.9381%;
margin-left: 0.7731%;
clear: none;
}
.footernav2 {
}
.footernavlist2 {
width: 79.0528%;
margin-left: 12.5683%;
}
.footernavitem2 {
width: 15.2073%;
margin-left: 0.6912%;
clear: none;
}
#footerdiv {
}
#container {
}
.maincontentwrap {
padding-left: 0%;
}
.maincontentsection {
width: 74.8633%;
}
.rtsidebar {
width: 24.5901%;
margin-left: 0.5464%;
clear: none;
}
.borderdiv {
}
.borderdivfill {
}
.sidebarh3heading {
}
.sidebarh4heading {
}
.headertext {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: x-large;
}
.sectionwrap {
width: 70.6739%;
padding-left: 1%;
}
.asidewrap {
width: 24.5901%;
margin-left: 0.5464%;
clear: none;
padding-left: 1.5%;
padding-right: 1%;
}
.intro {
}
.sidecontent {
}
.breadcrumb {
}
.puppyforsale {
}
.puppyforsalecontainer {
}
.puppyforsaleimage {
width: 40.7216%;
}
.puppyforsaleinfo {
width: 52.5773%;
margin-left: 0.7731%;
clear: none;
}
.puppyintro {
}
.linkclaw {
}
.yorkiename {
}
.puppyinfolist {
}
.puppyinfoitem {
}
.puppyavailability {
}
.spacer {
}
.puppyname {
}
.button {
}
.test {
width: 94.0721%;
}
.test3 {
}
.table {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

}

Any help is appreciated.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...