Weird Block Element Problem

[boogyman]

http://www.freewebtown.com/poolfiction If you are using Firefox use the web developer tool and select Outline >Block Element and select Outline >Show Element Names When Outlining..... If you are using IE you will already see my desired effect.....

for some reason I cannot get the header to show in firefox normally... If you do what I said to above the header will show... so does anyone know what changes are made to the css with those 2 commands? I would appreciate the help....





div#cases-nav {
width: 100%;
background: #000;
color: #f90;
margin-left: 20px;
}
div#cases-nav a{
float: left;
margin: 0;
padding: 0;
width: 16%;
display: block;
text-align: center;
background: #000 url('slant.gif') no-repeat right;
color: #f90;
text-decoration: none;
font-size: medium;
}
div#ladder {
clear: both;
position: absolute;
top: 17px;
left: 20%;
width: 14%;
visibility: hidden;
text-align: center;
display: block;
background: #000;
color: #f90;
padding-top: 10px;
padding-bottom: 0;
z-index: 10;
}
div#ladder a {
margin: 0;
padding: 0;
display: block;
text-decoration: none;
color: #f90;
}

div#tournament {
clear: both;
position: absolute;
top: 17px;
left: 35%;
width: 14%;
visibility: hidden;
text-align: center;
display: block;
background: #000;
color: #f90;
padding-top: 10px;
padding-bottom: 0;
z-index: 10;
}
div#tournament a {
margin: 0;
padding: 0;
display: block;
text-decoration: none;
color: #f90;
}

div#community {
clear: both;
position: absolute;
top: 17px;
left: 51%;
width: 14%;
visibility: hidden;
text-align: center;
display: block;
background: #000;
color: #f90;
padding-top: 10px;
padding-bottom: 0;
z-index: 10;
}
div#community a {
margin: 0;
padding: 0;
display: block;
text-decoration: none;
color: #f90;
}


div#account {
clear: both;
position: absolute;
top: 17px;
left: 67%;
width: 14%;
visibility: hidden;
text-align: center;
display: block;
background: #000;
color: #f90;
padding-top: 10px;
padding-bottom: 0;
z-index: 10;
}
div#account a {
margin: 0;
padding: 0;
display: block;
text-decoration: none;
color: #f90;
}


div#support {
clear: both;
position: absolute;
top: 17px;
left: 84%;
width: 14%;
visibility: hidden;
text-align: center;
display: block;
background: #000;
color: #f90;
padding-top: 10px;
padding-bottom: 0;
z-index: 10;
}
div#support a {
margin: 0;
padding: 0;
display: block;
text-decoration: none;
color: #f90;
}

[mwinter]

http://www.freewebtown.com/poolfiction

It's caused by an odd combination of clipping and floating. The #head element has been moved to the right (as content will when next to a left-floated element), and, due to the combined width of the floated elements, been reduced to a zero (0) width. As content in that element has been clipped due to the overflow property, it doesn't appear.



If you are using IE you will already see my desired effect.....

That would suggest that you designed this using IE as a guide, and then tested in Firefox afterwards. Wrong way around. Use a decent browser like Firefox or Opera first.

Mike

[boogyman]

Thanks Alot... I never even thought of that... and as for the other part, I think IE should DIE!!! I only tested it on IE after about 4 days of fiddling around with the css and javascript trying to figure out where I went wrong in my code. Not to my surprise IE did show what I was attempting to accomplish, but I was not satisfied because I knew that the code was not correct being that an actual standards compliant browser like Firefox did not have what I was looking for. I write all my code and test in Firefox first then I test in netscape and lastly IE. I am hoping one day IE will turn over all its controls to some people that feel the need to not continually be different just to be different.

Thanks again. Pi$$a

[mwinter]

...and as for the other part, I think IE should DIE!!!

Heh. Don't we all. :rolleyes:

Mike