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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Another IE vs. FF positioning issue

    You know learning all this stuff is fun until you run into some quirky issue that you just don't understand.

    I just assembled a form for submitting a quote request. I positioned it (to the best of my abilities) with CSS, by adding 10px "padding-right" to the "leftnav" DIV within the same DIV. In FF it looks exactly as I intended. In IE however it lost its MIND! Before adding the padding to the "leftnav" IE had it closer to what I wanted than now. Can someone please show me where I'm going wrong?

    HTML is here
    CSS is here

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    your problem is with your dimensions. Your container is 700px width. Inside you have #right (width:180px) + #main (width:500px) = 680px . This is ok but in your #main you have #leftnav (width:105px) + padding-right: 10px + 405px (the table) = 520px. This makes 20px more then 500 and this is why IE puts it down.

    If you give 520px to #main, this will make it in IE7 but not in IE6 due to 3px jog. If you want to avoid that the best way is to float all your three "columns".
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    tornupinside (05-22-2008)

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you very much Candygirl!

    Ive never been very good with math.

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    hmmm, I guess its back to the drawing board. I need it to work in IE6 for sure. So tomorrow I'll see if I can get it changed over to float all 3 columns. Thanks for your help!

  • #5
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Alright, I got it changed over to float all 3 columns. It looks nice in FF 2, IE 7, NS 7 and Safari 3.1................ but in IE 6 I still have a problem with the "main" DIV being pushed down by the "leftnav" DIV.

    Am I over looking something?
    (the "home" and "quote request" are the only active links at the moment)

    HTML is here
    CSS is here

  • #6
    New to the CF scene
    Join Date
    May 2008
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well, I tweaked code and tweaked code.... I never got the IE6 issue fixed but I managed to get it all messed up in several different ways, in several different browsers and now its time to call it a day again. I'll jump back on this problem tomorrow or monday.

    If anyone can supply me with an answer to this issue (or a link to some reading that will help me) I'd really appreciate it.

  • #7
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    If you watch your result you can see two things:

    - the right column is to far from the border in IE6. This is a double margin bug issue. You can correct it by giving #rightside a display:inline
    Code:
    #rightside {
    	display:inline;
    }
    - The left column is too width. This could be a default margin-padding issue and/or something too width inside your #leftnav. In your css:
    #navlist1 li
    Code:
    #navlist1 li
    {
    
    	Position: relative;
    
    	width:100px;
    
    	left: 0;
    
    	top: 2px;
    
    	list-style-position: inside;
    
    	list-style-image: url(images/lil-cross.jpg);
    
    }
    If you remove this width this wont be too width anymore and will fit in IE6.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    tornupinside (05-27-2008)


  •  

    Posting Permissions

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