CSS - Ie Dropping Gallery

For a navigation I am using, I must use an li height to control spacing in IE6. I'm also using bullets to show a user where they are in the site by only having one bullet display at a time.

Unfortunately, the height assignment I use on my li causes IE to misplace the bullet next to its secondary nav.

Below is code I'm using to troubleshoot:

Code:

<ul><li><a href="#">dog</a></li>
  <li><a href="#">cat</a></li>
  <li class="here"><a href="#">fish</a></li> 
    <ul>
      <li><a href="#">trout</a></li>
      <li><a href="#">angel</a></li>
      <li><a href="#">salmon</a></li>
    </ul>
  <li><a href="#">turtle</a></li>
  <li><a href="#">elephant</a></li>
</ul>

Code:

li {height: 20px; list-style-type: none;}
li.here {list-style-type: disc;}

If a user is on the page fish, they will see that bullet point to page salmon.

Any recommendations?

Alright guys. I'm working on a horizontally scrolling news ticker type deal. I have two divs on screen, and the rest are off screen using the overflow:hidden on the parent.

The divs are set to 466px wide, float:left, and the parent is 932px wide. Since div 3 and up are all 466px, they drop down below the other two. Not a problem, since the overflow is set. However the jquery animation does not reset the reference point when it scrolls, so the divs stay in this arrangement. Is there any way to keep them all lined up next to eachother horizontally?

I'm wondering if there is a CSS solution first, before I get creative with the jQuery. I could easily set it for the next two divs to display right, but there is no telling how many divs there will be and it would quickly become a nightmare trying to account for all possibilities.

Here is the current CSS I'm using:
Code:

#test {background-color:#F1F2F2; width:932px; padding:10px; margin-top:20px;overflow:hidden; display:inline-block; height:400px;} #newswrapper {height:100px; position:relative; left:0px;} #newswrapper div {float:left; position:relative; background:#CCC; width:466px; height:400px;}

I've got a photo gallery loaded and working well but I would like to load the first photo of the gallery without the user having to click the thumbnail. Right now the photo holder is blank until the user clicks the first one. Any help is greatly appreciated. Steve

a.gallery, a.gallery:visited {
display:block;
display:inline-block;
color:#000;
text-decoration:none;
border:1px solid #000;
width:75px; height:47px;
float:left; margin:4px;
}

a.slidea {background:url(../img/index/tlc1.jpg);}
a.slideb {background:url(../img/index/tlc2.jpg);}
a.slidec {background:url(../img/index/tlc3.jpg);}
a.slided {background:url(../img/index/lc4.jpg);}
a.slidee {background:url(../img/index/lc5.jpg);}
a.slidef {background:url(../img/index/lc6.jpg);}
a.slideg {background:url(../img/index/lc7.jpg);}
a.slideh {background:url(../img/index/lc8.jpg);}
a.slidei {background:url(../img/index/lc9.jpg);}
a.slidej {background:url(../img/index/lc10.jpg);}

a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}
a.slidea em {background:url(../img/index/lc1.gif) 5px 5px no-repeat;}
a.slideb em {background:url(../img/index/lc2.gif) 5px 5px no-repeat;}
a.slidec em {background:url(../img/index/lc3.jpg) 5px 5px no-repeat;}
a.slided em {background:url(../img/index/lc4.jpg) 5px 5px no-repeat;}
a.slidee em {background:url(../img/index/lc5.jpg) 5px 5px no-repeat;}
a.slidef em {background:url(../img/index/lc6.jpg) 5px 5px no-repeat;}
a.slideg em {background:url(../img/index/lc7.jpg) 5px 5px no-repeat;}
a.slideh em {background:url(../img/index/lc8.jpg) 5px 5px no-repeat;}
a.slidei em {background:url(../img/index/lc9.jpg) 5px 5px no-repeat;}
a.slidej em {background:url(../img/index/lc10.jpg) 5px 5px no-repeat;}

/* styling for gallery */
#container_right {
float:left;
width:100%;
height:300px;
position:relative;
background-color:#839BAE;
background-image:
}

#container_right img {
border:0;
}

#container_right .thumbs {
width:170px;
position:absolute;
right:32px;
top:6px;
}

#container_right a.gallery:hover span {
display:block;
position:absolute;
width:402px;
height:50px;
top:260px;
left:-520px;
padding:5px;
font-style:italic;
color:#fff;
z-index:100;
}

