probs with DIV and <ul> height

[alexthecatta]

I have a DIV with a horizontal <ul> inside that works as a nav bar.

With IE everything is OK (except the roll over effect...see my other post).

With Mozilla, Firefox and Opera the height of the <ul> exceed, on top and bottom side, the height of the DIV: notice that on the right part of the DIV it's visibile the end of the <ul> and the remaining part of the DIV has a lower height.

Why? How can I solve the prob? Please help me...I'm abt to throw it away.

Here is my CSS. The DIV is divBreadcrumb, and as u can see it has a horizontal UL inside.

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#divMain {
position:relative;
min-height:100%;
width:870px;
}
* html #divMain {height:100%}
#divBreadcrumb {
background-color: #00CC33;
background-image:url(../img/jpg/onepix_dx.jpg);
background-repeat:repeat-y;
background-position:right;
padding-top: 8px;
padding-bottom: 3px;
margin-left: 10px;
margin-top: 0px;
width: 870px;
font-size: 14px;
}
#divLeft {
float:left;
width:200px;
text-align:center;
height: 540px;
}
#divRight {
float:right;
width:6px;
height:540px;
text-align:center;
background-image: url(../img/jpg/onepix_dx.jpg);
background-repeat: repeat-y;
}
#divCont {
position:relative;
margin-left:200px;
height: 540px;
background-image: url(../img/jpg/onepix_dx.jpg);
background-repeat: repeat-y;
background-position: right;
}
#divCenter {
margin-right:6px;
text-align:center;
background-image: url(../img/jpg/sede40.jpg);
background-repeat: no-repeat;
background-position: center top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 2em;
font-weight: bold;
letter-spacing: normal;
vertical-align:top;
word-spacing: 1em;
padding: 80px 80px 0px;
height: 460px;
}
#divClear {
clear:both;
}
* html #divCont,
* html #divMain{
height:1px;
}
.specifiche {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 9px;
padding-bottom: 2px;
line-height: 1em;
letter-spacing: normal;
text-align:right;
word-spacing: normal;
font-weight: lighter;
bottom: 2px;
text-transform: uppercase;
}
#divFooter {
font-family: "Courier New", Courier, mono;
font-size: 0.8em;
color: #000000;
text-align: center;
vertical-align: middle;
font-weight: lighter;
width: 870px;
border-top: thin solid #666666;
}
.testohome {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 2em;
font-weight: bold;
letter-spacing: normal;
vertical-align:top;
word-spacing: 1em;
}
#scroll {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 12px;
line-height: 15px;
color: #000000;
height: 350px;
width: 150px;
padding: 0 0 0 2;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #333333;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #333333;
font-weight: bold;
word-spacing: 0.5em;
margin-top: 40px;
}
#divBreadcrumb ul {
display:inline;
list-style-type:none;
margin-left: 0px;
padding-left: 0px;
z-index:9999;
}
#divBreadcrumb li {
display: inline;
text-align:center;
background-color: #00CC33;
}
#divBreadcrumb ul a:link, a:visited, a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
text-decoration:none;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 3px;
padding-top: 8px;
font-weight: bold;
border: 2px solid #00CC33;
}
#divBreadcrumb ul a:hover {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color:#000000;
background-color:#00FF00;
border: 2px solid #000000;
}

[Fang]

Try these changes:#divBreadcrumb {
background-color: #00CC33;
background-image:url(../img/jpg/onepix_dx.jpg);
background-repeat:repeat-y;
background-position:right;
padding-top: 8px;
padding-bottom: 3px;
margin-left: 10px;
margin-top: 0px;
width: 870px;
overflow:hidden; /* added */
font-size: 14px;
}
#divBreadcrumb ul {
margin: 0px; /* added */
padding: 0px; /* added */
xdisplay:inline; /* removed */
list-style-type:none;
xmargin-left: 0px; /* removed */
xpadding-left: 0px; /* removed */
xz-index:9999; /* removed */
}
#divBreadcrumb li {
xdisplay: inline; /* removed */
float:left; /* added */
text-align:center;
background-color: #00CC33;
}
#divBreadcrumb ul a:link, a:visited, a:active {
display:block; /* added */
font-family: Arial, Helvetica, sans-serif;
xfont-size: 14px; /* removed */
color: #000000;
text-decoration:none;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 3px;
padding-top: 8px;
font-weight: bold;
border: 2px solid #00CC33;
}
#divBreadcrumb ul a:hover {
font-family:Arial, Helvetica, sans-serif;
xfont-size: 14px; /* removed */
color:#000000;
background-color:#00FF00;
border: 2px solid #000000;
}
A link to the page would be easier

[alexthecatta]

mmm I've done the modification u suggested me. Now the problem of the height of DIV and Ul it's ok, and I can correctly see the roll over effect.

BUT now everything is placed in a wrong position, even worse than before.

I'm really losing hope... :(
I enclose what I see with firefox, Opera, IE. Please help me...
thanks
Ale
PS
what do u think is better? work and develop the site with firefow and then check the bugs with IE?

[alexthecatta]

and this is the link to check the site.

http://www.cattaneoalessandro.com/

I have several probs more:
the site it's visibile only with IE. With Mozilla, FF and Opera, the page CAN NOT BE FOUND. WHY!??! :mad:

And with IE i've completely lost the roll over effect of the nav bar.
:(((((

[alexthecatta]

OK, now everything concerning the nav bar is ok.

BUT with FF and Opera I have a uncontrolled green border in the top left corner of the page. Don't know where it comes from and how to delete it.

Is it something from the nav bar? why with IE is it OK?

I enclose the screen shot of what I see.
thanks
Ale
PS
u can not see this on line cos I can not upload the changes.

[ray326]

Well this doesn't look right to me.

<a href="default.htm"></a><a href="default.htm"></a><a href="default.htm"><img ...

[alexthecatta]

yes I've clened the code.

Now it's ok if i test the page with opera, mozilla and FF. IE it change completely everything, but I will try to fix this later.

What I can not understand now is why if i test the page locally it's ok, but when I publish it's completely different: it doesn't get therool over effect, the styles etc...???? why? i'm gonna start drinking...

[Fang]

The online version doesn't have the links in a list element.

[alexthecatta]

hi fang,
I solved the problem: the link between the default pag and the css file wasn't right.

Now it's ok, but don't consider the online page cos I didn't upload the final version yet.