|
|
|
Help with CSS please |
|---|
| message from Inge Grotjahn on 25 Jul 2004 |
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 replied to Inge Grotjahn on 25 Jul 2004 |
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;
|
|
