Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old July 26th, 2007, 03:00 PM
Registered User
 
Join Date: Jul 2007
Location: , California, .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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...
  #2 (permalink)  
Old July 27th, 2007, 08:39 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
  #3 (permalink)  
Old July 27th, 2007, 10:49 AM
Registered User
 
Join Date: Jul 2007
Location: , California, .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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!

  #4 (permalink)  
Old July 27th, 2007, 01:14 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
  #5 (permalink)  
Old July 27th, 2007, 03:44 PM
Registered User
 
Join Date: Jul 2007
Location: , California, .
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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


 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Pb with apache/Tomcat yanis97 Apache Tomcat 0 May 25th, 2008 09:29 AM
Rich's new CSS book: Beginning CSS 2nd Edition jminatel BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 0 June 15th, 2007 11:55 AM
Problems in Chapt 9 pjwarez BOOK: Beginning Mac OS X Programming 0 August 30th, 2006 02:46 PM
Pb start program ! husiana Access 6 October 28th, 2003 11:13 AM



All times are GMT -4. The time now is 03:27 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.