SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Text in IE6

    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.
    Code HTML4Strict:
    <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>
    Follow Me On Twitter: BryceRay

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Follow Me On Twitter: BryceRay

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    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.
    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-
    Code HTML4Strict:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •