SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I.E. Must Die. CSS Help Needed.

    I've got the following page, that looks beautiful in Firefox:

    http://www.katycommunity.com/


    Now, I open it up in IE. Uggh.. the folks at MS have messed with me again. You'll notice, the image is pushed WAAAAYYY down the page, and the bulleted lists at the right have been pushed to the right.

    Anyone have any ideas why?

    Update: OK, I got the image part fixed, but still have no idea why the bullets are pushing to the right.
    Last edited by bvarvel; Sep 22, 2004 at 15:38.

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Monterey County, CA
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glanced through your css and didn't see any obvious problem. I might point out that in Opera the ul's are still pushed to the right, which makes me suspect a default or conflicting property which needs to be overridden, versus just a IE bug.

  3. #3
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll pull down Opera and take a looksie, but does anyone else have any ideas what would be causing this?

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

    Yes the problem is that you are not targeting the ul correctly.

    This code:
    Code:
    #discuss ul { margin: 5px 0px 5px 0px; padding: 0px; }
    #event ul { margin: 5px 0px 5px 0px; padding: 0; }
    Should be like this:
    Code:
    ul#discuss { margin: 5px 0px 5px 0px; padding: 0px; }
    ul#event { margin: 5px 0px 5px 0px; padding: 0; }
    because the html is like this:
    Code:
    <ul id="discuss">
    <li>This is discussion 1.</li>
    The ul wasn't being targetted but the li was. For your version to work the ul would have to be wrapped in another container whos id was discuss.

    That should sort it all out for you

    Paul

  5. #5
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a ton! One more thing...

    Can you explain what makes '#event ul' different from 'ul#event'?

  6. #6
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And one more thing, now that I have a IE 5.0 browser, I noticed that everything that normally is positioned within the gradient bars on each side is now shifted well to the left in IE 5. Any ideas why?

  7. #7
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bvarvel
    Thanks a ton! One more thing...

    Can you explain what makes '#event ul' different from 'ul#event'?
    The hashmark '#' indicates the id attribute of an element.

    Code:
    /* The following style is for some div with the id 'event' */
    div#event{...}
    <div id="event">
    
    /* The following style is for anything with the id 'event'*/
    #event{...}
    
    <p id="event">
    <h1 id="event">
    etc...
    
    /* The following style is for any ul that is contained within
        an element with the id of 'event' */
    #event ul{...}
    <div id="event">
      <ul>
        <li>...


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
  •