BillyRayPreachersSon
Programmer
I've been looking at this since yesterday afternoon, and it's driving me loopy. I realise that using percentages isn't exactly accurate, but this is off by a lot.
In IE6/Win and Fx1.5.0.2/Win, you will see a left column taking up 73.5% of the browser width, then on a new line a right column taking up the other 26.5% (73.5 + 26.5 == 100%). Then you will see both columns together.
In Safari 1.2.3 (I don't have v2 here to test), the columns don't take up 100% of the width. If I increase the width of the right column to 27.5% (thus making 101%), they are a lot closer, but still have a 1px border between the columns.
Can anyone tell me why Safari isn't playing by the rules? I've looked over all the usual CSS bug sites, and can find no reference to this one. I kow it's not a whitespace issue, because I tried putting the entire test harness on one line, and still it happens.
It wouldn't be so bad if I could find a Safari-only CSS hack, but there don't appear to be too many of those around that work with all versions of Safari (although to be fair, I don't know if this problem exists in all versions of Safari).
Thanks,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
In IE6/Win and Fx1.5.0.2/Win, you will see a left column taking up 73.5% of the browser width, then on a new line a right column taking up the other 26.5% (73.5 + 26.5 == 100%). Then you will see both columns together.
In Safari 1.2.3 (I don't have v2 here to test), the columns don't take up 100% of the width. If I increase the width of the right column to 27.5% (thus making 101%), they are a lot closer, but still have a 1px border between the columns.
Can anyone tell me why Safari isn't playing by the rules? I've looked over all the usual CSS bug sites, and can find no reference to this one. I kow it's not a whitespace issue, because I tried putting the entire test harness on one line, and still it happens.
It wouldn't be so bad if I could find a Safari-only CSS hack, but there don't appear to be too many of those around that work with all versions of Safari (although to be fair, I don't know if this problem exists in all versions of Safari).
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title>Safari test harness</title>
<style type="text/css">
html, body {
margin:0px; padding:0px;
}
</style>
</head>
<body>
<div style="background-color:red;">
<!-- individual column tests -->
<div style="background-color:aqua; float:left; width:73.5%;">
Left column test 1
</div>
<div style="clear:both; height:1px; overflow:hidden;"></div>
<div style="background-color:aqua; float:right; width:26.5%;">
Right column test 1
</div>
<div style="clear:both; height:1px; overflow:hidden;"></div>
<!-- joint column tests -->
<div style="background-color:aqua; float:left; width:73.5%;">
Left column test 2
</div>
<div style="background-color:aqua; float:right; width:26.5%;">
Right column test 2
</div>
<div style="clear:both; height:1px; overflow:hidden;"></div>
</div>
</body>
</html>Thanks,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
