I have currently finished designing my website and am just about done building it. The only problem I have is that my slideshow (in the portfolio sections) is not rendering correctly when viewed in IE7. I am almost certain it is a div issue.

Here is a link to my website :: http://www.monelladesigns.com and one of the pages that needs help is this :: http://www.monelladesigns.com/brandidentity.html

And here is the css for the slideshow divs ::

* {margin:0; padding:0}
#wrapper {
width:718px; 
height:474px; 
background:#eae9e9; 
position:relative;
}

.sliderbuttonL {
float:left; 
width:34px; 
padding:0px; 
position:absolute; 
margin-left:6px; 
margin-top:6px; 
z-index:3;
}

.sliderbuttonL img {
cursor:pointer;
}

.sliderbuttonL img:hover {
background:#666;
}

.sliderbuttonR {
float:right; 
width:34px; 
padding:0px; 
position:absolute; 
margin-left:678px; 
margin-top:6px; 
z-index:3;
}
.sliderbuttonR img {
cursor:pointer;
}


#slideshow {
float:left; width:706px; 
height:462px; 
margin-top:6px; 
margin-left:6px; 
background:#fff; 
z-index:1;
}

#slides {
position:relative; 
width:706px; 
height:462px;
list-style:none; 
overflow:none; 
z-index:1;
}

#slides li {
width:706px; 
height:462px;
}

.pagination {
float:left; 
list-style:none; 
margin:0px;
}

.pagination li {
cursor:pointer; 
padding:3px 4px; 
background:#eae9e9; 
border:0px; 
margin:0 0px 0 0; 
text-align:left; 
color:#a43038; 
font-size:11px;
}

.pagination li:hover {
background:#a43038; 
border:0px; 
color:#ffffff;
}

li.current {
border:0px; 
background:#a43038; 
color:#ffffff;
}

This is how it should look.... alt text

If there is any other information I can provide, please let me know. Any help is greatly appreciated!

1 answer

0
points
This was chosen as the best answer

Quick Fix

tinystyle.css (line 13)

.sliderbuttonL {
/* removed float:left; */
width:34px; 
padding:0px; 
position:absolute; 
left:0; /* added this */
margin-left:6px; 
margin-top:6px; 
z-index:3;
}

tinystyle.css (line 31)

.sliderbuttonR {
/* removed float:right; */ 
width:34px; 
padding:0px; 
position:absolute; 
right:0; /* added this */
margin-left:678px; 
margin-top:6px; 
z-index:3;
}

tinystyle.css (line 65)

#slides li {
width:706px;
height:462px;
left:0; / added this /
}

However I would suggest the following to you as best practices:

  • Don't use tables for layout as you have done. Use semantic markup and CSS.
  • Use a strict doctype or the simpler html5 doctype.
  • Understand and use CSS positioning.
Answered almost 6 years ago by Moin Zaman
  • Moin Zaman, Thank you, thank you, thank you!! That definitely was a quick fix. As for trying to stay away from tables, would you recommend any reading material to get me started? Thanks again!! Jessica Jessica almost 6 years ago