Graphic Spills Over To Next Line In IE6

HTML & CSS
1

Below is a linked page where I have a scroller in the top right. And in IE6, the right graphic that is the blue rounded corner shape spills down or moves down under the scroller instead of being flush with the right side of the scroller area.

Can someone take a look and tell me why?

LINK-
http://www.securehostserver.info/tds/

2

That did the trick! However, when viewing the page in IE8 the navigation bar is not in the correct position and it appears to be repeated for some reason. Here is a link to the snapshot that I have for IE8. Any fixes for why this would happen?

SNAPSHOT-
http://www.securehostserver.info/tds/i/tds-nav-error.jpg

3

I went back and created the slideshow/scroller area out of one div and it now uses no background image. But it now seems to be messed up in IE8 in a different way than it looks in IE6 (which is still wrong).

Any ideas?

4

Well, what possibly you could have done is for the slider section

  1. instead slicing into three (left, center and right) div, one div with an entire background image.
    Now as you haven’t done so let i will tweak your existing code.
    2.- it’s better if you had those three divs “slideshowLeft”, “slideshow”, slideshowRight" inside a wrapper div and position the wrapper div instead position three divs.
  • and, those three divs can be position to relative with floating to left, this will make sure "if there is enough space in div wrapper those three div will allways float to left. Also eliminate cross-browser issue.

Here is some part of the twisted code,


	<div id="banner">
		<div id="logo"><a href="http://www.tds-exhibits.com/" title="TDS Exhibits - A full-service exhibit company."><h1>TDS Exhibits - A full-service exhibit company</h1></a></div><!--end logo-->
		[B][COLOR="DarkGreen"]<div id="slide-wrapper">[/COLOR][/B]<div id="slideshowLeft"><img src="rtey_files/gfx_slideshow_left.gif" alt="" width="21" height="158"></div><!--end slideshowLeft-->
		<div id="slideshow"> [B][COLOR="Red"]your javascript and code will as it is[/COLOR][/B] </div><!--end slideshow-->
		<div id="slideshowRight"><img src="rtey_files/gfx_slideshow_right.gif" alt="" width="21" height="158"></div><!--end slideshowRight-->[B][COLOR="DarkGreen"]<div style="clear:both"></div>[/COLOR][/B][B][COLOR="DarkGreen"]</div>[/COLOR][/B]
	</div><!--end banner-->

and in the css, i made this tweak


[B]#slide-wrapper[/B]{width:475px;position:relative; float:left; margin:25px 0px 0px 0px}
#slideshowLeft { [B]position:relative[/B]; width: 21px; height: 158px; float: left; [B]margin: 0 0;[/B] }
#slideshow { [B]position:relative[/B]; width: 415px; height: 157px; float: left; [B]margin: 0 0;[/B] , padding: 0px; background-color: #0968AC; background-position: 21px 0px; }
#slideshowRight { [B]position:relative[/B]; width: 21px; height: 158px; float: left; [B]margin: 0 0;[/B] }

Hope you will be able to fix.

5

Thanks Paul! This works like a charm!

6

Exclude IE8 from the conditional stylesheet as the rules inside are meant for less than ie8.


<!--[if lte IE 7]>
7

There seems to be not enoug space for two divs inside div “banner”. you can try removing some margin from div logo. I think that will give some space to slider.