Dreamweaver - Houdini has come back from the css grave

Author

Houdini has come back from the css grave

cluksha

2004-08-09, 11:14 pm

here is the page.. http://216.15.225.64/newsite/global.css (attached below as
well)

The left nav is what is giving me some troubles. First I was able to color
the first list item to be different from the rest. That was nice. I had to
work around because the first-child property did not work.

Ok to the problem. If you mouse over the first item in the list, all is well.
Mouse over item number 2-5 and pay attention to the duck family at the bottom.
They Disappear. Just like Houdini. They come back if you mouse over the top
item again.

It is very odd. In order to get the whole image to show up from the start, I
had to place a tall spacer image in there, else the div was only as tall as the
list items.

Any help is greatly appreciated :)

Thanks all
Chris

/* CSS Document */

body,td,th {
font-family: MyriadMM, Verdana, Arial, Helvetica, sans-serif;
}

#Content {
margin:0px 50px 50px 165px;
padding:10px;
}

/* Left Nav Styles */

#LeftDiv {
position:absolute;
top:124px;
left:0px;
padding:0px;
background-color:#fff;
line-height:17px;
/* ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:162px;
height:593px;
background: url(images/pondimage.jpg) no-repeat left top;
}
/* "be nice to Opera 5". */
body>#LeftDiv {width:162px;}

#navlist ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none;
font-size:.75em;
margin-top:175px;
}

#navlist li {
margin: 0;
}

#navlist a {
display: block;
padding: 2px 2px 2px 24px;
background-color:transparent;
color:#3F3C32;
font-weight: bold;
text-decoration:none;
}

#navlist a:hover {
background-image: url(images/rightarrow.gif);
background-repeat: no-repeat;
background-position: 7%;
color:#E2C567;
/* color:#27318B; */
}

#navlist a.lighttext {
color:#AEBCD6;
}

#navlist {

width:162px;
}

/*******************************************************************************
/

/* Top Nav Styles */

#TopNav
{
color: #27318B;
font-family: MyriadMM, Verdana, Arial, Helvetica, sans-serif;
}

#TopNav TD
{
/*background: #AFC2D7;*/
background: #8E9067;
text-align:center;
font-size:.65em;
font-weight: bold;
}

#TopNav a, #TopNav a:link, #TopNav a:visited, #TopNav a:hover, #TopNav a:active
{
display: block;
color: #27318B;
text-decoration:none;
background-color:#AFC2D7;
padding-top: 11px;
padding-bottom: 11px;
}

#TopNav a:hover, #TopNav a:active
{
color: #AFC2D7;
background: #27318B;
}

.brdrLt {
border-left: 1px solid #27318B;
}
.smKern {
letter-spacing: .01em;

}

cluksha

2004-08-09, 11:14 pm

Ok, If I remove the ackground image of the mouseovers, then the duck family
stays intact. The problem then is that I no longer have the right pointing
arrow.

Here is the code ...

/* Non Working Code*/

body,td,th {
font-family: MyriadMM, Verdana, Arial, Helvetica, sans-serif;
}

#Content {
margin:0px 50px 50px 165px;
padding:10px;
}

/* Left Nav Styles */

#LeftDiv {
position:absolute;
top:124px;
left:0px;
padding:0px;
background-color:#fff;
line-height:17px;
/* ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:162px;
height:593px;
}
/* "be nice to Opera 5". */
body>#LeftDiv {width:162px;}

#navlist ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none;
font-size:.75em;
margin-top:175px;
}

/* Change this margin in order to space or take away space in the left nav
list items. */
#navlist li {
margin: 0;
}

#navlist a {
display: block;
padding: 2px 2px 2px 24px;
background-color:transparent;
color:#3F3C32;
font-weight: bold;
text-decoration:none;
}

#navlist a:hover {
background-image: url(images/rightarrow.gif);
background-repeat: no-repeat;
background-position: 7%;
color:#E2C567;
}

#navlist a.lighttext {
color:#AEBCD6;
}

#navlist {
width:162px;
background: url(images/pondimage.jpg) no-repeat left top;
}

/*******************************************************************************
/

/* Top Nav Styles */

