Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: IE8 CSS Issue

  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    IE8 CSS Issue

    Hey there,

    On my search result pages on my website, I usually have an image on the left and information about the item on the right. Here is an example page:

    Green Products

    On browsers other than IE8, the spacing is correct.

    On IE8, there seems to be space between the top of a search result item and the image that shouldnt be there. How can I fix this CSS issue?

    Space occurs when wrapped around a hyperlink:

    Code:
    <a href="#baseProductURL#/edit-product.cfm?productID=#productID#" title="Edit Product">
      <img src="#myImage#" alt="Edit Product" title="Edit Product" id="prodImage#i#" height="#myHeight#" width="#myWidth#" style="margin-top:#heightOffset#px; margin-left:#widthOffset#px; margin-bottom: #heightOffset#px; margin-right:#widthOffset#px;"/>                          
    </a>
    as opposed to just:

    [CODE]

    Code:
    <img src="#myImage#" alt="Edit Product" title="Edit Product" id="prodImage#i#" height="#myHeight#" width="#myWidth#" style="margin-top:#heightOffset#px; margin-left:#widthOffset#px; margin-bottom: #heightOffset#px; margin-right:#widthOffset#px;"/>
    Thanks in advance for any suggestions.

    Sincerely,
    Travis Walters

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Fix the errors in your markup first, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey there,

    Thanks for the reply.

    The page is now validating as W3C compliant.

    However, the space still exists in IE8.

    I know this has something to do with the hyperlink and CSS.

    Sincerely,
    Travis Walters

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Update

    Hey there,

    I noticed if I place the following code right after the head tag, then IE8 will emulate in IE7 and the problem will be gone:

    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    However, I would still like to stay up-to-date with the latest IE CSS.

    Is there a better solution to this problem?

    Sincerely,
    Travis Walters

  • #5
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by twalters84 View Post

    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    this will not give you the perfect result. its not a reliable solution.

    vineet

  • #6
    New Coder
    Join Date
    Aug 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey there,

    Why wouldn't it be a reliable solution?

    When the browser is forced to emulate IE7, it appears the user can not switch back to IE8 for that particular page.

    I know IE is behind Firefox, Chrome, etc when it comes to CSS standards, so maybe the problem will eventually fix itself when a later version comes out?

    I would love to know how to fix this with IE8 though.

    Sincerely,
    Travis Walters

  • #7
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    if you want to know why its not reliable then you have to ask many visitors who use IE8, if they are able to view it as IE7 in IE8.

    Anyway, for the IE8 solution you can give this a try as i dont have loaded IE8 but this may work.

    Code:
    <style type="text/css">
    ul{
    margin:0px;
    padding:0px;
    }
    li.searchResults {
    width:508px;
    border:1px solid #000;
    margin:0 0 10px;
    padding:5px; 
    overflow:auto;
    }
    li.searchResults:hover {
    background:#CCC;
    }
    
    div.searchResultsLeftColumn {
    width:100px;
    float:left;
    display:inline;
    text-align:left;
    margin:0;
    padding:0;
    }
    
    div.searchResultsRightColumn {
    width:395px;
    float:left;
    display:inline;
    line-height:1.4em;
    margin:0;
    margin-left:9px;
    padding:0;
    }
    p.searchItem2 {
    margin:0px 0 0;
    }
    </style>
    vineet

  • #8
    New Coder
    Join Date
    Aug 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey there,

    I finally found the root of the problem.

    This code:

    Code:
    #body a,#body a:link,#body a:visited,#body a:active 
    {
    color:#333;
    border-bottom:1px dashed #333;
    }
    Compared to:

    Code:
    #body a,#body a:link,#body a:visited,#body a:active 
    {
    color:#333;
    }
    IE8 is not liking the "dashed" attributed in border-bottom.

    I am going to have to do one of those iebugs.css files for IE8.

    Sincerely,
    Travis Walters

  • #9
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    did you tried my above said styles.

    you mean to say the top gap was because of dashed border. strange.

    vineet

  • #10
    New Coder
    Join Date
    Aug 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey there,

    I did try your styles. I placed them on the page below the CSS style sheets so it should have overrode any previous declarations if I am not mistaken.

    I created a test page and broke everything down to the fundamental elements on the page to find out exactly which line of code in the CSS style sheet was causing the problem. Once I took out that line mentioned above with the dashed attribute, the spacing disappeared.

    I was not really thrilled about the release of IE8. I also had some javascript problems with the Scriptaculous library. On the same page, if you click one of the links such as "subcategory" on the left, an error occurs with IE8.

    I noticed forcing IE7 emulation solved both problems, so I might end up doing that at least until the library is fixed.

    Sincerely,
    Travis Walters


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •