...

View Full Version : alignment problem with IE6



mightypants
10-30-2009, 05:46 PM
The site (http://www.jonniedredge.com/).

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.

abduraooft
10-31-2009, 08:35 AM
It might be the box model issue (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug). You can avoid this by carefully applying float and width. I'd recommend you to refer http://bonrouge.com/2c-hf-fluid(r).php

mightypants
10-31-2009, 07:06 PM
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?

Excavator
10-31-2009, 07:57 PM
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 -

/***************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.

met
10-31-2009, 09:07 PM
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

SB65
10-31-2009, 09:18 PM
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 (http://simonbattersby.com/blog/index.php/ie6-and-the-3px-bug). So in conclusion, just add widths to both #homeLeft and #homeRight.

Excavator
10-31-2009, 09:25 PM
In my suggested code, I try to avoid the 3px bug -

#homeRight {
margin: 0 0 0 500px;
height: 399px;
}

No width there so should be not trigger IE6 3px bug.

SB65
10-31-2009, 09:34 PM
Yes, agreed, but #homeRight contains #flashlogo which is itself 250px wide.

Excavator
10-31-2009, 09:44 PM
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.

mightypants
11-07-2009, 08:59 PM
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.

Excavator
11-07-2009, 09:24 PM
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 -

<!--[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.

mightypants
12-14-2009, 07:19 PM
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

LE1
12-14-2009, 08:10 PM
I always use IE TESTER to check my site in all IE versions.
free to download.

mightypants
12-14-2009, 09:19 PM
I always use IE TESTER to check my site in all IE versions.
free to download.

Thanks, I'll check that out.

chisquocis
12-19-2009, 01:52 AM
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 | (http://**************************/)Demande credit simulation plan de financement immobilier | (http://**************************/)Calcul pret projet financement immobilier travaux (http://**************************/)

abduraooft
12-19-2009, 07:16 AM
______________________________
Courtier conseil financement immobilier achat | (http://**************************/)Demande credit simulation plan de financement immobilier | (http://**************************/)Calcul pret projet financement immobilier travaux (http://**************************/) Are you mad? :p



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum