HTML5 Boilerplate

I'm making a new site from scratch. I'd like to future proof this as much as possible.
An Adobe forum member has reccommened HTML5 Boilerplate. I did some research, looked at some vids and downloaded it and looks really good.
Are any of you forum members fans of HTML5 boilerplate? Is this good to implement?
just want to make sure before I implement all this into a new way of working.
Thanks

It's not what we think that matters. HTML5 web standard is not finalized. What do you plan to do in HTML5 that you can't already do with X/HTML?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Why do I not see the background image with html5 boilerplate

hello,
I downloaded the html5 boilerplate
And in the main.css I made this :
body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
    background-image: url(../img/background.jpg)
and also in the normalize.css I set this :
body {
    margin: 0;
    background-image: url(../img/background.jpg)
But in IE10 I still do not see the background image.
Can anyone tell me what I did wrong ?
Roelof

Hello
You need to run your VI once. Wire the Select Signals express VI to your DAQ Assistant and run the VI once (this allows the signal names to propegate).
Check this forum:
select signals
Regards

Can I use a HTML5 boilerplate template with muse?

I'd like to by a boilerplate template but I don't know if I will be able to use it in muse...

I've actually purchased HTML5 and other templates that I use to recreate with Muse. By purchasing you get all of the graphics used along with any code sections that you may be able to insert into your Muse site. Plus you can use a screen grab of the template's site as an onion skin background in Muse to quickly, and I mean QUICKLY duplicate the template.

Business Catalyst and HTML5

Is there any known issues using HTML5 with business catalyst in late 2013? I have seen posts a year or more ago saying it had issues with HTML5 Boilerplate. I am just starting with Business Catalyst and would like to start developing for it. I am just trying to figure out if I need to stay with xhtml and div's instead of the nice new HTML5 shineyness...
Any advice would be greatly appreciated

The index.html page for the site is at www.ariesplumbinginc.com/index.html
Even though the code in Dreamweaver shows that it is just starting off with the <html> tag at the top, and it also shows this in the admin editor, BC is publishing the page with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

BC has converted the <html> tag into the above. I made some other changes to the page that need to be tweaked to validate for HTML5, but I did not change the entire document type. BC did that on it's own.
Any insight would be greatly appreciated. If you have a link to one of your own issue free HTML5 projects, that would be good too. I opened a ticket for it with BC help and they said it was confirmed as a bug in the system, but didn't give any time estimates for when it would be fixed. If you are able to use HTML5 without issue, maybe you know something BC support does not?
Thanks

FireFox images not loading in local folders (firebug error-Failed to load given URL)

I am having difficulty when developing websites in local folders (Windows7 computer). The webpages I make are showing images in IE9 & Chrome but not FireFox (nor Safari nor Opera).
In FireFox I get Firebug "Failed to load given URL" prompt.
I am using html5 & external linked css stylesheet & the html/html5 & css code validates.
I have tried using rel path ie images/image.gif & absolute path references ie C:/RPD_Programming/RPD WEB/amwcsnew/index.html
and have tried using % to eliminate whitespace in references but I cannot get FireFox to display images!!
This has been a problem for me for around 2 weeks now & is very frustrating. Some website code/templates I have downloaded from the internet display the websites properly (ie load images fine) when I open them locally in FireFox. Why does my code not allow the images to load in FireFox (paths/permissions/other issue??). How can I fix this?
Here is example css & html5 not displaying images from local directory in FireFox (fine in IE9 & Chrome):
style.css
/* CSS Document */
/*Basic Reset*/
margin:0;
padding:0;
html{
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
body{
width:1200px;
margin:0 auto;
header{
height:450px;
background:url("C:/RPD_Programming/RPD WEB/amwcsnew/images/header.gif");
background-repeat:no-repeat;
#mid{height:750px;
background:url('C:/RPD_Programming/RPD_WEB/amwcsnew/images/mid.gif')no-repeat;
footer{height:286px;
background:url('C:/RPD_Programming/RPD WEB/amwcsnew/images/footer.gif')no-repeat;
index.html
<!doctype html>



<html lang="en" class="no-js">
<head>

<meta charset="utf-8">
<title>amwcs-new</title>
<meta name="description" content="amwcs">
<meta name="author" content="rpd">


<link rel="shortcut icon" href="/favicon.ico">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">



<link rel="stylesheet" href="css/style.css?v=2">


<script src="js/modernizr-1.6.min.js"></script>


</head>


<body>




<header>

<hgroup>
<h1>amwcs</h1>
<h2>tagline</h2>
</hgroup>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<div id="mid">

<section class="hs1">


<p>Some content...</p>

<h2>Demonstrating EM and STRONG</h2>

<p><strong>This text will have more importance (SEO-wise and contextually)</strong></p>

<p><b>This text has visual importance but has no contextual or SEO importance</b></p>

<p>This is a <em>very</em> colloquial expression.</p>


</section>

<section class="hs2">
<h1>This is another section</h1>
<p>This is some dummy content</p>
</section>
</div>



<footer >
<p>copyright © year</p>
</footer>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>


<script src="js/general.js"></script>


<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>
I am most grateful for help & look forward to replies & fixing this-thanks
NB
Is there a FireFox guide/manual in pdf format available anywhere? I have not found one yet & a FireFox reference might be useful!

You need to use file:// as the protocol instead of C:/. The latter may never work (C:\ might).
Where is the main HTML located ?
Easiest if to store the images in a sub folder of the location because you can't go back via ../ beyond that root location for security reasons.
See:
*http://kb.mozillazine.org/Links_to_local_pages_do_not_work

Multi Screen Authoring

How do i find the tablet.css, ipad.css and desktop.css files? I am trying to make my website user friendly for all phones and ipads but cant seem to find the correct files?
Are they files i have to create myself or are they already on my computer somewhere? Also i have watched all of the videos on how to do the multi screen authoring however none of them explain where or how to create the relevant (.css) files?
I am new to this so any help would be greatly appreciated.
Declan

Sorry but there's no magic button that can convert your current site's CSS into a responsive one. Start over with a FluidGrid Layout or begin with one of the very popular Responsive Design Frameworks shown below. When you have a layout you like, copy & paste your old site's content into the new one.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Nancy O.

Looking for a simple tutorial to building my first responsive web site in Dreamweaver CC.

I am looking for a simple tutorial to building my first responsive web site in Dreamweaver CC.
I have watched the tv.adobe video 3 times and I cam not able to do the actions the author shows.
help.
Ken Edwards

Responsive and simple don't go hand-in-hand. First do some prep-work to understand the concepts.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Jump start your RWD projects with any of the Responsive Frameworks below:
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap FREE extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Have fun!!
Nancy O.

Clearbox 2.0 Issues

I would like to know if there is a way to insert a clearbox 2.0 gallery into a <div> so that the white space behind the photo gallery is filled with the desired background (either image or color). I have played around with this for many hours and it is just beginning to become more time consuming than it is worth. I see no code in the accompanying CSS that seems to address this issue and the gallery seems to defy all <div> tags. I am relatively new to this programming world and would sure love someone with some experience and wisdom to either answer my question explicitly or show me where I can find a step-by-step example of how to acheive this,
You can see the site home page at: http://tinamarie.sk-america.com/index.html and you can see the gallery at http://tinamarie.sk-america.com/gallery.html
If you look at the home page, I would like to essentially construct the gallery page to fit within a <div> that is under the navigation and above the footer divs and bounded on either side by the wrapper div. I thought I set it so that Clearbox was within the container div but to no avail. Instead the first thumbnail image is positioned immediately to the right of last navigation choice. Furthermore it does not appear like I can even get my navigation div to maintain a width of 960px.
It is completely frustrating and I am really hoping one you takes pity on me and appreciates my effort enough to give me a little (a great deal of) help on solving this issue.
Thanks in advance,
Steve
the code for the gallery.html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tina Marie Portfolio</title>
<script src="js/clearbox.js" type="text/javascript"></script>
<style type="text/css">
#wrapper {
        min-width: 1000;
        background-color: #8f8fbd;
.header {
img.c1 {
          background-color: #dddddd;
          display: block;
          margin-right: auto;
          margin-left: auto;
          width: auto;
/* nav begin */
#navigation ul li {
          float: left;
          list-style-type: none;
          font-family: HUNTSON, cursive;
          font-size: large;
          color: #805b97;
#navigation ul li a {
          color: #FFF;
          text-decoration: none;
          padding-top: 8px;
          padding-right: 15px;
          padding-bottom: 8px;
          padding-left: 15px;
          display: block;
          font-family: HUNTSON, cursive;
          font-size: large;
          color: #805b97;
          -webkit-transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
          -moz-transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
          -ms-transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
          -o-transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
          transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
#navigation ul {
          padding: 0px;
          margin: 0px;
          font-family: HUNTSON, cursive;
          font-size: large;
          color: #805b97;
#navigation a:hover {
          background-color: #E6EBEC;
          font-family: HUNTSON, cursive;
          font-size: large;
          color: #805b97;
/*nav end*/
#container {
          width: 960px;
          margin: 0 auto;
          background-image: url(images/background.png);
.clearfloat {
   clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
      .item a img {
      float:left;
      padding:3px;
      background-color: #dddddd;
      margin: 5px;
      border:1px solid #cccccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -khtml-border-radius: 3px;
      border-radius: 3px;
      -moz-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
                              -webkit-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
                              box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
      filter:alpha(opacity=100);
      -moz-opacity: 1;
      -khtml-opacity: 1;
      opacity: 1;
      .item a:hover img, .item a:active img {
          padding: 3px;
          border: 1px solid #cccccc;
          filter: alpha(opacity=80);
          -moz-opacity: 0.80;
          -khtml-opacity: 0.80;
          opacity: 0.80;
      .clearfix:after{
      clear:both;
      #inline{
      visibility: hidden;
      color:#444;
/* EndOAWidget_Instance_2648024 */
</style>
<link href="tinamarie.css" rel="stylesheet" type="text/css" />
<script type="text/xml">

</script>
</head>
<body>
<script type="text/javascript">
// BeginOAWidget_Instance_2648024: #OAWidget
      //           ClearBox Config File (JavaScript)
      var
      // CB layout:
      CB_MinWidth=300,                                        // minimum (only at images) or initial width of CB window
      CB_MinHeight=300,                                        // initial heigth of CB window
      CB_WinPadd=15,                                                  // padding of the CB window from sides of the browser
      CB_ImgBorder=3,                                                  // border size around the picture in CB window
      CB_ImgBorderColor='#dddddd',                              // border color around the picture in CB window
      CB_Padd=4,                                                  // padding around inside the CB window
      CB_BodyMarginLeft=10,                                        //
      CB_BodyMarginRight=10,                                        // if you set margin to <body>,
      CB_BodyMarginTop=10,                                        // please change these settings!
      CB_BodyMarginBottom=10,                                        //
      CB_ShowThumbnails='auto',                              // it tells CB how to show the thumbnails ('auto', 'always' or 'off') thumbnails are only in picture-mode!
      CB_ThumbsBGColor='#dddddd',                              // color of the thumbnail layer
      CB_ThumbsBGOpacity=.35,                                        // opacity of the thumbnail layer
      CB_ActThumbOpacity=.65,                                        // thumbnail opacity of the current viewed image
      CB_SlideShowBarColor='#FFF',                              // color of the slideshow bar
      CB_SlideShowBarOpacity=.60,                              // opacity of the slideshow bar
      CB_SlideShowBarPadd=17,                                        // padding of the slideshow bar (left and right)
      CB_SlideShowBarTop=2,                                        // position of the slideshow bar from the top of the picture
      CB_SimpleDesign='off',                                        // if it's 'on', CB doesn't show the frame but only the content - really nice
      CB_CloseBtnTop=-10,                                        // vertical position of the close button in picture mode
      CB_CloseBtnRight=-14,                                        // horizontal position of the close button in picture mode
      CB_CloseBtn2Top=-20,                                        // vertical position of the close button in content mode
      CB_CloseBtn2Right=-30,                                        // horizontal position of the close button in content mode
      CB_OSD='off',                                                  // turns on OSD
      CB_OSDShowReady='off',                                        // when clearbox is loaded and ready, it shows an OSD message
      // CB font, text and navigation (at the bottom of CB window) settings:
      CB_FontT='Verdana',                                        //
      CB_FontSizeT=13,                                        // these variables are referring to the title or caption line
      CB_FontColorT='#777',                                        //
      CB_FontWeightT='normal',                              //
      CB_FontC='arial',                                        //
      CB_FontSizeC=11,                                        // these variables are referring to
      CB_FontColorC='#999',                                        // comment lines under the title
      CB_FontWeightC='normal',                              //
      CB_TextAlignC='justify',                              //
      CB_txtHCMax=120,                                        // maximum height of the comment box in pixels
      CB_FontG='arial',                                        //
      CB_FontSizeG=11,                                        // these variables are referring to the gallery name
      CB_FontColorG='normal',                                        //
      CB_FontWeightG='@@CB_FontWeightG@@',                              //
      CB_PadT=10,                                                  // space in pixels between the content and the title or caption line
      CB_OuterNavigation='off',                              // turns outer navigation panel on
      CB_ShowURL='off',                                        // it shows the url of the content if no title or caption is given
      CB_ItemNum='on',                                        // it shows the ordinal number of the content in galleries
      CB_ItemNumBracket='()',                                        // whatever you want
      CB_ShowGalName='',                                        // it shows gallery name
      CB_TextNav='on',                                        // it shows previous and next navigation
      CB_NavTextImgPrvNxt='on',                              // it shows previous and next buttons instead of text
      CB_ShowDL='on',                                                  // it shows download controls
      CB_NavTextImgDL='on',                                        // it shows download buttons instead of text
      CB_ImgRotation='on',                                        // it shows the image rotation controls
      CB_NavTextImgRot='on',                                        // it shows the image rotation buttons instead of text
      // Settings of the document-hiding layer:
      CB_HideColor='#000',                                        // color of the layer
      CB_HideOpacity=.8,                                        // opacity (0 is invisible, 1 is 100% color) of the layer
      CB_HideOpacitySpeed=400,                              // speed of fading
      CB_CloseOnH='on',                                        // CB will close, if you click on background
      // CB animation settings:
      CB_Animation='double',                                        // 'double', 'normal', 'off', 'grow', 'growinout' or 'warp' (high cpu usage)
      CB_ImgOpacitySpeed=300,                                        // speed of content fading (in ms)
      CB_TextOpacitySpeed=300,                              // speed of text fading under the picture (in ms)
      CB_AnimSpeed=300,                                        // speed of the resizing animation of CB window (in ms)
      CB_ImgTextFade='on',                                        // turns on or off the fading of content and text
      CB_FlashHide='on',                                        // it hides flash animations on the page before CB starts
      CB_SelectsHide='on',                                        // it hides select boxes on the page before CB starts
      CB_SlShowTime=3000,                                        // default speed of the slideshow (in sec)
      CB_Preload='on',                                        // preload neighbour pictures in galleries
      CB_ShowLoading='on'                                        //
// EndOAWidget_Instance_2648024
</script>
<div id="wrapper">
<div id="container">
<div id="header"><a href="index.html"><img src="images/header.png" alt="Tina Marie, Model, Biker Babe, Spokeswoman and Event Promotions" name="header" width="960" id="header" class="c1" /></a>
</div>
<div id="navigation">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About Me</a></li>
      <li><a href="gallery.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</div>


<div class="item">
<a rel="clearbox[gallery=Gallery,,comment=Biker Angel]" href="images/Tina Marie Winged Angel.jpg" title="Tina Marie"><img class="border" img src="images/preview_images/JPEG/Tina_Marie_Wings_Logo.jpg" alt="Biker Angel" /></a>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Collage Black n White]" href="images/Tina_Marie_Collage_Bra_Face_BlackandWhite.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Bra_Face_BlackandWhite.jpg" alt="Black and White Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Bra and Panty Collage]" href="images/Tina_Marie_Collage_Bra_Panty.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Bra_Panty.jpg" alt="Bra and Panty Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 01]" href="images/Tina_Marie01.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie01.jpg" alt="Image 01" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 02]" href="images/Tina_Marie02.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie02.jpg" alt="Image 02" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 03]" href="images/Tina_Marie03.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie03.jpg" alt="Image 03" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 04]" href="images/Tina_Marie04.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie04.jpg" alt="Image 04" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 05]" href="images/Tina_Marie05.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie05.jpg" alt="Image 05" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 07]" href="images/Tina_Marie07.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie07.jpg" alt="Image 07" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 08]" href="images/Tina_Marie08.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie08.jpg" alt="Image 08" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 13]" href="images/Tina_Marie13.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie13.jpg" alt="Image 13" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 14]" href="images/Tina_Marie14.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie14.jpg" alt="Image 14" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 23]" href="images/Tina_Marie23.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie23.jpg" alt="Image 23" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 24]" href="images/Tina_Marie24.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie24.jpg" alt="Image 21" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 25]" href="images/Tina_Marie25.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie25.jpg" alt="Image 25" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 31]" href="images/Tina_Marie31.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie31.jpg" alt="Image 31" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 35]" href="images/Tina_Marie35.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie35.jpg" alt="Image 35" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 36]" href="images/Tina_Marie36.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie36.jpg" alt="Image 36" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 37]" href="images/Tina_Marie37.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie37.jpg" alt="Image 37" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 39]" href="images/Tina_Marie39.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie39.jpg" alt="Image 39" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 46]" href="images/Tina_Marie46.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie46.jpg" alt="Image 46" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 47]" href="images/Tina_Marie47.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie47.jpg" alt="Image 47" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 48]" href="images/Tina_Marie48.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie48.jpg" alt="Image 48" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 49]" href="images/Tina_Marie49.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie49.jpg" alt="Image 49" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 50]" href="images/Tina_Marie50.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie50.jpg" alt="Image 50" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 56]" href="images/Tina_Marie56.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie56.jpg" alt="Image 56" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 43]" href="images/Tina_Marie43.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie43.jpg" alt="Image 43" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 52]" href="images/Tina_Marie52.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie52.jpg" alt="Image 52" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 53]" href="images/Tina_Marie53.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie53.jpg" alt="Image 53" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 54]" href="images/Tina_Marie54.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie54.jpg" alt="Image 54" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 55]" href="images/Tina_Marie55.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie55.jpg" alt="Image 55" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 58]" href="images/Tina_Marie59.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie59.jpg" alt="Image 59" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 60]" href="images/Tina_Marie60.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie60.jpg" alt="Image 60" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 61]" href="images/Tina_Marie61.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie61.jpg" alt="Image 61" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 27]" href="images/Tina_Marie27.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie27.jpg" alt="Image 27" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 67]" href="images/Tina_Marie67.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie67.jpg" alt="Image 67" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 68]" href="images/Tina_Marie68.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie68.jpg" alt="Image 68" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 42]" href="images/Tina_Marie42.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie42.jpg" alt="Image 42" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 33]" href="images/Tina_Marie33.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie33.jpg" alt="Image 33" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 69]" href="images/Tina_Marie69.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie69.jpg" alt="Image 69" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 06]" href="images/Tina_Marie06.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie06.jpg" alt="Image 06" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 09]" href="images/Tina_Marie09.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie09.jpg" alt="Image 09" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 10]" href="images/Tina_Marie10.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie10.jpg" alt="Image 10" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 32]" href="images/Tina_Marie32.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie32.jpg" alt="Image 32" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 34]" href="images/Tina_Marie34.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie34.jpg" alt="Image 34" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 41]" href="images/Tina_Marie41.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie41.jpg" alt="Image 41" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 45]" href="images/Tina_Marie45.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie45.jpg" alt="Image 45" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 62]" href="images/Tina_Marie62.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie62.jpg" alt="Image 62" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 63]" href="images/Tina_Marie63.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie63.jpg" alt="Image 63" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 64]" href="images/Tina_Marie64.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie64.jpg" alt="Image 64" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 65]" href="images/Tina_Marie65.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie65.jpg" alt="Image 65" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 11]" href="images/Tina_Marie11.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie11.jpg" alt="Image 11" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 17]" href="images/Tina_Marie17.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie17.jpg" alt="Image 17" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 66]" href="images/Tina_Marie66.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie66.jpg" alt="Image 66" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 28]" href="images/Tina_Marie28.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie28.jpg" alt="Image 28" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 12]" href="images/Tina_Marie12.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie12.jpg" alt="Image 12" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 15]" href="images/Tina_Marie15.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie15.jpg" alt="Image 15" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 18]" href="images/Tina_Marie18.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie18.jpg" alt="Image 18" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 30]" href="images/Tina_Marie30.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie30.jpg" alt="Image 30" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 51]" href="images/Tina_Marie51.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie51.jpg" alt="Image 51" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Sexy Tina Marie and Orange Chopper Collage]" href="images/Tina_Marie_Collage_Painted_Skirt_OrangeBike_BeltBra_Sexy.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Painted_Skirt_OrangeBike_BeltBra_Sexy. jpg" alt="Sexy Tina Marie and Orange Chopper Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Military Sexy Collage]" href="images/Tina_Marie_Collage_Military_Sexy.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Military_Sexy.jpg" alt="Military Sexy Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Totally Sexy Mix Collage]" href="images/Tina_Marie_Collage_TotalMix_Sexy.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_TotalMix_Sexy.jpg" alt="Totally Sexy Content" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Sexy Mix Outside Collage]" href="images/Tina_Marie_Collage_Sexy_Mix_Outside.jpg" title="Tina Marie" ><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Sexy_Mix_Outside.jpg" alt="Sexy Mix Outside Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,commnent=Sexy Top Collage]" href="images/Tina_Marie_Collage_Sexy_Top.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Sexy_Top.jpg" alt="Sexy Top Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 21]" href="images/Tina_Marie21.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie21.jpg" alt="Image 21" /></a></div>
</div>
<div id="footer">
<h6><span class="fltlft">© 2012 Tina Marie</span> <span class="fltrt">Designed / Maintained by <a href="http://www.sk-america.com" target="_blank">SK-America</a></span></h6><strong></strong></div>
</div>
</div>
</html>
Here is the boilerplate.css code:
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {
          margin: 0;
          font-size: larger;
          line-height: 1.231;
body, button, input, select, textarea {
          font-family: Arial, Helvetica, sans-serif;
          color: #666;
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
   Links
   ========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
   Lists
   ========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
   Embedded content
   ========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }

You aren't clearing your float which is why the images seem to be continuing with the header item.
Page 235 of your HTML file, add this:
<div style="clear:both;">
This should fix the issue of the image starting next to menu items.
For footer and other background color issue,
tinamarie.css, line 108, replace #footer with this code:
#footer {
   padding: 10px 0;
   background-color: #E6EBEC;
clear: both;

Works fine in IE6 & 9, renders only background in IE7, wont load in IE8

Hi, I'm relatively new to Browserlabs but am finding it very helpful. My question has to do with how a page can renders OK in IE6, perfectly in IE9 and not even load ("page error") in IE8 - plus all I see in IE7 is the background.....
Here is the link: http://www.imsgonline.com/engageinteractive
the site is a Wordpress site, using much of the HTML5 Boilerplate in the HTML
Of course, it works fine in FF, Safari and Chrome
The only glitch in IE6 is that the background is missing, so it is kinda ironic that IE7 displays ONLY the background...
I am viewing browserlabs on a mac, generally in Firefox.
Any ideas / help would be appreciated!
michael

The IE8 problem appears to be the same as the issue described here on the Respond framework: https://github.com/scottjehl/Respond/issues/27#issuecomment-2109126
This appears to be an IE8 issue exposed by the use of the html5-boilerplate stuff. There are a couple of possible causes and workarounds identified in the thread - can you try them and see if this resolves the rendering in IE8?

I need some FREE website templates that i can edit in dreamweaver.. help!!!

i need some FREE website templates that i can edit in dreamweaver.. help!!! anyone know where i can find good ones?

By Template, are you looking for DW Template.dwt files?
Dreamweaver templates: Customizable starter designs for beginners | Adobe Developer Connection
Or pre-built CSS & HTML Layouts (starter pages)?
For starter pages in DW, go to File > New > Blank page > HTML.
Select a layout from the 3rd panel and hit Create button.
Or, look at Project Seven's commercial CSS Layouts and Page packs (not free, but well worth the investment if you want a good final product).
http://www.projectseven.com/
Or do you want Responsive Layouts that work in mobile, tablet and desktop?
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap FREE extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Nancy O.

CSS height property use in Fluid grid layout

Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).
My coding is below
index.html
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">


