Vertical Text in IE6

HTML & CSS
1

I have some html/css that seems to work in all browsers except IE6. What can I do to get this working in IE6?

Thanks in advance for any help you an offer.

<style>
.slideNav-title {
font-family:Georgia, "Times New Roman", Verdana;
text-transform:uppercase;
float:right;
padding:0;
border:none!important;
color:#000;
margin:0 -5px 0 0;
display:inline;
text-align: center;
}

.slideNav-title span {
display:block;
}
</style>
<div style="width:40px">
<div class="slideNav-title">
<span>N</span>
<span>a</span>
<span>v</span>
<span>i</span>
<span>g</span>
<span>a</span>
<span>t</span>
<span>i</span>
<span>o</span>
<span>n</span>
</div>

</div>
2

The only problem I see is the negative margin you have on the outer div that’s pulling the <span>s to the right, along with the float right, hiding the right part of them.

3

I’ll look into that, some more information I should have included in the first post.

In IE6 the text renders horizontally instead of vertically. So it seems the span block is not forcing each character to a new line.

4

That’s an old IE6 bug when using negative margins on an element that shifts out of it’s parent, the cure for that is position:relative on the shifted element.

In IE6 the text renders horizontally instead of vertically. So it seems the span block is not forcing each character to a new line.
It’s working for me as long as the span does not get haslayout

You can do what you are wanting without all the spans by using word-wrap:break-word;, it’s CSS3 but IE has supported it for quite some time. Actually it was an IE property if I remember correctly.

Something like this-


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav with Vertical Text</title>

<style type="text/css">
#nav {
    float:left;
    width:120px;
    margin:0;
    padding:0;
    list-style:none;
    background:#191919;
}
#nav li {
    float:left;
    width:24px;
    height:200px;
    overflow:hidden;
}
#nav a {
    float:left;
    width:14px;/* 24px with padding */
    height:10px;/* 200px with padding */
    padding:10px 5px 180px;
    word-wrap:break-word;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    font:14px/15px Georgia,"Times New Roman",Verdana;
    color:#FFF;
}
#nav a:active,
#nav a:focus,
#nav a:hover {
    background:#5C8F32;
}
</style>

</head>
<body>

<ul id="nav">
    <li><a href="#1">Home</a></li>
    <li><a href="#2">About</a></li>
    <li><a href="#3">Services</a></li>
    <li><a href="#4">Work</a></li>
    <li><a href="#5">Contact</a></li>
</ul>

</body>
</html>