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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts

    alignment problem with IE6

    The site.

    In IE6, the light blue box appears below the image of the piano, instead of adjacent to it--in all other browsers I've tested, it looks okay. There is a 750px wide containing div with two divs inside: the piano image div is 500px (as is the image) and the light blue div is 250px. None of the elements in either of these divs have any right or left margins/padding. Any ideas? Thanks.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    It might be the box model issue. You can avoid this by carefully applying float and width. I'd recommend you to refer http://bonrouge.com/2c-hf-fluid(r).php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts
    Thanks for the response. My understanding is that the box model problem is only an issue when margins, borders, or padding are used. Since there are no margins or padding on the sides, I don't think it should cause the problem. Also, IE 6 is not only has the box model problem when viewed in quirks mode, but my page has the appropriate DTD. Any other ideas?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mightypants,
    I'm not sure IE6 is able to get a width for #homeLeft from it's child #topLinks. Maybe if you're more specific. Like this -
    Code:
    /***************Home*****************/
    
    
    #home {
    	border: 0px;
    	margin-top: 100px;
    	margin-bottom: 15px;
    	height: 399px;
    }
    
    #homeLeft {
    	width: 500px;
    	float:left;
    }
    
    #topLinks {
    	/*width: 500px;*/
    	height: 25px;
    	background-color: black;
    }
    
    #topLinks a {
    	margin-right: 15px;
    	margin-left: 23px;
    }
    
    #pno {
    	height: 374px;
    }
    
    
    #homeRight {
    		margin: 0 0 0 500px;
    		height: 399px;
    }
    
    #welccell {
    	background-color: #6080a2;
    	width: 250px;
    	height: 349px;
    	font-size: 13px;
    	text-align: center;
    	
    }
    Might work... I don't have anything with IE6 firedup right now.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    is this not float drop?

    no ie6 for me but the issue sounds like the float is dropping due to 500px+250px=751px in ie6

    try adding a margin-right:-1px to the blue box div. you may need to adjust -1 to say, -10, check if the issue is resolved then lower the margin accordingly. then apply an ie6 only conditional

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Well, you have two divs, #homeLeft and #homeRight. These are both floated, but neither have widths applied.

    I'd suggest applying a width of 500px to #homeLeft like Excavator suggests, but then leave #homeRight floated and add width:250px - otherwise I think you'll trip over the IE6 3px bug. So in conclusion, just add widths to both #homeLeft and #homeRight.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    In my suggested code, I try to avoid the 3px bug -
    Code:
    #homeRight {
    		margin: 0 0 0 500px;
    		height: 399px;
    }
    No width there so should be not trigger IE6 3px bug.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Yes, agreed, but #homeRight contains #flashlogo which is itself 250px wide.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Good one SB65, didn't think of that...
    I should just break down and put XP on my laptop so I've got IE6 available.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts
    Thanks for all those responses. I've been tied up with other work so I haven't been able to try out your suggestions yet, but I will try to get to that in the near future and get back to you with some results.

    Any thoughts on how long it will be before it's "safe" to forget about compatibility with IE6? It's such a pain in the butt.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by mightypants View Post

    Any thoughts on how long it will be before it's "safe" to forget about compatibility with IE6? It's such a pain in the butt.
    I've stopped already on my personal sites. I don't know anyone that uses IE6 still so I just add a suggestion like this -
    Code:
            <!--[if lt IE 7]>
                <div id="ie6Warning">
                    <h2>Time to upgrade your browser</h2>
                        <p>
                            If you're reading this, you're surfing using Internet Explorer 6, an eight-year-old browser that 
                            cannot cope with the demands of the modern internet. For the best web experience, we strongly recommend 
                            upgrading to <a href="http://www.getfirefox.com/">Firefox</a>, <a href="http://www.opera.com/">Opera</a>, 
                            <a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.google.com/chrome">Google Chrome</a>, 
                            or a more recent version of <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet 
                            Explorer</a>.
                        </p>
                </div>
          	<![endif]-->
    It's different though, for clients sites. Still have to deal with the IE6 surfers.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    is this not float drop?

    no ie6 for me but the issue sounds like the float is dropping due to 500px+250px=751px in ie6
    met,

    Can you elaborate on this issue, or point me to an article that does? I've read a few that talked about float drop, but they all seemed to depend on having text that can't wrap properly, or problems caused by italicized text. I don't think either of those could be the problem here and nothing I've read refers to an added pixel as suggested in your equation above. Thanks.

    -Jonnie

  • #13
    LE1
    LE1 is offline
    New Coder
    Join Date
    Nov 2009
    Posts
    47
    Thanks
    4
    Thanked 1 Time in 1 Post
    I always use IE TESTER to check my site in all IE versions.
    free to download.

  • #14
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LE1 View Post
    I always use IE TESTER to check my site in all IE versions.
    free to download.
    Thanks, I'll check that out.

  • #15
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is, in my opinion, the most interesting part:
    CSS Code:

    //If first time key in date run statement
    if(first == 0){
    ++first;//Track if is the first record key in
    items[i] = new Item(itemNumber, itemDesc, sellPrice, quantity);
    }
    //Else continue key in record
    else{
    entries = items[0].getEntries();//Get number of entries entered
    for(j=0; j<entries; ++j){

    duplicate = items[j].equals(itemNumber, itemDesc, sellPrice, quantity);//Check for duplication of entries

    if(duplicate == true) {
    Print.duplicateError();
    --i;
    --looping;
    break;
    }
    }
    if(duplicate == false)//else save record
    items[entries] = new Item(itemNumber, itemDesc, sellPrice, quantity);
    }
    ______________________________
    Courtier conseil financement immobilier achat | Demande credit simulation plan de financement immobilier | Calcul pret projet financement immobilier travaux


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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