Css to prevent margin collapse
by giving block level elements a border, it prevents margin
collapse.
Is there a CSS element that will have the same effect without
actually
displaying a border?
Alex
I agree, I should have said a border 'acts' like a barrier ..
although it
really isn't.
Regards,
..Trent Pastrana
www.fourlevel.com
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> It is evocative.
>
> --
> 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
> ==================
>
>
> "T.Pastrana - 4Level" <[email protected]> wrote in
message
> news:[email protected]...
>> Yes, technically but it is the best description I
could give.
>>
>>
>> --
>> Regards,
>> ..Trent Pastrana
>> www.fourlevel.com
>>
>>
>>
>>
>>
>> "Murray *ACE*"
<[email protected]> wrote in message
>> news:[email protected]...
>>> The border is inside the margin, Trent.
>>>
>>> --
>>> 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
>>> ==================
>>>
>>>
>>> "T.Pastrana - 4Level" <[email protected]> wrote
in message
>>> news:[email protected]...
>>>> It's not just because the element is block
level. Margins collapse
>>>> whenever one margin comes into direct
contact with an adjacent margin.
>>>> Placing a border on the element(s) does fix
this as it places a barrier
>>>> between the margins. Other ways to stop this
from happening is to know
>>>> that elements set to a position of relative
or absolute do not collapse
>>>> margins. Also if the element is floated it
will not collapse.
>>>>
>>>> Hopefully one of these methods will help
you.
>>>>
>>>> --
>>>> Regards,
>>>> ..Trent Pastrana
>>>> www.fourlevel.com
>>>>
>>>>
>>>>
>>>>
>>>> "Alexander Ross" <[email protected]>
wrote in message
>>>> news:[email protected]...
>>>>> by giving block level elements a border,
it prevents margin collapse.
>>>>> Is there a CSS element that will have
the same effect without actually
>>>>> displaying a border?
>>>>>
>>>>> Alex
>>>>
>>>>
>>>
>>>
>>
>>
>
>
Similar Messages
-
How do I prevent tree collapse after insert of row?
Hi,
I've got a tree with several discrattrbindings. It's a recursive tree representing a parent/child relation.
If I add a sub record to one of the children, the tree collapses. The insert is fine and the tree is ok, it's just that it completely collapses everytime I add something. How do I prevent this? This is extremely annoying for users.
(jdev9031 on win2k)
Greetings,
IvoI've got some additional info, which I think is a bug.
After the first record is added, the tree is collapsed, as I've said above. Now, if I reopen the tree and then try to open a node (that was previously closed) which has no subitems, then at the moment I click the '+', the entire tree collapses again. If I open a node that contains subs, it's fine, but empty nodes cause the tree to collapse.
This is only after insertion of a row. If I run the app without inserting a row, the tree remains open if I open an empty node. -
CSS Problems: Extra "margin-left: 8px" being added to bold face command.
I'm having a unique and frustrating problem with a RoboHelp project.
When I apply Bold face to text in a numbered or bulleted text, RoboHelp applies the following code: <span style="margin-left: 8px; font-weight: bold;">
I cannot understand why the style="margin-left: 8px clause is inserted into the code. It's causing a large amount of white space before and after every bolded item, and fixing it manually is not a great option for various reasons.
When I apply Bold face to text outside of lists, the style="margin-left: 8px clause is not inserted.
When I click the Bold button (or press Ctrl+B) on selected text, I'd like RoboHelp to add the minimal code necssary: <span style="font-weight: bold;">
Does anyone know how I can fix this?
Notes: I inhertied this project with multiple style sheets, including old .kadov styles and at least seven CSS files. I condensed this down to one CSS file and tried to clean up the file as much as possible. I'm using RoboHelp 8.0.2.Hi Amebr
Does this video help any?
http://youtu.be/hv9T5cJxUgo
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7, 8 or 9 within the day!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks -
Unable to center page layout in DW CS4 using css - using auto margin is not working
Trying to center the page horizontally, here's the css I've got for the wrapper:
#wrapper {
width: 990px;
margin: auto;
padding: 0px;
background-color: #4d4d33;
background-image: url(../images/full_bkg.jpg);
height: 1100px;
background-repeat: repeat;
position: absolute;Thank you osgood, that did work for the entire page layout. However, it created problems with the rest of the layout. Here's the page before I changed the position:absolute. http://renyswildflowers.com/guide.html After making that change the other "columns" moved out of position. I tried various "position" settings for them but none worked.
-
Hello, I would like to create a wrapper to house my entire website which i beleive is common practice. The problem comes in with the height of it. I would like to have my wrappers height (which will hold all of my other div's) automaticaly adjust when i add or delete div's. Is this possible? I have tried setting the height of the wrapper to Auto and 0 Auto.
Thank you for any help you can provide.Wrapper height is automatically determined by the content inside it. You do not need to add height. If your wrapper contains floated elements, add overflow:hidden to your wrapper's CSS to prevent margin collapse.
http://colinaarts.com/articles/the-magic-of-overflow-hidden/
Nancy O. -
Header background color does not work
Hi,
I would like to change the background color of the header element, but it does not work as I imagined
First of all, here is the HTML:
<body>
<div id="wraper">
<header>
<h1><span>Pacific</span> Coastal Highway</h1>
<nav>
<ul>
<li>Home</li>
<li>Big Sur</li>
<li>Pfeiffer Beach</li>
<li>Elephant Seals</li>
<li>Morro Bay</li>
</ul>
</nav>
</header>
// ... some other HTML elements & content ...
</body>
So, within <header> element we have <h1> and <nav> elements, and within that <nav> element there is a list that is actually menu.
Here it CSS code that refers to these elements:
#wraper {
width: 1200px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
body {
margin: 0;
background-color: #CBD2FB;
font-family: "OpenSans Regular", "Gill Sans MT", Arial, "Times New Roman", sans-serif;
color: #202020;
background-image: -webkit-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
background-image: linear-gradient(180deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
h1 {
margin-top: 0px;
font-size: 48px;
text-shadow: 1px 1px 2px #969696;
padding-top: 32px;
h1, h2, h3 {
font-family: "Prociono Regular", "OpenSans Regular", "Gill Sans MT", "Times New Roman", Arial;
color: #507AAD;
text-align: center;
h1 span {
position: relative;
top: -37px;
left: 35px;
font-family: GoodDog, Arial, "Times New Roman", "Gill Sans MT", sans-serif;
font-size: 47px;
header nav ul {
margin-right: auto;
margin-left: auto;
list-style-type: none;
padding-left: 0px;
width: 705px;
/* [disabled]margin-bottom: 10px; */
nav ul li {
float: left;
padding: 10px;
display: block;
width: 110px;
text-align: center;
background-color: #A9A3FF;
border-right: 1px solid #FFFFFF;
border-radius: 23px;
background-image: -webkit-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
background-image: -moz-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
background-image: -o-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
background-image: linear-gradient(180deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
margin: 18px 5px;
And, finally, here's how it looks:
Now, I'd like to change the background color of the <header> element (to chage that white behind that <h1> and menu into some other color), so I just added the background color of the <header> element in CSS:
header {
background-color: #FF2D31;
But, here is how it looks now:
As you can see, although <nav> element with list (menu) is IN <header> element - the background color of <header> is just behind <h1> element.
Do you know why it's happening, and what would be the best way to solve this problem?
Thank you in advance.Ben Pleysier wrote:
The problem is caused when floated children do not force the parent element to clear the floats.
Nancy O. wrote:
It may seem counter-intuitive but overflow:hidden prevents margin collapse on parent elements containing floats:
The magic of “overflow: hidden” — Articles — Colin Aarts, freelance web developer
I'm trying to figure out what happened (and why) in my example, where the problem occurred, but...
I tried with inspecting elements with Firebug - to see what's what in case when there isn't overflow:hidden property that is related to <header> element in this example from the first post:
As you can see in the picture - <header> element is only that blue area containing <h1> element, and although <nav> element (with the <ul> element inside) is IN <header> element - it is not shown within the blue area, as it is not within <header> element.
As for the <h1> element which is inside of the <header> element, when I select it - it looks like this:
Now, purple area indicates the padding-top of <h1> element, and I guess that yellow area which indicates the margin is actually browser's default margin of the <h1> element.
Next, confusing is when I select <nav> element:
Although <nav> element is selected - there is no that blue area indicating where is that element on the web-page... ?
Next, when I select <ul> element, there is only yellow area indicating margin - I guess that yellow area which indicates the margin is actually browser's default margin of the <ul> element.
When I select <li> element - it's the same case as with <nav> element there is no that blue area indicating where is that element on the web-page... ?
Finally, when I select <a> element - it looks like this:
All in all - inspecting all <header> element and the elements within it didn't help me to see what and why this is happening (with the background color of the header element). I think the problem is in me, I'll wait a few days and maybe then things become clearer in my mind
Sorry for my bad English.
Again, thank you all! -
Adding bg image to Dw template
I am using the 2 column right sidebar with header and footer
Dw template which comes with a 250px right margin in the main
content left column div to prevent margin collapse. When I assign a
bg image to the div it gets cut off, even if I subtract for the
margin. How does one deal with the uncertainty inherent in such a
layout?Background images are not affected by container margins.
If the background image is being 'cut off' it means your
container does not
have the dimensions you think it does. Try giving it a border
to see what's
happening.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Paevo Kelley" <[email protected]> wrote in
message
news:fltvus$h8p$[email protected]..
>I am using the 2 column right sidebar with header and
footer Dw template
>which
> comes with a 250px right margin in the main content left
column div to
> prevent
> margin collapse. When I assign a bg image to the div it
gets cut off, even
> if I
> subtract for the margin. How does one deal with the
uncertainty inherent
> in
> such a layout?
> -
http://www.mayakaimal.com/media-press
Can anybody see why my floats aren't working the way they are supposed to? It supposed to be a grid. When I added the most recent item, it got all funky.
thanks!
jInstead of height, try overflow:hidden to prevent margin collapse.
http://colinaarts.com/articles/the-magic-of-overflow-hidden/
Nancy O. -
It seems like iBooks ignores the css property PAGE MARGIN. I set the margin to 5px (@page {margin: 5x}) but iBook just ignores it. Is there a way to make it work?
Hello Glen-
I would have to see what objects your client is requesting, if you had a true loop, no page would be displayed at all. What I would think... You client is going to request more than just 1 object (get the container page, then request css, scripts, images, etc.) Each of those requests is probably being caught by the redirect rule. I would guess that your configuration is not really setup exactly how it should be, but its hard to know without a sniffer trace. Can you post a quick trace for me? email it to [email protected] if you don't want to publicly post it.
Regards,
Chris Higgins
Cisco ANS Escalation -
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> -
Problem with Spry Menu Bar 2.0 (1.0) re - CSS
Hello:
I am having some difficulty with a Spry Menu Bar (horizontal) 2.0 (1.0) that I have created. Initially I thought the problem was with regard to rendering issues on IE 6.0, however the problem seems to be more general than that and I have come to believe that it has to do with the CSS created by the Widget Browser and modified once imported into the webpage. Hence I have elected to post my issue here rather than on the spry page.
I have relied on the tutorial provided by David Powers (Bayside.css) and in addition other documentation regarding the Spry menu bar UI. The problem appeared to be one of IE 6 rendering the page with a gap that is created when the drop down menus appear, thus pushing down any divs that appear below the page.
However, through a painstaking process of trial and error my problem now seems to be that when I export the CSS generated by the widget browser to an external style sheet (the general style sheet governing the whole site), it conflicts with other CSS styles regarding links etc. The end result is that all the padding, background colours, background images, and text colours are lost. So long as the CSS remains within the head this doesn't happen.
My thinking is that this must have to do with issues of specificity, inheritence, etc.
The site can be viewed at the following URL: http://www.aclco.org/testing/index.html. In its current form all CSS related to the menu bar is found in the head of each page. (see CSS below).
My question is can I establish a separate style sheet for the horizontal menu bar and have those styles applied specifically (and only) to the menu bar. My only other alternative is to work through the remainder of the general style sheet and work through any issues of specificity/inheritance -- which may be the "best" practice, but it risks causing other "cascading" [sic] problems elsewhere.
Any advice or suggestions or directed reading (that would point to a solution) that could be offered would be greatly appreciated.
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 right pointing 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, all submenus 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 level menu 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 on the 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 on MenuBar 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/Navigation%20Bar%20Segm ent-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/Navigation%20Bar%20Segm ent%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 the parent 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 the MenuItemContainer. 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 for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. 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 lot of these needed, the plugin does not generate the extra classes for modern 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.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments 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" bug that is found in Windows 7 in conjuction with IE8. For More information 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 elements in the divs that appear beneath it. If an image is used in the #header instead 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 column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this 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/Portrait%20Textbox%20He ader.png);
.sidebar_textbox_background_middle {
width: 255px;
padding-top: 12px;
padding-bottom: 10px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Portrait%20Textbox%20Mi ddle.png);
background-repeat: repeat-y;
.sidebar_textbox_content {
/* The width and padding are set as follows to accomodate quirks in browser rendering and to ensure that text is contained within the background 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/Portrait%20Textbox%20Foo ter.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%20Header.png);
.landscape_textbox_middle {
width:auto;
margin:auto;
padding-top: 12px;
padding-bottom: 12px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/landscapte%20Textbox%20 Middle.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/Landscape%20Textbox%20F ooter.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 footer will 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%20Full.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;Hello Martin:
Thanks for your input. However I am not certain we have resolved this issue adequately, or understand the principles governing the css as regards this spry menu framework 2.0 (1.0).
For example, the menu only works in IE 6.0 if the css remains in the head. I agree with your original post that it shouldn't make any difference whether the css is posted in the head or in a separate style sheet (so long as specificity issues are addressed). Both should work -- and yet it doesn't.
If the CSS is placed in the separate style sheet governing the total site, it doesn't work for 6.0. If placed at the top of the style sheet, conflicts of specificity prevent the menu from rendering properly in any of the browsers causing the rules for general links to govern the menu. This has been verified using a cross browser testing. If the styles are placed at the bottom of the style sheet to help them take precedence, they work in all the browsers except for IE 6.
The website I am building needs to support IE 6 for a variety of reasons, and because it is catering to the non-profit community and to low income persons, I am mindful of even small differences in page weight.
So for me, at least, the issue remains baffling.
I appreciate your input, but also would appreciate the input from others, and especially Adobe Community Professionals and employees. The spry framework in this regard is not well documented. I am not certain if this is exclusively a CSS problem, if it might also be complicated by the architecture of the spry framework, or if indeed other variables are at play.
I would be my hope that in resolving the problem, other users of the this particular spry framework might also benefit.
Thanks,
Steve. -
If you would take a look at this page http://www.gcfa.org/add_data.asp you will see that between the header and the navigation bar a white line is there. I don't won't it there, how can I get rid of it?
It must be in my CSS I guess, I checked the images and neither one of them the Header nor the Navigation menu have a white border. Here's my code. Thanks in advance for your help.
My page:
<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="Connections/BishopsLogin.asp" -->
<%
Dim MM_editAction
MM_editAction = CStr(Request.ServerVariables("SCRIPT_NAME"))
If (Request.QueryString <> "") Then
MM_editAction = MM_editAction & "?" & Server.HTMLEncode(Request.QueryString)
End If
' boolean to abort record edit
Dim MM_abortEdit
MM_abortEdit = false
%>
<%
If (CStr(Request("MM_insert")) = "form1") Then
If (Not MM_abortEdit) Then
' execute the insert
Dim MM_editCmd
Set MM_editCmd = Server.CreateObject ("ADODB.Command")
MM_editCmd.ActiveConnection = MM_BishopsLogin_STRING
MM_editCmd.CommandText = "INSERT INTO dbo.DeptData (Department, SubpageTitle, LinkDescription, URL, DateLastModified, ModifiedBy) VALUES (?, ?, ?, ?, ?, ?)"
MM_editCmd.Prepared = true
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param1", 201, 1, 30, Request.Form("Department")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param2", 201, 1, 1000, Request.Form("SubpageTitle")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param3", 201, 1, 1000, Request.Form("LinkDescription")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param4", 201, 1, 500, Request.Form("URL")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param5", 201, 1, 10, Request.Form("DateLastModified")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param6", 201, 1, 50, Request.Form("ModifiedBy")) ' adLongVarChar
MM_editCmd.Execute
MM_editCmd.ActiveConnection.Close
' append the query string to the redirect URL
Dim MM_editRedirectUrl
MM_editRedirectUrl = "adding_data_results.asp"
If (Request.Form<> "") Then
If (InStr(1, MM_editRedirectUrl, "?", vbTextCompare) = 0) Then
MM_editRedirectUrl = MM_editRedirectUrl & "?" & Request.Form
Else
MM_editRedirectUrl = MM_editRedirectUrl & "&" & Request.Form
End If
End If
Response.Redirect(MM_editRedirectUrl)
End If
End If
%>
<%
Dim rs_Add_Data__MMColParam
rs_Add_Data__MMColParam = "1"
If (Request.QueryString("RecordID") <> "") Then
rs_Add_Data__MMColParam = Request.QueryString("RecordID")
End If
%>
<%
Dim rs_Add_Data
Dim rs_Add_Data_cmd
Dim rs_Add_Data_numRows
Set rs_Add_Data_cmd = Server.CreateObject ("ADODB.Command")
rs_Add_Data_cmd.ActiveConnection = MM_BishopsLogin_STRING
rs_Add_Data_cmd.CommandText = "SELECT ID, Department, SubpageTitle, LinkDescription, URL, DateLastModified, ModifiedBy FROM dbo.DeptData WHERE ID = ? ORDER BY ID DESC"
rs_Add_Data_cmd.Prepared = true
rs_Add_Data_cmd.Parameters.Append rs_Add_Data_cmd.CreateParameter("param1", 5, 1, -1, rs_Add_Data__MMColParam) ' adDouble
Set rs_Add_Data = rs_Add_Data_cmd.Execute
rs_Add_Data_numRows = 0
%>
<%
Dim MM_paramName
%>
<%
' *** Go To Record and Move To Record: create strings for maintaining URL and Form parameters
Dim MM_keepNone
Dim MM_keepURL
Dim MM_keepForm
Dim MM_keepBoth
Dim MM_removeList
Dim MM_item
Dim MM_nextItem
' create the list of parameters which should not be maintained
MM_removeList = "&index="
If (MM_paramName <> "") Then
MM_removeList = MM_removeList & "&" & MM_paramName & "="
End If
MM_keepURL=""
MM_keepForm=""
MM_keepBoth=""
MM_keepNone=""
' add the URL parameters to the MM_keepURL string
For Each MM_item In Request.QueryString
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
MM_keepURL = MM_keepURL & MM_nextItem & Server.URLencode(Request.QueryString(MM_item))
End If
Next
' add the Form variables to the MM_keepForm string
For Each MM_item In Request.Form
MM_nextItem = "&" & MM_item & "="
If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
MM_keepForm = MM_keepForm & MM_nextItem & Server.URLencode(Request.Form(MM_item))
End If
Next
' create the Form + URL string and remove the intial '&' from each of the strings
MM_keepBoth = MM_keepURL & MM_keepForm
If (MM_keepBoth <> "") Then
MM_keepBoth = Right(MM_keepBoth, Len(MM_keepBoth) - 1)
End If
If (MM_keepURL <> "") Then
MM_keepURL = Right(MM_keepURL, Len(MM_keepURL) - 1)
End If
If (MM_keepForm <> "") Then
MM_keepForm = Right(MM_keepForm, Len(MM_keepForm) - 1)
End If
' a utility function used for adding additional parameters to these strings
Function MM_joinChar(firstItem)
If (firstItem <> "") Then
MM_joinChar = "&"
Else
MM_joinChar = ""
End If
End Function
%>
<!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>GCFA: Update Data Files</title>
<link href="samples/OneColumn.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
@import url("images/nav_bar.css");
</style>
<script language="JavaScript1.2" type="text/javascript" src="images/mm_css_menu.js"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
</script>
</head>
<body class="oneColLiqCtrHdr" onload="MM_preloadImages('images/Slices/nav_bar_r2_c2_f2.gif','images/Slices/nav_bar_r2_c 3_f2.gif','images/Slices/nav_bar_r2_c5_f2.gif')">
<div id="container">
<div id="header">
<div id="#DataFiles_LOGO"></div>
</div>
<div id="mainContent">
<div id="FWTableContainer1445733177">
<table border="0" cellpadding="0" cellspacing="0" width="799">
<!-- fwtable fwsrc="nav_bar_revised.png" fwpage="Page 1" fwbase="nav_bar.gif" fwstyle="Dreamweaver" fwdocid = "1445733177" fwnested="0" -->
<tr>
<td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="5" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="221" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="130" height="1" border="0" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="nav_bar_r1_c1" src="images/Slices/nav_bar_r1_c1.gif" width="799" height="5" border="0" id="nav_bar_r1_c1" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="5" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="nav_bar_r2_c1" src="images/Slices/nav_bar_r2_c1.gif" width="1" height="25" border="0" id="nav_bar_r2_c1" alt="" /></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer1015135953_0', 'MMMenu1015135953_0',6,24,'nav_bar_r2_c2');MM_swapImage('nav_bar_r2_c2','','images/Slices /nav_bar_r2_c2_f2.gif',1);"><img name="nav_bar_r2_c2" src="images/Slices/nav_bar_r2_c2.gif" width="221" height="24" border="0" id="nav_bar_r2_c2" alt="" /></a></td>
<td><a href="http://www.gcfa.org/Department_Data.aspx" target="_top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_bar_r2_c3','','images/Slices/nav_bar_r2_c3_f2.gif',1);"><i mg name="nav_bar_r2_c3" src="images/Slices/nav_bar_r2_c3.gif" width="221" height="24" border="0" id="nav_bar_r2_c3" alt="Department Data Files" /></a></td>
<td rowspan="2"><img name="nav_bar_r2_c4" src="images/Slices/nav_bar_r2_c4.gif" width="5" height="25" border="0" id="nav_bar_r2_c4" alt="" /></td>
<td><a href="http://www.gcfa.org/help_topics.html" target="_top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_bar_r2_c5','','images/Slices/nav_bar_r2_c5_f2.gif',1);"><i mg name="nav_bar_r2_c5" src="images/Slices/nav_bar_r2_c5.gif" width="221" height="24" border="0" id="nav_bar_r2_c5" alt="Help Topics" /></a></td>
<td rowspan="2"><img name="nav_bar_r2_c6" src="images/Slices/nav_bar_r2_c6.gif" width="130" height="25" border="0" id="nav_bar_r2_c6" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="24" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img name="nav_bar_r3_c2" src="images/Slices/nav_bar_r3_c2.gif" width="442" height="1" border="0" id="nav_bar_r3_c2" alt="" /></td>
<td><img name="nav_bar_r3_c5" src="images/Slices/nav_bar_r3_c5.gif" width="221" height="1" border="0" id="nav_bar_r3_c5" alt="" /></td>
<td><img src="images/Slices/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
</table>
<div id="MMMenuContainer1015135953_0">
<div id="MMMenu1015135953_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="http://www.gcfa.org/add_data.asp" target="_top" id="MMMenu1015135953_0_Item_0" class="MMMIFVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Add Data </a> <a href="http://www.gcfa.org/update_data.asp" target="_top" id="MMMenu1015135953_0_Item_1" class="MMMIVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Update Data </a> <a href="http://www.gcfa.org/delete_data.asp" target="_top" id="MMMenu1015135953_0_Item_2" class="MMMIVStyleMMMenu1015135953_0" onmouseover="MM_menuOverMenuItem('MMMenu1015135953_0');"> Delete Data </a> </div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<strong>Enter the information you are wanting to add to our database:</strong><br />
</div>
<form ACTION="<%=MM_editAction%>" METHOD="POST" name="form1" target="_top" id="form1">
<table width="689" align="left">
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Department:</td>
<td><label>
<input name="Department" type="text" id="Department" size="75" maxlength="500" />
</label></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Subpage Title:</td>
<td><label>
<input name="SubpageTitle" type="text" id="SubpageTitle" size="75" maxlength="1000" />
</label></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Link Description:</td>
<td><label>
<input name="LinkDescription" type="text" id="LinkDescription" size="75" maxlength="1000" />
</label></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">URL:</td>
<td><input name="URL" type="text" id="URL" size="75" maxlength="500" /></td>
</tr>
<tr valign="baseline">
<td height="24" align="left" valign="top" nowrap="nowrap">Date Modified:</td>
<td><input name="DateLastModified" type="text" id="DateLastModified" size="75" maxlength="10" /></td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap">Modified By:</td>
<td><label>
<input name="ModifiedBy" type="text" id="ModifiedBy" size="75" maxlength="50" />
</label></td>
</tr>
<tr valign="baseline">
<td height="20" align="left" valign="top" nowrap="nowrap"> </td>
<td> </td>
</tr>
<tr valign="baseline">
<td align="left" valign="top" nowrap="nowrap"><p> </p></td>
<td align="left" valign="top" nowrap="nowrap"><label>
<input type="submit" name="Add_Info" id="Add_Info" value="Add data to database now!" />
</label></td>
</tr>
</table>
<p> </p>
<p><br />
<br />
<br />
<br />
</p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
</p>
<input type="hidden" name="MM_insert" value="form1" />
</form> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer">
<p align="center">This site is maintained by the General Council on Finance and Administration <script language="JavaScript">
var today_date= new Date()
var year=today_date.getFullYear()
document.write(year)
//--> </script>
©</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
<%
rs_Add_Data.Close()
Set rs_Add_Data = Nothing
%>
My CSS Pages:
@charset "utf-8";
body {
/*background:#ffffff;*/
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 centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
/*color: #000000;*/
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-repeat: no-repeat;
background-position: right top;
background-image: url(../images/body_bg.jpg);
.oneColLiqCtrHdr #container {
width: 99%; /* the auto margins (in conjunction with a width) center the page */
/* border: 1px solid #000000;*/
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: ;
background-repeat: no-repeat;
background-position: right top;
.oneColLiqCtrHdr #header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
color: #FFFFFF;
font-size: 18px;
background-repeat: no-repeat;
height: 124px;
width: 100%;
background-image: url(../images/dept_data_files_logo.jpg);
padding: 0px;
/*background-color: #67120D;*/
.oneColLiqCtrHdr #mainContent {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #3C0D0D;
font-weight: 700;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
margin: 0px;
width: 760px;
.oneColLiqCtrHdr #footer {
padding: 0 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
color: #FFFFFF;
background-color: #000000;
/*width:780px;*/
.oneColLiqCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
h1 {
color:#FFFFFF;
font-size: 36px;
h2,h3 {
10px;
8px;
color: #000000;
#DataFiles_LOGO{
height:127px;
width: 740px;
background-repeat: no-repeat;
background-image: url(../images/dept_data_files_logo.jpg);
background-position: left top;
padding: 0px;
margin: 0px;
top: 0px;
float: left;
And my Navigation CSS:
td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
display: block;
#FWTableContainer1445733177 {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position:relative;
margin:0px;
width:799px;
height:30px;
text-align:left;
#MMMenuContainer1015135953_0 {
/* This ID is related to the master menu div for menu MMMenuContainer1015135953_0 and contains the important positioning information for the menu as a whole */
position:absolute;
left:7px;
top:29px;
visibility:hidden;
z-index:300;
#MMMenu1015135953_0 {
/* This class defines things about menu MMMenu1015135953_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#ffffff;
border:1px solid #000000;
width:208px;
height:76px;
.MMMIFVStyleMMMenu1015135953_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1015135953_0 */
border-top:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:208px;
height:26px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
height:18px;
.MMMIVStyleMMMenu1015135953_0 {
/* This class determines the general characteristics of the menu items in menu MMMenu1015135953_0 */
border-top:0px;
border-left:1px solid #000000;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
width:208px;
height:25px;
voice-family: "\"}\"";
voice-family:inherit;
width:200px;
height:18px;
#MMMenu1015135953_0_Item_0 {
/* Unique ID for item 0 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:0px;
#MMMenu1015135953_0_Item_1 {
/* Unique ID for item 1 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:26px;
#MMMenu1015135953_0_Item_2 {
/* Unique ID for item 2 of menu MMMenu1015135953_0 so we can set its position */
left:0px;
top:51px;
#MMMenuContainer1015135953_0 img {
/* needed for Mozilla/Camino/Netscape */
border:0px;
#MMMenuContainer1015135953_0 a {
/* Controls the general apperance for menu MMMenuContainer1015135953_0's items, including color and font */
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#ffcc33;
text-align:center;
vertical-align:middle;
padding:3px;
background-color:#000000;
font-weight:bold;
font-style:normal;
display:block;
position:absolute;
#MMMenuContainer1015135953_0 a:hover {
/* Controls the mouse over effects for menu MMMenuContainer1015135953_0 */
color:#ffcc33;
background-color:#990000;Glad you sorted this out.
You might want to mark this as Answered so folks trying to help answer questions won't have to click on this link now. Thanks!
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia -
I'm kinda wondering why the id's are preceded with a class if
you open any of the premade CSS layouts in DW CS3.
example:
Two Columns, all widths in percent, with right sidebar header
and footer.
CSS:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
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 centers the container in IE 5*
browsers. The text is then set to the left aligned default in the
#container selector */
color: #000000;
.twoColLiqRtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
.twoColLiqRtHdr #header {
background: #DDDDDD;
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear beneath it. If an image is
used in the #header instead of text, you may want to remove the
padding. */
.twoColLiqRtHdr #header h1 {
margin: 0; /* 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: 10px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use
padding on the sidebar. It will be added to the width for standards
compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within
it can be created by placing a left and right margin on those
elements as seen in the ".twoColLiqRtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element
is rendered, you may occasionally run into unexplained bugs with
percentage-based columns. If you need more predictable results, you
may choose to change to pixel sized columns.
.twoColLiqRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must
be given */
width: 24%;
background: #EBEBEB; /* the background color will be
displayed for the length of the content in the column, but no
further */
padding-top: 15px 0; /* top and bottom padding create visual
space within this div */
.twoColLiqRtHdr #sidebar1 h3, .twoColLiqRtHdr #sidebar1 p {
margin-left: 10px; /* the left and right margin should be
given to every element that will be placed in the side columns */
margin-right: 10px;
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created
with the right margin on the mainContent div. No matter how much
content the sidebar1 div contains, the column space will remain.
You can remove this right margin if you want the #mainContent div's
text to fill the #sidebar1 space when the content in #sidebar1
ends.
2. to avoid float drop at a supported minimum 800 x 600
resolution, elements within the mainContent div should be 430px or
smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the
zoom property is used to give the mainContent "hasLayout." This
avoids several IE-specific bugs.
.twoColLiqRtHdr #mainContent {
margin: 0 26% 0 10px; /* the left margin should mirror the
margin on the header and footer for proper alignment. */
.twoColLiqRtHdr #footer {
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear above it. */
background:#DDDDDD;
.twoColLiqRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in
the footer will avoid the possibility of margin collapse - a space
between divs */
padding: 10px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
/* Miscellaneous classes for reuse */
.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 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;
take a look at this
.twoColLiqRtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
how do you interpret
.twoColLiqRtHdr #container?
in the code, .twoColLiqRtHdr is a class for the <body>
tag only.
So i guess I just need some enlightenment on how this CSS
works, maybe I'm used to just defining the ID of <div> tags
(ex: #wrapper {}).
Is this use for inline styles only?
what's the advantage of using this type of styles?
I hope someone can take a look at this, thank you in advance!
:)Yeah.... I can't really see a use for class here at all. But
that's me
(and now you!)....
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
==================
"Thierry | www.TJKDesign.com" <[email protected]>
wrote in message
news:f0lh1l$ng$[email protected]..
> Murray *ACE* wrote:
>> I use this often when I have a single template with
variable layout
>> (i.e., section-specific layouts). You can use either
>> server-scripting or template parameters to change
the ID attribute on
>> the body tag, which will trigger an entirely
different set of CSS
>> selector assignments.
>
> FWIW, I believe it makes more sense to use an ID
attribute - as you do -
> rather than a class on "BODY" as this element is unique
through the
> document.
>
> --
> Thierry
> Articles and Tutorials:
http://www.TJKDesign.com/go/?0
> The perfect FAQ page:
http://www.TJKDesign.com/go/?9
> CSS-P Templates:
http://www.TJKDesign.com/go/?1
> CSS Tab Menu:
http://www.TJKDesign.com/go/?3
>
> -
CSS problems in CS4 with multiple images on a page...
I seem to have a ton of questions going in this forum, sorry if it's painful.
Here's my latest issue.(DW CS4)
I created a blank html page and linked a CSS file to it. I dropped a bunch of images into the body and wrapped them in a div with an id of "thumbnails"
I clicked on my img tag right below the Design window and clicked the "new css rule" button in the CSS Styles window and gave my images a margin of 40 px. I clicked "OK" and my changes took effect in the Design window, but when I previewed it in the browser (Firefox and IE) none of the CSS was taking effect, all the images were still crammed together. Same thing for the "Live View" Button, I'm not sure what happened, or why the CSS won't take effect.
Can somebody help me?
Thanks all,
AzaMy HTML follows-----
<!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="../CssFiles/oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="oneColLiqCtrHdr" id="Thumbnails"><img src="../images/Jewelry/Thumbnails/T_Bracelets/Bellarri_ColoredStone_Over10k_1.jpg" width="166" height="150" alt="Bellari" /><img src="../images/Jewelry/Thumbnails/T_Bracelets/CynthiaGregg_Gold_Over5k_1.jpg" width="178" height="150" alt="Cynthia Gregg" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/FrankRuebel_BestBracelet_2501_5k_1.jpg" width="150" height="150" alt="Frank Ruebel" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Gabriel_BestBracelet_2501_5k_1.jpg" width="156" height="150" alt="Gabriel" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/GeralynSheridan_FashionBridge_500Under_1.jp g" width="178" height="150" alt="Geralyn Sheridan" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Jyes_Legends_Over5k_1.jpg" width="150" height="150" alt="Jyes Legends" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Maevona_BestBracelet_5001_10k_1.jpg" width="166" height="150" alt="Maevona" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/SalPraschnik_Legends_Over5k_1.jpg" width="208" height="150" alt="Sal Praschnik" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Sara_BestBracelet_Over10k_1.jpg" width="156" height="150" alt="Sara" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/Starhaven_Silver_501_1k_1.jpg" width="166" height="150" alt="Starhaven" />
<img src="../images/Jewelry/Thumbnails/T_Bracelets/SylvaCie_BestBracelet_Over10k_1.jpg" width="150" height="150" alt="Sylva Cie" /></div>
</body>
</html>
*************CSS FOLLOWS********************
@charset "utf-8";
body {
background: #666666;
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 centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #000000;
#jewelryFrame {
font-family: Georgia, "Times New Roman", Times, serif;
color: #CCC;
#jewelryFrame p {
font-size: 12px;
padding-bottom: 75px;
.oneColLiqCtrHdr #container {
width: 100%; /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: center; /* this overrides the text-align: center on the body element. */
background-color: #000000;
max-width: 960px;
min-width: 800px;
.oneColLiqCtrHdr #header {
background: #DDDDDD;
padding: 0;
width: 960px;
height: 141px;
background-color: #000000;
color: #CCA4A5;
font-size: 11px;
font-style: normal;
font-family: Goudy Old Style;
background-image: url(../images/CPJ-Header.png);
.oneColLiqCtrHdr #header h1 {
margin: 0; /* 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: 30px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
color: #FFFFFF;
#navbar {
background: #999999;
height: 29px;
width: 960px;
background-color: #000000;
background-image: url(../images/CPJ-NavLT.png);
background-repeat: repeat;
.oneColLiqCtrHdr #container #navbar img {
border-width: 0px;
border-style: 0;
border: 0;
#sideBarLeft {
float: left;
width: 30%;
height: 100%;
min-width: 250px;
padding-top: 50px;
padding-left: 40px;
padding-right: 40px;
.oneColLiqCtrHdr #container #sideBarLeft p {
text-align: justify;
font-size: 12px;
.oneColLiqCtrHdr #container #sideBarLeft h2 {
font-size: 14px;
.oneColLiqCtrHdr #container #sideBarLeft h1 {
font-size: 24px;
.oneColLiqCtrHdr #container #sideBarLeft {
color: #CCC;
padding-top: 15%;
padding-bottom: 15%;
.oneColLiqCtrHdr #mainContent {
padding: 0 60px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
background-color: #000000;
color: #969696;
font-family: "Goudy Old Style";
font-size: 18px
text-align: center;
vertical-align: middle;
min-height: 500px;
.oneColLiqCtrHdr #container #mainContent p {
font-family: "Goudy Old Style";
font-size: 18px;
.oneColLiqCtrHdr #container #mainContent h1 {
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #969696;
font-family:"Goudy Old Style";
font-size:36px;
.oneColLiqCtrHdr #container #mainContent h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 72px;
font-weight: bold;
vertical-align: middle;
line-height: normal;
color: #CCC;
.oneColLiqCtrHdr #container #mainContent #staticprivacy h3 {
padding: 0px;
#jewelryFull {
padding-top: 25px;
padding-right: 0px;
padding-bottom: 25px;
padding-left: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
float: none;
width: 100%;
max-width: 960px;
background-image: url(../images/CPJ--MainBG_slice_15.png);
.oneColLiqCtrHdr #container #mainContent #jewelryFull {
font-family: Arial, Helvetica, sans-serif;
color: #CCC;
.oneColLiqCtrHdr #container #mainContent #jewelryFull img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCC;
border-right-color: #666;
border-bottom-color: #666;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
margin-top: 25px;
.oneColLiqCtrHdr #container #mainContent #jewelryFull p {
text-align: justify;
margin-top: 0px;
font-size: 10px;
.oneColLiqCtrHdr #container #mainContent #mycarousel {
text-align: center;
height: 500px;
.oneColLiqCtrHdr #footer {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
background-image: url(../images/CPJ-Red-Footer.png);
height: 63px;
width: 960px;
vertical-align: top;
list-style-type: none;
clear: both;
#BottomNav {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 11px;
color: #CCC;
height: 100%;
margin: 0;
.oneColLiqCtrHdr #container #footer #BottomNav ul {
list-style-type: none;
.oneColLiqCtrHdr #container #footer #BottomNav ul li {
display: inline;
.oneColLiqCtrHdr #container #footer #BottomNav ul li a {
list-style-type: none;
list-style-image: none;
float: right;
padding-right: 45px;
color: #969696;
text-decoration: none;
font-weight: 500;
font-family: Arial, Helvetica, sans-serif;
padding-top: 10px;
.oneColLiqCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
color: #FFF;
text-align: right;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
#quotes {
text-align: center;
margin-right: 65px;
float: none;
#quoteright {
text-align: right;
margin-right: 65px;
#quotesleft {
text-align: left;
text-indent: 65px;
#companyTitle {
font-family: "Lucida Console", Monaco, monospace;
font-size: 24px;
#medImageArea {
width: 100%;
height: 50px;
#Thumbnails img {
padding: 40px;
************Thank you**************** -
CSS - Text not taking up all of Table Column
Hello,
I have a table, the first column of which is 535 pixels long. However, the contents of this column (a variable called $row['site']) only displays text for about 200 pixels, and then the remaining text spills down onto the row below. The result is ugly. My code and CSS are below.
How can I get the text to extend into all 535 pixels of the column?
Thanks in advance,
John
The code for the table (just up until the first column):
<?php
print "<table class=\"navbar\">\n";
print "<tr>";
print "<td class='sitename'>".'<a href="http://'.$row['site'].'" class="links2">'.$row['site'].'</a>'."</td>";
My CSS:
table.navbar {
margin-left:100px;
margin-top:30px;
text-align: left;
font-family: Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 12px;
color: #000000;
width: 700px;
background-color: #A7E6FE;
border: 1px #FFFFFF;
border-collapse: collapse;
border-spacing: 4px;
padding: 4px;
text-decoration: none;
table.navbar td {
border: 2px solid #fff;
text-align: left;
height: 16px;
table.navbar td a{
display: block;
padding: 3px;
.sitename { width: 535px;
a.links2:link {
color: #000000;
text-decoration: none;
text-align:left;
margin-top:6px;
margin-bottom:2px;
margin-left:2px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 10px;
height: 12px;
vertical-align:middle;
a.links2:visited {
color: #000000;
text-decoration: none;
text-align:left;
margin-top:6px;
margin-bottom:2px;
margin-left:2px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 10px;
height: 12px;
vertical-align:middle;
a.links2:hover {
color: #000000; text-decoration: underline;
text-align:left;
margin-top:6px;
margin-bottom:2px;
margin-left:2px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 10px;
height: 12px;
vertical-align:middle;
a.links2:active {
color: #000000;
text-align:left;
margin-top:6px;
margin-bottom:2px;
margin-left:2px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width:10px;
height: 12px;
vertical-align:middle;Hello,
I figured it out by searching on Google:
.sitename { width: 535px;
overflow:hidden;
Maybe you are looking for
-
Acrobat XI Pro: Licensed / activated version in trial mode and expire after 30 days
First, when viewing a PDF file, my licensed Acrobat XI Pro (v11.0.10) closes the PDF and shows accept license agreement window. I accepted the license-agreement. Then a window showed up telling me to log-in into my Adobe-account, clicked on log-in. L
-
MII Migration tool for server installed in Linux
I am planning to migrate few files from xMII 11.5 to 12.0. I searched in market place to download the migration tool(service.sap.com -> SAP Support Portal -> Downloads -> SAP Installations & Upgrades -> Search for Installations and Upgrades. Entered
-
On my WinXP laptop using Jdeveloper10g I can wrap a PL/SQL stored proc (10g database) as a web service - test it and deploy it to Oracle 10g AS also running on my laptop. However, if I do the same thing using the same version of JDeveloper, database
-
Call the RDF from Froms but generate in PDF format
Hai all, i can call the RDF from Froms but my requirement is after calling the RDF i want to generate it into PDF. Thanks in Adv
-
Although I'm not new to using an iPod (I have the 80GB Classic)for visual and audio files, I'm wondering whether I can transfer text files to the iPod (I have a number of drafts in MS Word). If so, what format will the iPod recognise and will I have