Line Break Gap / Mozilla Firefox

SolarEnergy · April 11th, 2007, 03:38 PM

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

richard.york · April 11th, 2007, 04:19 PM

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

SolarEnergy · April 14th, 2007, 05:06 PM

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

richard.york · April 14th, 2007, 08:55 PM

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

SolarEnergy · April 15th, 2007, 10:20 AM

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