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 ISBN: 978-0-7645-7642-3
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design by Richard York; ISBN: 9780764576423
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 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 April 11th, 2007, 03:38 PM
Authorized User
 
Join Date: Dec 2006
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Default Line Break Gap / Mozilla Firefox

Hi

I'm a relatively new web designer. I purchased "Beginning CSS Cascading Style Sheets for Web Design", as well as "Beginning Web Programming with HTML, XHTML and CSS.

I'm having a ball... except for one little issue.

My website here. Take this page for instance
http://www.forgestik.com/index.php?q=en/node/21

In the middle section of the page, I'm floating an image "Right". Under IE, the rendering is OK (IE6 and 7). Strangely, in Mozilla Firefox 2.0.0.1, there's a huge gap.

It occurs with all my pages where I'm floating (Left or Right). The text that is suppose to wrap around the images always show a major Gap as soon as there's a line break (either a <br /> or between two <p>... whatever).

I don't think it's a bug with Mozilla. I think that it could be a little conflict in cascade. Mozilla is probably affected by this conflict as a result of being a better browser maybe.

This website is using a Drupal CMS (version 5.1). And the theme used on this site has been cherry picked on oswd.com

As you might imagine, there are tons of CSS properties, so the number of cascade is probably very big.

Any clue?

Thanks a lot.
Charles

  #2 (permalink)  
Old April 11th, 2007, 04:19 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 hard to say, but it might have something to do with this <p> element not being properly closed.
Code:
<p><img id="img_topright" src="/files/book/img/fin_aboutus01.jpg" /><strong>Forgestik</strong> is an Information Technology firm that specializes in three important areas :[list]
<li>Business and Accounting Software (Sage Accpac and SAP Business One)</li>
<li>Programming (Legacy and Web) </li>
<li>Networking (multi-site operations, remote connections)</li>

</ul>
That <p> element should be closed after "three important areas :". <p> elements cannot contain[list] or <div>, or any other block elements.

HTH!

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 April 14th, 2007, 05:06 PM
Authorized User
 
Join Date: Dec 2006
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Default

You did teach me few important things here. Thank you for this.

First, I learned (a little more) about the importance of looking at view page source. I tend to forget this :(

Then you were right. Not sure about the fact that the <p>s were properly closed or not, but they were there against my wil.

My CMS template engine was adding them automatically. It was a setting meant to "facilitate" the data entry by making it little more wysiwyg.

Richard, may I take this occasion to ask you a question or two?

1) What are the differences between the first, and the second edition of this book? I own the first release.

2) To the best of your knowledge, what's the best way to draw "rounded" borders at this point? My readers mainly use IE6 and IE7. Right now I use rounded borders. But I'm cheating by using a background image

Thanks a lot!
Charles
  #4 (permalink)  
Old April 14th, 2007, 08:55 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

1st question: I just finished up the 2nd edition, it ships in June (as far as I know). It is a revision of the first book. I rewrote about 80% or so of the material. It's in color. It's has better coverage of IE6 bugs. It's updated with what's supported in IE7, Firefox, and Safari.

2nd question: rounded corners can be done in a variety of ways. My preferred way is to use background images. You can make a liquid, design flexible layout with custom borders and corners using background images. All browsers support them. All you have to do is nest the elements (<div> elements, for example) inside of one another and play with the margins till everything lines up. I cover a technique like that in my second book, CSS Instant Results. You can download the code for that book for free here on wrox.com and checkout the examples.

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 April 15th, 2007, 10:20 AM
Authorized User
 
Join Date: Dec 2006
Location: , , .
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Quote:
quote:Originally posted by richard.york
 1st question: I just finished up the 2nd edition, it ships in June (as far as I know). It is a revision of the first book. I rewrote about 80% or so of the material. It's in color. It's has better coverage of IE6 bugs. It's updated with what's supported in IE7, Firefox, and Safari.
I'm going to purchase it then. Thanks.

Going back to the original issue, I discovered that I can not use any <p> in the body of my nodes, even when they're closed properly. I don't know why, I simply won't use 'em.

<br /> work perfectly, even if it goes against the recommendations expressed in the Chap_10 of your book.

I can't wait for your second edition.

Regards,
Charles

 


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
german characters not displayed in Mozilla Firefox crmpicco HTML Code Clinic 1 November 22nd, 2007 08:23 AM
line break Cyber Shiva HTML Code Clinic 1 May 17th, 2007 06:04 AM
Having problems on Mozilla firefox (not able to se viral612 XSLT 0 March 12th, 2007 11:53 PM
firefox/mozilla crash: javascript in XSLT stekker XSLT 4 May 3rd, 2006 04:15 PM
break up line crmpicco Javascript How-To 1 June 6th, 2005 06:54 AM



All times are GMT -4. The time now is 07:06 AM.


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