< Ul > positioning problem with CSS

Similar Questions

• Problem with CSS formatting! Urgent help!

  I'm having a problem with the creation of a css formatting, in the past I've used tables and I'm trying to convert my sites for my clients. I put the site using div and css tags and it looks great, until I put in the cosing of the menu bar. When I put in the menu bar coding all of a sudden the bar has a padding around her, but I can't find a padding that it would change in the css coding. I need a result as soon as possible! so please help. ill show my code below:

  It's the div of coding:

  < div id = Nav >
  < ul class = menu "drop-down" id = "bar"; "Width: 879px" name = 'Bar' >
  < class li = "style16" style = "width: 161px;" height: 22px ">"
  < a href = "default.html" style ="width: 146px" > home < /a > < /li > "
  < class li = "style10" style = "width: 169px;" height: 23px ">"
  < a href = "about.html" style ="width: 153px" > on < /a > < /li > "

  < class li = "" style = "height: 31px; Width: 175px; left: 0px; Top: 0px ">"
  < a href = "Equipment.html" class = "style18" > "
  < div class = "style10" style = "width: 156px;" height: 20px; ">
  Hardware < / div >
  < /a > < ul class = "sub_menu" >
  < li > < a href = "compressor.html" > compressors Air < /a > < /li > ""
  < li > < a href = "compactions.html" > compaction < /a > < /li > ""
  < li > < a href = "concrete.html" > equipment concrete < /a > < /li > ""
  < li > < a href = "forklifts.html" > Fork Lifts < /a > < /li > ""
  < li > < a href = "generators.html" > generators < /a > < /li > ""
  < li > < a href = "groundthawing.html" > ground thaw < /a > < /li > ""
  < li > < a href = "heaters.html" > heaters < /a > < /li > ""
  < li > < a href = "scissorlifts.html" > Scissor Lifts < /a > < /li > ""
  < li > < a href = "boomlifts.html" > Boom Lifts < /a > < /li > ""
  < li > < a href = "lighttowes.html" > light towers < /a > < /li > ""
  < li > < a href = "misc.html" > various < /a > < /li > ""
  < li > < a href = "dirtequipment.html" > Dirt equipment < /a > < /li > ""
  < li > < a href = "powertools.html" > Power Tools < /a > < /li > ""
  < li > < a href = "pumps.html" > pumps | "" Saws | Welders < /a > < /li >
  < /ul >
  < /li >
  < style li = "width: 165px" > < a href = "locations.html" >
  < div class = "style10" style = "width: 154px" >
  Locations < / div >
  < /a >
  < /li >
  < style li = "width: 180px" > < a href = "contact.html" >
  < div class = "style16" style = "height: 24 PX" >
  Contact us < / div >
  < /a > < /li >
  < /ul >

  < / div >

  It's the css coding:

  
  {#wrapper}
  Width: 880px;
  margin-right: auto;
  left margin: auto;
  background-color: #f4f4f4;
  }

  {#Navigation}
  background-image: url(Images/NAvigation%20BAr.jpg);
  background-repeat: no-repeat;
  Width: 880px;
  visibility: visible;
  height: 3 - px;
  vertical-align: top;
  }
  {Of NAV
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  Clear: both;
  height: 20px! important;
  }

  
  {#wrapper1}
  Width: 876px;
  margin-right: auto;
  left margin: auto;
  color: #F4F4F4;
  / * IE10 consumer Preview * /.
  background-image: ms-linear-gradient(left, #716375 0%, #E8E8E8 100%).
  / * Mozilla Firefox * /.
  background-image:-moz-linear-gradient(left, #716375 0%, #E8E8E8 100%).
  / * Opera * /.
  background-image:-o-linear-gradient(left, #716375 0%, #E8E8E8 100%).
  / * Webkit (Safari/Chrome 10) * /.
  background-image:-webkit-gradient (linear, left top, upper-right, color-stop(0, #716375), color-stop(1, #E8E8E8));
  / * Webkit (Chrome, 11 +) * /.
  background-image:-webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%).
  / * W3C Markup, IE10 Release Preview * /.
  background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%).
  low-margin: auto;
  }
  {#Bar}
  background-repeat: no-repeat;
  Width: 880px;
  height: 28pt;
  overflow: visible;
  background-image: url(Images/NAvigation%20BAr.jpg);
  position: relative;
  vertical-align: top;
  }

  #container {}
  Width: 880px;
  Color: #000;
  background-color: #EDEDED;
  dominant baseline: 578px;
  / * IE10 consumer Preview * /.
  background-image: ms-linear-gradient(left, #716375 0%, #E8E8E8 100%).
  / * Mozilla Firefox * /.
  background-image:-moz-linear-gradient(left, #716375 0%, #E8E8E8 100%).
  / * Opera * /.
  background-image:-o-linear-gradient(left, #716375 0%, #E8E8E8 100%).
  / * Webkit (Safari/Chrome 10) * /.
  background-image:-webkit-gradient (linear, left top, upper-right, color-stop(0, #716375), color-stop(1, #E8E8E8));
  / * Webkit (Chrome, 11 +) * /.
  background-image:-webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%).
  / * W3C Markup, IE10 Release Preview * /.
  background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%).
  low-margin: auto;
  }

  #content {}
  float: left;
  color: #090;
  Width: 580px;
  padding-right: 6px;
  background-color: #033;
  top of the margin: 20px;
  }
  . Container {}
  Color: #000;
  background-color: #ff6;
  Width: 876px;
  }

  {#expect}
  height: 164px;
  Width: 294px;
  float: right;
  position: relative;
  background-color: #C90;
  margin left: 582px;
  padding-top: 10px;
  }
  {#hours}
  float: left;
  height: 55px;
  Width: 294px;
  line-height: 4px;
  Word-spacing: normal;
  white-space: normal;
  display: inline;
  letter-spacing: normal;
  padding-top: 10px;
  font size: 13pt;
  Color: #000;
  margin left: 586px;
  background-color: #F99;
  }
  #footer {}
  height: 76px;
  Width: 880px;
  background-color: #CC0;
  Clear: both;
  }

  
  {#cards}
  float: right;
  height: 31px;
  Width: 294px;
  margin left: 582px;
  padding-top: 10px;
  background-color: #F36;
  }

  {#contact}
  float: left;
  height: 328px;
  Width: 293px;
  Word-spacing: normal;
  white-space: normal;
  line-height: 1px;
  Color: #000;
  display: inline;
  do-size: 14pt;
  background-color: #FFF;
  padding-top: 10px;
  top of the margin: 20px;
  }
  #header {}
  background-image: url(Images/Proquip%20Logo/Proquip%20logo2.jpg);
  background-repeat: no-repeat;
  background-position: Center;
  Width: 885px;
  height: 126px;
  background-color: #000;
  right margin: 2.5px.
  left margin: 0px;
  }

  #wrapper #container #contact {strong p
  color: #800000;
  do-size: 14pt;
  }

  #wrapper #container #contact blockquote p {}
  Color: #000;
  }
  #wrapper #container #expect div {}
  color: #900;
  do-size: 14pt;
  make-weight: bold;
  }
  #wrapper #container #hours div {}
  color: #900;
  do-size: 14pt;
  make-weight: bold;
  }
  {#box2}
  background-image: url(Images/Option%201/Services/whitebox2.jpg);
  }
  {#box3}
  background-image:URL(images/option%201/services/redbox2.jpg);
  background-repeat: repeat no.;
  background-position: Center;
  }
  {#gold}
  background-image:URL(images/option%201/logos/gold.gif);
  background-repeat: repeat no.;
  }
  {#white}
  background-image:URL(images/option%201/Proquip-pics/Box1.gif);
  background-repeat: repeat no.;
  }
  {#forklift}
  background-image:URL(images/option%201/Proquip-pics/34-01-4380.jpg);
  background-repeat: repeat no.;
  }
  {#scissorlift}
  background-image:URL(images/option%201/Proquip-pics/JLG-scissor-lifts-21.jpg);
  background-repeat: repeat no.;
  }

  / * Navigation Menu - level a * /.
  UL {}
  list-style: none
  }
  {UL. DropDown}
  font size: 13pt;
  Color: #000000;
  height: 25px;
  text-decoration: none! important;
  Width: 860px;
  position: relative;
  vertical-align: top;
  }
  {UL #bar. DropDown}
  Width: 878px;
  position: relative;
  vertical-align: top;
  }

  UL. DropDown li {}
  Police-weight: 600;
  float: left;
  Zoom: 1;
  do-family: Arial, Helvetica, without serif.
  font size: 13pt;
  display: block;
  Width: 175px;
  Color: #000000;
  top: 25px;
  text-decoration: none! important;
  text-align: center;
  }
  UL. DropDown a: hover {}
  color: #cc0000;
  }
  UL. DropDown a: active {}
  Color: #000000;
  }
  UL. DropDown li a {}
  display: block;
  border-right: 1px solid #333;
  Color: #000000;
  border-right-width: 1px;
  text-decoration: none! important;
  text-align: center;
  }
  UL. DropDown li: last - child a {}
  border-right: none; / * does not wotk in IE * /.
  text-decoration: none! important; }
  UL. DropDown li.hover,
  UL. DropDown li.hover {}
  Color: #000000;
  position: relative;
  height: 28px;
  Top: 0px;
  }
  UL. DropDown li.hover a {}
  color: #800000;
  }

  / * Level two Navigation * /.
  UL. DropDown ul {}
  Width: 180px;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 36%;
  display: block;
  float: left;
  Color: #000000;
  text-decoration: none! important;
  height: 25px;
  }
  UL. DropDown ul li {}
  make-weight: normal;
  Color: #000000;
  border-bottom: 1px solid #ccc;
  float: left;
  border-bottom-color: #c0c0c0;
  border-bottom-style: groove;
  display: block;
  background-color: #dbdbdb;
  text-decoration: none! important;
  }
  / * IE 6 & 7 needs to block inline * /.
  UL. DropDown ul li a {}
  border-right: none;
  display: inline-block;
  height: 18px;
  line-height: 16px;
  Color: #000000;
  Width: 100%;
  text-decoration: none! important;
  }
  / * Level three Navigation * /.
  UL. DropDown ul ul {}
  top: 100%;
  Color: #000000;
  text-decoration: none! important;
  }
  UL. DropDown li: hover > ul {}
  visibility: visible;
  Color: #000000;
  top: 30px;
  text-decoration: none! important;
  }

  Ah, I see now, you've introduced an error in your css. You currently have...

  UL. DropDown li {}

  Police-weight: 600;

  float: left;

  do-family: Arial, Helvetica, without serif.

  font size: 13pt;

  display: block;

  Width: 175px;

  Color: #000000;

  top: 25px;

  text-decoration: none! important;

  text-align: center;

  {margin: 0; padding: 0}

  }

  Delete these extra {}...

  UL. DropDown li {}

  Police-weight: 600;

  float: left;

  do-family: Arial, Helvetica, without serif.

  font size: 13pt;

  display: block;

  Width: 175px;

  Color: #000000;

  top: 25px;

  text-decoration: none! important;

  text-align: center;

  margin: 0;

  }

