SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    list images and submit buttons

    Link

    How come the arrow list item images are all aligned differently depending on browser? FF looks fine, Opera looks a little off and IE looks waaay off.

    Also, IE is adding margin space to the submit buttons.

    Any help on straightening this would be grand! Thanks!
    No, I REALLY dislike having to use Joomla.

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

    Yes the list-style-image is not very controllable and looks different in each browser. Therefore I tend never to use it but use a background image on the list instead which you can control exactly cross-browser. I know its not a semantic choice but sometimes sacrifices have to be made.

    In IE the only way to control the width of the submit button is to apply a width to them otherwise they seem to grow disproportionately.

    Hope that helps.

  3. #3
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for the reply.

    I do have a width set on the submit buttons. The margin-left: 130px is being shown differently. I tried using relative position with a left position of 130px, but it turns out the same with the submit buttons positioned out of the column.

    What's in IE that makes its 130px greater than FF's 130px?

    I'm looking for some padding issue or anything that could be throwing it off.
    No, I REALLY dislike having to use Joomla.

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

    Its an ie bug and you need to wrap the input in a wrapper such as a div or a span.

    e.g.
    Code:
    <span><input type="submit" value="submit" class="submitbutton" /></span>

  5. #5
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    Could you take another look? The inkjet list items have a similar problem. I tried to put a span tag around each li, but it didn't have the same effect.

    It also hid the background arrow imgs.

    That'd be the last of it though.

    I read the new tech times...very cool stuff about CSS tables.

    Cheers!
    No, I REALLY dislike having to use Joomla.

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

    Add display:inline to the two floats to cure the IE double margin bug (see faq on floats for more info).

    Code:
    #cartoptions{
    width: 192px;
    border: 1px solid #66ccff;
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
    margin-left: 15px;
    display:inline
    }
    #maincontent{
    width: 522px;
    float: right;
    margin-right: 15px;
    display:inline
    }
    To force "haslayout" on the list items use this which should bring them more in line:

    Code:
    * html #cartoptions li a{height:1&#37;}
    #cartoptions li a{min-height:0}
    See what that looks like

  7. #7
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should I be putting a span around each li then?

    I made the changes, but it remains the same. I look at the DOM view in IE7 and neither height or min-height show up in the Property/Current Value list.
    No, I REALLY dislike having to use Joomla.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I made the changes, but it remains the same.
    Hmm, its looking better for me in IE. Did you refresh the cache? What issues are you seeing or maybe we are looking at different things.



    Should I be putting a span around each li then?
    No, that was only a hack for the submit buttons.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Ok, I can see the list items are still not correct. Try adding this:

    Code:
    #cartoptions li a{float:left;clear:left}
    Hopefully that should make then behave this time.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I forgot to mention that the last snippet should be in the IE only css file because it will mess up other browsers.

    Code:
    <!--[if IE ]>
    <style type="text/css" media="all">
    #cartoptions li a{float:left;clear:left}
    </style>
    <![endif]-->

  11. #11
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The amount of space I see between a list arrow and HP is greater in IE7 than FF. It seems about twice as much. I guess it's not that big a deal, but if the client thinks it looks off, I'd like to be able to make it look right.

    Yeah, I cleared my cache.

    Thanks again.

    E: Ok, I'm putting that IE style in.
    Last edited by crowden; Feb 29, 2008 at 14:19. Reason: my late response...
    No, I REALLY dislike having to use Joomla.

  12. #12
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and yes, they now behave!

    No, I REALLY dislike having to use Joomla.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Sorry, for the multiple posts but I just spotted another error.

    Your maincontent is 522px wide and you have nested .padding inside it with 10px padding. That leaves a space of only 502px for content. Your video image however is 514px wide which is already 12px too big and will push things wide in ie.

    Make sure you have the correct amount of room for your elements because IE will stretch them to fit the content. You'll have to put that image outside of the .padding div or remove the padding div altogether as it is a waste of html anyway.

    You could put the padding on inner elements or even have put the padding on the original maincontent had there been enough room to do so.

  14. #14
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just took it out completely.

    I'd noticed the same thing, but didn't see any weirdness out of it in any of the browsers (Opera, FF and IE7)
    No, I REALLY dislike having to use Joomla.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    but didn't see any weirdness out of it in any of the browsers
    It was only IE6 that was a problem because it will stretch the element so that everything fits inside and the spacing would be all wrong. Other browsers ignore anything that can't fit inside and just let it overflow without breaking anything.

    The only thing you would have noticed was the spacing differences in Ie6


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
  •