<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"></div>
</div>
</body>
</html>
boilerplate.css
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
   Links
   ========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
   Lists
   ========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
   Embedded content
   ========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
   Figures
   ========================================================================== */
figure { margin: 0; }
/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
style.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:          10;
          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: 85.5%;
          padding-left: 2.25%;
          padding-right: 2.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 97.5%;
          padding-left: 1.25%;
          padding-right: 1.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          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: 98%;
          max-width: 1232px;
          padding-left: 1%;
          padding-right: 1%;
          margin: auto;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height:5px;
          background-color:#FBB829;
respond.min.js
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url$)['"]?([^\/$'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/$min\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1),maxw:D.match(/$max\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
I really do appreciate your efforts to help me solve this problem... Thank you in advance

Height is determined by content. I can't think of a single reason to have a div height of 5px because almost nothing will fit inside that small a space without problems.
As to why it doesn't show up in other devices, you must have put that style into the Tablet CSS code instead of the default Mobile CSS code.
Fluid Grids build up from Mobile (applied to everything) with specific rules for Tablets, then Desktops.
Best advice, use Fluid Grids for layout only. Use a separate CSS file for content styles.
Hope this helps,
Nancy O.

How to get 100% width in fluid grid layout CC

I'm currently getting to grips with dreamweaver's fluid grid layout and cant seem to get a div to go the full 100% width across the screen. Ive created a div outside of the grid container as a non fluid div, and entered in the CSS myself in code view since Dreamweaver doesnt seem to allow you to add a class or ID to non fluid elements in design view. I have done this and all though i thought i had achieved success i noticed when looking closely in live view and when previewed in chrome that there is still a tiny gap between the div and the edge of the screen. Its very small, but its definitely there. Ive enetered width to be 100% and its definitely not simply 100% width of the grid container as its wider. I just cant account for the tiny gap which seems to be about 1 pixel wide. Any ideas whats causing this gap?

Depending on your project goals, there are plenty of other Responsive Frameworks you can use.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's FREE Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Adobe Edge Reflow
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
PS. I don't work for Adobe. I'm just a product user like you.
Nancy O.

Is there any facility to create responsive html page with tools

I create many html page is there any tool to create responsive page easilily. Check this sample page of msbte result here i coded manually i not found any buttons or option for it

Dreamweaver CS6 and CC have a feature called FluidGrid Layouts for creating responsive web pages.
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Dreamweaver CS6 and CC also support jQuery Mobile for building mobile phone apps
Create & package Mobile app with DW, jQuery Mobile & PhoneGap
http://www.adobe.com/devnet/dreamweaver/articles/dw-phonegap-mobile-app.html
Adobe has another product for creating Responsive Layouts in a more visual interface (preferred by designers):
Adobe Edge Reflow (preview)
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
Or you can jump start your web projects with any of the Responsive Web Design Frameworks below:
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap FREE extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial Responsive CSS Layouts)
http://www.projectseven.com/products/templates/index.htm
Use whichever works best for your particular project.
Nancy O.

How to get fluid layout for Dreamweaver CS5?

CS 5 is not have Fluid Layoout,how to get fluid layout for Dreamweaver CS5?

For Responsive Web Designs (RWD), you can do it manually with CSS Media Queries. David wrote a detailed tutorial below.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Or you can jump start your RWD projects with one of these popular Frameworks.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap FREE extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Nancy O.

How to make header background image scaleable on all devices

I have a image that is 1920 by 700 px (1920 being the width of my laptops screen full size) that I want to use as a background for a header that is 1920 by 700 px. When I preview the full screen in chrome browers it scales great but when I check the smartshone and tablet view in dreamweaver cc the background is chop off. I need to use it as a background because I want to place a custom navigation menu on top of it. So why is it testing great at full screen and scaleing to any size but when I check the smartphone or tablet view in dreamweaver it looks crazy? Please someone!

If you're interested in building responsive web sites, read this first:
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
To jump start your responsive web project, you can use one of the freely available Responsive Frameworks below: Some people feel these are actually better than FluidGrid Layouts.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap * free extension for DW *
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

HTML5 Boilerplate

Similar Messages

Maybe you are looking for