• Problem with css background

  Hey guys, I have a problem with a code. I have some divs nested inside a container for body copy dive, but I have a problem with the background of the div container behind the nested divs. I have this problem with the background, when am I going to float the nested divs.

  Here's a copy of my html code as well as a copy of my related css stylesheet.

  <!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>Welcome to Optimus Lens</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
  function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  }
  function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
      var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
      if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  }
  
  function MM_findObj(n, d) { //v4.01
    var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
      d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
  }
  
  function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
     if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  }
  </script>
  <style type="text/css">
  #sector {
       background-repeat: no-repeat;
       background-position: left;
       width: 869px;
       margin-top: -51px;
       margin-right: auto;
       margin-bottom: 0;
       margin-left: auto;
  }
  #oag {
       width: 574px;
       margin-left: 23px;
       float: left;
       /* [disabled]position: relative; */
  }
  #small_col {
       width: 279px;
       margin-right: 23px;
       float: right;
       /* [disabled]position: static; */
  }
  </style>
  </head>
  
  <body onload="MM_preloadImages('images/home_over.jpg','images/our_mission_over.jpg','images/products_over.jpg','images/news_over.jpg','images/order_over.jpg','images/contact_over.jpg')">
  <div id="CONTAINER">
         <div id="header"><img src="images/header_top.png" width="916" height="39" />
         <img src="images/header_logo.jpg" width="916" height="95" />
        <img src="images/header_image.jpg" width="916" height="266" />
         <img src="images/header_bar.jpg" width="916" height="9" />
  </div>
    
        <div id="menuContainer">
      
       <!-- NAVIGATION -->
           
                  <ul> 
                  <li>
                  <img src="images/fold_left_top.png" width="22" height="35" /><img src="images/menu_left.jpg" width="197" height="35" />
                  </li>
                  <li>
                      <div class="menu n1"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.jpg',1)"><img src="images/home_up.jpg" alt="home" name="home" width="66" height="35" border="0" id="home" /></a></div></li> 
                  <li>
                    <div class="menu n2"><a href="mission.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our Mission','','images/our_mission_over.jpg',1)"><img src="images/our_mission_up.jpg" alt="Our Mission" name="Our Mission" width="124" height="35" border="0" id="Our Mission" /></a></div></li> 
                  <li>
                      <div class="menu n3"><a href="products.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/products_over.jpg',1)"><img src="images/products_up.jpg" alt="products" name="Products" width="98" height="35" border="0" id="Products" /></a></div></li> 
                  <li>
                      <div class="menu n4"><a href="news.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/news_over.jpg',1)"><img src="images/news_up.jpg" alt="News" name="News" width="77" height="35" border="0" id="News" /></a></div></li> 
                  <li>
                      <div class="menu n5"><a href="order.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Order','','images/order_over.jpg',1)"><img src="images/order_up.jpg" alt="Order" name="Order" width="77" height="35" border="0" id="Order" /></a></div></li>
                  <li>
                    <div class="menu n6"><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact_over.jpg',1)"><img src="images/contact_up.jpg" alt="Contact" name="Contact" width="80" height="35" border="0" id="Contact" /></a></div></li>
                  <li>
                    <img src="images/menu_right.jpg" width="197" height="35" /><img src="images/fold_right_top.png" width="22" height="35" /> </li>
                  </ul>
      
        </div>
         <div id="header_bottom"><img src="images/fold_left_bottom.png" width="22" height="38" /><img src="images/header_bottom.jpg" width="916" height="38" /><img src="images/fold_right_bottom.png" width="22" height="38" />
      </div>
  
       <div id="bodycopy">
         <div id="sector">
        <img src="images/home/sector_top.png" width="869" height="341" alt="sector frames" />
        </div>
        
         <p> </p>
        
         <div id="oag">
        <img src="images/home/oag_join.png" width="574" height="281" alt="save with oag" />
        <p> </p>
        <img src="images/home/bottom.png" width="574" height="132" />
        </div>
        
        <div id="small_col">
        <img src="images/home/optimize_small.png" width="279" height="132" />
        <p> </p>
        <img src="images/home/intuition_small.png" width="279" height="132" />
        <p> </p>
        <img src="images/home/intuition_small.png" width="279" height="132" />
        </div>
       </div>
  
      <div id="footer"><img src="images/footer.png" width="916" height="52" />
    </div>
  </div>
  </body>
  </html>
  body {
       margin: 0px;
       background-image: url(images/background_fade_04.jpg);
       background-repeat: repeat-x;
       background-position: top;
       background-color: #DCDCDC;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 13px;
  }
  #box1 {
       background-image: url(images/bodycopybox_01.png);
       background-repeat: no-repeat;
       background-position: left;
       height: 54px;
       width: 869px;
       margin-top: 0;
       margin-right: auto;
       margin-bottom: 0;
       margin-left: auto;
  }
  
  #box2 {
       background-image: url(images/bodycopybox_02.png);
       background-repeat: repeat-y;
       background-position: left;
       width: 869px;
       margin-top: 0;
       margin-right: auto;
       margin-bottom: 0;
       margin-left: auto;
  }
  .bodycopybox {
       padding-right: 40px;
       padding-left: 40px;
  }
  .bodycopyboxheader {
       padding-right: 40px;
       padding-left: 40px;
       font-weight: bolder;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 14px;
       color: #21368b;
  }
  
  
  
  #box3 {
       background-image: url(images/bodycopybox_04.png);
       background-repeat: no-repeat;
       background-position: left;
       height: 31px;
       width: 869px;
       margin:0 auto;
  }
  
  #box4 {
       background-image: url(images/bodycopybox_03.png);
       background-repeat: no-repeat;
       background-position: left;
       height: 31px;
       width: 869px;
       margin:0 auto;
  }
  
  p {
       margin: 0px;
  }
  
  #header_bottom {
       width: 960px;
       margin:0 auto;
  }
  
  #CONTAINER {
       width: 100%;
       margin:0 auto;
  }
  #header {
       width: 916px;
       margin:0 auto;
  }
  #menuContainer {
       width: 960px;
       margin:0 auto;
       height: 35px;
  }
  #menuContainer ul{
       list-style:none;
       height:35px;
       margin:0;
       padding:0;
  }
  #menuContainer li{
       float:left;
       height:35px;
       margin:0;
       padding:0;
  }
  #menuContainer li a{
       text-align:center;
       float:none;
       height:35px;
       margin:0;
       padding:0;
  }
  div.menu{position:relative;}
  .n1{
       width:66px;
       float:left;
       display:inline-block;
       clear:both;
  }
  .n2{
       width:124px;
       float:left;
       display:inline-block;
       clear:both;
  }
  .n3{
       width:98px;
       float:left;
       display:inline-block;
       clear:both;
  }
  .n4{
       width:77px;
       float:left;
       display:inline-block;
       clear:both;
  }
  .n5{
       width:77px;
       float:left;
       display:inline-block;
       clear:both;
  }
  .n6 {
       width:80px;
       float:left;
       display:inline-block;
       clear:both;
  }
  #bodycopy {
       background-color: #FFFFFF;
       width: 916px;
       padding: 0px;
       margin-top: 0;
       margin-right: auto;
       margin-bottom: 0;
       margin-left: auto;
  }
  #footer {
       width: 916px;
       margin:0 auto;
       padding: 0px;
  }
  			 
  Hey guys, I have a problem with a code. I have some divs nested inside a dive of container for the body copy, but I have a problem with the background of the div container behind the nested divs. I have this problem with the background, when am I going to float the nested divs.
  I come to this quote.  The background of this div container is set to white (#FFF).  The other 3 that are nested inside have no defined background.  There are images placed inside them, but nothing of what happened to the bottom, so if it is empty it should inherit the parent container which is white.
  Can you show us a screenshot or view the page online for testing?
  		   

• I have a problem with CSS vertical align. Help!

  This could be an easy fix, I don't know... but I've been customized style BC Photo Gallery and lightbox on this site that I'm doing for a photographer and I got a problem with the vertical alignment.

  I created my own .css document to replace styles Viewer by default in British Colombia, and now all I'm left with tries to Center vertically the lightbox image. I googled some methods and tried, but had no luck...

  http://michaellaphotography.BusinessCatalyst.com/Gallery-pages/weddings

  Check out the link, and when you click on any thumbnail, you'll see what I mean.

  I know I can't use filling methods, because I work with pictures in portrait and landscape.

  Thanks for your help!

  The light therapy device you use made for the creation of a larger full size of the image.  As a general rule, if you have a portrait image that is larger that the screen of the user enough scroll a little more.

  If you temporarily remove the CSS for "img #lightbox" on line 20 of myStyles.css you'll see how lightbox works in native mode. This should be good since the user wants to zoom and see a bigger picture when they click on it and it will be as big as possible on their screen.

  Once you see what I mean with the changes, I can tell you how to make sure the portrait images do not expand to full height and beyond the viewport. Rather than delete the CSS "img #lightbox" statement like I said before, this time change for:

  #lightbox img {}

  Width: auto;

  height: 100%;

  }

  This will ensure the images in the light therapy device take 100% of the height of the lightbox container and the width dimensionnera automatically to keep the proportion of the image. Landscape photos will be large and landscape photos will not be larger than the viewport.

