SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    CSS float problem in Firefox

    Hi,

    I asked this the other day in another forum, and got some good advice on a related issue (thanks, Porpitude), but haven't heard anything to address my main concern. And Googling just shows me that other folks seem to have the same problem.

    I'm not too fluent in CSS, so bear with my ignorance.

    I'm using the following code in my style sheet to make a number of inline pullquotes on pages with a LOT of text, like so:

    Code:
    #pullquote {
    float: right;
    width: 15%;
    padding: 8px;
    border: solid 1px #000;
    background-image:url('http://www.iraqtimeline.com/graphics/bluemottle.jpg');
    font-size: .8em;
    overflow: hidden;
    margin: 20px;
    color: #FFF;
    }
    The problem is that it wraps around the text just fine in IE, but it doesn't wrap in Firefox. You can take a look for yourself:

    http://www.iraqtimeline.com/feb07.html

    (Ignore the political content if it bothers you.)

    Any suggestions to make it behave in Firefox? I'm told that if I use a strict doctype instead of using the transitional, I could address it, but to be honest, I'm not willing at this time to make the changeover. A hotfix will do me just fine until I have the time to rip everything apart and put it back together properly.

    And any other design comments or suggestions would, of course, be very welcome.

    Thanks,
    Max

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) You aren't even using a complete doctype, let alone a Strict one. Therefore browsers, especially IE, are rendering the page in quirks mode which is usually a bad thing.

    2) IDs should be unique. You could use a class instead.

    Class and ID Selectors
    When should I use a class and when should I use an ID?
    Use class with semantics in mind
    The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS
    Using Firefox to Wage a Class War

    Multiple elements may belong to the same class and an element may belong to multiple classes. The X/HTML class attribute's value may be a space separated list of classes.

    3) How can you expect the page to display the same in multiple browsers when you have over 1000 HTML errors? (It is a very long page though, so most of them are the same few errors repeated dozens of times.)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Red-faced

    You have caught my ignorance showing.

    You aren't even using a complete doctype, let alone a Strict one. Therefore browsers, especially IE, are rendering the page in quirks mode which is usually a bad thing.
    Holy moroney. I use the old, and I thought reliable if out-of-date, HomeSite 6 to code with, and that's the standard doctype generated for a new page. I must be asleep at the switch entirely not to have caught that.

    IDs should be unique. You could use a class instead.
    Yup, though I'm going to beg off on ignorance again here -- the use of the ID came on the advice of another user. Are you sensing a trend here?

    How can you expect the page to display the same in multiple browsers when you have over 1000 HTML errors? (It is a very long page though, so most of them are the same few errors repeated dozens of times.)
    Urgh, once again, I have to throw it back (somewhat) onto the validator in HomeSite...which does identify many of the errors, though most -- not all -- of them are identified as deprecated code (just too darn lazy to learn and use current CSS text formatting protocols).

    This post is coming off like a big excuse fest. Ultimately, the code is laden with errors, and that's my fault and no one else's. Seems I have some recoding, and some learning, to do in the days ahead. I've put content ahead of proper design for a long time now, and the results are easily seen.

    Thanks for the links. They are good places to start. And I appreciate the candid assessment.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The main problem (apart from that listed by Kravvitz already ) is that you have nested your lists incorrectly as you can't have tags between list pairs. In order to allow the pullquote to wrap you should format your code something like this.

    Code:
    <ul class="NoBullet">
        <li>
            <h3 class="pullquote">Heading One</h3>
            <p>February 1: text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here
                : text goes here :</p>
        </li>
        <li>
            <h3 class="pullquote">Heading Two</h3>
            <p>February 2: text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here : text goes here
                : text goes here :</p>
        </li>
    </ul>
    Everything must be inside the list tags (<li> content here ...</li>)and not between the closing list tag and the start of another one.

    e.g.

    ....</li>
    <nothing can go here>
    <li>.........

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I also noticed you had left the style tags in your external stylesheet which is not allowed. An external stylesheet contains only css and css comments (no html comments either).

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Paul, thanks for the input and the coding recommendations. I stayed up last night to fix the more egregrious errors that Kravvitz found (I'm still embarrassed by that d*mn doctype error), along with some of the other errors found by the W3 Validator, and it's down to 325 instead of 1048 . Some of the remaining errors I don't understand -- it's telling me I don't have an opening HEAD tag (which I do, even I'm not that stupid), that I can't use some tags like BGPROPERTIES, BORDERDARK and BORDERLIGHT, and so forth -- and it has some problems with some linked URLs and even the Google searchbox code, but those aren't so worrisome (partly because, well, they seem to work in both IE and Firefox regardless...). The nested listings that you pointed out seem to be the bulk of the remaining problems, as well as the source of my wraparound problem, and I'll try that today.

    One question: The validator doesn't like my use of line breaks to impose brute-force spacing in the listed items, like such:

    Code:
    <LI>content</LI><BR><BR>
    Any ideas on how to redo this to make the HTML cleaner without relying on the P tag or putting code in between the LI tags?

    And thanks for pointing out that the opening and closing STYLE codes don't go in the style sheet itself. Duh. When this site was much younger and less enormous, I was using inline styling within the pages themselves, and when I copied the code into an external style sheet, the HTML tags went right along with them.

    As we say in my part of the world, boy, you ain't just ignorant, you downright ig'nant. I seem to exemplify this little proverb. Once I wipe the egg off of my face, I'll get back to fixing the mess I've created. Thanks again for your help.
    Last edited by Black Max; Apr 22, 2007 at 11:23.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    it's telling me I don't have an opening HEAD tag (which I do, even I'm not that stupid),
    The problem is actually somewhere else and just before the closing head tag you have this:
    Code:
    <link rel="stylesheet" type="text/css" href="style.css" />
    You have an xhtml self closing tag which is confusing the validator. It should be like this:
    Code:
    <link rel="stylesheet" type="text/css" href="style.css">
    One question: The validator doesn't like my use of line breaks to impose brute-force spacing in the listed items, like such:
    As I explained earlier you can't have anything outside the list tags within the ul. Simply put the break before the closing list tag.
    Code:
    <li>content <br></li>
    However using breaks just to make space is very bad practice as it puts the presentation in the mark up and not in the css. Just give your lists a bottom margin or padding and then you have full, precise control from the stylesheet.
    Code:
     ul.NoBullet li {margin-bottom:1em}

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    You have an xhtml self closing tag which is confusing the validator.
    That's what I get for cutting and pasting without understanding what exactly I'm inserting into my pages. God knows how long those lines of code have been in these pages.

    Just give your lists a bottom margin or padding and then you have full, precise control from the stylesheet.
    Perfect, and easily done.

    The rest of the fixes are just drudgery. Even with HomeSite (or Dreamweaver, which I wouldn't let my kid purloin for me), it's going to take me, oh, forever to make the individual fixes. But what else are Sunday afternoons for?

    On top of all the code flaws that you and Kravvitz have helped me find and fix, the Firefox wraparound problem is solved. I appreciate all the effort and the shared knowledge. Back to the fixes I go.

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    Have you tried HTML Tidy?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Have you tried HTML Tidy?
    I've had the site bookmarked, but I haven't downloaded the program. Think I will. Again, thanks for all the help.

  11. #11
    SitePoint Member porpitude's Avatar
    Join Date
    Mar 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Black Max, site looks good now in Firefox (finally had a chance to check it out away from work). Sorry about the bum advice with the "id" as opposed to "class." I realized it the next day. Also, I thought you were using XHTML (I guess I wasn't paying attention) which is why I used the self closing tag when linking the css file. Luckily it looks as though someone called me on that. Congrats on getting it all to work, though! I jsut wanted to recommend a great book to you. It goes over W3C standards and coding in XHTML. It's available here from sitepoint: Build Your Own Web Site the Right Way using HTML & CSS. It's a wonderful book, but make sure you hide it so your kid doesn't swipe it from you! Good luck with future web sites.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •