Dreamweaver - Help with CSS please

Author

Help with CSS please

Inge Grotjahn

2004-07-25, 12:14 pm

Hi group:-)

Please have a look at: http://www.gwsystems.com/testsite/catmain.htm

When you see the site with IE6.x the menu on the left side appears ok,
except the accesskey-pad.

When you see the site with Opera 6.x the menu on the left side appears ok,
except the w3c-valid-xhtml-button.

What went wrong with my css? I'm testing for several days now and can't
find a solution.

Here comes the code for my css:

body {
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
margin: 0px;
padding: 0px;
background-image: url(../Images/backinge.jpg);
background-position: 0px 150px;
background-repeat: repeat;
background-color: #FFCC66;
}
#header {
margin: 0px;
padding: 0px;
background-image: url(../Images/g03a.jpg);
}
#navigate {
margin: 0px;
width: 12em;
padding: 0em;
float: left;
}
#navigate p {
margin: 0px;
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
font-size: 90%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0.6em;
padding-left: 2.8em;
text-align: justify;
}
#navigate li {
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
font-size: 90%;
list-style-type: none;
background-image: url(../Images/tientje.gif);
background-repeat: no-repeat;
background-color: #FF9933;
border: 1px solid #993333;
background-position: 0.8em 0.3em;
padding: 0em;
margin-top: 0.8em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0em;
}
#navigate li a {
width: 100%;
color: #000000;
text-decoration: none;
display: block;
padding-top: 0.4em;
padding-right: 0em;
padding-bottom: 0.4em;
padding-left: 0em;
margin: 0px;
text-align: center;
}
#navigate li a:hover {
background-color: #993333;
color: #FFCC66;
}
#content {
margin-left: 16em;
margin-top: .4em;
margin-right: 1em;
margin-bottom: 1em;
}
#content h1 {
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
color: #000000;
letter-spacing: .1,5em;
margin-top: .2em;
margin-right: 0em;
margin-bottom: .4em;
margin-left: 0em;
}
#content p, li {
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
font-size: 85%;
color: #000000;
text-align: justify;
}
#footer {
letter-spacing: 10px;
margin: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;
padding: 0px;
background-image: url(../Images/backinge.jpg);
background-color: #FFCC66;

}
#footer p {
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
font-size: 70%;
color: #000000;
margin: 0px;
padding-top: .2em;
padding-right: .2em;
padding-bottom: .2em;
padding-left: 1.8em;
}
.w3cbutton3 {
width: 9em;
font-family: Arial, Helvetica,sans-serif;
font-size: 70%;
font-weight: bold;;
margin-top: 0.5em;
margin-right: 0;
margin-bottom: 0.5em;
margin-left: 3.7em;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
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-left-color: #ccc;
}
..w3cbutton3 a {
display: block;
width: 100%;
}
..w3cbutton3 a:link,
..w3cbutton3 a:visited,
..w3cbutton3 a:hover {
background-color: #FFCC66;
color: #000;
text-decoration: none;
}
..w3cbutton3 span.w3c {
padding: 0 0.4em;
background-color: #fff;
color: #FFCC66;
}
..spac {
margin: 0px;
padding: 0px;
line-height: 1px;
}
label{
color : #000000;
cursor:hand;
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
float: left;
width: 140px;
}
fieldset{
padding:10px;
border : 1px solid #993333;
margin-bottom : 15px;
padding : 10px;
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
}
legend {
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
color: #000000;
}
..accKey {
text-decoration: underline;
}
..txtInput, textarea {
width : 180px;
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
font-size: 80%;
background-color: #CCCCCC;
border: 1px solid #000000;

}
..txtButton {
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
font-size: 90%;
background-color: #CCCCCC;
width: 180px;
border: 1px solid #000000;
cursor: hand;

}
#content li {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:000000;
font-size:85%;
list-style-image:url(../Images/tientje.gif);

}
..acc-grp {
font-family: Verdana, Arial, Helvetica,sans-serif;
font-size: 75%;
font-weight: bold;;
margin-top: 1.0em;
margin-right: 0;
margin-bottom: 1.0em;
margin-left: 3.7em;
width:148px;
float:left;}
..acc-key {
text-align:left ;
line-height:1.7em;}
..acc-br{
clear:left;}
..acc-key a {
display:block;
width:0.9em;
float:left;
margin-right:0.25em;
margin-bottom:0.25em;
padding:0.25em 1.1em;
border:1px solid #993333;
text-decoration:none; }
..acc-key a:link {
font-weight: bold;
color:#000000;
background:#FF9933;
width:0.9em;
float:left;
margin-right:0.25em;
margin-bottom:0.25em;
padding:0.25em 1.1em;
border:1px solid #993333;
text-decoration:none;}
..acc-key a:visited {
font-weight: bold;
color:#000000;
background:#FF9933;
width:0.9em;
float:left;
margin-right:0.25em;
margin-bottom:0.25em;
padding:0.25em 1.1em;
border:1px solid #993333;
text-decoration:none;}
..acc-key a:hover {
font-weight: bold;
text-decoration:none;
color:#FFCC66;
background:#993333;
width:0.9em;
float:left;
margin-right:0.25em;
margin-bottom:0.25em;
padding:0.25em 1.1em;
border:1px solid #993333;
text-decoration:none;}
..acc-key a:active {
font-weight: bold;
color:#000000;
background:#FF9933;
width:0.9em;
float:left;
margin-right:0.25em;
margin-bottom:0.25em;
padding:0.25em 1.1em;
border:1px solid #993333;
text-decoration:none;}
..acc-key a:focus {
font-weight: bold;
color:#000000;
background:#FF9933;
width:0.9em;
float:left;
margin-right:0.25em;
margin-bottom:0.25em;
padding:0.25em 1.1em;
border:1px solid #993333;
text-decoration:none;}
..acc-logo {
font-size:0.9em;
letter-spacing:0;
text-decoration:none;
}
..acc-logo a:link {
padding:3px;
font-weight: bold;
font-variant:small-caps;
color:#FF9933;
text-decoration:none;
background:transparent;
text-decoration:none; }

