Opera Positioning Issue

HTML & CSS
1

I have a jQuery Cycle plugin slideshow on the homepage of a website I’m just completing.

It displays fine in all browsers apart from Opera, which positions the first container of content off to the left of the page, it then corrects itself when fading to the next image.

http://www.lukegrose.com

Here is the CSS for the slideshow.

#slideshow_container {
	position: relative;
	display: block;
	margin-bottom: 25px;
	background: url(../global_images/slideshow_bg.png) no-repeat;
	padding: 3px 0px 0px 3px;
}

.slideshow {
	width: 694px;
	height: 200px;
	display: block;
}

.slideshow_text {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 2.2em;
	width: 190px;
	text-align: right;
	line-height: 1.4em;
	display: block;
	color: white;
	font-family: Impact;
	font-weight: lighter;
	letter-spacing: 1px;
	padding-left: 5px;
	text-shadow: black 1px 1px 5px;
}

.slideshow_more a {
	position: absolute;
	top: 150px;
	right: 20px;
	width: 170px;
	display: block;
	text-align: center;
	background-color: #595959;
	padding: 3px;
}

.slideshow_more a:hover {
	background: #898a8a;
}

It’s baffling me I’m afraid, anyone have any ideas?

2

Hi,

This should fix it :slight_smile:


.slideshow li{position:relative;width:694px}
3

Your page looked strange to me:
http://stommepoes.nl/screenshot1.jpg

You could see what Opera does if you take whatever jQuery generates as far as HTML and place it manually on the page. If Opera shows the error, it’ll be easy to write some code to fix it (I think).