#TopNav
{
color: #27318B;
font-family: MyriadMM, Verdana, Arial, Helvetica, sans-serif;
}

#TopNav TD
{
/*background: #AFC2D7;*/
background: #8E9067;
text-align:center;
font-size:.65em;
font-weight: bold;
}

#TopNav a, #TopNav a:link, #TopNav a:visited, #TopNav a:hover, #TopNav a:active
{
display: block;
color: #27318B;
text-decoration:none;
background-color:#AFC2D7;
padding-top: 11px;
padding-bottom: 11px;
}

#TopNav a:hover, #TopNav a:active
{
color: #AFC2D7;
background: #27318B;
}

.brdrLt {
border-left: 1px solid #27318B;
}
.smKern {
letter-spacing: .01em;

}

/*WORKING CODE */

/* CSS Document */

body,td,th {
font-family: MyriadMM, Verdana, Arial, Helvetica, sans-serif;
}

#Content {
margin:0px 50px 50px 165px;
padding:10px;
}

/* Left Nav Styles */

#LeftDiv {
position:absolute;
top:124px;
left:0px;
padding:0px;
background-color:#fff;
line-height:17px;
/* ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:162px;
height:593px;
}
/* "be nice to Opera 5". */
body>#LeftDiv {width:162px;}

#navlist ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none;
font-size:.75em;
margin-top:175px;
}

/* Change this margin in order to space or take away space in the left nav
list items. */
#navlist li {
margin: 0;
}

#navlist a {
display: block;
padding: 2px 2px 2px 24px;
background-color:transparent;
color:#3F3C32;
font-weight: bold;
text-decoration:none;
}

#navlist a:hover {
/* This section makes the duck family go away. Very Odd. CEL------------
background-image: url(images/rightarrow.gif);
background-repeat: no-repeat;
background-position: 7%; */
color:#E2C567;
}

#navlist a.lighttext {
color:#AEBCD6;
}

#navlist {
width:162px;
background: url(images/pondimage.jpg) no-repeat left top;
}

/*******************************************************************************
/

/* Top Nav Styles */

#TopNav
{
color: #27318B;
font-family: MyriadMM, Verdana, Arial, Helvetica, sans-serif;
}

#TopNav TD
{
/*background: #AFC2D7;*/
background: #8E9067;
text-align:center;
font-size:.65em;
font-weight: bold;
}

#TopNav a, #TopNav a:link, #TopNav a:visited, #TopNav a:hover, #TopNav a:active
{
display: block;
color: #27318B;
text-decoration:none;
background-color:#AFC2D7;
padding-top: 11px;
padding-bottom: 11px;
}

#TopNav a:hover, #TopNav a:active
{
color: #AFC2D7;
background: #27318B;
}

.brdrLt {
border-left: 1px solid #27318B;
}
.smKern {
letter-spacing: .01em;

}

Misha

2004-08-10, 4:14 am

You didn't post the site address, only the CSS file.

cluksha wrote:

