div question IE/Opera vs. FireFox/Safari who's right?

Discussion in 'HTML' started by Damien Cymbal, Mar 17, 2006.

  1. I've stripped this down from a larger page to make it as simple as
    possible. The relevant bits are supposed to represent a sort of context
    menu down the left hand side of the page. When I render this on IE and
    Opera and then shrink the browser window width, the strings in the menu
    display ok. When I render it in Firefox/Safari/Epiphany/Konqueror the
    strings start to overflow/overlap and just become a jumbled mess as I
    squeeze the window. Is there a cross-platform way to achieve the IE
    behavior?

    ------------------------------------------------------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>
    Bad Content Menu
    </title>
    <style type="text/css">
    ..menu-container ul
    {
    padding: 1px 1px 1px 1px;
    margin: 0 0 /*1em*/ 0.5em 0;
    list-style-type: none;
    background-color: #666666;
    color: #FFFFFF;
    font: 12px arial;
    text-align: left;
    }
    ..menu li a
    {
    padding: 0 0 0 0.25em;
    display:block;
    height:1.5em;
    text-decoration: none;
    background-color: #9E9EA2;
    color: #FFFFFF;
    border-top: solid 1px #575757;
    border-left: solid 1em #575757;
    }
    ..menu li a:hover
    {
    background-color: #A5C3DE;
    color: #000000;
    }
    table#layout
    {
    width:100%;
    background-color:White;
    }
    #container-menu-layout
    {
    width:20%;
    border-style: solid;
    border-color: #999999;
    border-width: 1px;
    border-right-style:none;
    padding-top:0.25em;
    padding-left:0.25em;
    padding-right:0.25em;
    vertical-align:top;
    background-color:#BDC0C8;
    }
    #container-layout
    {
    vertical-align:top;
    border-style: solid;
    border-color: #999999;
    border-width: 1px;
    border-left: none;
    }
    </style>
    </head>

    <body>
    <table id="layout" align="center" border="0" cellpadding="0"
    cellspacing="0" width="100%" summary="foo">
    <tr>
    <td id="container-menu-layout">
    <h2>Menu Title</h2>
    <div class="menu-container">
    <ul class="menu">
    <li><a href="#String1">String1</a></li> <li><a
    href="#String2">String2 a bit longer</a></li> <li><a
    href="#String3">String3 which is really really long</a></li>
    </ul>
    </div>
    </td>
    <td id="container-layout">
    <div id="container">
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
    Damien Cymbal, Mar 17, 2006
    #1
    1. Advertising

  2. Damien Cymbal wrote:
    > I've stripped this down from a larger page to make it as simple as
    > possible. The relevant bits are supposed to represent a sort of context
    > menu down the left hand side of the page. When I render this on IE and
    > Opera and then shrink the browser window width, the strings in the menu
    > display ok. When I render it in Firefox/Safari/Epiphany/Konqueror the
    > strings start to overflow/overlap and just become a jumbled mess as I
    > squeeze the window. Is there a cross-platform way to achieve the IE
    > behavior?
    >
    > ------------------------------------------------------------------------------------------
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    1) Your in quirks mode!

    > .menu li a
    > {
    > padding: 0 0 0 0.25em;
    > display:block;
    > height:1.5em;

    ^^^^^
    2) you set the height for your links and and make them block elements
    so I'd say Firefox and Safari

    > text-decoration: none;
    > background-color: #9E9EA2;
    > color: #FFFFFF;


    <snip code>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Mar 17, 2006
    #2
    1. Advertising

  3. Damien Cymbal

    Jim Moe Guest

    Damien Cymbal wrote:
    > [...] When I render this on IE and
    > Opera and then shrink the browser window width, the strings in the menu
    > display ok. When I render it in Firefox/Safari/Epiphany/Konqueror the
    > strings start to overflow/overlap and just become a jumbled mess as I
    > squeeze the window. Is there a cross-platform way to achieve the IE
    > behavior?
    >

    Add this to ".menu li a":
    white-space: nowrap;
    overflow:hidden;

    Next time describe what "display ok" means.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Mar 17, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bob
    Replies:
    24
    Views:
    1,529
  2. Stefan Mueller
    Replies:
    7
    Views:
    126
  3. Tim Slattery
    Replies:
    3
    Views:
    215
  4. Jorge
    Replies:
    3
    Views:
    134
    Gregor Kofler
    Jul 2, 2008
  5. wdedalus
    Replies:
    0
    Views:
    598
    wdedalus
    Oct 10, 2012
Loading...

Share This Page