• Problem with CSS

  Hi all

  I have a problem with an ogo on the next page.

  http://empdigital.NET/dmi_css_may2011/index_test_v3_contact.html

  The other pages are fine, but I'm sure the CSS and a conflicted musy table cell will have something to do with it. My self-taught knowledge of CSS is more, but I can't find has this problem is.

  I appreiate any help.

  Concerning

  If you want the color of the logo on the left, change this in your table tag:

  to do this:

  FYI: Provisions of base tables are very old school.  The modern approach is to use CSS for layout and tables for tabular data, such as graphics or spreadsheets.

  Tables to CSS Web Design part 1-
  http://www.Adobe.com/devnet/Dreamweaver/articles/table_to_css_pt1.html

  Tables to CSS Web Design part 2-
  http://www.Adobe.com/devnet/Dreamweaver/articles/table_to_css_pt2.html

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB

• Perhaps another problem with Css

  I think this is another problem with my CSS is applied because of a problem but I have really no idea.

  The site is Alliance of injuries. The problem is with the images in the middle of the page. They are supposed to be in three rows of 3-3-2, but for some reason some they just below the other. When I click on Home.css in the "View Source", it is titled 'Page not found' don't know why.

  Anyone who has any ideas I would appreciate it.

  Brad

  First thing - you must stop using filenames with spaces in them.  That can get you into trouble.  Use only letters, numbers, dash or underscore - nothing else.

  Next thing, the image and CSS links in this page (located at the root of the site) are all (except two) wrong links related document, for example,.

  If the page is already at the root of the site, there is no ".." as possible.  It is sure to cause you problems.  All these links need to be just like this one (which is correct)-
  (although the Home.CSS file does not appear on the server!)
  The reason why your images are displayed in a vertical table is that each of them is contained in a

  container with no specified width (was this width specified in the Home.css file does not exist?).  So that they appear along a horizontal line, you need to specify the width of the div and float tag he left.

• Problem with CSS/Template in IE display

  Hello
  
  I have a problem with a new website http://www.halloween-mayhem.com. The CSS is http://www.halloween-mayhem.com/MasterCSS3Col240606.css and the model to http://www.halloween-mayhem.com/Templates/MasterHM3Col250606.dwt
  
  Seen in Firefox, everything is going well, but in IE the right sliding content to the bottom of the page beyond the menu. No idea what I missed or done wrong please?
  
  Any help much appreciated.
  
  Roy

  Thanks Murray, that was the problem. I can't count!

  Roy

• problem with CSS copy paste in Dreamweaver CS4

  Having a problem in CS4 when I want to copy and paste things in my style sheet.
  Whenever I do ctrl + c to select something of any stylesheet gets selected. And this isn't what I want.
  Even is I want to copy something from another css in the css I work now it won't work.
  
  Anyone having the same problem and found a solution?

  Forgive me, I'm new to DW CS4, but I may have a solution.  I met the problem of css copy as well, but I have disabled (unchecked) "associated files to enable" (Edit-> preferences-> General-> Options of Document-> activate the associated files).  I had to restart Dreamweaver, but this seems to have fixed the bug.

  I've never used the function 'Enable related files', this isn't a big problem for me - much less of a big deal than not being able to copy and paste.  At least, it seems to be a stable work around the problem of "css copy paste.

  I hope that helps!  Let me know if that solves the problem for someone else.

  -Trevor

  Vista Home Premium 64

  DW CS4 Version 10.0 Build 4117

