Firefox ignores CSS and renders sites poorly
Remember what websites looked like in 1995? No formatting, no background - just black text and blue hyperlinks.
well, this is what I see now in Firefox. :( No CSS - no graphics - just text and links on white b/g.
Clear Cookies & Cache
* https://support.mozilla.com/en-US/kb/Template:clearCookiesCache
Clear the Network Cache
* https://support.mozilla.com/en-US/kb/How%20to%20clear%20the%20cache#w_clear-the-cache
Troubleshooting extensions and themes
* https://support.mozilla.com/en-US/kb/Troubleshooting%20extensions%20and%20themes
Check and tell if its working
Similar Messages
-
I run Windows-XP SP3 and I can't get the image from a Siemans Gigaset cam. There is an error in the cam code (a lacking rutine) . IE8 ignores this and displays the image anyway.
Is it possible to get a notification like Ignore/Abort/ Continue ???Does the documentation for that camera, or for the software with it, say anything about ActiveX or about H.264?
If so, it isn't compatible with Firefox - it doesn't do ActiveX and it doesn't support H.264 in the HTML5 standard. Microsoft just released a plugin for Firefox that adds H.264 support to Firefox, but IIRC that only covers Windows 7 - not WinXP. -
Firefox ignores CSS rules I have set
So, if you look at my site:
http://leaveyourdailyhell.com
In, say, Chrome and Firefox, you will see vastly different things. In Chrome, it looks as I intended; namely, the strip of WordPress custom-loop posts on the front page and at the top of every "single post" has properly-sized, left-floated thumbnails. In other words, it obeys the CSS rules I have set. (And CSS copy I have, for the record, W3C validated -- it came back perfect.)
In Firefox, however, both of these DIVs ignore the CSS rules I set. No floats; images are their original sizes and, on the single page, where the strip of posts is supposed to have a custom background, it is nowhere to be found. It doesn't even obey simple rules, such as ascribing a custom color to the links. When I right click to inspect the elements, the CSS rules are nowhere to be found!It looks like you've marked my previous post as the solution. Based on your reply afterwards, I take it that was done in error. If you've figured out what the problem is on your own, others might appreciate it if you shared the solution.
Can you post a screenshot comparing what you see with what you're expecting to see? This is what your site looks like to me, in the latest version of Firefox. I see nothing wrong with it at first glance.
Your site relies on third-party content from www.hellobar.com, ajax.googleapis.com, fonts.googleapis.com, and possibly others. It will look wrong if Javascript is disabled, or the third-party content is blocked in an extension like Adblock Plus or NoScript.
* [[Websites look wrong or appear differently than they should]] -
I kept getting performance issues with Firefox 3.6 from the add-ons to crashes. I then chose to try Google Chrome as the main browser and somehow it uninstalled the Mozilla Firefox and all the toolbars, bookmarks and all were uninstalled without importing.
On one hand it's good since the browser is cleaner and functioning better now especially after many attempts with YouTube and other video streaming sites.
Is there a way to retrieve all those lost items or are they considered gone?
Thanks for your assistance.Please read this article about restoring bookmarks:
http://kb.mozillazine.org/Lost_bookmarks
As far as your passwords are concerned, I don't think there's anything you can do. But for the future, you can use the following add-ons to avoid any future loss:
https://addons.mozilla.org/en-US/firefox/addon/2848/
or
http://www.xmarks.com/
Both are good.
And a simple way to import your bookmarks (since you already saved it on your desktop as html) is:
Bookmarks / Organized Bookmarks / Import and Export
Good luck. -
Using the Genesis Framework on my WordPress site. I can use Safari and IE. However, when I try to use Fire Fox, it will not appear. I deleted all of my Custom CSS and Functions. Still, nothing is working. Contacted bluehost, the representative there was not able to help me out and also emailed CD Baby to see what might work. I am not sure if it is something with my site using HTTPS instead of HTTP of why this is not working? I am told the plugin works on Fire Fox but I cannot for the life of me figure out what's going on. Also changed themes and used Twenty Thirteen among others. Still the same thing. Fire Fox will not work. Tried in Text widget, and pasting on a page, and still not working. IE and Safari it is fine. Do I need to add something else within my site? Thanks ahead of time for any way to solve this situation.
There is mixed active content loaded in an iframe that Firefox is blocking as you can see by the shield icon at the left end of the location/address bar.
*https://developer.mozilla.org/Security/MixedContent
*https://developer.mozilla.org/Tools/Web_Console -
I would have preferred to show anyone a screenshot of the web pages, but there is not an attach file on this forum. Anyway, with only Firefox OS , not my other browsers, the web pages are not rendering correctly. For example on Facebook there is no header or footer. JS is active in the browser and as I said Chrome and Safari are NOT having any problems. I am surmising that the CSS and JS files are somehow not being displayed. I may be very wrong, but I would gratefully accept any help someone has to offer. Thank you and have a great day!
TheresaHi Lufte,
I'm sorry to hear you are having issues with the rendering of some pages on your Firefox OS device.
Please create a new question in the thread so that we can track your issue separately:
* [https://support.mozilla.org/en-US/questions/new Ask a new question]
Please also provide the device model and version that you're currently using, and whether this issue started recently. Please let us know if you also notice any issue with the time and date displayed in your device.
Thanks,
- Ralph -
Spry Menu Bar 2.0 (1.0) - Handling of widget generated CSS, placement and rendering problems in CSS
Hello:
I wanted to repost my question to re-frame the issue based on what I have learned thus far.
I am working on a website that has been developed using the Spry Menu Bar Framework UI (2.0) I.0, that has some peculiar rendering problems that affect IE 6 in particular. The CSS is reprinted below.
In particular, when I post the widget generated CSS in the head as it is orginally situated by the framework, the menu bar works fine. However, it seemed to me that I should be able to reduce page weight (an important consideration considering my target population) by placing it in the general style sheet governing the entire site.
When I place the styles at the beginning of the style sheet the menu doesn't render at all in any of the browsers (IE 6+, Firefox, Opera, Safari, Netscape, etc.) as it conflicts with the general rules governing links that appear later in the style sheet. When I place the styles specific to the Menu bar at the end of the style sheet, then the menu bar renders properly in all browsers except IE 6.
The odd thing is that the only way to ensure that the menu bar works in IE 6 is to keep the menu related styles in the head of each page. This raises problems related to page weight (not an insurmountable consideration if no other solution can be found) but still an issue. Likewise I need to support IE 6, again given the target audience/population. The issue obviously has something to do with specificity, but I am not certain that is the only consideration at work here. I have not tried the !important selector in regard to the menu, as IE 6 seems to only partially support this.
Thanks in advance for any advice or insight that can be provided. Thanks in particular to Martin for his contributions to my earlier question related to this issue.
Steve Webster.
The CSS governing the horizontal menu bar is as follows: (currently the following CSS is embedded in the head of the web page)
<style type="text/css">
/* -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles -- */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 17px;
font-style: normal;
padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 10px 10px 10px 4px;
background-color:#000088;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
background-repeat:repeat-x;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 0px 18px 0px 5px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
font-style: normal;
background-color:#000088;
padding:0px 2px 0px 0px;
border-width:0px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: none;
padding: 0px;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 0px;
#MenuBar .SubMenu .MenuItemLast {
border-style: none none none none;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 10px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 10px 10px 10px 10px;
width: 240px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #2E35A3;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
background-repeat:repeat-x;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color:#2E35A3;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of theMenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
* all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lotof these needed, the plugin does not generate the extra classes formodern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these,as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.jsscript.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
/* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
</style>
The CSS governing the site generally is reproduced below: (my belief is that it is the a:link, a:visited, a:hover, a:active styles that may be in conflict).
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
min-height: 0; /* This is necessary to overcome the "haslayout" bugthat is found in Windows 7 in conjuction with IE8. For Moreinformation see: URL -- http://reference.sitepoint.com/css/haslayout.html */
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align:center; /* This allows for the centering of the container and overcomes a bug inherent in IE 5 */
color: #000000;
list-style-image: none;
background-color: #FCFCFC;
h1,h2,h3,h4,h5,h6 {
color:#000066;
a:link {
color: #151A96;
text-decoration: underline;
a:visited {
text-decoration: underline;
color: #1B8DCD;
a:hover {
text-decoration: none;
color: #F30A0A;
a:active {
text-decoration: underline;
color: #151A96;
#container {
width: 960px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection %20_960.png);
background-repeat: repeat-y;
#header {
padding: 0; /* this padding matches the left alignment of the elementsin the divs that appear beneath it. If an image is used in the #headerinstead of text, you may want to remove the padding. */
width:960px;
height:332px;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960 .png);
background-repeat:no-repeat;
#header h1 {
margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
display:none;
#header img {
display: none;
#Main_nav_contents {
padding: 0;
margin-top: 0px;
height: 39px;
width: 950px;
padding-top: 275px;
padding-left: 39px;
z-index: 3;
#MenuBarVertical {
margin-bottom: 50px;
padding-top: 50px;
padding-bottom:200px;
padding-left: 15px;
padding-right: 15px;
.mainContent_left {
margin: 0;/* the right margin on this div element creates the columndown the right side of the page - no matter how much content thesidebar1 div contains, the column space will remain. You can removethis margin if you want the #mainContent div's text to fill the#sidebar1 space when the content in #sidebar1 ends. */
padding-left:30px;
padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
width: 600px;
float: left;
.sidebar_right {
float: right; /* since this element is floated, a width must be given */
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
margin-top: 30px;
margin-left:0;
margin-right:10px;
font-size:90%;
.mainContent_right {
margin-left: 10px;
padding-left:30px;
padding-right:20px;
width: 600px;
float: right;
.sidebar_left {
float: left; /* since this element is floated, a width must be given */
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
margin-top: 30px;
margin-left:30px;
margin-right:0;
overflow: hidden;
font-size:90%;
.main_content_centered {
width: 650px;
margin-left: 155px;
.main_content_centered_header {
margin-left: 75px;
.sidebar_textbox {
margin: 0px;
width: 260px;
padding: 2px;
.sidebar_textbox_header {
width:255px;
height:58px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Por trait%20Textbox%20Header.png);
.sidebar_textbox_background_middle {
width: 255px;
padding-top: 12px;
padding-bottom: 10px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Por trait%20Textbox%20Middle.png);
background-repeat: repeat-y;
.sidebar_textbox_content {
/* The width and padding are set as follows to accomodate quirks inbrowser rendering and to ensure that text is contained within thebackground of the text box */
width: 230px;
padding-left: 20px;
padding-right: 40px;
.sidebar_textbox_footer {
width:255px;
height:64px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Port rait%20Textbox%20Footer.png);
#issues_menu a:link {
color: #151A96;
text-decoration: none;
font-weight:bold;
#issues_menu a:visited {
color: #151A96;
font-weight:bold;
text-decoration: none;
#issues_menu a:hover {
color: #F30A0A;
font-weight:bold;
font-style: oblique;
text-decoration: none;
#issues_menu a:active {
color: #151A96;
font-weight:bold;
text-decoration: none;
#archives {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 0px;
.landscape_textbox {
width: 500px;
margin-right: 0px;
margin-left: 30px;
padding-top:35px;
padding-bottom: 25px;
font-style: normal;
font-weight: normal;
.landscape_textbox_hdr {
width:500px;
height:38px;
margin:auto;
padding:0;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%2 0Header.png);
.landscape_textbox_middle {
width:auto;
margin:auto;
padding-top: 12px;
padding-bottom: 12px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/lan dscapte%20Textbox%20Middle.png);
background-repeat:repeat-y;
.landscape_textbox_content {
width:450px;
padding:25px;
.landscape_textbox_ftr {
width:500px;
height:44px;
margin:auto;
padding:0;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Lan dscape%20Textbox%20Footer.png);
#footer {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
width: 960px;
height: 222px;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_ 960.png);
background-repeat:no-repeat;
#footer p {
margin: 0px; /* zeroing the margins of the first element in the footerwill avoid the possibility of margin collapse - a space between divs */
padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
text-align:center;
margin-left: 50px;
margin-right: 50px;
padding: 10px;
font-size: small;
#footer h5 {
text-align:center;
.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 */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.dropcap {
display: block;
float: left;
line-height: 80%;
font-size: 250%;
font-weight: bolder;
color: #000066;
padding: .03em .1em 0 0;
.red_arrows {
list-style-position: outside;
list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);
.blue_bullets {
list-style-position: outside;
list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Fu ll.png);
.attention {
color: #F30A0A;
font-size:x-large;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight:900;
.attention_small {
color: #F30A0A;
font-size:large;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight:900;
.table {
table-layout:fixed;
.blue {
color: #00F;
#container .mainContent_left p .blue {
color: #0303A0;Hi Nancy:
The specific code that I am referring to is the CSS code governing the styling of the spry menu widget that only works in IE 6 if, and only if, it remains in the head of the web page. If removed and placed in a stylesheet, the IE plugins fail to compensate for the IE 6 "gap" bug. As I said, it doesn't make sense to me that, assuming specificity is addressed, that these can not be included in an external style sheet. I am looking for a) an explanation why they must remain embedded in the web page; and 2) any means by which I might be able to export them.
I will reproduce the specific css style (code) below: it should also be visable through reveal source --
Thanks again, Steve Webster.
The CSS governing the horizontal menu bar is as follows: (currently the following CSS is embedded in the head of the web page)
<style type="text/css">
/* -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles -- */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 17px;
font-style: normal;
padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 10px 10px 10px 4px;
background-color:#000088;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
background-repeat:repeat-x;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 0px 18px 0px 5px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
font-style: normal;
background-color:#000088;
padding:0px 2px 0px 0px;
border-width:0px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: none;
padding: 0px;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 0px;
#MenuBar .SubMenu .MenuItemLast {
border-style: none none none none;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 10px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 10px 10px 10px 10px;
width: 240px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #2E35A3;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
background-repeat:repeat-x;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color:#2E35A3;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of theMenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
* all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lotof these needed, the plugin does not generate the extra classes formodern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these,as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.jsscript.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
/* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
</style> -
Basically I want to replace the Ajax Control Toolkit Slider in favor of the Component One Studio for iPhone Slider for better mobile/desktop consistency (the ajax slider doesn't work well with iPhone). I created a simple page that works on every browser and platform (iPhone, Android, Mac, Windows) except Firefox, which fails on every platform. I have already tried disabling all plugins (safe mode) and clearing cache, I have also tried this with different versions of Firefox on different platforms. I posted this error on the Component One forum but since this only occurs with Firefox I believe this is a Firefox issue.
I searched for this error on the forums and Google but didn’t get any results:
''[e2219] css init error: ReferenceError: g is not defined''
The console has this message:
''[12:05:26.954] uncaught exception: [Exception... "prompt aborted by user" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: resource:///components/nsPrompter.js :: openTabPrompt :: line 462" data: no]''
You can see the error by visiting http://www.componentone.com/i/
Visit the same URL with IE, Chrome or Safari and there is no error. If I click [OK] the page loads normally enough for me. Is there some JavaScript or CSS line I can put in the page to make Firefox ignore the error? If so that would be great because even if there is a fix put into Firefox itself there will be those millions of users out there that will not upgrade.A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.
*http://forums.mozillazine.org/viewforum.php?f=25
The helpers at that forum are more knowledgeable about web development issues.<br>
You need to register at the MozillaZine forum site in order to post at that forum. -
Safari Rendering Site Text Poorly
Hello- Thanks in advance for your thoughts.
I've created a site (in RapidWeaver) and lately, Safari is rending the text pretty poorly. I don't know if its the font I'm using or if its Safari. Looks nicer in Windows 7 and Firefox (can't believe I'm saying that).
Any thoughts? Is it OS X, Safari or Fonts I'm using?
Thanks for the help.
http://www.simdevgroup.comMr. Bill--
If the site in question is on the link you gave, it read fine on my MacBook. It might be Safari, but having had some website building experience (and enough HTML to be considered dangerous), my guess is that it's your font. Keeping in mind that Arial, Time New Roman, and (for some bizarre reason) Courier are considered "standard" and renderable on all computers--and anything else may/may not be iffy--is why I'm thinking font.
OSX shouldn't be your culprit; the OS should have no bearing on what something looks like per se. It --might--be Safari...but like I said: the site in question is on the link you gave, it looked okay to me.
Hope this helps--
Doc -
Firefox 4.0b1 and b2 rendering incorrect weight of some fonts
Firefox 4.0b1 and b2 rendering incorrect weight of some fonts
The first thing I had noticed when I upgraded from FF 3.6 to 4 beta 1 was that Firefox was incorrectly rendering fonts as bold. After some digging I found out that it was the font-family:"helvetica neue" line in the css file that was causing the ugly bolded font (black weight, actually). After editing the css to "Helvetica 55 Roman", the font displays okay.
Example site: https://addons.mozilla.org/en-US/firefox/?browse=featured
The thing happens in the very mozilla addons site.
Also have noticed that the same bug occurs on different fonts, where the font name in css is specified in alternative namings, as in "나눔 고딕" for NanumGothic (korean font).
The bug didn't seem to have fixed in beta 2, nor could I find any other thread/document on the web with the same problem. I doubt it's my own problem, since it worked just fine in older versions and I have the very same font files installed since the start.
Screenshot: http://i25.tinypic.com/zy9co2.jpg
== This happened ==
Every time Firefox opened
== Open certain websites with css font-family:"helvetica neue" in the stylesheetsI sympathize with you all, and I spotted Kimatg at the Bugzilla forums. My Firefox 3 is all right with Helvetica and Neue Helvetica in PostScript, TrueType and OpenType. However, my Firefox 4 Beta 7 through 9 goes nuts.
Compared to the situations above, all I can say is: at least you are getting your pages in the right font family or even in the right typeface. Attached are some pages in Helvetica that my Betas are showing. They don’t even come close to ''a typeface'', let alone Helvetica.
It’s not just Helvetica. Our in-house Arial substitute, Lucire, is also displaying oddly on some pages unless the font is embedded.
Cor-el, I know you are one of the most helpful folks here, and I thank you for your continued generosity. I have to make one correction to your statement: PostScript on Windows generally does not have a bitmap component, unlike on a Mac where it had suitcases. So all these fonts are vector-based.
It shouldn’t make a difference to Firefox’s rasterizer anyway, but, for some reason, on 4 Beta, it does. -
I am using the Firefox 3.6.3 version with my new Windows 7 operating system. When I used all the previous Firefox versions in my XP and Vista operating systems, image quality and resolution was excellent! However, now that I have upgraded to Windows 7 and Firefox 3.6.3, the image quality and resolution is poor (unacceptable for downloading purposes).
== This happened ==
Every time Firefox opened
== I first activated my new computer and installed the Firefox 3.6.3.All my images are pixelated in firefox 3.6.3
http://www.dcgdcreative.com
Not only on my site but on most sites I view.
The issue is not solved by resetting the zoom text view (ctrl+0)
The issue is not resolved by starting in safemode with add-ons disabled
The problem seems to only affect .jpeg files and only on Windows 7 on my desktop; as I have viewed several sites using windows XP with my laptop, no issues.
I had the same issue with IE8 and was able to fix the problem with by setting up the compatibility view for all sites. Issue fixed no problems at all. But nothing similar for firefox?
Whats the deal? -
The Firefox guys have done an update recently and since then,
pages that previously displayed OK in Firefox (not exactly the same
as IE but acceptable) now look very different.
www.geckoheadgear.co.uk has dropped much of the CSS instruction,
other sites have minor changes in text colour etc. Are there
specific changes that I should be making to the CSS code to ensure
parity in Firefox/IE please?
IanFThey look primarily the the same to be in both IE and FF,
however, there is
a fraction of a difference in that the jumpt menus at the top
of the page,
are a bit higher in IE than in FFox.
I don't have time to check your css or html, but it's
probably an IE issue
with margin or padding.. maybe something to look at anyway.
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.macromedia.com/devnet/dreamweaver/css.html
- CSS Tutorials
"bindlestiff7" <[email protected]> wrote in
message
news:e3qobf$saj$[email protected]..
> The Firefox guys have done an update recently and since
then, pages that
> previously displayed OK in Firefox (not exactly the same
as IE but
> acceptable)
> now look very different. www.geckoheadgear.co.uk has
dropped much of the
> CSS
> instruction, other sites have minor changes in text
colour etc. Are there
> specific changes that I should be making to the CSS code
to ensure parity
> in
> Firefox/IE please?
>
> IanF
> -
after updating to Firefox 7.0.1, menu bar for Google(web ,image,video,map etc),yahoo, Facebook (message,notification,profile,home) and others site are disabled. even I cant log out from different sites cz the log out bar is completely disabled. I tried with Firefox 4;5 and 6, same problem exist . I tried by active all add ons for facebook, same problem exist. If I use internet explorer , I don't find such problem with it.
How can I solve this problem?Thanks a lot for your swift response. And sorry if it was a bit too hectic to go through my detailed query (which I did because it was misunderstood when I asked previously). As I've mentioned above, I was informed that updating to 5.0.1 would '''require''' me to '''delete''' the current version and then install the new one. And doing so will involve losing all my bookmarks. I guess I should have been more specific and detailed there. By losing, I didn't mean losing them forever. I'm aware that they're secured in some place and deleting and installing the software doesn't harm its existence. What I meant that if I install the new version, I'd have to delete the old one. And after installing the new version, I'd have to transfer them (bookmarks) back from wherever they are. Get it? When it updated from 3.6.9 to 3.6.13, and from 3.6.13 to 3.6.18, I didn't need to follow that process. They were already present on their own.
BTW, I'm having no problems with 3.6.18 but after learning about the existence of version 5.0.1, I'm a bit too eager to lay my hands over it.
Thanks for your help; hope this wasn't extremely long. -
Firefox won't open website(site requires flash player) - my other browsers open it successfully, flash player is installed correctly and is the up to to date version, using Firefox 4
Hi there
Sorry, but you aren't in the right place for getting help with this. Try clicking the link below and choose a forum dedicated to Adobe Flash.
Click here
Best of luck to you in resolving your issue! Rick -
Updated Kaspersky to 15.0.0.463(a) - ( comes with "safe money" - now turned off).
Updated Firefox from (old) version to 32.0.3.
Barclays bank site loads properly, and allows access to accounts BUT when I try to look at a statement, Firefox "not responding" and a blank/ unresponsive page is displayed.
In order to acheive any movement I have to close firefox... this gives rise to windows wanting to send error data, and Firefox apologising for loosing the tab.
None of which allows me to do essential banking transactions.
It is this machine that has the problem - I can access without problems via work computer (using google Chrome)My guess is that your statement is a PDF document, since banks and other companies often use that format for statements.
Firefox has various options for viewing PDFs, including a built-in PDF viewer (not as full featured as Adobe's), or the option to use a plugin such as Adobe Acrobat, or to launch the PDF in an external application. This article describes how to experiment with that setting: [[How to disable the built-in PDF viewer and use another viewer]].
On another subject, your plugin list has various plugins described as "Google Chrome Extension". I haven't seen that before. Could you review the list and see whether they really should be active in Firefox or can be deactivated?
Open the Add-ons page using either:
* Ctrl+Shift+a
* "3-bar" menu button (or Tools menu) > Add-ons
In the left column, click Plugins.
For those that are not essential, I suggest changing them to "Never Activate". This might not take effect immediately in that window, but should disable them in new windows.
Maybe you are looking for
-
Can anyone help me to edit this picture?
Like the writing in the background. How can I warp the text like that? Nor curved, just straight like in the picture. http://media2.firstshowing.net/firstshowing/img6/OscarsBigFigurePosterTeleFull5803sv.jpg
-
query to find total number of peoples in a office and also number of peoples who were in the year 1991, 1992, 1993, 1994 eg: Table Name_ DOJ_ aaa 21-05-92 bbb 03-10-93 ccc 30-12-93 ddd 28-05-91
-
Setting up new ini with exisiting itunes
I just bought a new mini ipod from a friend. How do I make sure all the songs stored in my itunes will transfer properly? And, how do I register the new ipod to myself? Thanks
-
Fails to upload to Picasa " Failed to retrieve account information"
Every time I try to upload a picture from my gallery to Picasa I get and message " Failed to retrieve account information" . I have full strength 4g and data connection is good, my Picasa albums show up in my gallery, but I can't add a photo to an al
-
Does iMovie offer a simple way to split a movie for upload to YouTube?
Is there some way that I can tell iMovie to take the entire length of a movie and divide it into X# of parts and save the parts to the project library? For example. I have a 24 minute movie and I need to get it into (3) equal parts. Is there some way