Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,073
    Thanks
    2
    Thanked 22 Times in 22 Posts

    Table-less page: Good in FF2, Bad in IE7

    I am desperately trying to get this page to render properly in IE7. In FF2, it displays exactly as I would like for it to. In IE7, my left column displays below and to the left of the right content, but I want it to display at the top of that column. What am I doing wrong, and how can I fix it?

    For easy reference, here is the stylesheet that goes with the page. Many thanks in advance for your help!
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  • #2
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    editing to delete previous post... Sorry it's late and I was not on teh right track

    Ok, back to the real question at hand, instead of answering the one I wanted to. Doesn't column1 need to be postioned somehow, maybe absolute?? to me it looks as if it is being placed in the type flow, and it needs to be outside that? But I'ma newbie at all this so let me know if I am off base...
    Last edited by toothmkr57; 09-27-2007 at 05:24 AM.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Put width:68.6%; for your #content
    Actually 70% is the right value, but the left and right padding want some width, unlike in your header (#line1?)
    Last edited by abduraooft; 09-27-2007 at 05:51 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,073
    Thanks
    2
    Thanked 22 Times in 22 Posts
    Quote Originally Posted by toothmkr57 View Post
    Doesn't column1 need to be postioned somehow, maybe absolute??
    I tried your suggestion of adding absolute positioning, but then that screwed up the rendering in both FF and IE. Must be something else I need.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hey VJ,

    I'm on a Mac so testing is tough but at a quick glance I'd say add these two rules to #column1:

    Code:
    float: left;
    display: inline;
    float: left makes sure that column will always be out of flow and floated to the left regardless of what #col2 wants to do, and display:inline is a hack that clears an extra margin from IE6 when you place two floated elements together. If you go this route, don't forget to clear the floats after the columns.

    If that doesn't work I'll see if I can take look on IE7 later today when I have more time.

    Edit: Whoops, just noticed #column1 falls after #column2 in the HTML. So what I said above probably won't work.
    Last edited by rmedek; 09-27-2007 at 01:22 PM.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    #column1 {
    background-color: #ad78c7;
    width: 20%;
    margin-left: 15px;
    margin-bottom: 20px;
    margin-right: 0%;
    padding: 20px 10px 10px 10px;
    border: solid black 1px;
    color: white;
    font-weight: bold;
    }

    Try this. I think that will put it right.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    vinyl-junkie (09-28-2007)

  • #7
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,073
    Thanks
    2
    Thanked 22 Times in 22 Posts
    @rmedek: Thanks for the suggestion, but it didn't work. Messed up both FF and IE. I tried a variation which was display: block but no joy. Thanks for trying.


    @effpeetee: You win the prize! I don't know why this works, but the page now displays great in both FF and IE. Thanks!


    And thanks to all who looked at my code and offered suggestions. It is much appreciated. One of the things that makes this forum so great.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  • #8
    New Coder
    Join Date
    Jul 2007
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    And we all learned something in the process!!!

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you vinyl-junkie. I wish that I could claim some superior coding skills, but if I did I would be lying. It was my old technique of suck it and see.

    I used a program called CSSVista which is like Firebug, but works also with IE.
    http://litmusapp.com/cssvista/
    It presents you with both views at once (Ffox and IE) and also the css on the left. Altering the code produces an immediate response so that even twit like me can have a go.

    I did reason a little however. It occured to me that One browser might be seeing the box as larger than the other, so, having located the box by the simple method of adding to the size until it showed itself, I then removed the Right hand margin. Just lucky. Glad it worked.

    Frank
    Last edited by effpeetee; 09-28-2007 at 08:47 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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