[css-d] Floated tab menu with imageless rounded corners. IE goes berserk.

[charles]

Hi List!

Long-time listener; first-time poster here.

I'm combining a floated tab menu and rounded corners.  Independently, 
either one displays fine across browsers.  It's when I combine them that 
the problems begin.

Firefox, of course, displays it perfectly, as does Konqueror (my Safari 
proxy).  IE, on the other hand, stacks the tabs as soon as the rounded 
corners are applied.  If the rounded corners are removed, IE once again 
displays the tabs inline.

I'm missing something here, and would love it if somebody could tell me 
how to fix this.

The site itself, in all its embryonic glory, can be found here:

http://www.spiritone.com/~charlesd/newsite/funkylist.html

Code below.

Thanks all!

-charles



Relevant CSS (note that the colors for the rounded divs aren't right in 
this snippet below.  Just ignore that... along with the fact that the 
page has no actual content yet, just a decapitated header):

/*tabbed navigation */

#navblock {position: absolute;
bottom: 0;
left: 170px;
}

#navtab{
margin-left: 4px;
padding: 0;
width: 100%;
padding-left: 5px;
}

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

#navtab li{
display:inline;
margin:0 2px 0 0;
padding:0;
}


#navtab a{
float:left;
color: black;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#navtab a span{
background-color: #626461;
float:left;
display:block;
padding:4px 9px 2px 6px;
border-right:1px solid black; border-left:1px solid black;
text-transform:uppercase;
}

/* rounded corners */

.boxtop, .boxbottom {display:block; background:transparent; font-size:1px;}
.bx1, .bx2, .bx3, .bx4 {display:block; overflow: hidden;}
.bx1, .bx2, .bx3 {height: 1px;}
.bx2, .bx3, .bx4 {background-color: white; border-left: 2px solid 
#99; border-right: 2px solid #99;}
.bx1 {margin: 0 5px; background-color:#99;}
.bx2 {margin: 0 3px; border-width:0 2px;}
.bx3 {margin: 0 2px;}
.bx4 {height: 2px; margin:0 1px;}


And, the HTML:

div id=navblock
div id=navtab
ul
li style=margin-left: 1pxa href=. id=homenav
b class=boxtopb class=bx1/bb class=bx2/bb 
class=bx3/bb class=bx4/b/b
spanHome/span/a
/li

lia href=. id=joinnav
b class=boxtopb class=bx1/bb class=bx2/bb 
class=bx3/bb class=bx4/b/b
spanCheese/span/a
/li

lia href=. id=svcnav
b class=boxtopb class=bx1/bb class=bx2/bb 
class=bx3/bb class=bx4/b/b
spanMeat/span/a
/li

lia href=. id=supnav
b class=boxtopb class=bx1/bb class=bx2/bb 
class=bx3/bb class=bx4/b/b
spanfruit/span/a
/li   

lia href=. id=accountnav
b class=boxtopb class=bx1/bb class=bx2/bb 
class=bx3/bb class=bx4/b/b
spanbran/span/a
/li   
/ul
/div

/div
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floated tab menu with imageless rounded corners. IE goes berserk.

[Kelly Miller]

-BEGIN PGP SIGNED MESSAGE-
Hash: SHA1

charles wrote:
| Hi List!
|
| Long-time listener; first-time poster here.
|
| I'm combining a floated tab menu and rounded corners.  Independently,
| either one displays fine across browsers.  It's when I combine them that
| the problems begin.
|
| Firefox, of course, displays it perfectly, as does Konqueror (my Safari
| proxy).  IE, on the other hand, stacks the tabs as soon as the rounded
| corners are applied.  If the rounded corners are removed, IE once again
| displays the tabs inline.
|

I would suggest looking into the Sliding Doors method here;
unfortunately, horizontal menus and rounded corners tend not to mix.

If you still want to try it this way, though, I suggest looking into
using a combination of inline-block and table display settings instead
of floats.  IE tends to do odd things in the presence of floats...


-BEGIN PGP SIGNATURE-
Version: GnuPG v1.4.3 (GNU/Linux)
Comment: Using GnuPG with Fedora - http://enigmail.mozdev.org

iD8DBQFEYr4hvCLXx0V8XHQRAo3RAJ4lT0DVMExK9NijGuJPLD8NOr2uxQCfTl8Z
ftyTMlm4mDRLh4PVtC2FW38=
=w6KP
-END PGP SIGNATURE-
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/