..acc-logo a:visited {
padding:3px;
font-weight: bold;
font-variant:small-caps;
color:#FF9933;
text-decoration:none;
background:transparent;
text-decoration:none; }

..acc-logo a:focus {
padding:3px;
font-weight: bold;
font-variant:small-caps;
color:#000000;
text-decoration:none;
background-color:#FF9933;
text-decoration:none; }

..acc-logo a:hover {
padding:3px;
font-weight: bold;
font-variant:small-caps;
color:#FF9933;
text-decoration:none;
background-color:transparent;
text-decoration:underline; }

..acc-logo a:active {
padding:3px;
font-weight: bold;
font-variant:small-caps;
color:#FFCC66;
text-decoration:none;
background-color:#993333;
text-decoration:none; }

..acc-text {
font-variant:small-caps;
background:transparent; }

..acc-text em {
color:#993333;
background:transparent; }

..acc-hidden {
display: none; }

Please, don't let me die stupid.
Thanks
Inge Grotjahn

trx

2004-07-25, 7:14 pm

Inge Grotjahn wrote:

> What went wrong with my css? I'm testing for several days now and can't
> find a solution.

Add the following to your style for .w3cbutton3:

clear: left;

IE is doubling the left margin on div.acc-grp. To fix this buggy behavior
add the following to the style for that division:

display: inline;

In Opera, if you want the access-key logo to appear beneath the keypad as
it does in IE and Mozilla, wrap the logo-related spans in div tags and give
that new division a class, for example, ".accLogoGroup." Then create a
style for that class like this:

.accLogoGroup {
clear: left;
}

--
trx

Inge Grotjahn

2004-07-26, 7:15 pm

Hi trx:-)

Am 25.07.2004 schrieb trx:

> Add the following....

thank you so much:-) You made my day:-))) Now the navigation part looks ok
in both browsers.

But now another problem occured: In the .css I changed the text align
within the '#navigate li a' from "center" to "left". And to prevent that
the text runs into the background, I used the padding-left to tell the text
where it should begin. The lines I changed are marked with an X at the
beginning.

http://www.gwsystems.com/testsite/catmain.htm
When you look at my site in IE, everything appears correctly.
When you look at my site in Opera, the hover-color spreads to the right,
accourding to the padding left I used. Sorry, I don't know how to express
it more clearly.

Here comes the code:

#navigate {
margin: 0px;
width: 12em;
padding: 0em;
float: left;
}
#navigate p {
margin: 0px;
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
font-size: 90%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0.6em;
padding-left: 2.8em;
text-align: justify;
}
#navigate li {
font-family: Verdana, Arial, Helvetica, san-serif;
font-weight: bold;
font-size: 90%;
list-style-type: none;
background-image: url(../Images/tientje.gif);
background-repeat: no-repeat;
background-color: #FF9933;
border: 1px solid #993333;
background-position: 0.8em 0.3em;
padding: 0em;
margin-top: 0.8em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0em;
}
#navigate li a {
width: 100%;
color: #000000;
text-decoration: none;
display: block;
padding-top: 0.4em;
padding-right: 0em;
padding-bottom: 0.4em;
X padding-left: 3.0em;
margin: 0px;
X text-align: left;
}
#navigate li a:hover {
background-color: #993333;
color: #FFCC66;

Thank you for taking the time to read me.
Inge Grotjahn
--
CatManiacs World: http://www.gwsystems.com/inge
New Cat-pics: http://www.gwsystems.com/inge/Galer...cs/e_index.html
The birthday-page: http://www.gwsystems.com/inge/e_geburtstag.htm

trx

2004-07-27, 7:15 pm

Inge Grotjahn wrote:

> When you look at my site in IE, everything appears correctly.
> When you look at my site in Opera, the hover-color spreads to the right,
> accourding to the padding left I used

The problem is that you have given a 100% width to #navigate li a and also
have given it a padding-left of 3em. This means that its width should be
100% of its container *plus* 3em. That's why it correctly overflows in
Opera, and it does the same thing in Mozilla. IE6 is getting it wrong,
though in this case it looks better. What IE6 is doing is stretching the
container. If you study its rendering carefully, you will see that the
whole box is much wider than it should be.

