Results 1 to 9 of 9

Thread: Float Left?

  1. #1
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Float Left?

    Can someone help with an exception for IE6?

    I have a 4 column CSS layout in which the left column contains a
    simple List based vertical menu. Now, the menu sometimes floats out
    into the middle of the screen in IE6 and sometimes IE7. It behaves
    properly in all other Browsers. Maybe it is a connection speed
    issue? I cannot verify the phenomenon.

    I tried float: left; and I still get emails saying that it is not
    helping. I also tried reverting the PC back to IE6 and wouldn't you
    know it, you can't if Service Pack7 was installed.
    Below is the CSS for the left column and the top elements of the
    menu. (ModelYacht.org) Thanks in advance for any help. -PhilipS

    #left
    {
    width: 140px;
    /* LC width */
    padding: 5px 5px 0 5px;
    /* LC padding */
    right: 240px;
    /* LC fullwidth + CC padding */
    margin-left: -100%;
    }

    /* CSS Popout Menu */
    #menu
    {
    position: absolute;
    top: 1px;
    left: 58px;
    padding: 1px;
    z-index: 2;
    width: 140px;
    background-image: url();
    color: inherit;
    background-color: #003;
    right: 0px;
    bottom: 0px;
    text-indent: 4px;
    float: left;
    }

    #menu a, #menu h2
    {
    display: block;
    font: bold 11px/15px arial,helvetica,sans-serif;
    border-top: 1px #00F solid;
    white-space: nowrap;
    text-indent: 4px;
    width: 135px;
    text-transform: uppercase;
    text-align: justify;
    text-decoration: none;
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    height: 15px;
    padding: 1px 0px 0px 0px;
    background-color: #FAFAFA;
    border-right: 1px #CCC solid;
    border-left: 1px #CCC solid;
    }

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    If you need IE6, I'd recommend IETester, it has IE5.5 to IE8 all in one.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Very Cool!

    Ok now what? I have verified the issue. Cannot control it.

  4. #4
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    can you post a link to your site or all of your code?
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  5. #5
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I listed the domain in the first post.

    I already have the <meta http-equiv=X-UA-Compatible content="IE=EmulateIE7"> . I think the problem is that IE6 is not recognizing the new CSS standards.

  6. #6
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here's the whole enchilada:

    body
    {
    padding-left: 140px;
    /* LC fullwidth */
    padding-right: 190px;
    /* RC fullwidth + CC padding */
    min-width: 730px;
    /* LC fullwidth + CC padding */
    background-image: url(/css/image/steel37.gif);
    font-family: Arial,Times,Monoco,Helvetica,Serif;
    font-size: 14px;
    min-height: 600px;
    border: 1px #900;
    max-width: 1600px;
    max-height: 1000px;
    background-color: #003;
    }

    #header
    {
    margin: 0px -197px 0px -200px;
    border: 0;
    }

    #footer
    {
    margin: 5px -197px 0px -200px;
    height: 15px;
    }

    .column
    {
    position: relative;
    float: left;
    min-height: 400px;
    height: auto;
    }

    #center
    {
    padding: 0 20px 0 20px;
    width: 100%;
    min-height: 545px;
    }

    #left
    {
    width: 140px;
    /* LC width */
    padding: 1px;
    /* LC padding */
    right: 240px;
    /* LC fullwidth + CC padding */
    margin-left: -100%;
    float: left;
    }

    #right
    {
    width: 130px;
    /* RC width */
    padding: 75px 1px 1px 5px;
    /* RC padding */
    margin-right: -100%;

    }

    #footer
    {
    clear: both;
    border: 0;
    }

    /*** IE Fix ***/
    * html #left
    {
    left: 130px;
    /* RC fullwidth */
    float: left;
    }

    /*** Just for Looks ***/
    body { background-color: #003; }

    #header
    {
    font-size: small;
    text-align: center;
    padding-bottom: 1px;
    background-image: url(/css/image/header_back.gif);
    background-color: #003;
    border: 0;
    height: 75px;
    padding-top: 4px;
    }

    #footer
    {
    text-align: center;
    height: 14px;
    color: #000;
    background-image: url(/css/image/nav_back.gif);
    background-color: #FAFAFA;
    text-transform: capitalize;
    white-space: nowrap;
    font-style: italic;
    background-repeat: repeat-x;
    font-size: 10px;
    font-family: Times,Arial,Monoco,Helvetica,Serif;
    padding: 6px 0px 2px 0px;
    font-weight: normal;
    vertical-align: middle;
    border: 0;
    }

    #left
    {
    background-color: #003;
    background-image: url(/css/image/steel37.gif);
    float: left;
    }

    #center { background-color: #FFF; }
    #right { color: #000; }

    .column
    {
    padding-top: 1px;
    text-align: justify;
    }

    #hnav
    {
    margin: 0px -197px 0px -200px;
    text-align: center;
    height: 14px;
    color: #000;
    background-image: url(/css/image/nav_back.gif);
    background-color: #FAFAFA;
    white-space: nowrap;
    font-style: italic;
    background-repeat: repeat-x;
    font-size: 12px;
    padding: 6px 0px 3px 0px;
    font-weight: bold;
    vertical-align: middle;
    }

    /* For Menu */
    .hand { cursor: pointer; }
    .help { cursor: help; }

    /* CSS Popout Menu */
    #menu
    {
    position: absolute;
    top: 1px;
    left: 58px;
    padding: 1px;
    z-index: 2;
    width: 140px;
    background-image: url();
    color: inherit;
    background-color: #003;
    right: 0px;
    bottom: 0px;
    text-indent: 4px;
    float: left;
    }

    #menu a, #menu h2
    {
    display: block;
    font: bold 11px/15px arial,helvetica,sans-serif;
    border-top: 1px #00F solid;
    white-space: nowrap;
    text-indent: 4px;
    width: 135px;
    text-transform: uppercase;
    text-align: justify;
    text-decoration: none;
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    height: 15px;
    padding: 1px 0px 0px 0px;
    background-color: #FAFAFA;
    border-right: 1px #CCC solid;
    border-left: 1px #CCC solid;
    }

    #menu a
    {
    background-image: url(/css/image/buttonup.gif);
    background-color: #FAFAFA;
    background-repeat: repeat-x;
    text-indent: 2;
    color: #000;
    text-decoration: none;
    }

    #menu a:visited
    {
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    text-indent: 2;
    color: #000;
    text-decoration: none;
    border-top: 1px #C00 solid;
    }

    #menu a:hover
    {
    background-image: url(/css/image/buttondown.gif);
    background-repeat: repeat-x;
    text-indent: 2;
    text-decoration: none;
    color: #000;
    border-right: 1px #CCC solid;
    border-left: 1px #CCC solid;
    border-top: 1px #C00 solid;
    }

    #menu a:active
    {
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    color: #F00;
    border-right: 1px #CCC solid;
    border-left: 1px #CCC solid;
    }

    #menu h2
    {
    font: bold 12px/16px arial,helvetica,sans-serif;
    color: #003;
    text-transform: uppercase;
    margin: 0;
    padding: 4;
    width: 134px;
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    border-right: 1px #CCC solid;
    border-left: 1px #CCC solid;
    }

    #menu li
    {
    list-style-type: none;
    color: #F00;
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    border-right: 1px #CCC solid;
    border-left: 1px #CCC solid;
    }

    #menu ul li
    {
    position: relative;
    list-style-type: none;
    color: #FFF;
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    }

    #menu li ul
    {
    position: absolute;
    top: 0;
    left: 134px;
    display: none;
    color: #FF0;
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    }

    /* Fix IE. Hide from IE Mac \*/
    * html #menu ul li
    {
    height: 1%;
    width: auto;
    }

    * html #menu ul li a { height: 1%; }

    /* End */
    div#menu ul, #menu ul ul, div#menu ul ul ul
    {
    margin: 0;
    padding: 0;
    list-style-image: none;
    width: 134px;
    }

    div#menu ul ul, div#menu ul ul ul, div#menu ul li:hover ul ul, div#menu ul li:hover ul ul ul { display: none; }

    div#menu ul li:hover > ul
    {
    display: block;
    position: absolute;
    top: 0px;
    left: 136px;
    background-image: url(/css/image/buttondown.gif);
    background-repeat: repeat-x;
    }

    div#menu ul ul li:hover ul
    {
    display: block;
    color: #FFF;
    background-image: url(/css/image/buttondown.gif);
    background-repeat: repeat-x;
    }

    div#menu ul ul ul li:hover ul
    {
    display: block;
    color: #C00;
    background-image: url(/css/image/buttondown.gif);
    background-repeat: repeat-x;
    }

    /* Styling for Expand */
    #menu a.x, #menu a.x:visited
    {
    font-weight: bold;
    text-indent: 5px;
    color: #003;
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    }

    #menu a.x:hover
    {
    color: #003;
    background-image: url(/css/image/buttondown.gif);
    background-repeat: repeat-x;
    }

    #menu a.x:active
    {
    color: #003;
    background-image: url(/css/image/buttonup.gif);
    background-repeat: repeat-x;
    }

    Thanks!

  7. #7
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HI I am using the IE Tester as mentioned above to create a new template.

    Is anyone supporting IE6 on their sites anymore?

    I can only go so far with the template and IE6 blows it up.

  8. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Usually, designers support the two latest versions of a browser so IE6 doesn't qualify. However, IE users suck at updating so depending on your audience, it might be good to support IE6, at least for a few more months.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  9. #9
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sounds good.

    Your statement about IE users is correct.

    What makes it worse is AOL and Compuserve users think that <that is their browser. Most of my users on one site are seasoned citizens. This is the repeated problem.

    I am using the DD Liquid 2 column layout and just trying to use the IE6 emulator above.

    Can you help me use a background image (repeat-x), a logo image over that, and than a clear image over that in a header?

    Trying to stop thieves. It is not the fact that the logo is being snagged it is how they are butchering it and renaming the copyrighted image or changing colors in some instances. The background header image completes the logo image.

    #topsection
    {
    height: 71px;
    /*Height of top section*/
    background-color: #003;
    background-image: url(/css/image/header_back.gif);
    background-repeat: repeat-x left top;
    }

    .topsection span
    {
    display: block;
    position: relative;
    height: 71px;
    background-image: url(/css/image/logo.gif);
    background-repeat: no-repeat;
    }

    </head>
    <body>
    <div id="maincontainer">

    <div id="topsection"><span></span></div>

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
  •