• Problem with CSS and HTML

  I don't understand what the problem is, but I do not see the styles when I saw my html in chrome.

  Here's my CSS

  @charset "UTF-8";

  / * CSS document * /.

  HTML {}

  min-width: 768px.

  }

  {body

  do-size: 100%;

  do-family: Arial, Helvetica, without serif.

  line-height: 1.5 rem;

  }

  . Wrapper {}

  IMG {}

  Width: 100%; / * All the images will be 100% the size of their parent * /.

  }

  . Baseline {}

  background-image: url (.. / images/baseline.svg);

  }

  {fort

  make-weight: bold;

  }

  EM {}

  make-style: italic;

  }

  /* ----------------------------------------------------------------------------------------- ------------- Masthead */

  {.masthead}

  height: 6 rem;

  background-color: rgba (51,153,255,1);

  margin-bottom: 1, 5 rem;

  }

  H1 {}

  font size: 1.5 rem;

  color: #9F6;

  position: absolute;

  margin: 2.25 rem 0 0 4%;

  }

  /*---------------------------------------------------------------------------------------- --------------------article --*/

  Article {}

  padding: 0 4% 1.5 rem;

  }

  . Headline {}

  height: 4.5 rem;

  margin-bottom: 1.5 rem;

  background color: rgba (0,0,0,.15)

  }

  H2 {}

  do-family: Georgia, "Times New Roman", Times, serif;

  font size: 2.25 rem;

  position: absolute;

  margin: 1.5 rem 2% 0;

  }

  . PlaceHolder {}

  Width: 20%;

  flow: left;

  margin: 0 2.5% 1.5 rem 0;

  }

  {p}

  margin-bottom: 1.5 rem;

  }

  {.footnote}

  height: 4.5 rem;

  background-color: rgba (0,0,0,.15)

  }

  .footnote {} p

  font size: .875rem;

  position: absolute;

  margin: 1.5 rem 2% 0;

  }

  /*---------------------------------------------------------------------------------------- -------------------- Bottom --*/

  . {Background

  height: 15 rem;

  background-color: rgba (51,153,255,1);

  }

  Bottom p {}

  font sizes: .875rem;

  color; #FFF;

  position: absolute;

  margin: 1.5 rem 4%

  Here is my HTML

  <! doctype html >

  < html >

  < head >

  < meta charset = "UTF-8" >

  < title > box model tutorial < /title >

  < link href = "box-model/reset.css" rel = "stylesheet" >

  < link href = "box-model/general.css" rel = "stylesheet" >

  < / head >

  < body class = "basic" >

  <!-------------------------------------------------------------------------- Masthead -->

  < class header = 'base of mast-head' > <!--a group of introduction or navigation aids-->

  < h1 > Victoria < / h1 >

  <!-------------------------------------------------------------------------- Masthead -->

  < div class = 'wrapper' >

  < section >

  < class header = "headline" >

  < h2 > British Colombia tourism < / h2 >

  < / header >

  < img src = "Box-model/images/images/British_Columbia_Legislative_Building, foster, _BC_Wallpape r_2c8nm - 1.jpg" alt = "Box-model/images/images/British_Columbia_Legislative_Building, foster, _BC_Wallpape r_2c8nm - 1.jpg" >

  <!-Don't Forget the alt->

  < p > the capital city of British Colombia, Victoria has of many historic buildings and some of the most fascinating museums in Western Canada. The city enjoys one of the mildest climates in the Canada, that allows its residents to pursue pleasures in the open air throughout the year.

  Victoria enjoys a most exhilarating landscape of the country: there is a vista sea or mountain, every corner, while the gardens bloom in the city are famous all over the world. If your taste is going to Golf, hiking, mountain BIKING and fishing or you are more of the kind of shops, restaurants and theater, there is no end of delight for you and your family in Victoria - the city has been listed in the Top 10 family vacation to Canada in the TripAdvisor 2011 Travelers' Choice awards.

  Founded in 1843 by James Douglas as a fort for the Hudson Bay, British ancestry company Victoria is apparent in the bus at Imperial, carriages, gardens to the French and tearooms. The city is today a cosmopolitan Center with a scene of entertainment and a wonderful choice of attractions. < /p >

  < footer class = "footnote" >

  Footer (related Articles, notes, the authors Bio, etc.) Article < p > < /p >

  < / footer >

  < / item >

  < / div > <!-close Wrapper->

  <!---------------------------------------------------------------------------------------- -------------Bottom -->

  < footer class = "bottom" >

  < p > main footer (Copyright, related links, legal, privacy, logo, etc.). < /p >

  < / footer >

  < / body >

  < / html >

  Lines 6 & 7 of your HTML file (exercise - boxmodel.html), change this:

  box-model/reset.css"rel ="stylesheet">".

  box-model/general.css"rel ="stylesheet">".

  to do this:

  Reset.CSS"rel ="stylesheet">".

  General.CSS"rel ="stylesheet">".

  Your CSS files are in the same folder as your HTML file. But your original link shows that they are in a subfolder called "box-model". This link returns a 404 not found error. Therefore, the browser could not load your CSS files.

  Replace the code and you should be able to see it.

• Problems with CSS

  Hello!

  I'm working on a Web site, add a few pages.

  I create them in the room even if I use the CSS files from the server with all of the path:

  " < link rel ="stylesheet"href =" http://www.domain.com/CSS/myCSS.CSS ">

  I checked for cut and paste the url to see if it has access to the folder. And he does.

  Any thoughts on what I am doing wrong?

  Thank you very much

  Jaume

  So what's the problem?  Other than a "type =" text/css"absent of the declaration to indicate to the browser that load you, lack nothing. Styles do not display upward in Live View mode? DW gives you an error?

• Problem with CSS Validation in my Horizontal Spry Menu.

  157	UL. MenuBarHorizontal iframe	try to find a point comma before the name of the property. Add
  0	UL. MenuBarHorizontal iframe	Parse Error                                              null
  157	UL. MenuBarHorizontal iframe	Opacity of the property does not exist in CSS level 2.1 but exists in [css3]: 0.1
  157	UL. MenuBarHorizontal iframe	Parse Error                                              0.1);
  158	UL. MenuBarHorizontal iframe	Parse Error                                              }

  It is the result of the W3C Validator which points to this rule in the spry menu bar CSS.

  / * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
  UL. MenuBarHorizontal iframe
  {
  position: absolute;
  z index: 1010;
  Filter:alpha(opacity:0.1);
  }

  ITLS the only thing that prevents the validation page.

  Can it be fixed?

  Thank you

  Martin

  Test laboratory of browser: https://browserlab.adobe.com/index.html#

  You can configure to use a large number of browsers. This "don't" interactivity, but apparently there are ways to it... cursor image on your menu drop-down and send this picture... There will be instructions on the site.

  Beth

