CSS not displaying properly

My CSS file includes the following formatting for a "Note":
p.Note {
border-left-style: Solid;
border-right-style: Solid;
border-top-style: Solid;
border-bottom-style: Solid;
background-color: #fafade;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 9pt;
line-height: 12pt;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-color: #a3a5a7;
border-right-color: #a3a5a7;
border-top-color: #a3a5a7;
border-bottom-color: #a3a5a7;
margin-top: 12px;
x-next-class: ;
x-next-type: P;
margin-bottom: 12px;
In IE 11, not using Document Mode=Edge, the CSS is applied as expected:
In IE 11, using Document Mode=Edge, the CSS is not applied as expected:
I suspect the issue is with the CSS itself. The CSS displays correctly in the Design view of the topic in RH10, but does not display correctly if I view the topic using the CTRL+W command from within RoboHelp, and does not display correctly in the compiled project when viewed in Chrome or FireFox. Any ideas? Thanks!

If I have to guess, I would say it has to do with the name of the style.
Your HTML probably uses lower case while your selector in the CSS starts
with a capital letter.
Try the following selector:
p.note,
p.Note {
That should solve it.
Kind regards,
Willam

Similar Messages

CSS not displaying properly in Firefox

My new CSS layout looks beautiful in IE7 (weird), however, it
is not rendering properly in Firefox. I always do research before
posting here, but I'm completely helpless now. I'm very new to CSS,
this is my first page I've layed on using this language. Pretty
much none of the top margins are working, and my faux column image
isn't displaying. I'll attach the HTML and the CSS and see if
someone can point out what is wrong with Firefox.

I'm seeing problems in FF3, Safari 3.1, and IE6. Flash code
and missing alt
tags on images won't hurt you, but some of the other
validation errors could
be effecting your layout.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.colonybeachresort.com%2FCSS_T esting%2F
In addition, you've got problems with those png images and
alpha-transparency. They do not render well in IE6 without
some sort of png
fix JavaScript. Given that many people still use IE6, you
might want to
switch to jpgs for backgrounds.
IE net renderer for checking web sites
http://ipinfo.info/netrenderer/
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"nowherecreative" <[email protected]> wrote
in message
news:g6ak8o$2iv$[email protected]..
> Here is the link to the site.
>
http://www.colonybeachresort.com/CSS_Testing/
> If you view it in IE7 it looks great. When you view it
in Firefox the top
> margins aren't working ... for example, the whole site
is supposed to
start
> right from the top (no space between the top of the
browser window and the
> content, as seen in IE7). Also, the background of my
columns are not
showing
> up, you can really see the difference when you compare
them between the 2
> browsers.
>

CSS not displaying properly in DW8

I am new to working with CSS and trying to use more of it and
less tables as I move forward, at least until we are ready to do a
site redesign. On the page below the CSS is working to create the
two colomns in the browser but in DW8 after the first section "1.
Access:" , all the other sections are jumping all over the place.
My DW8 settings seem to be consistent with the advice given in
other responses to similar questions in the forum.
Page:
http://www.aclink.org/intergenerational/needs/admin/test.asp
Here is the CSS file: Not positive this works but thought I
would give it a shot before I posted all the CSS into the forum. I
realize some of this CSS file is pretty messy, it has gotten a way
from us somewhat but I am hoping to clean it all up with the site
redesign later this year.
http://www.aclink.org/WebAdmin/Library/home_menu.css

Osgood wrote:
> I'd classify that information as tabular data so I would
use a table to
> lay it out?
>
or if you really must do it with css use a definition list
(code and css
below)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style>
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
#wrapper {
width: 40em;
margin: 0 auto;
h3 {
margin: 0;
padding: 8px 0;
font-size: 15px;
dl {
margin: 0;
padding: 0;
width: 40em;
dt {
float: left;
width: 20em;
clear: both;
padding: 3px 0 0 0;
dd {
margin: 0 0 5px 12em;
text-align: center;
</style>
</head>
<body>
<div id="wrapper">
<h3>1. Access</h3>
<dl>
<dt><strong>Response</strong></dt>
<dd><strong>Average
Ranking</strong></dd>
<dt>Information and Assistance</dt>
<dd>1</dd>
<dt>Transportation</dt>
<dd>2</dd>
<dt>Outreach</dt>
<dd>3</dd>
<dt>Care Management</dt>
<dd>4</dd>
</dl>
<h3>2. Home Support</h3>
<dl>
<dt><strong>Response</strong></dt>
<dd><strong>Average
Ranking</strong></dd>
<dt>Telephone Reassurance</dt>
<dd>1</dd>
<dt>Home Health Aide</dt>
<dd>2</dd>
<dt>Respite Care</dt>
<dd>3</dd>
<dt>Visiting Nurse</dt>
<dd>5</dd>
<dt>Affordable Housing</dt>
<dd>4</dd>
<dt>Homemaker</dt>
<dd>1</dd>
<dt>Hospice Care</dt>
<dd>2</dd>
<dt>Fix-it Program</dt>
<dd>3</dd>
</dl>
</div>
</body>
</html>

CSS not displaying properly in IE

My site has style sheets which all display fine in every
browser except Internet Explorer. The site is built using DW 8.02
on a Mac. But on every PC using Explorer we've checked it on, the
style sheets are all centered, not what they're supposed to do.
The test site can be
viewed here.
Any help or ideas would be greatly appreciated.
THANKS!

Hi Nick,
Where exactly have you uploaded your files? In a document Library? Have you tried Checking-in and Publishing your files? Checked out files can cause these problems sometimes.

My vertical Spry is not displaying properly in IE 8

I am working on my first website using Dreamweaver CS4 and my spry is not displaying properly over my flash photo gallery. It looks ok in Firefox (although the borders are missing on my submenu for "sheds tool list") but in IE 8 the submenus can't be seen. How can I correct this?
My website is www.toolshedstudio.com
Here's my css:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 10em;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 170px;
    border-top-style: outset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: outset;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 1px none #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: #000;
    padding: 0.5em 0.75em;
    color: #CCC;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #33C;
    color: #000;
    font-size: 100%;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #33C;
    color: #FFF;
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.MenuBarVertical 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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

Hi
You flash movie doesn't have the parameter wmode=transparent. If you set that, the menu bar will be on top.
<param name="wmode" value="transparent">
I hope this helps.
Ben

Some websites do not display properly or function

Using Firefox v29.0.1; running Win 7 Pro 64-bit version.
Some websites do not display properly - as if Firefox is not finding the CSS (Facebook for one).
Also, on Craig's List, I can't click on any of the links including the contact/reply button.
Wanted to attach screenshots but see no place to do so.
Thanks,
paulp575

Looks like something in my history must have been causing it.
That's the only step I needed to go through and seems as though everything has cleared up - for now.
Thanks Phillipp for your help!
paulp575

Upgrade to ver 1.6 pages not displayed properly in Firefox

Hi,
I upgraded HTML DB to Ver. 1.6 today. The installation was okay, did not raise any errors, but when I use Firefox to log on to HTML DB, the pages are not displayed properly. IE is able to resolve the pages correctly.
Do I need to get a plug-in for Firefox? Ver. 1.5 was working perfectly with Firefox.
TIA

My design view won't display properly in Mozilla or IE. The images show. The CSS (core and flow) are found according to the access logs. But it doesn't display nicely at all. This was an upgrade from 1.5 to 1.6. 1.5 looked fine. My old applications from 1.5 display properly.

Web page not displaying properly - content in wrong place

It's been years since I've done html and this is the first time using Dreamweaver. All my pages have the same header then a horizontal row of link buttons. I have used Divs to create 3 sections of content underneath this. Each div has the following defined for it: #Div { position:absolute; width:913px; height:440px; z-index:1; left: 10px; top: 302px; My main page is not displaying properly. There is a section on the left with text/photo. To the right of this section, there is a second div containing an image map. In Dreamweaver, I preview the page (using Chrome) and it looks fine. However, when I upload it to the web site and then view that page in the web site, the second div is thrown to the upper top right of the page. I do not know what is causing this and how to fix it. Can anyone answer this and perhaps give me some tips?

Start by fixing your HTML errors. You have a significant number of them.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fgivethegaveltotavel.com%2F
Also, you have some CSS errors.
W3C CSS Validator results for http://givethegaveltotavel.com/ (CSS level 2.1)
Position:absolute is never a good way to layout your web pages. For 98% of what you do, positioning is not required and should be avoided. Learn to use CSS margins, padding and floats to align elements where desired.
CSS margin property.
CSS padding property
CSS Float
Nancy O.

Lately pdf files from the Web do not display properly; what is wrong and how can I fix it so I don't have to use IE?

I am a professor and frequently need to open pdfs of academic journal articles from electronic databases. Within the last two or three weeks, when I try to do this using Firefox, only the first page of the pdf displays and the rest are blank. In addition, a bar appears across the top with the message "This pdf file may not display properly." So I have had to switch to Internet Explorer to open the files and do my research. What is going on and how can I fix it so I can open pdf files from the Web in Firefox and have them display properly?

My question is simple - why would you put an application in production that has a lot of bugs? To replace a good and steady Adobe product? My customers will believe that I put a pathetic fallible form online. They are not sophisticated on computers so I just tell them to use IE. Ugh
I must agree with pgwebgirl!

Why is my youtube webpage not displaying properly?

My youtube webpage is not displaying properly. its like tthere is only text and thumbnails and the whle webpage is too damn long. The videos don't play when clicked. Problem on both firefox and chrome. I disabled kaspersky av but it didnt make any difference cuz i thought the firewall mustve been blocking something. check screenshot attached.

You can try these steps in case of issues with web pages:
You can reload web page(s) and bypass the cache to refresh possibly outdated or corrupted files.
*Hold down the Shift key and left-click the Reload button
*Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
*Press "Command + Shift + R" (Mac)
Clear the cache and remove cookies only from websites that cause problems.
"Clear the Cache":
*Firefox/Tools > Options > Advanced > Network > Cached Web Content: "Clear Now"
"Remove Cookies" from sites causing problems:
*Firefox/Tools > Options > Privacy > "Use custom settings for history" > Cookies: "Show Cookies"
Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
*Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
*Do NOT click the Reset button on the Safe Mode start window
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

Itunes 9 Store - Not Displaying Properly

I am having problems with the iTunes store not displaying properly. I can see the album art, but the background is black. I can not see any of the text and I can not see most of the blue play buttons. This all occurred after upgrading to Itunes 9. What options would I need to change in my anti-virus/security programs in order to potentially correct this issue. I really don't want to have to totally uninstall Itunes and reinstall everything. Help is appreciated.

I can see the album art, but the background is black. I can not see any of the text and I can not see most of the blue play buttons. This all occurred after upgrading to Itunes 9
Drgoo's suggestion from the following post might be worth trying with that:
http://discussions.apple.com/message.jspa?messageID=10390276#10390276

Images not displayed properly

[Migrated from the Syclo Resource Center]
prashanthi_vangala   01/03/2012 06:44,
Hi,I am working on Agentry 5.4.0I have a list screen where for one of the columns I have a rule to display images ( I use checked and unchecked images ). Earlier the images were getting displayed properly on the ATE but it is not working now and I did not make any changes to the image properties then.But after this, I tried couple of things with the image properties to make it work, like when I do not use any mask colour the image does not get displayed but when i use any maks colour the image gets displayed but its completely blacked out ( and thus for checked image, cannot see the check mark and its completely blacked out ).I face same issue with the login image as well. I added a new Image ( Logo ) to my App for the login Screen, but even this image does not appear on the login screen.
I also tried deleting the Dev folder and re-publishing, but even this does not work.
-Prashanthi
Jason Latko   01/03/2012 11:42
Try deleting the Application directory under your development server where the images reside and publish again.
Completely clear your ATE and transmit again from scratch.
Also, what mask color are you using?
Try using a green hugh and not black or white for the mask.
Jason Latko - Senior Product Developer at Syclo
prashanthi_vangala   01/03/2012 12:38
Hi Jason,Thank you for the reply.I already tried all the things you have mentioned, but the same issue exits still.
Prashanthi
Jason Latko   01/03/2012 12:40
Is it just the ATE, or do you have the same problems using the WIn32 or PPC clients?
Jason Latko - Senior Product Developer at Syclo
prashanthi_vangala   01/04/2012 06:21
Hi Jason,Behaviour in ATE:I have changed the image now and tested with the new image . Now, its behaving strangely:When I do a sync after publishing or a reset of ATE; I see the new image properly displayed on the screen but when I leave the screen and come back to the same screen again, the new image is getting replaced by the old image ( atleast the old image is not displayed properly, it appears like a black square box..and because of the same issue I had with this image I switched to the new image ). Behaviour in Win32 Client:When I tested with the client, I see the new image properly for the first time and when i leave the screen and come back the image disappears..This is the behaviour in client.
Please suggest.
-Prashanthi
Jason Latko   01/09/2012 11:35
Prashanthi,What did you use to create these images?
They are simple bitmaps I assume?
Try creating some very simple images using Microsoft Paint, then set a mask of green in Agentry.
Your problem sounds familiar, but I can't find a matching bug in our database.
Maybe someone else has experienced this?
You could also try upgrading to a newer version of Agentry to see if the problem goes away.
We are currently on version 6.0.4.Jason Latko - Senior Product Developer at Syclo
prashanthi_vangala   01/11/2012 10:02
Hi Jason,
Thank you for the reply.
But strangely, from past few days I see that the image is working fine again.
But kept this topic open because it was wierd, that the image is working correctly again without making any major change. What I did was to just write the rule again which calls the image ( though i did this before and did not work then but worked now ) and to observe the image behaviour for few days.But it seems like it is fine now.
Thanks and Regards,Prashanthi

We am using "jv:imageButton" tag for displaying the image and below is the tag code,
<jv:imageButton styleClass="buttonStyle"
selected="true"
onclick="networkCanvas.setInteractor(clientSelect)"
image="../oracle/communications/inventory/ui/images/arrow.png" buttonGroupId="interactors"
rolloverImage="../oracle/communications/inventory/ui/images/arrowh.png"
selectedImage="../oracle/communications/inventory/ui/images/arrowd.png"
title="#{inventoryUIBundle.SELECT}"
message="#{inventoryUIBundle.SELECT}" />
The able code is present in the below path,
..\public_html\oracle\communications\inventory\ui\network\page\NetworkView.jsff
The images are present in the following path,
..\public_html\oracle\communications\inventory\ui\images\zoomrecth.png
I am not thinking this is a Platform Beta 3 uptake issue. And I am suspecting an issue with integration of ilog with ADF. Any help in this regard would be helpful.
regards,
Chandra
Edited by: user638992 on Feb 25, 2010 3:40 AM

Ads are not displaying properly in Safari, v 4.0.5

I am having an odd problem with display ads from our local newspaper not displaying properly on my Mac Pro in Safari. I suspect that the issue might be related to having had some AdBlock app on my system a few months ago. I removed the app and some ads display, but others are just a white block with nothing inside. Is there any way to figure out why the content doesn't load?
The website is http://www.echopress.com
The ads I'm having issues with are the 300x250 ads in the right 3rd column, located directly below the weather info and above the "marketplace" ads.
Any ideas or troubleshooting tips?
Thanks,
Grady
Oh, why do I wanna see em in the first place? I'm an advertiser on the site and would like to see my own ads load occasionally.

Hey ho, Grady!
I can see all the ads on the right,
with the exception of the very top (first) box
which has the header of "Weather Alerts).
It's blank, and I'm assuming you have no alerts at the present.
All the rest of the paid for ads show.
So, what I would do is clear my Safari cache, history, and
in Preferences>Security, clear all the cookies from that site.
Hope this helps.
If you need more info just holler.
Let us know how you're doing, OK?

Elements Organizer 8 - some WMV are not displayed properly in the Play Video but are in Play Vide

Hello:
Elements Organizer - some WMV are not displayed properly in the Play Video but are in Play Vide on Full screen. What's the problem? Wrong codec?

Because WMV's can contain a lot of flags, like DRM, they can exhibit odd behavior, indeed.
Usually, AV files will display in their native resolution, i.e. in their set Frame Size/Aspect Ratio and with their set PAR (Pixel Aspect Ratio), but sometimes those flags are missed, or are altered by other programs.
Remember, WMV's are designed to be streaming delivery-only, and are not intended, or designed to be edited. Most NLE's (Non Linear Editors) will allow them to be edited, but will require extra processing to do so. As is mentioned, WMM is designed around editing that delivery-only format, but most others are not.
There are many other formats/CODEC's, that ARE designed to be edited by the vast majority of NLE's, such as DV-AVI Type II's.
The best workflow is to NOT bring WMV's into the mix, unless one is using WMM exclusively. Converting those to an easily editable format/CODEC will always be the best course of action.
Good luck,
Hunt

PDF not displaying properly in Acrotbat

Hi all,
I'm having an issue with a document I have created in Photoshop not displaying properly when opened in Acrobat. It is a brochure for my work, that I have worked on and printed many times. When I open it in Acrobat after creating the PDF, gaps appear and other elements are shifted out of place. When viewing it in Photoshop, those gaps are not there, even when I zoom in very close. When we open the file on other computers with Acrobat, the gaps are still there. To test the PDF further, I downloaded some free PDF viewers off the net and the document looks the way it was created, the way it should be. I don't know how to fix it and certainly don't want the gaps appearing when it goes to print. Any ideas on how to fix this? I've never previously had this problem. Thank you in advance for your help.
Leah

Without access to the files it's impossible for us to help. Acrobat will be displaying the PDF "correctly", but why the page contents are shifted is anyone's guess.
When you save as "Photoshop PDF" and choose the "Preserve Photoshop Editing Capabilities" option, it embeds a copy of the PSD file into the PDF and will open that whenever you try to open the PDF in Photoshop, which is why you don't get the import dialog. Photoshop never even reads the PDF page contents. Turn off that option, save to PDF again, and then open it in Photoshop - you'll see the true PDF page being imported as a graphic, and it'll match what Acrobat is displaying.

CSS not displaying properly

Similar Messages

Maybe you are looking for