[RESOLVED] IE css problems

[rbrown]

Hi All,

Wondering whether someone can help me, my page is more or less ready to go on my website. It works fine in Firefox, but im having a couple problems in IE

So if someone could take a look in Firefox first and then IE and get back to me with the solution that would be great:

my page: http://www.palace-cinema.com/trailertest.php

the problem: it's just with the carousel at the bottom of the page, if you look at it in Firefox it's perfectly placed, when you switch to IE i think the images shift slightly to the left and the buttons move and overlap the images.

the css code:

<style type="text/css">
.carousel-component {
padding:8px 16px 4px 16px;
margin:0px;
}

.carousel-component .carousel-list li {
margin:4px;
width:110px; /* img width is 75 px from flickr + a.border-left (1) + a.border-right(1) +
img.border-left (1) + img.border-right (1)*/
height:175px; /* image + row of text (87) + border-top (1) + border-bottom(1) + margin-bottom(4) */
/* margin-left: auto;*/ /* for testing IE auto issue */
}

.carousel-component .carousel-list li a {
display:block;
border:1px solid #e2edfa;
outline:none;
}

.carousel-component .carousel-list li a:hover {
border: 1px solid #aaaaaa;
}

.carousel-component .carousel-list li img {
border:1px solid #999;
display: block;
}

.carousel-component .carousel-prev {
position:absolute;
top:40px;
z-index:3;
cursor: pointer;
left:5px;
}

.carousel-component .carousel-next {
position:absolute;
top:40px;
z-index:3;
cursor: pointer;
right:5px;
}
</style>


Thanks!

[WebJoel]

I think I see the problem. This may not be part of it, but there are a few code violations that need to be corrected. Here are a few:

...<table cellpadding=0 cellspacing=0 border=0 height="105px"><tr>
<td width="430" valign="top">... "px" is CSS, not HTML and meaningless here. Probably ignored and pixels is assumed, but HTML does not recognize "px" used this way.

</object><a style="font-family: verdana; color:cccccc; font-size: 8pt; text-decoration:none" alt="filmtrailer.com" target="_blank" ref="http://uk.filmtrailer.com/">Film Trailers by Filmtrailer.com</a>
<!-- END: Provided by filmtrailer.com -->

<br><br> Requires "#" else the color is ignored and a default color is chosen. I noted different colors for this element when checking Fx vs. IE.

Also, alt="filmtrailer.com" is illegal. "alt=" is only used for "img" tags, not for "a" tags. Use title="filmtrailer.com" instead.

(still checking...)

[WebJoel]

.tooltipsoon span, .tooltipnow span {width:100%;} Gets the 'coming soon' and 'playing now' to expand the full width of the image. -Is this what you mean?
Works Fx & IE7.

[rbrown]

I think I see the problem. This may not be part of it, but there are a few code violations that need to be corrected. Here are a few:

"px" is CSS, not HTML and meaningless here. Probably ignored and pixels is assumed, but HTML does not recognize "px" used this way.

Requires "#" else the color is ignored and a default color is chosen. I noted different colors for this element when checking Fx vs. IE.

Also, alt="filmtrailer.com" is illegal. "alt=" is only used for "img" tags, not for "a" tags. Use title="filmtrailer.com" instead.

(still checking...)

Thanks for reply but still no fixed problem.

[WebJoel]

Really? -Are we looking at the same thing? The 'hover effect' was busted in IE7 on the carousel. It does not expand horizontally the full width of the carousel images. I thought that was the problem. :(

Can you screenshot the problem? The code is very easy to read and quite correct so finding the problem should not be difficult, -once I know what exactly the problem is. :)

[rbrown]

Really? -Are we looking at the same thing? The 'hover effect' was busted in IE7 on the carousel. It does not expand horizontally the full width of the carousel images. I thought that was the problem. :(

Can you screenshot the problem? The code is very easy to read and quite correct so finding the problem should not be difficult, -once I know what exactly the problem is. :)

this was one of the problems i had on the page and you fixed it for me thanks but not the main/original problem i posted at the top of this thread.

but since i have actually worked it all out so this can now be marked as resolved.

thanks very much

[WebJoel]

oh okay :)