Sent by Francois Jordaan on 11 July 2002 09:09
Last week I asked for advice on how to do an NN4-compatible boxed sidebar --
thanks for the helpful responses! I ended up using a DIV container (rather
than a nested table). It's working very well for normal text content.
Now I want to put an image in the box, and adjacent to it, a bullet list.
And do this several times below each other. It's doing my head in.
I got it sort of working in IE6, NN4 and Moz1. But Opera breaks, and I had
to resort to several kludges:
http://www.fjordaan.uklinux.net/emss/index.html
CSS:
link http://www.fjordaan.uklinux.net/emss/css/emss.css
@import http://www.fjordaan.uklinux.net/emss/css/emss2.css
The box is 233px wide. It has no padding (to allow the rule under the H2 at
the top to be full-width. Any H2, H3 or P inside the box gets a left-right
padding of 10px. The image is 100px wide, which leaves 113px available for
the UL (allowing the 10px margin inside the box).
Here's the sidebar box:
<div class="sidebaritem">
<h2>OUR PRODUCTS</h2>
<h3>FEKO</h3>
<div class="sidebarsubitem">
<img src="img_1.jpg" width="100" height="78" align="left" />
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetaur adipisicing elit</li>
<li>Sed do eiusmod tempor</li>
</ul>
</div>
<p>dfddf</p>
<div class="sidebarsubitem">
<img src="img_1.jpg" width="100" height="78" align="left" />
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetaur adipisicing elit</li>
</ul>
</div>
<p>dfddf</p>
</div>
I had to wrap the IMG/UL combination in a DIV each, and specify a clear:both
on the P. But what is really getting to me is the margin properties I have
to give the UL.
NN4/PC sees:
margin-left: -20px;
IE6/PC sees: (@import)
margin-left: 130px;
Moz1/PC sees: (using an adjacent sibling selector that IE doesn't see)
margin-left: 80px;
...and it still breaks utterly in Op6/PC.
Which browser is doing the right thing? Why do I even need to give the UL a
left margin if the IMG is floating left? Is there any hope for a
cross-browser solution?
As ever, help appreciated!
francois
_____________________________________________________________________
This message has been checked for all known viruses by UUNET delivered
through the MessageLabs Virus Control Centre. For further information visit
http://www.uk.uu.net/products/security/virus/