#container_right a.gallery:hover span:first-line {
font-style:normal;
font-weight:bold;
font-size:1.1em;
color:#CCCCCC;
}
#container_right a.gallery:active, #container_right a.gallery:focus {
border:1px solid #000;
}
#container_right a.gallery:active em, #container_right a.gallery:focus em {
display:block;
position:absolute;
width:510px;
height:275px;
top:1px;
left:-525px;
padding:5px;
color:#000;
z-index:50;
}

Hi,

I am currently learning CSS and javascript and I'm trying to make a simple photogallery box containing photo's(horizontally).

Here is my code:

Code:

<script language="JavaScript" src="person.js" type='text/javascript'></script>
	<style type="text/css">
	body {background-color:#900;}
	.box {position:relative;
		  top:200px;
		  left:200px;
		  width:500px;
		  border:2px;
		  border-color:green;
		  background-color:blue;
		  overflow:hidden;
	}
	
	.photo{
		margin-top:5%;
		margin-left:10%;
		margin-right:10%;
	
		
	}
	img{
		width:100px;
		height:100px;
		
	}
	
	</style>
</head>

<body>
    <div class="box">
    	<div class="photo">
        	<img src="1.jpg" />
            <img src="2.jpg" />
            <img src="3.jpg" />
            <img src="4.jpg" />
        </div> 
    </div>
</body>

Here are my problems: below the box i am trying to get a little box with buttons to the left and right.

In the box the photo's must go horizontally next to each other and if there is no spice it must dissapear at the side box so i can press the buttons left or right to get the photo's in the middle.

But now the 3 photo's are horizontally and the next is on a new line instead of in going away at the side of the box.

Can anyone give me some advice and tips please thnx!

I am wanting to do a photo gallery section like http://www.passionforpaintings.com/...rtists/overview. The problem is it is in html and I been looking for css gallery tutorials and can not find anything like this. Could anyone give me some help or point me in the right direction please? Many thanks in advance.

I have no idea what I'm doing incorrectly but I cannot get the gallery to display in the center of my page, it keeps going to the right. It is also bumped down a little so it isn't as far up as it could be. You can see it

HERE

Hi there,

This image gallery is working fine is Safari and Firefox, but has a problem in IE, but I just can figure it out!

Here is the page:
http://www.greatsouthmetals.com/image-gallery.html

Please help!

Thanks!

Hi,

I am pulling my hair out why the images are not visible on this page
http://www.zahnarzt-oberland.de/Gmunden/Inhalte/test.htm

It is based on this CSS gallery:
http://www.cssplay.co.uk/menu/slide_show.html

thank you in advance
Raggi

Hello everyone. You see, I wanted to use the close look up for images in gallery, something like sucker fish gallery have. On hover, image changes size and pop up bigger. I've used overflow, because not every image in gallery after resizing by server to 200px width will have 150px height. There is example image to illustrate that.

And now... open it using IE, this is something to do with z-index I think. I really don't how to code it for IE. On Opera and FF it is probably looking as it should. Could anyone suggest something to solve this please ? I would be grateful.

http://members.lycos.co.uk/milosz/www/new/

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Test page</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

ul { width: 400px; }

li { margin: 10px; position: relative; float: left; width: 100px; height: 75px; }
li a { border: 1px solid #3A3A3A; text-decoration: none; color: #EFEFEF; width: 100px; height: 75px; overflow: hidden; background: #3A3A3A; position: absolute; }
li a img { border: 0; }

li:hover a { position: absolute; width: 200px; height: 150px; left: -51px; top: -39px; border: 1px solid #3A3A3A; overflow: hidden; z-index: 2; }
li a:hover { z-index: 1; }

</style>

<!--[if lt IE 7]>
<style type="text/css">
/* Hovers everything now */
body { behavior:url("csshover.htc"); }
</style>
<![endif]-->

</head>

<body>
<br />
<br />
<br />

	<ul>	

			<li><a href="#" target="_blank"><img src="1.png" alt="1.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="2.jpg" alt="2.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="1.jpg" alt="1.jpg" /></a></li>
			
	</ul>

</body>

</html>

Excuse me my poor English.

edit: I've changed link, and move files to safe server. They will stay there longer I think, and maybe somehow help others like me.

I'm in the middle of building a site. I have a gallery page with a pop up j-query gallery.

perisandcorr.com/mona/gallery.html

It works in IE7 and IE8 but not in IE6. Any suggestions.

Another problem I have is with the navigation on the left. The margins between each button is larger in IE6 and IE7 than I want them to be they are fine in the latest versions of Safari, Firefox and Opera (on a Mac).

Also in IE6 the rollover doesn't work.

Any help much apreciated.

Thanks in advance.

Hello,

I have been having quite a bit of trouble using the Galleria js/jQuery plugin for my image gallery because of a lack of IE support. I have tried posting on their support pages numerous times with no response.

The site can be found at http:jonathansakkos[dot]com/index-test.html.

The main problem is that in IE (I have tested 7 & 8) the main image shifts to the right so that it is partly off screen. I have tried fiddling with the CSS file that comes with galleria, but cannot seem to fix this bug. That CSS file can be found he

Code:

.galleria-container{position:relative;overflow:hidden;background:#000;} 
.galleria-container img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;} 
.galleria-stage{ position:absolute; top:10px; bottom:70px; left:10px; right:10px; overflow:hidden; margin: 0 auto 0 auto; } 
.galleria-thumbnails-container{height:60px;bottom:0;position:absolute;left:10px;right:10px;z-index:2;} 
.galleria-carousel 
.galleria-thumbnails-list{margin-left:10px;margin-right:10px;} .galleria-thumbnails 
.galleria-image{ height:60px; width:60px; background:#000; margin:0 5px 5px 0; border:1px solid #000; ; float:left; cursor:pointer; } 
.galleria-counter{position:absolute;bottom:10px;left:10px;text-align:right;color:#fff;font:normal 11px/1 arial,sans-serif;z-index:2;} 
.galleria-loader{background:#000;width:20px;height:20px;position:absolute;top:10px;right:10px;z-index:2;display:none;background:url(classic-loader.gif) no-repeat 2px 2px;} 
.galleria-info{width:50%;top:15px;left:15px;z-index:2;position:absolute;} 
.galleria-info-text{background-color:#000;background-color:rgba(0,0,0,.9);padding: 12px;display:none;} 
.galleria-info-title{font:bold 12px/1.1 arial,sans-serif;margin:0;color:#fff;} 
.galleria-info-description{font:italic 12px/1.4 georgia,serif;margin:0;color:#bbb;} 
.galleria-info-title+.galleria-info-description{margin-top:7px;} .galleria-info-close{width:9px;height:9px;position:absolute;top:5px;right:5px;background-position:-753px -11px;opacity:.5;cursor:pointer;display:none;} 
.galleria-info-link{background-position:-669px -5px;opacity:.8;position:absolute;width:20px;height:20px;cursor:pointer;background-color:#000;} 
.galleria-info-link:hover, .galleria-info-close:hover{opacity:.5;} .galleria-image-nav{position:absolute;top:50%;margin-top:-15px;width:100%;height:31px;left:0;} 
.galleria-image-nav-left, .galleria-image-nav-right{opacity:.7;cursor:pointer;width:16px;height:31px;position:absolute;left:10px;z-index:2;} 
.galleria-image-nav-right{left:auto;right:10px;background-position:-300px 0;z-index:2;} 
.galleria-image-nav-left:hover, 
.galleria-image-nav-right:hover{opacity:.5;} .galleria-thumb-nav-left, 
.galleria-thumb-nav-right{cursor:pointer;display:none;background-position:-495px 5px;position:absolute;left:0;top:0;height:40px;width:23px;z-index:3;opacity:.8;} 
.galleria-thumb-nav-right{background-position:-578px 5px;border-right:none;right:0;left:auto;} 
.galleria-thumbnails-container .disabled, 
.galleria-thumbnails-container .disabled:hover{opacity:.2;cursor:default;} 
.galleria-thumb-nav-left:hover, .galleria-thumb-nav-right:hover{opacity:1;background-color:#111;} .galleria-carousel 
.galleria-thumb-nav-left, 
.galleria-carousel .galleria-thumb-nav-right{display:block;} .galleria-thumb-nav-left, 
.galleria-thumb-nav-right, .galleria-info-link, .galleria-info-close, 
.galleria-image-nav-left, 
.galleria-image-nav-right{background-image:url(classic-map.png);background-repeat:no-repeat;}

I realize that this code is tough to read and if there is a better way to post it please let me know and I will do that.

Any help would be greatly appreciated!

Thanks,

Jonathan

Hi all

This is my first post so first of all Hello and i hope that i can help people and be helped.

I am trying to create a Horizontal Image gallery which will scroll I have looked on the web but can't find any concrete answer to what i'm tryign to create. I did find a sort of answer but only displays text i include below, if you haveany ideas of ohow i do display images with a horizontal scroll please help

Thank You
Chaz


P.s. I dunno if i have displayed the code correctly or if i'm meant to paste it in differently.
Code:

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "(URL address blocked: See forum rules)">
<html>
<head>
<title>horizontally scrolling box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background-color:#303;
 }
#wrapper {    
    width:800px;
    height:300px;
    margin:100px auto 0;
    background-image:url(images/eyes.gif);
 }
#container {
    width:700px;
    height:300px;
    overflow:auto;
 }
#content {
    width:800px;
    height:300px;
    color:#303
 }
#content p {
    margin:0;
    padding:10px;
 }
</style>

</head>
<body>

<div id="wrapper">

<div id="container">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>

</div>

</div>

</body>
</html>

i am trying to use this very simple image gallery from cssplay stu nichols site
"A permanent image click gallery with 'previous' / 'next' buttons"
so i change the css to suit my images and create my own prev|next buttons but when i check it in a browser - i'm working with dreamweaver cs5 [trial] it dosn't show me the buttons
i'm very new to css - and am bashing my head over this issue

would appreciate any help - not sure if i need to put in my altered source code so i will
Code:
CSS

#gallery {
	width:500px;
	height:500px;
	margin:0 auto;
	position:relative;
	font-family:verdana, arial, sans-serif;
}
#gallery a.previous {display:block; height:40px; width:32px; background:url(click/previous.gif); position:absolute; left:0; top:560px;}
#gallery a.next {display:block; height:40px; width:32px; background:url(click/next.gif); position:absolute; right:0; top:560px;}
#gallery a b {display:none;}
#gallery #fullsize {
	position:absolute;
	left:0;
	top:0;
	height:550px;
	width:500px;
	overflow:hidden;
	text-align:center;
}
#gallery #fullsize div {width:500px; height:600px; padding-top:10px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:0;}
#gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:8px;}
#gallery #fullsize div p {padding:5px 0; margin:0; font-size:10px; line-height:14px;}

Code:
XHTML

<div id="gallery">
	<div id="fullsize">
		<div id="pic1">
			<img src="images/greyday/gd1.jpg" alt="grey day1" />
			<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
		  <h3>1 | 10</h3>			
	  </div>
		<div id="pic2">
			<img src="images/greyday/gd2.jpg" alt="grey day2" />
		  <a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"><b>Next</b></a>
		  <h3>2 | 10</h3>
	  </div>
		<div id="pic3">
			<img src="images/greyday/gd3.jpg" alt="grey day3" />
		  <a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
		  <h3>3 | 10</h3>
	  </div>
		<div id="pic4">
			<img src="images/greyday/gd4.jpg" alt="grey day4" />
		  <a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"><b>Next</b></a>
		  <h3>4 | 10</h3>
	  </div>
		<div id="pic5">
			<img src="images/greyday/gd5.jpg" alt="grey day5" />
		  <a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
		  <h3>5 |10</h3>
	  </div>
		<div id="pic6">
			<img src="images/greyday/gd6.jpg" alt="grey day6" />
		  <a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
		  <h3>6 | 10</h3>
	  </div>
		<div id="pic7">
			<img src="images/greyday/gd7.jpg" alt="grey day7" />
		  <a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
		  <h3>7 | 10</h3>
	  </div>
		<div id="pic8">
			<img src="images/greyday/gd8.jpg" alt="grey day8" />
		  <a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
		  <h3>8 | 10</h3>
	  </div>
		<div id="pic9">
			<img src="images/greyday/gd9.jpg" alt="grey day9" />
		  <a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
		  <h3>9 | 10</h3>
	  </div>
		<div id="pic10">
			<img src="images/greyday/gd10.jpg" alt="grey day10" />
		  <a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"><b>Next</b></a>
		  <h3>10 | 10</h3>
	  </div>
	</div>
</div>

i really would appreciate some help with this - thank you in advance

Hi, I am very inexperienced with web-editing. I want to use lightweight-image-gallery-with-thumbnails (its first option when googling this) but would like to edit it a bit. I have played around with the code a bit but don't get it to work as I want.

I am trying to get the main image at the top and the thumbnail gallery below it, as it is now the thumbnails are to the left of the image to be shown:

there is some nifty javascript for this also but the the css code is:

<style media="screen,projection" type="text/css">

/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }

/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

</style>


Any help would be most appreciated...

Thanks

Hey all,

I've got a photo gallery here. In IE7 The list just drops below the box on the right, whereas in FF it breaks where it should and moves down. I can't figure out what's going on.

Here's the CSS for the gallery:
Code:

#galleryList {
width:100%;
margin:15px 5px;
}

* html #galleryList {
margin-right:-5px;
}

#galleryList li {
float:left;
width:150px;
height:150px;
padding:5px;
margin:5px;
border:1px solid;
border-color:#777 #aaa #aaa #777;
background:#dedede;
}

* html #galleryList li {
margin:2px;
}