Hello everyone
I am baffled by the behaviour of a webpage that I am trying to design(when
viewed in ie6).
I believe the problem arises when I use floats(at least that is the only
occasion when I notice it).
My page is set up so that I have a content box centered, and a box to create
an interior margin(both divs).
I also want to have a third box which would float to the right. For some
reason, if I have a link within the content box, when I rollover it the
containing box resizes.
I can't find anything to explain this, and I tried searching for various
terms which describe the situation in google in case it was a known bug, but
found nothing. I think it is probably my mistake, though I have tried to
rebuild the page twice to no avail.
I would really appreciate any help on how to fix this, as I have been stuck
with this problem for over a week now.
thanks in advance
ha
I have uploaded the page here so you can see what I mean:
http://gringolo.itgo.com/reconstruct.html
and this is the source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
<!--
..content
{
width: 80%;
position: relative;
top: 30px;
text-align:left;
color: rgb(0,0,0);
font-family: arial,helvetica , sans-serif;
font-size: 0.7em;
background-color: #808088;
border: solid 0px rgb(78,78,78);
}
..contentpaddin g
{
padding-top:40px; padding-bottom: 60px;
margin-right: 50px; margin-left: 50px;
}
..floater
{
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-top: 15px;
background: #B9A566;
border: 2px solid #ebdaa6;
color: white;
float: right;
width: 35%;
margin-bottom: 50px;
margin-left: 15px;
}
a:link {
text-decoration: none;
color: #CAA555;
}
a:visited {
text-decoration: none;
color: #B68B32;
}
a:active {
border-bottom: 1px dotted #808080;
color: #000000;
}
a:hover {
color: #B68B32;
border-bottom: 1px dotted rgb(0,0,0);
}
-->
</style>
<TITLE>{{ Events }} </TITLE>
</HEAD>
<BODY bgcolor=white>
<div align=center>
<div class="content" >
<div class="contentp adding">
<div class="floater" >
<h5>Stuff</h5>
<table border=0 cellspacing=0 cellpadding=7 valign=middle align=center>
<tr>
<td>stuff 1</td>
</tr>
<tr>
<td>stuff 2</td>
</tr>
<tr>
<td>stuff 3</td>
</tr>
<tr>
<td>stuff 4</td>
</tr>
</table>
</div>
something
<br><br>
»&raqu o; <a href="deadlink. html">a link to rollover</a>
</div><!-- closes contentpadding -->
</div><!-- closes content -->
</div><!-- closes align center -->
</BODY>
</HTML>