 |
BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0  | This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition by Richard York; ISBN: 9780470096970 |
|
Welcome to the p2p.wrox.com Forums.
You are currently viewing the BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
|
|
|
July 26th, 2007, 03:00 PM
|
|
Registered User
|
|
Join Date: Jul 2007
Location: , California, .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Pb in Chapt. 8 - CSS Buoyancy
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...
|
July 27th, 2007, 08:39 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
|
|
|
July 27th, 2007, 10:49 AM
|
|
Registered User
|
|
Join Date: Jul 2007
Location: , California, .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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!
|
July 27th, 2007, 01:14 PM
|
|
Wrox Author
|
|
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
|
|
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
|
July 27th, 2007, 03:44 PM
|
|
Registered User
|
|
Join Date: Jul 2007
Location: , California, .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Oh my... I can't be that blind, can I?
Thanks again!
|
|
Similar Threads
