Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div id="Content">
<div style="width:70%; height:150px; border:solid; overflow:scroll;">
ABC <a href="ABC">ABC</a> ABC
</div>
</div>
</body>
</html>
The stylesheet test.css contains for example only:
a:hover {background-color:#ccc;}
#Content {margin: 30px 50px 50px 200px;}
When I load this in IE6 and then hover over the link, the DIV suddenly gets wider. In some situations it returns to the normal width when I move the mouse away from the link, but sometimes it doesn't. The result is that I have to space the DIV at 70% width because otherwise it overshoots the width of the screen!
Can anyone see a problem in the code, and/or how to fix it? A friend tested this on Opera & Mozilla and said they did not exhibit this behaviour, so maybe it's an IE6 bug... but still, a workaround would be appreciated. TIA
The problem seems to be that you have width:70% assigned to the inner div, but no where else do you have any widths assigned! you also don't have a "containing block" established, which is required to inherit attributes like that.
[w3.org...]
[w3.org...]
#Content {margin: 30px 50px 50px 200px;}
is effectively shifting that DIV box down and to the right (which I want), with its right margin extending beyond the original right margin of the screen (which I don't want).
What I want is that DIV (Content) to be 30px down & 200 px right, but for the right margin to remain at the screen's width. Then I want the inner DIV (containing the ABC links) to fill that width (but have a border and be scrollable). I suspect the second half will be easy once the first half works properly. Something like:
#Content {margin: 30px 50px 50px 200px; width: 100%_of_original_body_minus_250px}
<div id="Content">
<div style="width:100%; height:150px; border:solid; overflow:scroll;">
ABC <a href="ABC">ABC</a> ABC
</div>
</div>
Any advice on how to achieve this? I could put an absolute width for Content but don't want to as I'd prefer it to scale to match the user's screen width. I am looking through the W3 "containing block" links suggested, but it's taking a while to absorb and I haven't yet found a solution.
<body width=100%>
<div id="Content" style="border:solid;">
<div style="width:73%; height:150px; border:solid; overflow:scroll;">
ABC <a href="ABC">ABC</a> ABC
</div>
</div>
</body>
a:hover {background-color:#ccc;}
#Content {margin: 30px 50px 50px 200px;}
This seems to have the DIV Content at the width I require, i.e. 200px on the left and the right matches the original screen width. However, the inner DIV still suddenly expands whenever I hover over the link: at 73% it matches the outer Content DIV, at less than 73% it leaves a gap, and at over 73% it crashes through the right-hand boundary. :(
Anyway, I hope this helps someone else who comes across similar behaviour.