> here is the page.. http://216.15.225.64/newsite/global.css (attached below as
> well)
>
> The left nav is what is giving me some troubles. First I was able to color
> the first list item to be different from the rest. That was nice. I had to
> work around because the first-child property did not work.
>
> Ok to the problem. If you mouse over the first item in the list, all is well.
> Mouse over item number 2-5 and pay attention to the duck family at the bottom.
> They Disappear. Just like Houdini. They come back if you mouse over the top
> item again.
>
> It is very odd. In order to get the whole image to show up from the start, I
> had to place a tall spacer image in there, else the div was only as tall as the
> list items.
>
> Any help is greatly appreciated :)
>
> Thanks all
> Chris
>
>
>
> /* CSS Document */
>
> body,td,th {
> font-family: MyriadMM, Verdana, Arial, Helvetica, sans-serif;
> }
>
> #Content {
> margin:0px 50px 50px 165px;
> padding:10px;
> }
>
> /* Left Nav Styles */
>
> #LeftDiv {
> position:absolute;
> top:124px;
> left:0px;
> padding:0px;
> background-color:#fff;
> line-height:17px;
> /* ugly brilliant hack. */
> voice-family: "\"}\"";
> voice-family:inherit;
> width:162px;
> height:593px;
> background: url(images/pondimage.jpg) no-repeat left top;
> }
> /* "be nice to Opera 5". */
> body>#LeftDiv {width:162px;}
>
> #navlist ul {
> margin: 0; /*removes indent IE and Opera*/
> padding: 0; /*removes indent Mozilla and NN7*/
> list-style-type: none;
> font-size:.75em;
> margin-top:175px;
> }
>
> #navlist li {
> margin: 0;
> }
>
> #navlist a {
> display: block;
> padding: 2px 2px 2px 24px;
> background-color:transparent;
> color:#3F3C32;
> font-weight: bold;
> text-decoration:none;
> }
>
> #navlist a:hover {
> background-image: url(images/rightarrow.gif);
> background-repeat: no-repeat;
> background-position: 7%;
> color:#E2C567;
> /* color:#27318B; */
> }
>
> #navlist a.lighttext {
> color:#AEBCD6;
> }
>
> #navlist {
>
> width:162px;
> }
>
> /*******************************************************************************
> /
>
> /* Top Nav Styles */
>
> #TopNav
> {
> color: #27318B;
> font-family: MyriadMM, Verdana, Arial, Helvetica, sans-serif;
> }
>
> #TopNav TD
> {
> /*background: #AFC2D7;*/
> background: #8E9067;
> text-align:center;
> font-size:.65em;
> font-weight: bold;
> }
>
> #TopNav a, #TopNav a:link, #TopNav a:visited, #TopNav a:hover, #TopNav a:active
> {
> display: block;
> color: #27318B;
> text-decoration:none;
> background-color:#AFC2D7;
> padding-top: 11px;
> padding-bottom: 11px;
> }
>
> #TopNav a:hover, #TopNav a:active
> {
> color: #AFC2D7;
> background: #27318B;
> }
>
> .brdrLt {
> border-left: 1px solid #27318B;
> }
> .smKern {
> letter-spacing: .01em;
>
> }
>

cluksha

2004-08-10, 11:16 pm

the site was in the original post....

here is the page.. http://216.15.225.64/newsite/test.html
here is the css.. http://216.15.225.64/newsite/global.css (attached below as well)

Thanks

cluksha

2004-08-10, 11:17 pm

the site was in the original post....

here is the page.. http://216.15.225.64/newsite/test.html
here is the css.. http://216.15.225.64/newsite/global.css (attached below as well)

Thanks

Misha

2004-08-10, 11:17 pm

I don't see any ducks? Mozilla 1.6 mac. I have attached a tiny gif of it.

cluksha wrote:

> the site was in the original post....
>
> here is the page.. http://216.15.225.64/newsite/test.html
> here is the css.. http://216.15.225.64/newsite/global.css (attached below as well)
>
> Thanks

Murray *TMM*

2004-08-10, 11:18 pm

Change this -

#navlist A {
PADDING-RIGHT: 2px;
DISPLAY: block;
PADDING-LEFT: 24px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
COLOR: #3f3c32;
PADDING-TOP: 2px;
BACKGROUND-COLOR: transparent;
TEXT-DECORATION: none
}

to this -

#navlist A {
PADDING-RIGHT: 2px;
DISPLAY: block;
PADDING-LEFT: 24px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
COLOR: #3f3c32;
PADDING-TOP: 2px;
TEXT-DECORATION: none
}

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(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
==================

"cluksha" <webforumsuser@macromedia.com> wrote in message
news:cfb04i$uk$1@forums.macromedia.com...
> the site was in the original post....
>
> here is the page.. http://216.15.225.64/newsite/test.html
> here is the css.. http://216.15.225.64/newsite/global.css (attached below
as well)
>
> Thanks

Misha

2004-08-13, 12:16 pm

Murray *TMM*

2004-08-13, 7:17 pm

Murray *TMM*

2004-08-13, 11:15 pm

Do you still have the background-color:transparent?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(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
==================

"cluksha" <webforumsuser@macromedia.com> wrote in message
news:cfd65b$b5u$1@forums.macromedia.com...
> Ok, I don't know what I did, but the image is dissappearing again?
>
> I simply changed the margin of the li element (which by the way does no
good)
> and I padded the top of the ul element to 200, up from 175
>
> Any clues?
>
>