You've also got some additional serious problems in IE5. In that version,
your hover background-color leaves a visible gap because it does not reach
to the container's padding-bottom, and div.acc.grp jumps down about an inch
when your mouse over it.

The following, I hope, will straighten all of this out and give you a
consistent rendering in IE6, IE5x, Mozilla, and Opera.

(1) in #navigate li a, delete the 100% width and the padding-top and
padding bottom. It should look like this:

#navigate li a {
color: #000000;
text-decoration: none;
display: block;
padding-left: 3.0em;
margin: 0px;
text-align: left;
}

(2) In #navigate li, add the following:

line-height: 2em;

(3) Finally, add the following conditional comment to the head of your HTML
document just before the closing head tag and just after the closing style
tag for your imported stylesheet:



In context it should look like this:

@import url("CatMania.css");
-->
</style>

</head>

--
trx

Inge Grotjahn

2004-07-27, 7:15 pm

Dear trx:-)

Am 27.07.2004 schrieb trx:

thank you for your very informative answer and your patience with me. Now
everything works just perfect and you described it to me in a way that I
could understand what was going wrong. Take this as a compliment, because I
don't really know, what I'm doing when it comes to css. Usually for me it
is try and error *g* (with errors all the time *sigh*)

I have all my 11 cats purring just for you:-)
Thanks again
Inge Grotjahn

trx

2004-07-27, 11:14 pm

You're very welcome. It's nice to think of those eleven cats purring.

--
trx

Inge Grotjahn

2004-07-28, 7:15 pm

Hi trx,

Am 28.07.2004 schrieb trx:

> You're very welcome. It's nice to think of those eleven cats purring.

You like cats? The testsite I'm running right now is to replace my actual
site, which is mainly about those cats:-) It has valid, but poorly written
html and valid, but horrible css. It has frames and tables containing the
design:-| This time I want to do it right that changes of the design will
not take more than a year, because I have to change every single page *g*

I wonder, if there is a possibility to apply a template to a folder or
selected pages without opening each single page. I'm a DW4 user. With
message ID <1gsj44ukjbp08.dlg@gwsystems.com> I posted the sad, but true
story of the creation of my site *g*, but I didn't get an answer to it
except that I shouldn't leave all my galleries on the site *g* Maybe it was
OT...

Greetings from Germany
Inge Grotjahn

--
CatManiacs World: http://www.gwsystems.com/inge
New Cat-pics: http://www.gwsystems.com/inge/Galer...cs/e_index.html

trx

2004-07-28, 11:15 pm

Yes, I do like cats, and I'm also fond of dogs.

Unfortunately, I'm not especially knowledgeable about templates, so I can't
be of much help advising you on that subject. But this forum does have some
outstanding template experts who can be a great resource for you. Murray
Summers, for example, has co-authored an excellent book on the subject, and
as I'm sure you know, Murray seems always willing to lend a hand to other
forum participants.

Since there are so many forum messages that no one has time to read them
all, the key to getting a good response is to have an effective descriptive
title for your post, a short one that gives a clear idea of its content.
Thus if your question is about templates, the word "template" should be in
the title. This way as someone with an interest in templates scans the
forum, they will be more likely to pick out your post as something they can
help with.

It's also important to keep your posts focused on one topic. Asking a
variety of questions in a single post can discourage readers who may not
have time to deal with them all or who may choose to move on to another
post because they feel they cannot give you a comprehensive response to all
of your concerns.

Finally, the example site that you link to should make the problem readily
apparent to the viewer. If necessary, eliminate extraneous elements from
the page so that the focus is on the element or elements that need to be
examined. That way the viewer becomes immediately engaged in the problem
and is more likely to stay with it until he or she can offer a solution.

Anyway, keep up the good work. I've enjoyed visiting your site and look
forward to following along as you make changes.

--
trx

Murray *TMM*

2004-07-31, 11:14 pm

Please post your question again under a new thread, and I'll try to help
you!

--
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
==================

"Inge Grotjahn" <inge@gwsystems.com> wrote in message
news:f1isjfdjsdrj.dlg@gwsystems.com...
> Hi trx,
>
> Am 28.07.2004 schrieb trx:
>
>
> You like cats? The testsite I'm running right now is to replace my actual
> site, which is mainly about those cats:-) It has valid, but poorly written
> html and valid, but horrible css. It has frames and tables containing the
> design:-| This time I want to do it right that changes of the design will
> not take more than a year, because I have to change every single page *g*
>
> I wonder, if there is a possibility to apply a template to a folder or
> selected pages without opening each single page. I'm a DW4 user. With
> message ID <1gsj44ukjbp08.dlg@gwsystems.com> I posted the sad, but true
> story of the creation of my site *g*, but I didn't get an answer to it
> except that I shouldn't leave all my galleries on the site *g* Maybe it
was
> OT...
>
> Greetings from Germany
> Inge Grotjahn
>
> --
> CatManiacs World: http://www.gwsystems.com/inge
> New Cat-pics: http://www.gwsystems.com/inge/Galer...cs/e_index.html