Pb in Chapt. 8

G_uillaum_e · July 26th, 2007, 03:00 PM

Hi there,
Going through this great book, fearing some differences in rendition of the examples, I try some of them out, just to check.
And... I have trouble with the float property example (fig 8-1). It looks like the margin declaration is ignored in the img rule. I tried it on Firefox 2.0.0.5, Opera 9.21, and IE7. All browsers gave me the same result: the text is aligned next to the image border, without any margin space.
I tried to enter a margin-right property, accompanied by a margin-bottom (just to see), but it doesn't change anything.
Any clue?

... of course, I could declare a white border and a padding. That would do the trick, but I wouldn't have the border around the img anymore...

richard.york · July 27th, 2007, 08:39 AM

Hi,

Can you post the code, so I can see what's going on?

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

G_uillaum_e · July 27th, 2007, 10:49 AM

OK; so...

the css (saved as Fig_8-1.css and identical to Fig 8-1a, except for some values) is:

img {
     width: 200px;
     height: auto;
     float: left;
     margin: 40 px;
     border: 1px solid gray;
}
p {
     font: 12px sans-serif;
}
and the html is (as in Fig 8-1b):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
   <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
   <title>Float</title>
   <link rel='stylesheet' type='text/css' href='Fig_8-1.css' />
</head>
<body>
   <img src="yourimg.jpg" alt="img" />
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
</body>
</html>

Thank you for your time, Richard :). And thank you to the guys at Wiley and Wrox (for this useful website). I really appreciate being able to ask questions directly to the author!

richard.york · July 27th, 2007, 01:14 PM

It's an easy fix, just take the space out from between '40' and 'px', in the declaration: 'margin: 40 px;', so that it reads 'margin: 40px;'.

For most properties, spaces in the value have special meaning, for the margin proeprty, there is a shorthand that looks like this:

margin: 20px 10px;

20px, specifies the top and bottom sides, and 10px specifies the left and right sides. For your stylesheet, the browser would have read '40' as being an invalid measurement, because it doesn't specify the unit of measurement, and 'px' would have been seen as a second value, also invalid, because there is no number accompanying the measurement.

Hope that helps!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

G_uillaum_e · July 27th, 2007, 03:44 PM

Oh my... I can't be that blind, can I?
Thanks again!