• I have problems with CSS.  Poster right in DW, but not in the web browser

  Hello

  I have the difficultiy doing my Web page to look the way it does in Dreamweaver in a browser (all 5 of them).  My problems are with:

  -Title heading content

  -Sidebar

  I have two lines in my title with the name of the organization.  I made two rules.  Header H1 and a void header.  For some reason any all previewing the in a browser, there is a gap between the two words.  But in DW it does not exist.  I don't want gaps.  How can I solve this problem?

  In a browser, the sidebar comes all the way down.  There is a small gap between him and the footer.  Like the other problem, that does not appear in DW only in browsers.

  Any help would be appreciated!  I'm still learning CSS.

  According to me, these are the only two files you'll need to watch.

  Thanks for the help!

  In fact, a URL to your site online on remote server would be much more useful.  You don't have a space of remote server to test your site before it goes live if you do not, you should.  Many Internet service providers offer a free server space web (yahoo, verizon, earthlink, at & t,...).

  Use these online code validation tools and fix the errors reported.

  HTML Validator - http://validator.w3.org

  CSS Validator - http://jigsaw.w3.org/css-validator/

  Download the Web Developer Toolbar add-on for Firefox.  It's free and a must for web site designers.

  https://addons.Mozilla.org/en-us/Firefox/addon/60

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  www.Alt-Web.com/
  www.Twitter.com/ALTWEB

