Grow your CSS skills. Land your dream job.

Im Stumped – Float problem in Firefox

  • # May 5, 2009 at 12:04 pm

    Hi Folks,

    First time writing into a forum for a CSS fix. I have a relatively small display issue that is killing me!

    Working on a page: http://paohorticultural.publishpath.com/projectgallery
    styles: http://paohorticultural.publishpath.com … layout.css

    Beneath the slide show there is a row I have called: #photorow that contains 3 buttons contained in an unordered list.

    For some reason it displays exactly as intended in Safari and IE7…(each button sits beside each other flush within 930px space) but Firefox is adding about 15 pixels of space on the right side of each <li>. Often the 3rd button is pushed to another row.

    Ive broken out the Firefox, IE toolkits and the Safari Development toolkit and I cant seem to find where the issue is coming form.

    I am using Speaklight CMS to host the pages… they have a CSS file of their own..:Water.css but I dont see a reason it would be overriding any of the styles.

    I have a feel either I have forgotten to add something to the markup language or have somehow screwed the styles I have added for this section.

    Anyone have any ideas? Any help would be truly appreciated!

    # May 5, 2009 at 12:12 pm

    Add a width declaration to your list items. That’s the 300px width of your bg images plus the 5px padding = 305px

    Code:
    #photorow li {
    float:left;
    margin:0;
    padding:0;
    vertical-align:top;
    width:305px;
    }
    # May 5, 2009 at 12:22 pm

    Thanks apostrophe! I knew I forgot something small!
    I owe you one!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".