locked
Float: left seems to be ignoring me... RRS feed

  • Question

  • I've looked at this with Firebug and I still can't figure out why it's not working. 
    LINK

    At the bottom left I have an image swap using jquery.  I have the float on the img set to left, using a descendent selector (I believe that's what it's called).  But you can see it isn't.  The image above that is the same width (150px) and has the same padding.  I'd like the swapping images to be aligned with that photo.
    Do I have to put the float:left on each img tag?

    Wednesday, November 10, 2010 5:09 PM

Answers

  • Actually, since the ul is assigned the ID, just define #portfolio.

    #portfolio   {margin:0;} should work for it.

    Jim

    • Marked as answer by JohnB352 Wednesday, November 10, 2010 7:52 PM
    Wednesday, November 10, 2010 7:18 PM

All replies

  • You don't need float left at all. The images are contained within a ul. The ul has a left margin of 20px. Get rid of the left margin and your images will line up.

    Jim

    Wednesday, November 10, 2010 5:19 PM
  • You don't need float left at all. The images are contained within a ul. The ul has a left margin of 20px. Get rid of the left margin and your images will line up.


    You're right, that does fix it.
    How can I do that so that it doesn't change the style for other UL's?
    That's why I had put that padding in there, for a list on a page titled "links".
    I tried this:

    ul#portfolio   {padding:0}

    That didn't work.

    Wednesday, November 10, 2010 5:43 PM
  • Not padding -- margin. Your ul definition is:

    ul {
    padding: 0;
    margin: 0 0 20px 20px;
    list-style: none;
    }

    That last 20px value is what needs to be changed. Just do that in your ul#portfolio definition.

    Jim

    Wednesday, November 10, 2010 6:25 PM
  • I changed it from this

    ul#portfolio   {padding:0}

    to this

    ul#portfolio   {margin:0}

    That didn't help.
    I can't change the margin in my ul style.  It's used somewhere else.

    Wednesday, November 10, 2010 7:01 PM
  • Actually, since the ul is assigned the ID, just define #portfolio.

    #portfolio   {margin:0;} should work for it.

    Jim

    • Marked as answer by JohnB352 Wednesday, November 10, 2010 7:52 PM
    Wednesday, November 10, 2010 7:18 PM
  • Your ul#portfolio will only work if you have <ul id="portfolio"> which you have but you also may be thinking that the .portfolio class is also being applied which it is not. When I tested in Firefox removing the margin with ul#portolio does center the item so it did work but you may not be loading the updated stylesheet when you checked.

    Having inline styles as well as external stylesheets makes it very difficult to follow what is or is not being applied.


    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Wednesday, November 10, 2010 7:38 PM
  • Actually, since the ul is assigned the ID, just define #portfolio.

    #portfolio   {margin:0;} should work for it.

    Jim


    That did work.  Perfect!

    My problem was, I didn't really understand that style I had in my CSS.  I had copied that from the jquery example I had found.

    This section here:
    ul#portfolio li img {
        border: .01em solid #999999;
        padding: .5em;
        list-style-type: none;
        }
    I couldn't find a tutorial where that was explained.  I understand the last part, that it's being applied to the img in the li.
    I'm used to defining the ID by itself.
    #SomeStyle {color:black}
    And in hindsight I'm seeing that it was a way to uniquely style a UL.  I think.
    So if that's the case could I uniquely style a <p> like this:
    p#SomeStyle  {font-size: 2em}

    <p id=SomeStyle>This is a paragraph</p>

     

    Wednesday, November 10, 2010 7:52 PM
  • FYI, an ID (#) can only be used once on the page. If you use a class (.) you can use it more than once. So your paragraph example might be better off as a class not an ID.
    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Wednesday, November 10, 2010 8:10 PM