CSS Not Appying

Why are the Hed and SubHeds of my page reverting to default grey color? This is the color defined as the body color.
http://www.pmr-nlf.com/asa/html/forsa_british.html
Thanks

If you put your page through the CSS validator, you'll see the problem immediately :-)
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. pmr-nlf.com%2Fasa%2Fhtml%2Fforsa_british.html
you need to place a #tag infront of the color value in the css.
so it should be:
color: #188bad;
Also, looks like you may have a style that isn't needed - it's just a duplicate of the hed, thought it's not written up as either a class or an ID - (this too is missing the #
hed {
    font-family: "Trebuchet MS";
    font-size: 18px;
    font-weight: bold;
    color: 188bad;

Similar Messages

CSS not applying to a page if navigated to from one other page in the site

Hi,
Quite new to dreamweaver. Built a site a few months ago and when updating the content I decided to update the style as well using the CSS sheet.
Strange problem occurring....
When you navigate to the Contact Us page directly via URL or any but one page in the site, the SCC applies and webpage displays well.
However, if you navigate to the Contact Us page form the About Us page then all styling is lost.
Below is my NavBar coding. I have compared it on all pages and it's the same. Can't work out why CSS not applying in this one specific instance.
<nav id="mainnav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="TheCollection.html">Collection</a></li>
        <li><a href="News.html">News</a></li>
        <li><a href="About.html" class="thispage">About Us</a></li>
        <li><a href="Contact.html">Contact Us</a></li>
      </ul>
    </nav>
Any advice appreciated and let me know if I can provide anything else that might help you to help me.
Thanks!
S

How many style sheets do you have for your entire site?
You should have boilerplate.css, your fluidGridLayout.css (whatever you named it) and one other custom css file for your content styles. All 3 style sheets should appear on every page. For site management reasons, I usually put my CSS files into a styles folder.
Sitename (C:\sitename)
index.html
about.html
contact.html
etc...
     -styles
          boilerplate.css
          layout.css
          custom.css
With that structure above, your links to external style sheets should look something like this on every page.
<link href="styles/boilerplate.cssview-source:http://www.theseasonhats.com/keysheet.css" rel="stylesheet" type="text/css">
<link href="styles/layout.css" rel="stylesheet" type="text/css">
<link href="styles/custom.css" rel="stylesheet" type="text/css">
Nancy O.

CSS not loading

I look at this page in IE and it seems to load ok. Looking at
it in FF 2.0.0.11 the css seems to not be loading but if I click
Edit CSS in my webdeveloper tool bar it loads the css. When I view
the site on my development server it works fine in all browsers.
Can anyone offer an explanation.
Live Server (CSS not loading in FF)
http://tinyurl.com/2amrjj
Development Server (seems to be working in all browsers)
http://tinyurl.com/25syal
Thanks,
J

Sounds like a problem with mime type...
bigj9901 skrev:
> I look at this page in IE and it seems to load ok.
Looking at it in FF 2.0.0.11
> the css seems to not be loading but if I click Edit CSS
in my webdeveloper tool
> bar it loads the css. When I view the site on my
development server it works
> fine in all browsers. Can anyone offer an explanation.
>
> Live Server (CSS not loading in FF)
>
http://tinyurl.com/2amrjj
>
> Development Server (seems to be working in all browsers)
>
http://tinyurl.com/25syal
>
> Thanks,
> J
>
>
Kim
http://www.geekministry.com

Set a remote css not included it in head

Set a remote css not included it in <head>
Hi everyone
Can I set up a css for all page of the website, without include it in <head> ?
I have this pages structure
<html>
<head>
<?php include $_SERVER['DOCUMENT_ROOT'] . '/head.php' ?>
</head>
<body></body></html>
So, the css link:
(<link type="text/css" href="style.css" rel="stylesheet" />)
is included into the script /head.php.
I don't need php interpretation live, the only thing that I need is to set a css for all pages without include it in <head>. In fact, I work to single pages like an editor (paste and copy from word document, insert image, set title and meta description ecc.) and for that I need that the styles are applied to pages.
Thanks to all and thanks to google translate!

Put your link to site wide external CSS file inside the head.php include file.
Nancy O.

[svn] 1592: blz-161 Requested resource /ds-console/history/history. css not found

Revision: 1592
Author: [email protected]
Date: 2008-05-07 09:56:32 -0700 (Wed, 07 May 2008)
Log Message:
blz-161 Requested resource /ds-console/history/history.css not found
history/* was not making it into the war
qa: dave, please have another look
Ticket Links:
http://bugs.adobe.com/jira/browse/blz-161
Modified Paths:
blazeds/branches/3.0.x/apps/ds-console/build.xml

Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?

Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!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>Untitled Document</title>

<link href="../CSS/main.css" rel="stylesheet" type="text/css" />


<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
    <div id="buyNow1">
      <p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
    </div>
</div>
<div id="mainNav">
    <ul id="mainNavcontent" class="MenuBarHorizontal">
      <li><a href="../index.htm">Home</a>        </li>
      <li><a href="../swimmer.html">Swimmer Buddy</a></li>
      <li><a href="../order_now.html">Order Now</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
        <ul>
          <li><a href="../photo_gallery.html">Photos</a></li>
          <li><a href="../video_gallery.html">Videos</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
        <ul>
          <li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
          <li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
          <li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
          <li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
        </ul>
      </li>
      <li><a href="../about.html">About Us</a></li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</div>

<div id="pageInfo">
    <div id="info_page">
      <p class="regionID">Region ID</p>
      <hr class="breaklinePageInfo" />
      <p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
    </div>
    <div id="mainContent">
      <div id="content">
        <p>Main Content Goes her</p>
      </div>
    </div>
</div>


   <div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
   
<div id="footer">
<div id="footertext">
        <p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
      </div>
    <div id="footerlinks">
        <p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
      </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
visibility: visible;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 132.8px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: #333;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same.

When inserting image how do I force inline CSS not image tags?

When I insert an image to my page layout it always uses html width= and height= tags
e.g. <img src="images/wordpress.jpg" width="125" height="112">
This is driving me nuts
(I thought these tags were pretty old fashioned for current doctypes. Why does dreamweaver continue to use them?)
I want inserted images to be shown with inline CSS
e.g. <img src="images/wordpress.jpg" style="width:125px; height:112px;">
I can then more easily add more CSS like padding, floats etc as needed.
Any ideas how I set this up as a default or quickly convert?
(I dont really want to add lots of unique image classes to a style sheet)
many thanks!
Dreamweaver CS6

Image height & width values are not deprecated. Unless you're building a responsive web site, it is usually better to have these attributes stated in the HTML.
But when I don't want them, I do the following:
Insert > Image > browse to file...
On the properties panel, I delete the width and height values, hit Enter.
Nancy O.

Png files referenced in css not displaying in Chrome & Firefox after after PUT

I'm new to dreamweaver but I've got a techy / software background so feel free to speak geek.
I've been tasked to create a simple splash screen for an existing intrenal website for my company.
I've been able to put page together in DW and sucessfully preview in Chrome, Firefox, & IE. After I PUT files on the webserver (under an existing virtual directory in IIS) I'm bumping into a problem where I'm not able to see a the three png files I've got embedded into the .css sytle sheet fro the header, container, and footer sections. Here's a look at the html & css for the page. Any recommendations on how I could code this better or fix the problem? Your help will be very much appreciated.
The site was originally built off a template so the comments in the .css are from the original author of the template.
<!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>Untitled Document</title>
<link href="/CognosSplashScreen/oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
          background-color: #000;
          background-image: url(/CognosSplashScreen/bg.jpg);
          background-repeat: no-repeat;
</style>
</head>
<body>
<div class="container">
<div class="header">IBM Cognos - Enterprise Business Portal (EBP)</div>
<div class="content">
    <h1><img src="/CognosSplashScreen/Wrench Sprocket.png" width="215" height="164" align="left" />EBP is offline</h1>
    <p>The IBM Cognos EBP has been taken offline for scheduled maintenance. Services will be restored on Wednesday, May the 2nd at 7:00 AM.    </p>
    <h3>Maintenance Details</h3>
    <p>We're currently in the process of upgrading from IBM Cognos BI version 8.3 to the most current 10.1.1. To take a look at some of the new features you'll experinece we've put together a brief overview you can download by <a href="#">clicking here</a>.</p>
    <p>10.1.1 training is available to for all users. Take a look at the list of available courses get yourself, your team, or department enrolled in a class today.    </p>
</div>
<div class="footer">
    <p> </p>
    </div>
</div>
</body>
</html>
Here's the .css
@charset "utf-8";
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #42413C;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ 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;
h1, h2, h3, h4, h5, h6, p {
          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: 45px;
          padding-left: 45px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
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: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          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;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
          width: 980px;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
          background-image: url(/CognosSplashScreen/PageBodyLight_02.png);
/* ~~ 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-image: url(/CognosSplashScreen/HeaderBubbles_02.png);
          padding-top: 57px;
          color: #CCC;
          font-weight: bold;
          padding-left: 97px;
          padding-bottom: 30px;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div 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.
.content {
          padding: 10px 0;
/* ~~ The footer ~~ */
.footer {
          background-image: url(/CognosSplashScreen/footer_02.png);
          padding-top: 5px;
/* ~~ 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: right;
          margin-left: 8px;
.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;

CSS for images coded on the Web page itself is pathed relative to that Web page. CSS for images used by the external CSS file is pathed relative to the CSS file location.
If this is the link to the css file from the Web page... go to "CognosSplashScreen" subfolder and get the "oneColFixCtrHdr.css"
<link href="/CognosSplashScreen/oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
.... and you don't need the leading "/" by the way.
then relative to that css file, which is already in the "CognosSplashScreen" subfolder, the path to the "HeaderBubbles_02.png" is just
background-image: url(HeaderBubbles_02.png);
not:
background-image: url(/CognosSplashScreen/HeaderBubbles_02.png);
and so forth for other image paths.
Best wishes,
Adninjastrator

Another case of css not behaving properly

this is the page as it is
http://www.fourpawscatrescue.co.uk/tests.html
it shows the html and css design of my lightbox, the green is where the content will go
and it is working properly in that link
I have put the code below will someone please explain to me why as soon as i change the height of "middle" and/or "middle centre" to auto (they currently have fixed heights) the whole thing breaks?
(note, it does not break if I dont put any content in the green box effectivly causing its auto height to be 0, but inserting a single letter breaks it)
(second note, when using fixed heights it will accept any height and still work fine)
I need thoes 2 DIVs to have auto heights so that can adjust since as this is a lightbox different conent will be placed in the green area at different times.
this is what it looks like when broken
THE CODE
<title>Untitled Document</title>
<style type="text/css">
#container {
height: auto;
width: 520px;
overflow: hidden;
#top {
width: 520px;
height:10px;
overflow:hidden
#top #topleft {
height: 10px;
width: 10px;
float:left;
background-image: url(images/top_left_curve.gif);
background-repeat: no-repeat;
#top #topcentre {
width: 500px;
height: 10px;
background-color:black;
float:left;
#top #topright {
height: 10px;
width: 10px;
float:left;
background-image: url(images/top_right_curve.gif);
background-repeat: no-repeat;
#middle {
width: 520px;
height: 50px;
#middleleft {
width: 10px;
height: 100%;
background-color: black;
float:left;
#middlecentre {
width: 500px;
height: 100%;
background-color: #0F0;
float:left;
#middleright {
width: 10px;
height: 100%;
background-color: black;
float:left;
#bottom {
width: 520px;
height:10px;
overflow:hidden
#bottom #bottomleft {
height: 10px;
width: 10px;
float:left;
background-image: url(images/bottom_left_curve.gif);
background-repeat: no-repeat;
#bottom #bottomcentre {
width: 500px;
height: 10px;
background-color:black;
float:left;
#bottom #bottomright {
height: 10px;
width: 10px;
float:left;
background-image: url(images/bottom_right_curve.gif);
background-repeat: no-repeat;
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="topleft"></div>
<div id="topcentre"></div>
<div id="topright"></div>
</div>
<div id="middle">
<div id="middleleft"></div>
<div id="middlecentre"></div>
<div id="middleright"></div>
</div>
<div id="bottom">
<div id="bottomleft"></div>
<div id="bottomcentre"></div>
<div id="bottomright"></div>
</div>
</div>
</body>
</html>

Turn NIS 2005’s Personal Firewall OFF, (turn it OFF Permanently until your ready to turn it back on) then click CONFIGURE. ( Might be a good idea to disconnect from the Internet at this stage)
Under the PROGRAMS tab remove any reference to Apple iTunes or iTunes or iTunes Helper Module or anything related. and reboot.
After coming back go back to NIS 2005’s Personal Firewall, click CONFIGURE. Under the PROGRAMS tab click ADD at the bottom, a SELECT A PROGRAM window will pop up. Add the following files one at a time, iTunes.exe, iTunesHelper.exe, QuickTimePlayer.exe, qttask.exe, QTInfo.exe. The last 3 are found in your Quicktime folder where that is in your system. Click OK. Turn NIS 2005’s Personal Firewall ON, and try starting iTunes again.
It seems the Quicktime files were never automatically entered into NIS 2005’s Personal Firewall allowable programs listing. Adding them manually should help. I also noticed that from my previous version of iTunes the program listed in the Firewall was named Apple iTunes and not iTunes after I upgraded to 6.

CustomStyle.css ; not working as it should

I feel rather silly posting this question here, considering that, a few months ago, I posted a similar question.
I guess the situation is a bit different.
I am currently developing a new IDM instance on my server.
I am trying to customize some pages (*Tabs, Headings, Logos, Masts*, etc, etc)
I already have one IDM system running smoothly; I successfully implemented the "*customStyle.css*" file in that first system.
Now, I decided to simply COPY the files I used there (including logos, jpg photos, etc, etc) into the new server (into the : idm/images/other folder)
But, it is not working.
For some reason, none of my attempts at customizing, is working. Not even after I re-started my application server.
Other than copying the files and folders which I used before, is there anything else I should have done?

We saw something similar a while back and discovered it was the app server cache. Depending on the app server you are running, there will be a cache folder (usually hidden). Resetting the app server doesn't expire the cache usually (I know, logically it "should" but many times it doesn't). We had to stop the app server and delete the cache folders. We are using weblogic so the directories we had to delete were the .wlnotdelete directories, then start the app server.

Resizing image using CSS - not working in IE

Hello,
I have a standard report with couple of columns one of which a image column. The images are of varying sizes and I manged to resize them to a fixed width & height by using CSS code in page header as below:
td[headers="ITEM_PICTURE"] img {
display: block;
width: 70px;
border: 1px solid #999;
padding: 4px;
background: #f6f6f6;
}The CSS does the trick in Chrome & Firefox but does not work in internet explorer. Is there a way to make this CSS code IE friendly?
Cheers for help.

William Wallace wrote:
I am using Apex 4.2.1 (had this issue in 4.1.1 as well) and using theme 10.Ah, the Sludge Sand theme. In 4.x that's a legacy theme only really included to allow applications to run on IE6. It's therefore intended to run in quirks mode, meaning in Internet Explorer terms there's no support for anything that didn't work in IE6 (for certain values of "work"). This means no CSS3, no support for a lot of useful CSS2.1 stuff (like attribute selectors), and probably problems with jQuery which requires standards mode. Adding a DOCTYPE to the page templates to trigger standards mode Interactive Report: how can I display carriage returns?. In 4.2 you really should switch to one of the latest Standard themes, or at least one of the standards mode Legacy themes (those not marked with a "*").
If you must use theme 10, and there are no other images in this report (like edit icons) then you could add a static ID to the region and use a more basic selector like:
#static-id td.t10data img {
display: block;
width: 70px;
border: 1px solid #999;
padding: 4px;
background: #f6f6f6;
}However, it appears that one of IE's quirkier quirks mode quirks is that CSS padding is not supported on images, so the presentation you want is not possible using theme 10 in IE and CSS alone.
Switching to a modern theme is recommended.
Edited by: fac586 on 02-Mar-2013 10:31

Table created in Dreamweaver with CSS not positioning correctly

I've created a simple 9 page website using Dreamweaver and CSS. I am no pro but I can edit some in the code. I'm really enjoying the CSS but for some reason I cannot find out why my tables appear perfect in Firefox but not in Chrome or IE. The tables are centered properly but they appear way below where they're intended to be!
I've tried to paste my code but can't, is there somewhere I can post it?
-jrntmd8r88

After struggling with this last night I took a look again this morning and narrowed down and corrected the problem. Basically, this is what happened to cause the issue and how I resolved it. Hopefully it helps others in the future.
Steps
Create project in Windows version of Cp (I was using version 8.01).
For my client's requirements, which are quite unique and complex compared to the typical Cp project, custom quiz questions/scoring had to be developed. Since these are HTML5 (non-responsive) courses, and Javascript is the fastest/most efficient way to do this, I used Javascript extensively for quizzes via the 'Execute Javascript' action. So for quiz questions, each answer is simply a smartshape (transparent, with answer text in it) that triggers the 'Execute Javascript' on click. In addition, on many of the quiz slides there are Edge Animate/HTML5 interactions embedded.
Worked fine on windows upon publish. But when I opened on a new Mac and published, when a question answer was clicked nothing would happen.
Turns out the problem seems to be with the text in the Javascript window. I think it somehow gets corrupted, though it looks fine. I had to literally delete the javascript, save it, and then copy it back in. Once I did that, it works.
I've invested too much time in this project so far, so don't want to risk any more major issues popping up like this, so I switched back to Windows and canceled my subscription this morning. Fortunately I have a license from my employer for Windows and will just use that with Boot Camp.

Css not working in AIR app?? Help Please :(

Hi Everybody,
Really hope someone can help with this as I can't find the solution to save my life.
In my css file I have:
#map2{
    border-color:red;
    border-style:solid;
    border-width:1px;
    height:130px;
    width:84%;
    float:right;
    vertical-align:middle;
In my HTML file I have:
<div id='map2'><input type="text" name="search"><input type="submit" value="search blog"><input type="submit" value="search web"></div>
The css and HTML are woring fine together apart from the 'vertical-align:middle'??
I have no idea why this is not working and I have looked all over the internet, can anyone out there help with this, PLEASE!!
Thank you all in advance
IrishAIRMax

vertical-align doesn't work like you think it should. Read this page:
http://phrogz.net/CSS/vertical-align/index.html

CSS not showing fully in DW CS3

I recently installed DW CS3 on XP and realized that some of
my <div> tags with CSS backgrounds are not displaying in
design view, however, are doing fine in DW 8. Has anyone
experienced anything similar? I certainly want to use DW CS3 for
the updated CSS management panel however am having second thoughts
if this is a bug.

Show us. No doubt, CS3's rendering is more accurate than
DW8's, meaning
that you have a div collapse because you are not clearing a
float, or
something.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"master_fard" <[email protected]> wrote in
message
news:f07rbv$1t9$[email protected]..
>I recently installed DW CS3 on XP and realized that some
of my <div> tags
>with
> CSS backgrounds are not displaying in design view,
however, are doing fine
> in
> DW 8. Has anyone experienced anything similar? I
certainly want to use DW
> CS3
> for the updated CSS management panel however am having
second thoughts if
> this
> is a bug.
>

CSS not showing up in Browser

I am having trouble with my CSS code. I had to break it down
to the most simples form. I have created my page using internal CSS
which was working when I tested my page in my browser(s). When I
exported my CSS code to an external page. This is were it breaks
when it goes to a external page. Here is sample of my code very
basic:
Note: Just wondering if I need to set-up something my my OS,
My OS is MS 64x XP pro, hope someone could help me.
<!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>Untitled Document</title>
<link href="/css/styles.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div>
<div>Content for New Div Tag GSSoes Here</div>
</div>
</body>
</html>
CSS Code:
@charset "utf-8";
body {
background-image: url(../images/bgcontent2.jpg);
background-repeat: repeat-x;
background-color: #601800;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CC9900;
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
color: #FF0000;
a:hover {
text-decoration: underline;
color: #0066FF;
a:active {
text-decoration: none;
color: #FF0000;
h1 {
font-size: 16px;
color: #0066FF;
h2 {
font-size: 18px;
color: #0099FF;

Seem to got it to work. Change CSS folder to asset export my
css internal code to a new external sheet and everything seems to
work. Strange.

CSS Not Appying

Similar Messages

Maybe you are looking for