CSS Question

[chrisJumbo]

Seems to me there was an IE Hack for this, but I can't remember.

In IE, my div surrouding my horizonal menu is too high. No matter what I do I can't reduce the height to fit the list items.

Here is the CSS in question:

#outer2 {background-image: url(ltbl.jpg);
background-repeat: repeat; position: absolute; left: 0px; top: 90px; display:block;
padding:0px; width:99%; height: 39px; margin: 0px;
z-index: 8;}

#outer2 ul {margin-left:0px; margin-top: 4px; padding:0; list-style-type:none;
background:transparent; height: 35px; }

#outer2 li {display:block; float:left; background: url(button1.gif); border-color: #463b66;
border-left: 1px solid; border-right: 1px solid; height: 35px; width: 107px;
text-align: center; vertical-align: center;}

#outer2 a {font-size: 10.5pt;
display: block;
text-decoration: none;

color: #CECEF1;
padding-left: 3px;
padding-right: 3px;}

#outer2 a:hover {
font-size: 12.5pt;
font-weight: bold;
color: white;
}

#outer2 a.cur {font-size: 12pt;
display: block;
text-decoration: none;
font-weight: bold;
color: white;
padding-left: 3px;
padding-right: 3px; }

Here is the page (under construction)
www.jumbocdinvestments.com/preview2/index.htm

It looks fine in FF. I'm using IE6.

[PARoss]

Chris,

Before you work on hacks (which are probably not needed here), fix the CSS. It doesn't validate:

Running the CSS through http://cdburnerxp.se/cssparse/css_optimiser.php produces:

@charset "iso-8859-1";

body.home {
z-index:-1;
width:100%;
font-size:10pt;
font-family:verdana;
padding:0;
}

TABLE {
color:#000;
font-family:"Verdana";
font-size:11pt;
}

div.menu {
background:#FFECD9;
font-weight:bolder;
color:#000;
position:absolute;
top:140px;
left:0;
width:155px;
z-index:5;
border-top:3px solid #656acc;
border-bottom:3px solid #656acc;
padding-left:10px;
}

div.img1 {
position:absolute;
left:0;
top:200px;
width:400px;
height:100px;
z-index:2;
}

div.tst1 {
background:url(flag3.JPG) repeat;
position:absolute;
left:0;
top:2px;
width:100%;
height:85px;
z-index:1;
}

div.tst2 {
margin-left:81px;
height:64px;
font-size:30pt;
font-weight:bolder;
font-style:italic;
color:#000;
text-align:left;
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.60);
-moz-opacity:0.60;
}

div.banner {
background:url(picture1.gif) no-repeat;
position:absolute;
top:0;
left:0;
width:100%;
height:129px;
z-index:2;
margin-left:10px;
text-align:center;
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.60);
-moz-opacity:0.60;
}

div.imgd {
position:relative;
float:right;
z-index:4;
margin:5px;
}

div.imgb1 {
position:absolute;
top:5px;
left:525px;
width:75px;
z-index:4;
}

.hrOne {
color:#656acc;
margin:0;
padding:0;
}

P.nos {
text-align:center;
margin:0 0 1pt;
}

p.about {
font-family:"Verdana";
font-size:10pt;
}

spRate {
color:red;
}

#right {
position:absolute;
background:#FFF;
top:130px;
left:145px;
width:78%;
z-index:0;
border-left:3px solid #656acc;
border-top:3px solid #656acc;
margin-left:0;
padding-left:30px;
font-family:Verdana;
}

.stock {
position:absolute;
top:75px;
left:0;
width:205px;
height:200px;
}

.news {
position:absolute;
top:75px;
left:225px;
width:400px;
height:200px;
}

.comm {
position:absolute;
top:275px;
left:0;
width:85%;
height:20px;
}

.texta {
position:absolute;
top:295px;
left:0;
width:97%;
height:175px;
overflow:auto;
}

.link {
position:absolute;
top:500px;
left:0;
width:97%;
height:200px;
}

span.col_one {
background:#FF0;
position:relative;
left:0;
width:200px;
}

span.col_two {
background:blue;
position:relative;
left:5px;
width:100px;
}

