Re: Need Check in Opera and Moz

by Jens Brueckmann <lists(at)j-a-b.net>

Date:	Tue, 24 Feb 2004 20:30:12 +0100
To:	Triche Osborne Web Sites <triche-osborne(at)triche-osborne.com>, "hwg-techniques(at)hwg.org" <hwg-techniques(at)hwg.org>
References:	osborne
	todo: View Thread, Original

Hi Triche,


>     According to one of my reference books, Opera interprets some 
> CSS-specified colors differently. Would someone please check this URL 
> and tell me if the images on the left are the same color as the DIVs to 
> their right?

Testing with Opera 6.05, 7.20 and 7.23 all images show exactly the same 
colours as the corresponding <div>

>     In the URL above, any idea why Moz displays a colored area the width 
> of the DIV's specified margin instead of the DIV's specified width and 
> then puts the text beneath the image instead of inside the DIV?
>     If I take the floated image away or float the DIV to the left 
> instead of the image, it displays properly:
>
> http://www.triche-osborne.com/testing/opera2.html
>
> Have I overlooked something or is this a problem with float?

Both Mozilla and Opera take the <img> element out of the normal flow (like 
position:absolute does).
This results in the following <div> to be left-aligned with just a margin 
of 10px. This makes these elements show on the right side of your images 
just 10px of coloured background.
Setting the margin property of the <div> to (imgage-width + desired 
margin) will render your page as intended.

Just change your style-sheet from:

	div.sample { margin-left: 10px;.....

to

	div.sample { margin-left: 140px;....



Cheers,

jens


-- 
Jens Brueckmann
http://www.j-a-b.net/

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA