...

View Full Version : IE8 CSS Issue



twalters84
12-23-2009, 02:01 PM
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 (http://www.green-watch.org/green-products/business-products.cfm)

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:



<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]
<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

abduraooft
12-23-2009, 02:22 PM
Fix the errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.green-watch.org%2Fgreen-products%2Fbusiness-products.cfm&charset=%28detect+automatically%29&doctype=Inline&group=0

twalters84
12-24-2009, 04:26 AM
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

twalters84
12-24-2009, 12:10 PM
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:


<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

vineet
12-24-2009, 12:55 PM
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />



this will not give you the perfect result. its not a reliable solution.

vineet

twalters84
12-25-2009, 12:12 AM
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

vineet
12-25-2009, 06:49 AM
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.



<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

twalters84
12-25-2009, 01:19 PM
Hey there,

I finally found the root of the problem.

This code:



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


Compared to:



#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

vineet
12-25-2009, 02:07 PM
did you tried my above said styles.

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

vineet

twalters84
12-25-2009, 02:35 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum