IE6 Border Bug <>$%(any ideas?

S

silco

Hi Everyone..
hope you can help!

I have a IE6 browser bug,
most of the common fixes tell me to use relative on my container divs.

This fixed some problems but now I have a left border problem and a top
riogh corner problem

here is the code:

/* ********************************** */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>

<style>
div.promo-wrap-top{
position:relative;
height: 13px;
padding: 0px;
border-left: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6;
border-top: 1px solid #a6a6a6;
}
div.promo-wrap-middle-sml{
position:relative;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
div.info-container{
position:relative;
margin-left: 4px;
margin-right: 4px;
margin-top: -9px;
margin-bottom: 4px;
}
div.prod-card-leftcol{
float: left;
}
div.clear{
clear: both;
}
div.box-bottom-product-card{
position:relative;
height: 13px;
border-left: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6;
border-bottom: 1px solid #a6a6a6;
margin-top: -14px;
margin-right: 1px;
}
</style>
</head>

<body>

<div class="promo-wrap-top"></div>
<div class="promo-wrap-middle-sml">
<div class="info-container">
<div class="prod-card-leftcol"><img
src="images/NETSite/1x1blue.gif" width="200" height="500" border="0"
/></div>
<div class="prod-card-rightcol">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="clear"></div>
</div>
</div>
<div class="box-bottom-product-card"></div>

</body>
</html>


cheers!
 
C

cwdjrxyz

Hi Everyone..
hope you can help!

I have a IE6 browser bug,
most of the common fixes tell me to use relative on my container divs.

This fixed some problems but now I have a left border problem and a top
riogh corner problem
Click to expand...

Yes, IE6 has quite a few CSS bugs. And it appears that many remain for
IE7. I usually write valid code that works on most browsers. If IE acts
up, I then often patch for it with a conditional IE comment. In this
way I do not have to distort correct code for the several standards
compliant browsers just because Microsoft apparently can not make a
compliant browser.

A problem for IE6 and IE7 I just found yesterday was that IE displaced
an absolute top position by 22px, compared with 7 other compliant
browsers that got things correct. I first positioned absolutely a gif
of a picture frame having a transparent center that I made with
PaintShop. I then absolutely positioned 4 video players, that can be
switched on and off, absolutely so that they appeared centered in the
frame. Seven of my recent browsers got it right, but IE6 and IE7
positioned the players 22 px too high on the page, so that they were
not centered in the frame. The page still works on IE, but just looks a
little tacky. I used a Microsoft conditional comment to overcome the
problem, which is:

<!--[if IE]>
<script type="text/javascript">
var tp=102 // top location of player as written
var ieht=tp+22 // top player location corrected for IE bug
document.getElementById('p1').style.top=ieht+'px';
document.getElementById('p2').style.top=ieht+'px';
document.getElementById('p3').style.top=ieht+'px';
document.getElementById('p4').style.top=ieht+'px';
</script>
<![endif]-->

If the response for IE7 had been correct, then there is another IE
conditional that will be seen only up to a certain version of IE that
could be used. My page uses extensive script, so using script for the
correction is no problem. However, if there had been no other script on
the page, the above correction would just be ignored if someone had
script turned off, and the page would still work, but just be a bit
tacky.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Grouping messages that have similarities 2
Help needed with code 5
jQuery Scrapping & Formatting Inputted Paste 2
Justify-content not working 1
CSS Layout Issue in IE6 - Example in Book Fails 1
Simple Block Centering in IE 10
[CSS]Pb with border:double 0
Having difficulty with the layout of these images / video for this web page 2

Members online

Total: 28 (members: 1, guests: 27)
Robots: 378

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,014
Latest member
BiancaFix3

Latest Threads

Top