.toph1,.toph2,.toph2r,.toph3,.toph3c {
font-size:18px;
font-weight:700;
margin:0;
}

.toph2 {
font-size:14px;
}

.toph2r {
font-size:14px;
font-style:italic;
color:#A52549;
}

.toph3c {
text-align:center;
font-size:12px;
}

.toph3 {
font-size:12px;
}

h4.top {
font-family:"Verdana";
font-size:12px;
font-weight:700;
margin:0;
}

h4.topw {
text-align:center;
font-family:"Verdana";
font-size:12px;
font-weight:700;
color:#FFF;
margin:0;
}

h4.topr {
text-style:italic;
color:#D60808;
}

.p13 {
font-family:"Verdana";
padding-bottom:2.5px;
font-size:10pt;
font-weight:400;
word-spacing:2px;
text-align:left;
}

.p13c {
font-family:"Verdana";
padding-bottom:2.5px;
text-align:center;
font-size:10pt;
font-weight:400;
word-spacing:2px;
}

p.p14c {
font-family:"Verdana";
padding-bottom:3px;
font-size:12pt;
font-weight:400;
word-spacing:2px;
text-align:center;
}

p.p10 {
font-family:"Verdana";
padding-bottom:1.5px;
padding-top:0;
font-size:10pt;
word-spacing:2px;
text-align:left;
font-weight:700;
}

p.p11c {
font-family:"Verdana";
padding-bottom:.5px;
padding-top:0;
font-size:10pt;
font-weight:400;
word-spacing:2px;
text-align:center;
}

p.p11 {
font-family:"Verdana";
font-size:10pt;
font-weight:400;
word-spacing:2px;
margin:0 0 4px;
}

p.p14 {
font-family:"Verdana";
font-style:bold;
padding-bottom:.5px;
font-size:14pt;
}

p.t12 {
font-family:Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}

span.btn {
background-color:#DEDEDE;
border:.1em;
}

.p12 {
font-family:Verdana;
padding-bottom:.5px;
padding-top:0;
padding-left:3px;
font-size:10pt;
font-weight:400;
word-spacing:2px;
text-align:left;
}

.footer {
color:#669;
font-family:Verdana;
font-size:10pt;
text-align:center;
}

.footer a:link {
color:#656acc;
text-decoration:none;
font-weight:700;
font-size:8pt;
}

.footer a:active {
color:#656acc;
text-decoration:underline;
font-weight:700;
font-size:8pt;
}

.footer a:visited {
color:#A52549;
text-decoration:none;
font-weight:700;
font-size:8pt;
}

.footer a:hover {
color:#656acc;
text-decoration:underline;
font-size:8pt;
}

#lnks {
float:left;
width:525px;
position:relative;
top:0;
z-index:3;
font-family:"Verdana";
font-size:10pt;
margin:5px 0 0;
}

#lnks ul {
list-style:none;
margin:0;
padding:0;
}

#lnksb {
float:left;
width:525px;
position:relative;
top:4px;
font-family:"Verdana";
font-size:10pt;
z-index:3;
margin:5px 0 0;
}

#lnksb ul {
list-style:horizontal;
margin:0;
padding:0;
}

div.grph {
z-index:-1;
}

div.iframe {
position:relative;
left:10px;
top:25px;
width:475px;
}

#ifrm {
border:1px solid #000;
padding-right:0;
margin:0;
}

span.sq {
width:3px;
height:17px;
background-color:#D60808;
}

span.smp {
width:.5px;
height:17px;
background-color:#039;
}

#buttonA {
position:absolute;
top:8px;
left:290px;
}

#buttonA ul {
font-family:Verdana;
font-size:12px;
line-height:20px;
margin:0;
padding:0;
}

#buttonA li {
list-style-type:none;
height:20px;
width:100px;
text-align:center;
background-color:#656ACC;
border-color:#7e84ff #5f64c0 #484b91 #7076e3;
border-style:solid;
margin:4px;
}

.buttonli {
list-style-type:none;
height:20px;
width:100px;
font-weight:700;
text-align:center;
background-color:#656ACC;
cursor:default;
border-color:#7e84ff #5f64c0 #484b91 #7076e3;
border-style:solid;
margin:4px;
}

.buttonlib {
list-style-type:none;
height:20px;
width:100px;
font-weight:700;
color:#FFF;
text-align:center;
background-color:#565baf;
cursor:hand;
border-color:#7e84ff #5f64c0 #484b91 #7076e3;
border-style:solid;
margin:4px;
}

#buttonA li a {
text-decoration:none;
height:100%;
width:100%;
display:block;
background-color:#656ACC;
border-color:#7e84ff #5f64c0 #484b91 #7076e3;
border-style:solid;
}

#buttonA li a:link {
color:#000;
font-weight:700;
background-color:#656ACC;
border-color:#7e84ff #5f64c0 #484b91 #7076e3;
border-style:solid;
}

.p13 a:link,.p13c a:link {
color:#656acc;
text-decoration:none;
font-weight:700;
font-size:10pt;
}

.p13 a:active,.p13c a:active {
color:#656acc;
text-decoration:underline;
font-weight:700;
font-size:10pt;
}

.p13 a:visited,.p13c a:visited {
color:#A52549;
text-decoration:none;
font-weight:700;
font-size:10pt;
}

.p13 a:hover,.p13c a:hover {
color:#656acc;
text-decoration:underline;
font-size:10pt;
}

.p12 a:link,#lnks a:link,#lnksb a:link {
color:#656acc;
text-decoration:none;
font-weight:700;
}

.p12 a:active,#lnks a:active,#lnksb a:active {
color:#656acc;
text-decoration:underline;
font-weight:700;
}

.p12 a:visited,#lnks a:visited,#lnksb a:visited {
color:#A52549;
text-decoration:none;
font-weight:700;
}

.p12 a:hover,#lnks a:hover,#lnksb a:hover {
color:#656acc;
text-decoration:underline;
}

#lnks ul li,#lnksb ul li {
display:inline;
margin:0 0 .1em;
}

This is easier to read, produces the same result in FF and may fix the problem. The site renders the same on IE6 and FF on my machine.

Phil

[chrisJumbo]

Thank you. I did make some other changes that fixed the problem (without the hack), but I've made so many that I don't remember what I did. I think it was something to do with the width or height.

Anyway, the CSS was for my redesign and I've been slowly working through it and removing what was unnecessay. I will try that CSS validiator.

There are numerous sites dedicated to the fact the IE does render padding and such differently. Here is one. But of course, when Hacks can be avoided it is best. Thanks again.

tantek.com/CSS/Examples/boxmodelhack.html

[chrisJumbo]

I ran it through the W3C validator. The errors it gives now are:

div.tst2 Property -moz-opacity doesn't exist : 0.6
div.tst2 attempt to find a semi-colon before the property name. add it

div.tst2 Property progid doesn't exist : DXImageTransform

div.tst2 Parse Error - DXImageTransform.Microsoft.BasicImage(opacity=0.60 );

div.tst2 Parse error - Unrecognized }
div.banner Property -moz-opacity doesn't exist :0.65
div.banner attempt to find a semi-colon before the property name. add it

div.banner Property progid doesn't exist : DXImageTransform

div.banner Parse Error - DXImageTransform.Microsoft.BasicImage(opacity=0.65 );

div.banner Parse error - Unrecognized }
.buttonlib Value Error : cursor hand is not a cursor value : hand

The opacity is for filtering in FireFox the DXImageTransorm is for IE. Are those methods proprietary to those entities, thus not recognized by the validator?

As for the cursor value: hand, that is for backwards compatability. I had to make the CSS mimic a hover, since when I put the original code inside of an <A href> tag, FireFox wouldn't show the graph on the historical CD rates page.

I fixed the other errors.

[PARoss]

Chris,

Yes, opacity is proprietary.

I think the site would look better and read easier with this:

#right {position: absolute; background: white; top: 130px; left: 145px; width: 48%;
z-index: 0; border-left: 3px solid #656acc; border-top: 3px solid #656acc; margin-left: 0px; padding-left: 30px;
font-family: Verdana; line-height:1.4}

It's too wide, and needs some line space.

Phil

[chrisJumbo]

I will give that a try and see how it looks. Thans for the suggestion.

cd :O)