|
CSS - Image Gallery Problems In Ie
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! Similar Tutorialsi 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 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, 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 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 want an image gallery like this one: http://www.webreference.com/program...ples/twelve.htm only I want the thumbnails to appear in a single line, UNDER the image. There would be far fewer thumbnails so it would only be about 300px wide, but I want the image to appear above, and not to the left. I tried messing with the values but now I'm confused and I don't want to mess with values that don't need to be messed with Hi guys, I never wanna do anything simply... *sigh* Need some help again! I downloaded SPGM to use as a photo gallery. Love it. It's even valid XHTML 1.0 Strict! Ok, I've implemented it here . Instead of using the native CSS file that came with the script, I copied it all into my own CSS file. Well, not ALL of it, but most. That CSS file is here . Towards the bottom, you'll see the SPGM CSS section. Now I've already started adapting the script and layout to my site, but as you can imagine, it's not too easy, especially for an only moderately-knowledgeable CSS user like me. First thing I want to do it... 1. I want to move the entire table (the main table containing the 4 folder icons and text) over to the left so the left side of the table lines up only a pixel or two right of the line between the green and tan on the left. I can shift the whole table by adding margin-left: -something px; to TABLE.table-wrapper, but the folder icons actually disappear as if they go behind something! HUH? I think moving this to the left more will solve the problem in IE of the right nav links getting pushed down... Could be wrong, but it's ok in FF. If someone could start me off with this I'd very much appreciate it. Thanks, guys! Chris I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why. The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure. Any and all help is appreciated. This is the code for the gallery, minus the two navigation pictures and the image for the gallery. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<style type="text/css" media="screen">
#test {
margin:0;
padding:0;
position:relative;
top:0;
left:0;
width:800px;
height:640px;
background-color: #000;
}
#nav{
position:absolute;
left:0;
top:0;
z-index:999;
width:100%;
height:100%;
}
#Next,#Prev{
position:absolute;
display:block;
width:50%;
height:100%;
outline:none;
top:0;
}
#Next{right:0;}
#Prev{left:0}
#Next:hover{
background:transparent url(next.gif) no-repeat 100% 30%;
}
#Prev:hover{
background:transparent url(prev.gif) no-repeat 0% 30%;
}
#image{
display:block;
}
</style>
</head>
<body>
<div id="test">
<div id="nav">
<a href="#" id="Prev"></a>
<a href="#" id="Next"></a>
</div>
<img id="image" src="grass.jpg" alt="image" />
</div>
</body>
</html>
Hello. I am using a Gallery which I bought from ThemeForest. I am having trouble aligning the image to center. Check the second image, It's aligned to left by default. I tried through many css ways which isn't helping at all. Demo: digloud[dot]com/user_data/techkid/phoenix_gallery/ Any help is highly appreciated. hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked. I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work. At the moment i have both elements working, although it produces two thumbnail images. How can i use this code whilst making only one thumbnail appear? <a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> </a> <a class="thumbnail" href="#thumb"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> <span><img src="images/cramps/medium size/cm1.jpg" /><br /> </span></a> sorry if this is vague, i will answer any questions the best i can, all help appreciated! Hello, I've almost got this css image gallery done for my website, but I can't seem to get the main image to be positioned where the gallery thumbnails are. The main image seems to be only position-able from the top of the page. I'm trying to get the image to line up with the top of the first thumbnail image, the thumbnails being arranged in a column to the left of the main image. The page where you can view this is: WWW OLDFOUNDRY DOT COM - I'm a new user, and am not allowed to post links yet. You'll see the gallery in the new product called "Bugatti Test" That link is on the left hand side of the page. And I'll place the code in the next post, Thank you for any ideas, Jason HI Guys, I'm trying to create some CSS to contain an image gallery. A query runs which grabs all the images for a certain item/article. I then output the query as a loop, and it populates a div with images. It works pretty good, but if one image is bigger than the others, it throws off the alignment. How can I force each row of photos to be horizontally even? You can see the output results here http://details.at/photo_test.cfm <!--- Query ---> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> #maindiv { padding:0 0 1em 2em; width:550px; float:left; } div.img { margin:3px; height:auto; width:auto; float:left; text-align:center; } </style> </head> <body> <DIV id="maindiv"> <H2>Photos</H2> <CFOUTPUT QUERY="photo_file_info"> <div class="img"> <a href="http://google.com" target=new> <img src="http://details.at/imagehost/classifieds/aircraft/139/s_#photo_file#"> </a> </div> </CFOUTPUT> </DIV> </body> </html> Hi I have a two curved images. They sit fine on the webpages in FF but there is a gap in IE. I have tried allsorts of things to get it sorted but nothing seems to work. Have a look at me code: PHP Code: <div class='main'> <div style='float:left;'><img src='images/left_corner.gif' alt='left_corner' /></div> <div style='float:right;'><img src='images/right_corner.gif' alt='right_corner' /></div> <div class='proheader'>Problem with images</div> </div> And heres the CSS code: PHP Code: .main{ position:absolute; top:125px; left:140px; } .proheader{ background-color:#0099CC; font-size:12px; font-weight:800; height:19px; } The file can b found at : http://pfwd.org.uk/sfd/image_problem.htm Please help Thanks every time i upload a picture through html or css it affects other images around it or creates a big gap how do i avoid this......also for a template im i best to use individual pictures or make the template all as 1 photo problem fixed, please delete this post for some reason my background image is NOT showing up-- i have tried everything that i can think of -- i do have an IMAGE directory on server-- and the image is in the directory -- i am sure it is something stupid that i am not seeing or doing but sure would appreciate a little help-- thanks in advance for help-- i so appreciate it here are links to site and code PAGE CSS I've got a background image problem with my first real attempt at a table-free CSS design. There are two main images (one is top-right in the body background, the other is bottom-left in a div). It looks like the bottom-left image occasionally gets displayed at the bottom of the viewable area instead of the actual page. When you scroll down you can see that the image is repeated. Refreshing the page sometimes solves the problem (and sometimes creates it), but switching windows with Alt-Tab fixes it every time. Hovering over the links in the body of the page, which change the background color, sort of "erases" the repeat image. Has anyone come across this before? Any chance it's the same problem Dave Shea mentions at: http://www.mezzoblue.com/archives/2004/04/08/ie_vs_image_/index.php Thanks, Josh html: http://66.213.53.5/index.html css: http://66.213.53.5/season.css screen: http://66.213.53.5/images/problem.gif hey all..got a wierd one..well to me anyway ! hope someone can tell me what im doing wrong !! i have code like this Code:
#banner img {
height: 15em;
width: 25em;
margin: 0.5em;
}
to manage the size of an image but i want to add another image to the page and i can't the css can be found here and the page im working on can be found here if anyone has any ideas that wouldbe marvelous... thanks RF I have followed several tutorials for using a bg image as a bullet and I can't figure out why it isn't working. Here is the webpage These are the items that should have a custom bullet (an upside down blue triangle) Introducing the New ATS/ERS Standards Spirometry Training is Essential Guidelines for COPD Emphasize Spirometry Training COPD: Make Your Goal Early Detection by Tom Petty Here is the css: Code:
#newsletter ul {
padding: 0;
list-style: none;
}
#newsletter li {
margin-left: 30px;
background-image: url(../images/bullet.gif) repeat-n;
}
Here is the xhtml: Code:
<div id="newsletter">
<h1>Vitalograph Newsletters</h1>
<div class="row"> <span class="imgLeft"><a href="/pdfs/newsletters/vitalink_fall2005.pdf"><img src="../images/vitalink_fall2005.jpg" alt="vitalink spirometry newsletter" width="125" height="161" border="0" lowsrc="/pdfs/newsletters/vitalink_fall2005.pdf" /></a></span>
<h2>Vitalink Newsletter</h2>
<ul>
<li>Introducing the New ATS/ERS Standards</li>
<li>Spirometry Training is Essential</li>
</ul>
<span><a href="/pdfs/newsletters/vitalink_fall2005.pdf" target="_blank">Vitalink
Fall 2005 (pdf 583 KB)</a></span>
<ul>
<li>Guidelines for COPD Emphasize Spirometry Training</li>
<li>COPD: Make Your Goal Early Detection by Tom Petty</li>
</ul>
<span><a href="/pdfs/newsletters/vitalink_spring2005.pdf" target="_blank">Vitalink
Spring 2005 (pdf 583 KB)</a></span>
</div>
<div class="row">
<h2>Pharma Newsletter</h2>
<p>The Pharma Newsletter provides up to date information on Vitalograph's latest respiratory
clinical trials products and services, news about our people and where you can meet us.
It also highlights important new legislation and other relevant news in the industry that
we hope will be a useful resource for you. </p>
<p><a href="/pdfs/newsletters/pharma_newsletter_jan2006.pdf" target="_blank">Pharma
January 2006 (pdf 76 KB)</a></p>
<p><a href="/pdfs/newsletters/pharma_april2006.pdf" target="_blank">Pharma
April 2006 (pdf 49 KB)</a></p>
</div>
<div class="line"></div>
</div>
Hi: I am using an image as the background in a <td> tag. Also, that <td> tag has a border on the top and bottom. When viewing this page in FF, the border sits perfectly against the image (and the <td> tag). When viewing this in garbage IE, there is a pixel line between the image and the border. What is the problem? What is the fix to get the borders to sit perfectly on the image? Here is the style for the <td> with id="header" Code:
#header {
background: #FFF;
background-image: url(include/head.jpg);
background-repeat: no-repeat;
height: 136px;
width: 100%;
background-position: right;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
And here is the <td> Code: <table id="main"> <tr> <td id="header"> <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">Benefits</a></li> <li><a href="">FAQ</a></li> <li><a href="">About</a></li> <li><a href="">Pay Your Bill</a></li> <li><a href="">Contact</a></li> </ul> </td> </tr> </table> Thanks in advance. Link: http://www.wiu.edu/users/mujas2/test/ Also, if anyone has an idea about those tabs, let me know! Thanks in advance, please ask if further info is needed! I have a problem that I just cannot figure out. Scenario I want to have my site have 2 background images, one for the actual html (THE WHOLE BROWSER WINDOW) which I created an image 20 pixels wide x 2500 high, so it accounts for most used screen resoltuions. Then I need to have a second image within the pagediv (container) ( think that is correct place to have it) that fills the width of the actual page, I have my page set for 940 pixels wide. Now I can acheive this fine by placing the second image in the css style sheet for my page container. But the problem that happens is the page goes beyond the window height, and when you scroll down at the point of the end of your window, the background image is cropped off. It seems that it is finishing at the end of my window. How can I stop this so that it is the actual lenght of the window with teh scroll. A link to the page where if you scroll it cuts off the lilac colour: http://www.acklamflooringservices.co.uk/development/index.html The css code for my html/body and page div. Code:
html { height:100% }
body
{
margin: 0px;
background-color: #CCCCFF;
background-image: url(inc/grnd.gif);
background-repeat: repeat-x;
height: 100%
}
#PageDiv {
position:relative;
width: 940px;
margin:0px auto;
background-image: url(inc/grnd2.gif);
background-repeat: repeat-x;
height: 100%
}
|
|||||||