SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Couple IE Issues

    Hi,

    Our website 1TM.com has a couple IE issues.

    First is a drop down menu issue when you use the drop down the text warps... Example: http://www.1tm.com/fixing/IEDROP.jpg

    Second are these tiny white space on the bottom of the images... example: http://www.1tm.com/fixing/IESPACE.jpg

    Any help would be much appreciated.

    Thanks!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    First is a drop down menu issue when you use the drop down...
    Hi,

    That problem got started by the float on the .products ul li , a float without a width will shrinkwrap to the width of it's content.

    Then the problem got compounded by floating all the child elements too, the only one that needed a float was the img

    Remove the floats from the LI, H2, and P and add text-align:left to the LI

    Code:
    .products ul li {
    border-bottom:1px solid #CCCCCC;
    display:block;
    /*float:left;/*---- remove this ---*/
    height:40px;
    padding:10px 0;
    text-align:left;/*--- add this ---*/
    }
    .products h2 {
    display:block;
    /*float:left;/*---- remove this ---*/
    font-size:16px;
    margin:0;
    padding:2px 0 3px;
    }
    .products p {
    color:#666666;
    display:block;
    /*float:left;/*---- remove this ---*/
    font-size:10px;
    margin:0;
    padding:0;
    font-size:10px;
    }
    .products img {
    float:left;
    padding-right:10px;
    }
    Second are these tiny white space on the bottom of the images
    When using images in the html like that IE will give you whitespace at the bottom in it's default state of vertical-align:baseline

    The fix is to set it as vertical-align:bottom or change the img to display:block
    Set up a new selector to target that img and style it or better yet make them background images positioned at the bottom of the parent element with some bottom padding to show the image.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur

    the warped text works in IE now but the menu its a little longer then in every other browser. Also the tiny white space vertical-align:bottom and display:block does not work. Could you possibly give me an example?

    Thanks again!

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Also the tiny white space vertical-align:bottom and display:block does not work.
    I didn't notice you had them nested a mile deep in tables like that

    You may have missed the whole point of CSS, take a look at all the inline styles and tables your using on that hosting plans page.

    Now the content in your left column IS table data so that is fine. Everything in that right column does not really qualify as table data.

    You might try setting a class on the images causing the whitespace, that way you can target them without effecting all the other images in your tables.

    You also have IE in quirks mode because of an incomplete doctype, it is missing the referring url.

    W3C QA - Recommended list of Doctype declarations

    Fixing the DTD might help the img problem, not sure but it needs to be fixed just the same.

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow lol putting the DTD makes everything all over the place.

    Any way to fix it in the current mode?

    Thanks Rayzur

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Wow lol putting the DTD makes everything all over the place.
    That's actually a good indicator of problems it's causing while in quirks mode.

    Make a version of that page with the DTD correction and post the link so we can see what it does.
    Any way to fix it in the current mode?
    Unless a table expert comes along with some trick that I'm not aware of the only thing I can suggest is putting a class on the problem images so you can target them only as I mentioned above.

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which Doctype declaration should I use?

    Thanks!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by CSSIssue View Post
    Which Doctype declaration should I use?

    Thanks!
    We've been through this before and you can't use a standards mode doctype because it breaks your whole page as it is built on quirks mode. There were just too many bugs to fix (e.g. you have no units on your inline styles which mean in standards mode they will be treated as zero).

    If you remember way back I (and others since) gave you a standards based version right at the start but you had gone too far with this design to change and now you are stuck with what you have I'm afraid.

    Note that the links to the images in your first post seem to be redirecting to your front page so I can't see which images you are looking at specifically.

  9. #9
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The links should work again I fixed the example 1 (menu still showing longer in IE.) but still have issues with example 2

    Example 1: http://www.1tm.com/fixing/IEDROP.jpg

    Example 2: http://www.1tm.com/fixing/IESPACE.jpg

    Thanks!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    A quick and dirty fix would be to add a negative margin to the bottom of the table to soak up the gap.

    e.g.

    Code:
    <!--[if IE ]>
    <style type="text/css">
    #SocialNav {display:none}
    table{margin-bottom:-2px}
    </style>
    <![endif]-->

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    We've been through this before and you can't use a standards mode doctype because it breaks your whole page as it is built on quirks mode. There were just too many bugs to fix (e.g. you have no units on your inline styles which mean in standards mode they will be treated as zero).
    Sorry about that Paul, I didn't know the history on that layout.
    Yes, it seems a bit late to turn back now short of rebuilding it.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Sorry about that Paul, I didn't know the history on that layout.
    Yes, it seems a bit late to turn back now short of rebuilding it.
    No worries Ray I was just trying to save you some work

    Actually, now I come to think of it I've even offered this fix before this same issue a few months ago

  13. #13
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked but I have some question. I'm not starting over which is the best way now to optimize the code for the website?

    Also I tried putting all my websites style tags in class tags but its showing all over the place not exactly how they look now. How come its not working?

    Using CSS like this:
    }
    .class1
    {
    style information here
    }
    .class2
    {
    style information here
    }
    .class3
    {
    style information here
    }

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by CSSIssue View Post
    It worked but I have some question. I'm not starting over which is the best way now to optimize the code for the website?

    Also I tried putting all my websites style tags in class tags but its showing all over the place not exactly how they look now. How come its not working?

    Using CSS like this:
    }
    .class1
    {
    style information here
    }
    .class2
    {
    style information here
    }
    .class3
    {
    style information here
    }
    I'd need to see the real code to find out why its not working as there could be many things that could get in the way (specificity for example).

    You do have an extra bracket at the start but I guess that was just a typo.


Tags for this Thread

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
  •