> OK can anyone tell me what is going off with the following code.... > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" > "http://www.w3.org/TR/html4/strict.dtd";> > <html> > <head> > <title>IE/win Box</title> > </head> > > <body> > <div style="position:relative; border:5px solid green; padding:10px; > margin:10px"> > <div style="position:absolute; top:0px; left:0px; width:100%; > height:100%; border:1px solid blue"> > </div> > <p> > <p> > <p> > </div> > </body> > </html> > > Sorry I don't have a public website to post this on. Basically in > Firefox the inner blue div border is aligned with the inside of the > outer green border. This is what I would expect. However in IE6 the top > edge of the blue rect is aligned with the top outer edge of the green > rect, the bottom edge of the blue rect is in the middle of the green > rect and the left and right edges are inset from the green rect slightly. > > I've spent ages looking round at various sites reporting IE problems and > as far as I can tell this sort of thing should not happen in strict mode > in IE6. So what am I doing wrong?
This might help you or might not, but maybe it will give you a fresh look. :) (Please note that I'm not fixing the problem, just working around it.) Ok, your green border div has padding in it, which is why IE is showing extra space around the blue div. Nuke that padding and your blue box displays the same size as the inside of the green div. The problem with doing that is the blue div aligns with the top of the green div border. To fix that, you might need to margin-top: or top: it. This code shows what I see (more of less) in FireFox when displayed in IE. Perhaps conditional comments or the star hack are acceptable to you. :) <div style="position:relative; border:5px solid green; margin:10px"> <div style="position:absolute; top:5px; left:0px; width:100%; height:100%; border:1px solid blue"> </div> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
