Image not centered in Mobile view?

I am working in DW CS6. Originally I set the images in mobile view to text-align: center and they did show up centered. The CSS styles panel still shows they are centered but they show up to the left side in DW CS6. However when I click on F12 to see the site in the Firefox browser they show up perfectly centered. What have I done that causes the images in mobile view to show to the left side. Also when I am in DW CS6 the green overlay occasionally does not work even if I check or uncheck the "Hide all visual aids" and "fluid grid layout guides" items. Some times it does and sometimes it doesn't. What am I doing wrong? Thanks in advance.

Open your Template.dwt in code view. Remove this link.
<link href="index-heritageTemplate.dwt.css" rel="stylesheet" type="text/css">
Save.
Create a new CSS file. File > New > Blank page > CSS. Hit Create button.
It should look like this in code view.
@charset "utf-8";
/* CSS Document */
Now add your site wide content styles.
body,td,th {
color: #FFFFCC;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 36px;
body {
background-image: url(../Images/background-maroon-15.jpg);
font-size: 12px;
a:link {
color: #FCDD61;
text-decoration: none;
a:visited {
text-decoration: none;
color: #FCDD61;
a:hover {
text-decoration: none;
color: #00CCFF;
a:active {
text-decoration: none;
SaveAs myStyles.css to your CSS folder.
Go back to your Template.dwt file. Add a link to your new style sheet.
<link href="../CSS/myStyles.css/oldeworldelace.com/Test/Templates/index-heritageTemplate.dwt.css" rel="stylesheet" type="text/css">
Remove the embedded <styles> from your template.
Save your template.
Make sense?
Nancy O.

Similar Messages

All of the sudden 90% of the things on my dvr say not available for mobile viewing

For about the last week, almost everything I record on my dvr says not available for mobile viewing on my iPad. It was fine until the middle of last week.

I really cannot offer any suggestion to you, but just to say I know what you are talking about. I haven't hit the 90% mark yet (knock on wood), but I have had and continue to get random shows that record to the DVR but don't show up on the mobile apps due the the "not available for mobile viewing" error. I have posted in the past about this, as well as spoken to Comcast reps about this issue, yet no resolution is ever offered. Sometimes it goes away on its own, but can return weeks later. Very frustrating. A question for you though. Are you setting your recording schedule through the mobile app, website, or the DVR guide itself? I've noticed sometimes when I use the website to set my recording schedule, some of the shows just randomly don't record to the cloud dvr. If I use the DVR guide itself, then I haven't noticed the issue. Could be a coincidence or not. I hate using the DVR guide to set a recording schedule though. Much rather prefer to use the website to set up a schedule. I also notice I get the "Not available for mobile viewing" error on one time recordings. I have yet to see a series recording give me that error.

Poster image not centering in browser

My poster image (for viewing in IE8) is not centering in the browser window. It's displaying as left aligned with a big gap to the right of the image. How do I fix?

Thank you Hemanth, that is exactly what I am referring to. One final question though, as I am by no means an HTML guru...do I add the snippet while I'm in Edge or do I open the HTML file in Dreamweaver and add the code there?
If in Edge, where do I access the code to add it (and where does it go)?
If in Dreamweaver...here is the code for my file, where would I place the snippet?
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>Untitled</title>

    <script type="text/javascript" charset="utf-8" src="FEA2014_Invite_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-450331542 { visibility:hidden; }
    body {
          background-color: #000000;
    </style>

</head>
<body style="margin:0;padding:0;">
          <div id="Stage" class="EDGE-450331542">
          </div>
</body>
</html>
I GREATLY appreciate this advice!
Many thanks,
James

Images not shown in Diagram view SCOM 2012 R2

Dear SCOM Experts,
I have been creating mpbundle using C# . I was able to add resources to the images. I was able to import the .mpb file. I was able to discover and monitor the components, but I could not see the images for components in diagram view. I have followed the
procedure in msdn website
http://msdn.microsoft.com/en-us/library/gg986188.aspx
EnterpriseManagementGroup mg = new EnterpriseManagementGroup("localhost");
ManagementPack mp = new ManagementPack("Folder\\RePackaging.Library.xml");
System.IO.FileStream fileStream1 = new System.IO.FileStream("Folder\\Resources\\package_16.png", System.IO.FileMode.Open);
System.IO.FileStream fileStream2 = new System.IO.FileStream("Folder\\Resources\\package_32.png", System.IO.FileMode.Open);
System.IO.FileStream fileStream3 = new System.IO.FileStream("Folder\\Resources\\package_64.png", System.IO.FileMode.Open);
ResourceStream resStream1 = new ResourceStream(mg, fileStream1);
ResourceStream resStream2 = new ResourceStream(mg, fileStream2);
ResourceStream resStream3 = new ResourceStream(mg, fileStream3);
ManagementPackBundleWriter bundleWriter = ManagementPackBundleFactory.CreateBundleWriter(".\\");
ManagementPackBundle bundle = ManagementPackBundleFactory.CreateBundle();
bundle.ManagementPacks.Add(mp);
bundle.AddResourceStream(mp, "RePackaging.Library.Resources.Images.Package_16", resStream1, ManagementPackBundleStreamSignature.Empty);
bundle.AddResourceStream(mp, "RePackaging.Library.Resources.Images.Package_32", resStream2, ManagementPackBundleStreamSignature.Empty);
bundle.AddResourceStream(mp, "RePackaging.Library.Resources.Images.Package_64", resStream3, ManagementPackBundleStreamSignature.Empty);
bundleWriter.Write(bundle, "RePackaging.Library");I had even used MPViewer to check if the images are in .mpb and I could see the images in Resources sectionin MPViewer software. I dont understand why i could not see images in diagram view.Please help!!!!!!

Hi,
A management pack bundle gives you the ability to not only add the XML but you could also add images or assembly in a much more efficient way then before without the bundle. When importing a MPB the xml will be imported as well as the assembly and images
within it.
Please refer below link for bundle and to unbundle MPB file
http://www.systemcentercentral.com/management-pack-bundles-to-bundle-and-to-unbundlendashcreate-a-mpb-and-extract-contents-from-a-mpb/
We
are trying to better understand customer views on social support experience, so your participation in this
interview project would be greatly appreciated if you have time.
Thanks for helping make community forums a great place.

Images not centered properly

I'm having a bit of an issue with the centering of a picture in imovie, i drag and drop the image into i movie, (on the timelin and clips) but for some strange reason the picture is or becomes off centered, in fact any pictures i drag n drop become off centered, if i open these pics outside of imovie the pics view centered (normal). Is there some kind of setting i switched? things were working normally today, (pics were centered). I installed Apple X11 today to use Gimp (image editor) after this install the pics became off centered,i wouldnt think this installation would have an effect in imovie.. could it ?? weird...
Message was edited by: Plntrmist

thank you sooooo much!!
it was actually off, then i turned it on and it must have reset itself! now i know!
all images are centered!!!!
thanks again!!!!!

Interactive Image Not Centered

When I add a new interactive image to a page, then drag-and-drop and image into that widget, the image is not centered within the frame. Rather it is skewed toward left-of-center by about 10%. Changing the image scaling doesn't fix it. Changing the outer dimensions of the widget doesn't fix it. Nothing I've tried will make an image appear centered within the interactive image widget. Any ideas?
Note that I've tried this only with landscape oriented images on a landscape oriented page -- so I don't know if the issue exists for portrait mode images.

Hi Schwerd:
Yeah. I just tried it with a portrait oriented image, and it shifts up in the frame. So what I'm seeing is that, if the image is wider than it is tall, it shifts left of center. And if it's taller than it is wide, it shifts up.

Certain images not appearing in Live View?

Hello,
I recently upgraded my Dreamweaver CS5 and have noticed that certain images are no longer appearing in Live View. When Live View is unclicked, both of the images appear in both Design View and Preview in Browser; however, when Live View is clicked, the question mark appears for new images that were not used in Dreamweaver previous to the update. Does anyone know a fix to this? I have already tried to uninstall/re-install the software. Thanks for your help.

What is the exact code path to images?
How big are your images (filesize)? Did you optimize them for the web in your graphics editor before inserting them into your web page? Are they saved as RGB and not CMYK?
Nancy O.

Div Image not showing in Live View

Why can't I see my image placed within a Div tag in Live View? Makes no sense. I've changed the z-index to 1000, also tried 1 nothing changes. Please advise if anyone can help. Thank you!

I've applied BOLD to the Div tag in question
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Permanent Concrete and Asphalt Repair Home Page</title>
<meta name="description" content="CeraTech's Pavemend family of high performance concrete repair products have become the choice of professionals across the country for their rapid return to service, versatility, ease of use, and superior durability.">
<style type="text/css">
#apDiv8 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 2;
</style>

<link href="pavmend_styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#pavemendlogo {
    background-image: url(_images/NEW%202012%20PAVEMEND%20LOGO%20WHITE.png);
    background-repeat: no-repeat;
    height: 78px;
    width: 196px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
</style>


</head>
<body>
<div id="wrapper">
<div class="container">
<div id="apDiv1"><a href="pavemend_home_page.html"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="197" height="79" class="fltlft" /></a>
    <div id="resources"></div>

<div class="headerResources"></div>

<nav>
<ul id="menu">
    <li><a href="pavemend_home_page.html">OUR PRODUCTS ▼</a>
      <ul>
        <li><a href="slq_product_page.html">SLQ<sup>®</sup></a></li>
        <li><a href="sl_product_page.html">SL<sup>®</sup></a></li>
        <li><a href="dotline_product_page.html">DOTLine™</a></li>
        <li><a href="15.0_product_page.html">Pavemend 15.0<sup>®</sup></a></li>
        <li><a href="TR_product_page.html">Pavemend TR<sup>®</sup></a></li>
        <li><a href="VR_product_page.html">Pavemend VR<sup>®</sup></a></li>
        <li><a href="IA_product_page.html">Instant Asphalt™</a></li>
        <li><a href="kemrok_product_page.html">KEMROK™</a></li>
        <li><a href="kemrokVR_product_page.html">KEMROK VR™</a></li>
        <li><a href="firerok_product_page.html">FIREROK™</a></li>
        <li><a href="antiwear_product_page.html">Anti-Wear™</a></li>
        <li><a href="antiscale_product_page.html">Anti-Scale™</a></li>
      </ul>
    </li>
    <li><a href="resources_page.html">RESOURCES</a></li>
    <li><a href="technical_support.html">TECHNICAL SUPPORT</a></li>
    <li><a href="contact_page.html">CONTACT US</a></li>
</ul>
</nav>
    </section>

<div class="sidebarleftlong">
<nav>
    <ul>
      <li><a href="#">PAVEMEND PRODUCT <br>    BROCHURE</a></li>
      <p><li><a href="#">KEEP TRAFFIC MOVING <br>    BROCHURE</a></li></p>
      <p><li><a href="#">CASE STUDIES</a></li></p>
      <p><li><a href="#">INSTANT ASPHALT REPAIR</a></li></p>
      <p><li><a href="#">SL PRODUCT VIDEO</a></li></p>
      <p><li><a href="#">SLQ PRODUCT VIDEO</a></li></p>
      <p><li><a href="#">DOTLINE FIELD <br>    APPICATION VIDEO</a></li></p>
    </ul>
    </nav>
   <div id=""></div>
    </div>


<div class="content">
<p> </p>
<img src="_images/resources_header.png" alt="slheader" width="553" height="31" class="productlogos" />
</section>
<p> </p>
      <section>
        <p><strong>Pavemend</strong><sup>®</sup> Rapid, Permanent Concrete and Asphalt repair products are quickly becoming the choice for Turnpike, State DOT Bridge Crews and discriminating engineers who value superior, permanent repairs and reduced traffic disruptions.</p>
<p>Typical repair applications include full and partial depth bridge deck repairs, bridge header joints, approach slabs, form & pour repairs, dowel bar retrofits, joint nosings and more. <strong>Pavemend</strong><sup>®</sup> products require only the addition of water, with no bonding agents or curing requirements and offer all season rapid repair capability.</p>
<p>Featuring technology developed here in the USA, <strong>Pavemend</strong><sup>®</sup> (by CeraTech Inc) products are easier to use, offer greater durability, provide superior return on investment, and are by far the most sustainable repair products available today.</p>
        <p><img src="_images/Done Smart Logo.png" width="150" height="17" alt="donesmartlogo" />
      </section>
</div>
        
<div class="footer"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="160" height="64" class="flt_rgt" />
    <table width="510" summary="footer material">
<tr>
    <td width="210"><strong><em>Manufactured by</em></strong></td>
<tr>
    <td><img src="_images/CTI_logo_white.png" width="200" height="47" alt=""/>
    <td width="50" align="center"><a href="#../twitter.com/Pavemend">Twitter</a>
<div id="apDiv7"></div>
<td><strong><em>Planet Friendly Technology</em></strong></td>
   </tr>
</table>
    <div id="apDivPFT1"></div>
    </div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* BEGIN HORIZONTAL DROP-MENU */
#menu {
    clear: left;
    position: relative;
    width: 100%; /**adjust width as needed**/
    margin: 0;
    padding: 0;
    background-image: url(_images/topnavpanel.png);
    color: #FFFFFF;
#menu ul {
    margin: 0;
    padding: 0
#menu li {
    list-style: none;
    float: left;
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: #000000;
/**top level menu**/
#menu li a {
    display: inline-block;
    text-decoration: none;
    /* adjust width as needed or use auto */
    width: 13em;
    padding: 8px;
    font-weight: bold;
    line-height: 12px;
    color: #000;
    border-top-style: none;
    font-size: 90%;
    margin-bottom: 0;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0;
    border-bottom-style: none;
/**top menu style on mouse over**/
#menu li:hover > a {
    color: #FFF;
    width: 13em;
/**sub-menu**/
#menu li ul {
    display: none;
    text-align: center;
    padding: 0;
    margin-bottom: 0;
    margin-left: 40px;
    margin-right: 0;
    margin-top: 0;
    border-bottom-style: none;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
    display: block;
    position: absolute;
    z-index:1000;
    padding: 0;
#menu li:hover li, #menu li.hover li {
    float: none;
    background-color: #E1D5BB;
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
    width: 14em; /* adjust width as needed or use auto */
    margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
    color: #FFF;
    background-color: #03C;
/* Clear floated elements at the end*/
#menu:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
#apDiv11 {
    position: absolute;
    width: 190px;
    height: 180px;
    z-index: 2;
    background-image: url(_images/WomanPhone.png);
    background-position: 10px;
    background-repeat: no-repeat;
    margin-top: 240px;
#apDivSustainability {
    position: absolute;
    width: 200px;
    height: 420px;
    z-index: 3;
    background-image: url(_images/sustainabilitySB2.png);
    background-repeat: no-repeat;
#apDiv10 {
    position: absolute;
    width: 75px;
    height: 73px;
    z-index: 2;
    background-image: url(_images/PFTLogo.png);
    float: right;
    margin-left: 650px;
    margin-top: -110px;
#apDiv9 {
    position: absolute;
    width: 200px;
    height: 207px;
    z-index: 3;
    background-image: url(_images/slphoto1.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivslqphoto {
    position: absolute;
    width: 200px;
    height: 267px;
    z-index: 3;
    background-image: url(_images/slqphoto.jpg);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivdotlinephoto {
    position: absolute;
    width: 200px;
    height: 267px;
    z-index: 3;
    background-image: url(_images/dotlinephoto.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDiv15photo {
    position: absolute;
    width: 200px;
    height: 179px;
    z-index: 3;
    background-image: url(_images/15.0_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivTRphoto {
    position: absolute;
    width: 200px;
    height: 267px;
    z-index: 3;
    background-image: url(_images/TR_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivAWphoto {
    position: absolute;
    width: 200px;
    height: 150px;
    z-index: 3;
    background-image: url(_images/AWPhoto.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivASphoto {
    position: absolute;
    width: 200px;
    height: 134px;
    z-index: 3;
    background-image: url(_images/ASphoto.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivVRphoto {
    position: absolute;
    width: 200px;
    height: 150px;
    z-index: 3;
    background-image: url(_images/VR_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivIAphoto {
    position: absolute;
    width: 200px;
    height: 162px;
    z-index: 3;
    background-image: url(_images/IA_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivKemrokphoto {
    position: absolute;
    width: 200px;
    height: 207px;
    z-index: 3;
    background-image: url(_images/KEMROK%20pic.jpg);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivFirerokphoto {
    position: absolute;
    width: 200px;
    height: 248px;
    z-index: 3;
    background-image: url(_images/Firerok_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivtechsupportphoto {
    position: absolute;
    width: 200px;
    height: 248px;
    z-index: 3;
    background-image: url(_images/techsupport_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivKemrokVRphoto {
    position: absolute;
    width: 200px;
    height: 207px;
    z-index: 3;
    background-image: url(_images/Kemrok%20VR%20pic.jpg);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDiv8 {
    position: absolute;
    width: 180px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/SLbktandbag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 520px;
#apDivslq {
    position: absolute;
    width: 80px;
    height: 105px;
    z-index: 2;
    background-image: url(_images/SLQbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -125px;
    margin-left: 515px;
#apDivdotlinebag {
    position: absolute;
    width: 88px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/dotlinebag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -165px;
    margin-left: 280px;
#apDivkemrokbag {
    position: absolute;
    width: 121px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/kemrok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -165px;
    margin-left: 570px;
#apDivPFT1 {
    position: absolute;
    width: 121px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/PFTLogo.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -75px;
    margin-left: 470px;
#apDivkemrokVRbag {
    position: absolute;
    width: 121px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/kemrokvr_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDivFirerokbag {
    position: absolute;
    width: 90px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/firerok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 570px;
#apDivAWbucket {
    position: absolute;
    width: 90px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/firerok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDivAWbucket {
    position: absolute;
    width: 90px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/firerok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDivAWbucket {
    position: absolute;
    width: 80px;
    height: 96px;
    z-index: 2;
    background-image: url(_images/AWbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDiv15bag {
    position: absolute;
    width: 88px;
    height: 111px;
    z-index: 2;
    background-image: url(_images/15.0bucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -115px;
    margin-left: 260px;
#apDivTRbucket {
    position: absolute;
    width: 80px;
    height: 106px;
    z-index: 2;
    background-image: url(_images/TRbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -120px;
    margin-left: 370px;
#apDivAWbucket {
    position: absolute;
    width: 205px;
    height: 150px;
    z-index: 2;
    background-image: url(_images/AWArt.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -140px;
    margin-left: 420px;
    font-size: 120%;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
#apDivASArt {
    position: absolute;
    width: 205px;
    height: 150px;
    z-index: 2;
    background-image: url(_images/ASArt.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -140px;
    margin-left: 420px;
    font-size: 120%;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
#apDivVRbucket {
    position: absolute;
    width: 80px;
    height: 87px;
    z-index: 2;
    background-image: url(_images/VRbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -105px;
    margin-left: 470px;
#apDivIAbucket {
    position: absolute;
    width: 251px;
    height: 106px;
    z-index: 2;
    background-image: url(_images/IAbuckets.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -120px;
    margin-left: 400px;
body {
    background-color: #666;
    color: #000;
    text-align: center;
    background-image: url(_images/roadblurred.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    padding-top: 60px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
.formtext {
    font-size: 100%;
    text-align: left;
.bodyfootnote {
    font-size: 70%;
    margin-left: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
.red {
    font-size: 70%;
    color: #F00;
.popups {
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    text-transform: capitalize;
    text-decoration: none;
    list-style: none;
h1, h2, h3, h4, h5, h6, p {
    /* [disabled]margin-top: 0; */     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 23px;
    line-height: 25px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 100%;
    padding: 5px;
a:visited {
    color: #FFFFFF;
    text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    background-color: #03C;
    color: #FFF;
    height: 12px;
    alignment-baseline: text-after-edge;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
    width: 960px;
    background-color: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
    background-image: url(_images/Bridge4WebScreened.png);
    background-repeat: no-repeat;
    margin-bottom: 0;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0;
    text-align: left;
.containerTS {
    width: 960px;
    background-color: #FFF;
    margin: 0 0px; /* the auto value on the sides, coupled with the width, centers the layout */
    background-image: url(_images/US_Map.png);
    background-repeat: no-repeat;
    text-align: left;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
    background-color: #000;
    background-image: url(_images/BannerBlured960.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerSL {
    background-color: #000;
    background-image: url(_images/PMND%20SL%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerPurchase {
    background-color: #000;
    background-image: url(_images/contact%20us%20pavemend%20header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerSLQ {
    background-color: #000;
    background-image: url(_images/PMND%20SLQ%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerDOTline {
    background-color: #000;
    background-image: url(_images/DOTLINE%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.header15 {
    background-color: #000;
    background-image: url(_images/PMND%2015.0%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerTR {
    background-color: #000;
    background-image: url(_images/PMND%20TR%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAW {
    background-color: #000;
    background-image: url(_images/anti_wear_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAS {
    background-color: #000;
    background-image: url(_images/anti%20scale%20pavemend%20header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerVR {
    background-color: #000;
    background-image: url(_images/PMND%20VR%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerIA {
    background-color: #000;
    background-image: url(_images/Instant%20asphalt%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerKemrok {
    background-color: #000;
    background-image: url(_images/KEMROK%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerKemrokVR {
    background-color: #000;
    background-image: url(_images/KEMROK%20VR%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerFirerok {
    background-color: #000;
    background-image: url(_images/FIREROK%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAntiWear {
    background-color: #000;
    background-image: url(_images/anti_wear_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerTechSupport {
    background-color: #000;
    background-image: url(_images/FEBlurred.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerResources {
    background-color: #000;
    background-image: url(_images/ResourceBanner.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.header h1 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20pt;
    font-style: normal;
    font-weight: bolder;
    color: #FFF;
    padding-top: 150px;
    padding-left: 30px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
    float: right;
    width: 180px;
    margin-left: 0px;
    margin-right: 30px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/Testimonialb.gif);
    background-repeat: no-repeat;
    height: 456px;
    text-decoration: none;
    z-index: 1000;
.sidebarPurchase {
    float: right;
    width: 200px;
    margin-left: 0px;
    margin-right: 20px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/purchaseSB.png);
    background-repeat: no-repeat;
    height: 420px;
    margin-top: 0px;
    text-decoration: none;
    background-color: #217CC0;
    background-position: 10px 10px;
.sidebarleft {
    float: left;
    width: 195px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 85%;
    font-style: oblique;
    height: 200px;
    text-decoration: none;
    padding-top: 8px;
    padding-left: 10px;
    margin-right: 5px;
    background-color: #217CC0;
    vertical-align: bottom;
    line-height: 30px;
    font-weight: bold;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
.sidebarleftlong {
    float: left;
    width: 195px;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-style: oblique;
    height: 280px;
    text-decoration: none;
    padding-top: 20px;
    margin-right: 5px;
    background-color: #217CC0;
    vertical-align: bottom;
    line-height: 17px;
    font-weight: bold;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
    color: #FFF;
    font-size: 85%;
    text-align: left;
    padding-left: 10px;
.sidebargreen {
    float: left;
    width: 195px;
    height: 410px;
    text-decoration: none;
    padding-top: 20px;
    margin-right: 5px;
    background-color: #8CC63F;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
    padding-left: 10px;
.nav2 {
    font-family: bebas-neue;
    font-style: normal;
    font-weight: 400;
    color: #FFF;
.sidebarleft nav ul li a {
    text-decoration: none;
    color: #FFF;
.sidebarleftlong nav ul li a {
    text-decoration: none;
    color: #FFF;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-weight: bold;
.content {
    width: 730px;
    float: left;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    padding: 10px 0;
    text-align: left;
    font-size: 100%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
    padding: 0 15px 15px 40px;
    text-decoration: none;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    text-decoration: none;
ul.nav li {
    border-bottom: 1px solid #666;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    background-color: #DFEBF3;
    color: #FFF;
    text-decoration: none;
/* ~~ The footer ~~ */
.footer {
    padding: 10px 0;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both;
    background-color: #000000;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-left: 760px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#apDiv1 {
    position: absolute;
    width: 900px;
    height: 94px;
    z-index: 1;
    margin-top: 80px;
    margin-left: 30px;
    white-space: 3;
    font-size: 100%;
    text-align: left;
sllogo {
    background-image: url(_images/SLwhitelogo.png);
    background-repeat: no-repeat;
.slLogo {
    background-image: url(_images/SLwhitelogo.png);
    background-repeat: no-repeat;
    height: 100px;
    width: 240px;
.productlogos {
    margin-left: 23px;
    margin-top: 10px;
.Bold {
    font-weight: bold;
.inherent {
    font-style: inherit;
sup {
    position: relative;
    top: -1ex;
    vertical-align:baseline;
    font-size: 75%;
#apDiv2 {
    position: absolute;
    width: 650px;
    height: 31px;
    z-index: 2;
    background-repeat: no-repeat;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 15px;
    margin-left: 15px;
    top: 369px;
    background-image: url(_images/homeheader.png);
.footer table tr td {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 75%;
    color: #FFF;
    height: 8px;
    width: 160px;
    margin-left: 10px;
    padding-left: 15px;
    border-collapse: collapse;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 5px;
.footer p {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 80%;
    color: #FFF;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 30px;
.footer table tr th h4 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 75%;
    color: #FFF;
    float: left;
    padding-left: 15px;
    height: 0px;
.footer table tbody tr td a {
    color: #FFF;
#wrapper {
     width:970px; /**adjust as needed**/
     margin:0 auto; /**centers page on screen**/
.flt_rgt {
    float: right;
    margin-top: 15px;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
.title {
    /* [disabled]margin-right: 30px; */
    margin-top: 35px;
    margin-left: 10px;
    background-image: ;
    background-repeat: no-repeat;
    /* [disabled]margin-left: 20px; */
    top: 30px;
    /* [disabled]margin-top: 30px; */
    left: 30px;
.flt_products {
    float: right;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
.container section nav {
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    height: 30px;
    width: 960px;
    padding-top: 3px;
#apDiv3 {
    position: absolute;
    width: 468px;
    height: 41px;
    z-index: 2;
    background-image: url(_images/savetimetext.png);
    background-repeat: no-repeat;
    margin-left: 15px;
#apDiv4 {
    position: absolute;
    width: 400px;
    height: 41px;
    z-index: 3;
    background-image: url(_images/ULTRAFLOR.png);
    background-repeat: no-repeat;
    margin-left: 10px;
    margin-top: 45px;
#apDiv5 {
    position: absolute;
    width: 250px;
    height: 103px;
    z-index: 4;
    background-image: url(_images/HI%20RES%20PRODUCT%20FAMILY%20w%20IA.png);
    background-repeat: no-repeat;
    float: right;
    right: auto;
    margin-left: 675px;
    margin-top: -22px;
#apDiv6 {
    position: absolute;
    width: 40px;
    height: 38px;
    z-index: 5;
    background-image: url(_images/PFT%20No%20Text%20No%20Flip.png);
    margin-top: -25px;
    margin-left: 83px;
#apDiv7 {
    position: absolute;
    width: 20px;
    height: 17px;
    z-index: 5;
    background-image: url(_images/twitter-bird-dark-bgs.png);
    margin-top: -15px;
    margin-left: 85px;
nav ul {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the space between the navigation on the content below */
    font-size: 90%;
nav ul li {
    text-decoration: none;
    color: #FFF;
nav ul a:link , nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    text-align: left;
    color: #FFF;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    color: #FFF;
    text-decoration: none;
.orange {
    color: #FAA634;
.white {
    color: #FFFFFF;
.red {
    color: #F00;
.red1 {
    color: #F00;
.toppanel {
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    height: 30px;
    width: 960px;
#apDiv12 {
    position: fixed;
    width: 960px;
    height: 30px;
    z-index: 5;
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    float: left;
    top: 229px;
.white {
.CeraTechLogo {
    background-image: url(_images/CTI_logo_white.png);
    background-repeat: no-repeat;
    width: 200px;
    height: 60px;
.apDivPFT {
    background-repeat: no-repeat;
    padding-left: px;
    padding-top: 0px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
#resources {
    background-image: url(_images/ResourcesType.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;

Why is my page not centered in browser view?

I am working on my home page. I set the container dimension to 700px and max width 960. I have tried other sizes. every time in Windows browser view my site shifts to the left with a large margin on the right. I can't get it to center. I have an error message saying :
Unsupported property: max-width
Affects: Internet Explorer 6.0; Internet Explorer for Macintosh 5.2
In Live View, it looks fine. Also, in browser view, my spry menu bar is not showing up (it does in Live View).
Anyone have any suggestions??
Thanks! M.

kcusu wrote:
.container {
width: 700px; /* the auto value on the sides, coupled with the width, centers the layout */
background-color: #FFFFCE;
max-width: 960px;
text-align: center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
If this is the real code, your CSS is missing a closing bracket }
It would be soooooo much simpler and quicker for everyone if you would upload your page to your remote web space and post a link for us to see it in our browsers.
My guess is that your code has validation errors that need fixing.
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
FYI: Browser compatibility checking is a total waste of time. You can skip that feature b/c it doesn't tell you anything useful.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Small images not showing in design view

Desperate for help! I've been trying to diagnose this for a
long time. For some strange reason, images that used to show up in
my design view are now displaying the 'missing image' icon. I've
narrowed it down to this--if the image is less than 8px high, the
image will not display. When I increase it to 8px or more high
(width does not have any bearing on it), the image is displayed.
Same exact image name, same placement, path, file type, etc. The
only variable changed is the image height. Someone please tell me
what is going on. By the way, this just started to happen. These
small images were displaying fine up until yesterday.

You have two id="header" elements on the page....
I can see both the 5px tall GIF and JPG images just fine in
CS4.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"peregrinedesign" <[email protected]> wrote
in message
news:gmiaur$bv$[email protected]..
> OK, but I'm not sure this will help. Here's the page:
>
http://www.capitaloandp.com/orthotics.php
>
> What you will see is correct, and when I preview with a
browser it is fine
> also, it's only the DW design view that is not showing
the small jpeg.
> On the right side, there are two small black rectangles.
The one on the
> left
> is a gif, and the one on the right is the jpg. They were
both exported
> from the
> same original Fireworks file. I have tested using
Photoshop also.
>
> Thank you for your attention to this.
>

Gallery images not centered

I have made a slideshow widget inside a slideshow widget and in the Muse application I have centered everything but when I publish, the images shift.
I can not figure out at all what is causing this. I have done this before in another site and it works perfect.
Any ideas what is causing this?
Here is the site: www.craigillustrations.com

After reboot...
Open terminal
devel-Su
rootme
tracker-control -r
This will completely reset it.
Reboot after then try it and report back.
If fixed, please mark this post as solution to help others find it faster.

Some images not selectable in grid view

Have recently installed Lightroom 5.6 on my Mac after deciding to ditch Apple Aperture. I have an issue where certain images are not selectable or do not highlight when moving the mouse pointer over them in grid view in the library module. The images have been imported only once direct from the camera & there is no issue selecting them in the filmstrip or accessing them in the Finder. I've found other posts with users experiencing similar issues but no one has offered an answer

Um, I can't seem to find it on the server, which can't be a good sign ) - :
Have no idea why it's not appearing where it should but if I can get a link to work I'll send it to you.
Thanks for your help

60D images not showing a thumbnail view in Bridge CS5..ideas?

I am having trouble seeing images in raw format from a 60D Canon in Bridge CS5. I have an iMac using OS X 10.9.4..any ideas why I can only see the white file, but can see all images in raw from 5D, 7D, 40D...etc. No updates show up as available on my computer or on the Adobe site. I just can't figure it out!
Thanks for your help.
-Alli

Make sure your ACR (Adobe camera Raw) plug-in is fully updated. That camera model has been supported since Adobe Camera Raw 6.2.
DO NOT rely on the Adobe auto updater to tell you that there are no updates available. It's totally unreliable in CS5 and earlier versions. The Adobe updater team overseas did not get their act together even halfway right until CS6.
Go into the About Plugin > Camera Raw… menu item in Photoshop to see what version of ACR you have. In CS5, ACR should be at version 6.7, more precisely at 6.7.1.
If you are already updated to ACR 6.2 or higher, then go to the Tools menu in Bridge and Purge Cache for the offending folder(s).

Some images not loading to mobile devices.

So I'm having issues copying few images form iPhoto on my iMac (Mountain Lion) to both of my mobile devices.
These images used to be on both of my devices but for some reason have now disappeared from them and refuse to copy back to either my iPhone and iPad.
I initially thought these images may have got corrupted somehow so I deleted them from iPhoto and replaced them with new copies. All of the files are in jpeg format and smaller than other files i have in iPhoto which copy to my mobile devices successfully. This had no effect which I find a little strange.
I then tried the following, none of which has worked;
1.     deleted my iPod photo cache
2.     rebuild iPoto Library (each box was ticked and the repair/rebuild undertaken before closing iPhoto and moving on the the next repair/rebuild action)
3.     Number 2 didn't work so I deleted my iPod cache again.
4.     Disk utility - verify & repair permissions
I still think that it may be corrupt file issue as all of the images used to successfully copy to my devices in the past without issue.
But if this was the case, surly when these images were deleted and replaced with new jpeg images (made from my master PSD of TIFF files via photoshop) they should then copy over successfully?
confused.com

As a Test:
Hold down the option (or alt) key and launch iPhoto. From the resulting menu select 'Create Library'
Import a few pics into this new, blank library. Is the Problem repeated there?
Post back with the result.

Why some posts in facebook pages not appear using mobile view but appear with desktop view ?

The same problem occur with other browsers but not with facebook program

What type of post?
*Text/Image/Video
Many site issues can be caused by corrupt cookies or cache. In order to try to fix these problems, the first step is to clear both cookies and the cache.
The Firefox cache temporarily stores images, scripts, and other parts of websites while you are browsing. <br>
Note: ''This will temporarily log you out of all sites you're logged in to.''
To clear cache and cookies, do the following:
#Tap the menu icon located at the top right corner. This is the icon with 3 bars. On older Android devices you'll have to press the hardware menu key and then tap More.
#Tap '''Settings'''.
#After that, you will be taken to the settings screen. In the settings screen, look under the section '''''Privacy & Security''''' and select '''Clear private data'''.
#You will then be taken to a list of what can be cleared. Select the following 2 for deletion:
#*Cookies & active logins
#*Cache
#After those have been selected, tap the '''Clear data''' button to actually clear the cache and cookies.
Did this help you with your problems? Please let us know!

Image not centered in Mobile view?

Similar Messages

Maybe you are looking for