• image positioning, table with css?

  Hi Please check the following link to see my problem http://www.stefanlesik.com/csg/traditional-designs.htm. I'm positioning a list of photos with details of the dimensions and number under each reference. I've set up a table with 2 columns, but I can't place correctly the images inside the cells. I also tried to add that image to each with padding etc, but this style does not work. I'm sure there is a simple solution. Any other comments on the design of the site would be also welcome. Thanks in advance

  You must add valign = "top" to your cells in the table.

  Also your first image is encapsulated in a

  tag. The second is not. That's why you'll see an extra space at the top of the first. You can also delete all of the '0' = height you have in your code.

  J

• How can I make easy links? Problems with CSS

  Sorry, me again. I found how to facilitate the transition of the color of my text navigation links, and it seems easy enough. However, when I add to my code, it seems to work.

  I know that it will be a mistake on my part, I just don't know what I did wrong. Any ideas?

  <! - section nav HTML - >

  < nav id = "nav" role = "navigation" >

  < ul >

  < li > < a href = "Home.html" title = 'Go Home' rel 'next' = > FRONT PAGE < /a > < /li > "

  < li > < a href = "About.html" title = "On BGDR" rel = "next" > ON < /a > < /li > "

  < li > < a href = "CV.html' title ="CV"rel = 'next' > CV < /a > < /li >"

  < li > < a href = "Blog.html" title = "A blog of my work and thoughts" > BLOG < /a > < /li > "

  < li > < a href = "Contact.html" title = "contact me" rel = 'next' > CONTACT < /a > < /li > "

  < /ul >

  < / nav >

  <! - section nav CSS - >

  a: link		{
  			color: hsla(0,0%,0%,1.00);
  			-webkit-transition: color background-2s ease-out;
  			-moz-transition: color background-2s ease-out;
  			-o - transition: color background-2s ease-out;
  			transition: background-2s ease-out color;
  			text-decoration: none;
  			}

  a: visited	{
  			color: hsla(0,0%,0%,1.00);
  			}

  a: hover	{
  			color: hsla(0,0%,72%,1.00);
  			text-decoration: none;
  			Police-family: quicksand;
  			make-style: normal;
  			Police-weight: 400;
  			cursor: pointer;
  			}

  / * Note that 4 the code snippets down I have a li {} expressions.* section 3.

  Li			{
  			float: right;
  			display: block;
  			Width: 10em;
  			}

  Here is what you wrote in the original post

  a: link {}

  color: hsla(0,0%,0%,1.00);

  -webkit-transition: background color 2s ease-out;

  -moz-transition: background color 2s ease-out;

  -o - transition: background color 2s ease-out;

  transition: background color 2 s ease-out;

  text-decoration: none;

  }

  With this, you target the background color should be the foreground color. The above should be

  a: link {}

  color: hsla(0,0%,0%,1.00);

  -webkit-transition: ease of color 2 s - out;

  -moz-transition: ease of color 2 s - out;

  -o - transition: ease ofcolor 2 s - out;

  transition: ease of color 2 s - out;

  text-decoration: none;

  }

• Problems with css-designer panel

  Cannot display properties selectors/CSS - just gives me a grey area empty. When I click in the grey, dreamweaver crashes.

  Does anyone have similar problems and can help?
  Thanks in advance!

  (OS X 10) 7 5. (/ macPro)

  I found a solution that worked for me.

  I removed all the fonts Adobe CC installed out of my library folder: fonts and just left in the base fonts Apple as Arial, Courier etc... Launched Dreamweaver CC and the designer CSS panel work. I don't know exactly what font it is, or creates the conflict. All I know is it works fine now.