SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    conflicting top margins in different browsers

    i have the following problem.

    my image hover gallery is set up so that...the larger image is centered over the smaller imaage it is replaceing on the hover. it is centered in safari...through some bizarre method(im probably missing something) but in firefox the larger image which appears onhover is not vertiaclly centered over its twin "thumbnail" image. it shows up several pixels below center.

    thanks for the Help!

    p


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>hey there thanks for looking</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="slimbox5.js"></script>
    <link rel="stylesheet" href="slimbox2.css" type="text/css" media="screen" />
    <style type="text/css">
    html, body {
    height:100%;
    margin:0;
    padding:0;}
    .thumbnail{
    position: relative;
    z-index: 1;}
    body img {
    border:none;
    margin:4px;}
    .thumbnail:hover{
    z-index: 5;
    cursor: url(zoomie315.cur), -moz-zoom-in;
    visibility:hidden;}
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background: transparent;
    visibility: hidden;
    margin:auto;
    text-decoration: none;
    z-index:66;}
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 1px;
    border-color:#708090;
    padding: 1px 1px 1px 1px;
    margin-top: -44px;
    background:transparent;
    z-index:180;}
    a {outline: none;}
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: -875%;
    bottom: -85%;
    right:-40%;
    left:-40%;
    border:none;
    z-index:180;}
    body {
    background:#eai7d7;
    text-align:center;
    min-width:626px;}
    #hoz {
    width:100%;
    margin-left:auto;
        margin-right:auto;
        height:515px;
        text-align:center;
        clear:both;}
    #pagecontent {
        position:relative;
        left:0;
        top:0;
        width:100%;}
    .last{margin:0}
    a:link, a:visited {
        text-decoration: none;
        color:#000000;}
    .anchor{
    display:block;}
    h1.hidden {display:none;}
    #Layer1 {
    	position:absolute;
    	width:100%;
    	top:122px;
    	z-index:77;}
    #Layer2 {
    	position:fixed;
    	width:100%;
    	top:0px;
    	z-index:9999;
    	background-color:white;
    	height:27px;}
    .header {
    top:10px;
    width:99%;
    position:fixed;
    min-width:657px;
    left:5px;
    z-index:9999;
    display:inline;
    overflow:visible;}
    h1 {color:#DEDEDE;
    font-size:small;}
    h1:hover {color:#808080;}   /* mouse over link */
    h2 {color:#C9C9C9;
    font-size:small;}
    h2:hover {color:#999999;}
    h3 {color:#C9C9C9;
    font-size:small;}
    h3:hover {color:#C9C9C9;}
    h4 {color:#999999;
    font-size:small;}
    h4:hover {color:#C9C9C9;}
    h5 {color:#808080;
    font-size:small;}
    h5:hover {color:#DEDEDE;}
    div#susan {
    	margin-top: 57px;
    	padding-top:34px;
    	overflow:hidden;
    	}
    	 * {
    margin: 0;}
    
    <script type="text/javascript">
    var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-4908236-7']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    	</style>
    </head>
    <body>
    	<div id="Layer2"></div>
    		 <div class="wrapper">
    		<div class="header"><table width="100%" height="13px"border="0" cellspacing="2" cellpadding="0" t>
      <tr>
        <td nowrap style =" background-color:#808080"
     onMouseover="this.style.backgroundColor='#DEDEDE'; "
     onMouseout="this.style.backgroundColor='#808080';"><p><a href="work.html"><h1> painting&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1></a><p></td>
     <td nowrap style =" background-color:#999999"
     onMouseover="this.style.backgroundColor='#C9C9C9';"
     onMouseout="this.style.backgroundColor='#999999';"><p><a href="sssss.html"><h2 nowrap>sculpture&nbsp;&nbsp;&nbsp;</h2></a>
     <p></td>
    <td nowrap style =" background-color:#B0B0B0"
     onMouseover="this.style.backgroundColor='#D3D3D3';"
     onMouseout="this.style.backgroundColor='#B0B0B0';"><p><a href="ddddd.html"><h3>digital art&nbsp;</h3></a><p></td>
     <td nowrap style =" background-color:#C9C9C9"
     onMouseover="this.style.backgroundColor='#999999';"
     onMouseout="this.style.backgroundColor='#C9C9C9';"><p><a href="links.html"><h4>links&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h4></a><p></td>
     <td nowrap style =" background-color:#DEDEDE"
     onMouseover="this.style.backgroundColor='#808080';"
     onMouseout="this.style.backgroundColor='#DEDEDE';"><p><a href="#"><h5>&nbsp;contact</h5></a><p></td>
      </tr>
    </table></div></div>
    	<div align="center" id="susan"> <a href="goopy.gif" class="thumbnail" rel="lightbox-cats"  title="2011" ><img src="goop1.gif" width="150px" height="180px"/><span><img src="goop2.gif" width="190px" height="240px"/><br /></span></a>
     
    <a href="gar.jpg" class="thumbnail" rel="lightbox-cats" title="2011"><img src="bol1.gif" width="150px" height="180px"/><span><img src="bol2.gif" width="190px" height="240px"/><br /></span></a>
    
    <a href="dadd.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="square1.gif" width="150px" height="180px"/><span><img src="square2.gif" width="190px" height="240px"/><br /></span></a>
      
      <a href="sno.jpg" class="thumbnail"  rel="lightbox-cats" title="2011" ><img src="motor1.jpg" width="150px" height="180px"/><span><img src="motor2.jpg" width="190px" height="240px" /><br /></span></a>
      
    <a href="myplate.gif" class="thumbnail"  rel="lightbox-cats" title="2011" ><img src="newplate1.gif" width="150px" height="180px"/><span><img src="newplate2.gif" width="190px" height="240px" /><br /></span></a>
    
    <a href="sol.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="diamond1.gif" width="150px" height="180px"/><span><img src="diamond2.gif" width="190px" height="240px"/><br /></span></a>
    
    <a href="goopy.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="goop1.gif" width="150px" height="180px"/><span><img src="goop2.gif" width="190px" height="240px"/><br /></span></a>
     
    <a href="gar.jpg" class="thumbnail" rel="lightbox-cats" title="2011"><img src="bol1.gif" width="150px" height="180px"/><span><img src="bol2.gif" width="190px" height="240px"/><br /></span></a>
    
    <a href="dadd.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="square1.gif" width="150px" height="180px"/><span><img src="square2.gif" width="190px" height="240px"/><br /></span></a>
    
      <a href="sno.jpg" class="thumbnail"  rel="lightbox-cats" title="2011"><img src="motor1.jpg" width="150px" height="180px"/><span><img src="motor2.jpg" width="190px" height="240px" /><br /></span></a>
      
    <a href="myplate.gif" class="thumbnail"  rel="lightbox-cats" title="2011"><img src="newplate1.gif" width="150px" height="180px"/><span><img src="newplate2.gif" width="190px" height="240px" /><br /></span></a>
    
    <a href="sol.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="diamond1.gif" width="150px" height="180px"/><span><img src="diamond2.gif" width="190px" height="240px"/><br /></span></a>
    
    <a href="goopy.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="goop1.gif" width="150px" height="180px"/><span><img src="goop2.gif" width="190px" height="240px"/><br /></span></a>
     
    <a href="gar.jpg" class="thumbnail" rel="lightbox-cats" title="2011"><img src="bol1.gif" width="150px" height="180px"/><span><img src="bol2.gif" width="190px" height="240px"/><br /></span></a>
    
    <a href="dadd.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="square1.gif" width="150px" height="180px"/><span><img src="square2.gif" width="190px" height="240px"/><br /></span></a>
    
      <a href="sno.jpg" class="thumbnail"  rel="lightbox-cats" title="2011"><img src="motor1.jpg" width="150px" height="180px"/><span><img src="motor2.jpg" width="190px" height="240px" /><br /></span></a>
      
    <a href="myplate.gif" class="thumbnail"  rel="lightbox-cats" title="2011"><img src="newplate1.gif" width="150px" height="180px"/><span><img src="newplate2.gif" width="190px" height="240px" /><br /></span></a>
    
    <a href="sol.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="diamond1.gif" width="150px" height="180px"/><span><img src="diamond2.gif" width="190px" height="240px"/><br /></span></a>
    
    <a href="goopy.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="goop1.gif" width="150px" height="180px"/><span><img src="goop2.gif" width="190px" height="240px"/><br /></span></a>
     
    <a href="gar.jpg" class="thumbnail" rel="lightbox-cats" title="2011"><img src="bol1.gif" width="150px" height="180px"/><span><img src="bol2.gif" width="190px" height="240px"/><br /></span></a>
    
    <a href="dadd.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="square1.gif" width="150px" height="180px"/><span><img src="square2.gif" width="190px" height="240px"/><br /></span></a>
    
      <a href="sno.jpg" class="thumbnail"  rel="lightbox-cats" title="2011"><img src="motor1.jpg" width="150px" height="180px"/><span><img src="motor2.jpg" width="190px" height="240px" /><br /></span></a>
      
    <a href="myplate.gif" class="thumbnail"  rel="lightbox-cats" title="2011"><img src="newplate1.gif" width="150px" height="180px"/><span><img src="newplate2.gif" width="190px" height="240px" /><br /></span></a>
    
    <a href="sol.gif" class="thumbnail" rel="lightbox-cats" title="2011"><img src="diamond1.gif" width="150px" height="180px"/><span><img src="diamond2.gif" width="190px" height="240px"/><br /></span></a>
    
     </div>
    </body>
    </html>
    Last edited by ralph.m; Mar 24, 2011 at 19:27. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Could you post a live link? It's much easier if we can look at what's happening than to sort through all that code.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I am left with SO many questions after seeing that code I don't know where to begin -- took me a good few minutes to turn that CSS into something legible, but when I did... whew...

    Stupid cursor tricks that don't work cross-browser (you might as well try coloring the scrollbars at that point), endless presentational markup using scripting (onmouseover/onmouseout) to do CSS' job, table for nothing, paragraphs around non-paragraph elements, COMPLETELY nonsensical heading tags INSIDE anchors (invalid markup) inside paragraphs (which is it?), javascript inside the STYLE tag (you can't do that), analytics script in the HEAD instead of where it's SUPPOSED to go (before /body), px declared on elements that can't accept px (like the HTML width property -- CSS takes PX, HTML does not!)

    ...and of course that it's all just a gallery for some lightbox style effect (or as I like to call it, "JUST LET ME OPEN THE FRAGGING IMAGE!!!")

    I can't say I'm real surprised you're looking at rendering errors. With 130 validation errors in only 217 lines of code you do not have HTML, you have gibberish; that the page renders remotely resembling whatever it is you are trying to do is more a testament to the error correction of the various browsers than it is the code you are using.

    I'd have to see the actual images being used in this test layout -- hence a live copy would help greatly, but whatever it is you are trying to do I'm pretty sure you need to throw this all away and start over clean.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Death Shadow

    thanks alot for spending the time to look. I had forgotten about the w3c validator, and spent some time and got it passed(as HTML 4.01....this is a good choice i suppose...so many opinions)

    Now that i changed the top menu from tables to divs i dont have the the same spacing between each "button" that i had before. I had a 1px space between each linked button, but now when i try to add a 1px margin or padding it doesnt do that. I try to add the spacing by changing the perchentage values of the widths and margins of these elements but this obviously gives me a pecentage based spacing when what i want is a constant 1 px between each element.

    I of course still have my isue of the on hove images showing in different vertical positions in safari and firefox(any solution you can give help me with a completely cross browser solution, please?)

    below are links to two pages the first being my validated page with the div menu

    Validated page

    and here's old one ...table based menu(so you can see waht i am talking about w the menu if i wasnt being clear)

    old page with look of menu i want

    but really what has been hounding me is the cross browser vertical centering on the on hover image

    THANK YOU

  5. #5
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Google Analytics code is, at least, close to where Google says it's supposed to be. This is the (relatively) newer "push" code, so it goes at the end of the <head> section.

    Tracking Site Activity - Google Analytics - Google Code

    But not within a <style> tag, to be sure.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EarlyOut View Post
    The Google Analytics code is, at least, close to where Google says it's supposed to be. This is the (relatively) newer "push" code, so it goes at the end of the <head> section.
    Huh, recent change then?

    I don't use it so I must have missed that. Never really understood the point when I can glean most of the same data using analog or webalizer, and I don't care about the rest (or even see the point really)

    Waste of code and time IMHO.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by phillycheese123 View Post
    thanks alot for spending the time to look. I had forgotten about the w3c validator, and spent some time and got it passed(as HTML 4.01....this is a good choice i suppose...so many opinions)
    Valid is just the first step -- you're still knee deep in non-semantic markup, vague/meaningless ID's and redundant markup... I'm not at my workstation at the moment but when I get back I'll run down a rewrite to show how to approach that.

    the dynamic width expands to fill the display menu may be impractical using DIV for layout -- there's a reason you do NOT see a lot of modern websites doing that and the ones that do are usually either miserably broken... or still resort to the table.

    The 'spacing' between them is going to be problematic using DIV, since you can't declare % width and margins/padding at the same time. It will ALWAYS end up wider than the display. It may be possible to put the border on display:block anchors and then float the element that's around the anchor -- but the CORRECT markup for that would be a list, which can be... problematic for legacy IE given the behavior of LI.

    As I said though, once I'm back at the workstation I'll take a stab at a rewrite to show you what's "wrong" there IMHO... though for now a more 'proper' markup would probably be more along these lines:

    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"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="/theme/screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Philip DuSel
    </title>
    
    </head><body>
    
    	<ul id="mainMenu">
    		<li class="painting"><a href="work.html">Painting</a></li>
    		<li class="sculpture"><a href="sssss.html">Sculpture</a></li>
    		<li class="digitalArt"><a href="ddddd.html">Digital Art</a></li>
    		<li class="links"><a href="links.html">Links</a></li>
    		<li class="contact"><a href="mailto:philipdusel@gmail.com">Contact</a></li>
    	</ul>
    
    	<div id="gallery">
    
    		<a href="goopy.gif" rel="lightbox-cats">
    			<img src="goop1.gif" alt="hey there this is a pic" />
    			<span style="background:url(goop2.gif)"></span>
    		]</a>
    
    		<a href="gar.jpg" rel="lightbox-cats">
    			<img src="bol1.gif" alt="hey there this is a pic" />
    			<span style="background:url(bol2.gif)"></span></a>
    
    		<a href="dadd.gif" rel="lightbox-cats">
    			<img src="square1.gif" alt="hey there this is a pic" />
    			<span style="background:url(square2.gif)"></span>
    		</a>
    
    		<a href="sno.jpg" rel="lightbox-cats" >
    			<img src="motor1.jpg" alt="hey there this is a pic" />
    			<span style="background:url(motor2.jpg)"></span>
    		</a>
    
    		<a href="myplate.gif" rel="lightbox-cats">
    			<img src="newplate1.gif" alt="hey there this is a pic" />
    			<span style="background:url(newplate2.gif)"></span>
    		</a>
    
    		<a href="sol.gif" rel="lightbox-cats">
    			<img src="diamond1.gif" alt="hey there this is a pic">
    			<span style="background:url(diamond2.gif)"></span>
    		</a>
    
    		<a href="goopy.gif" rel="lightbox-cats">
    			<img src="goop1.gif" alt="hey there this is a pic" />
    			<span style="background:url(goop2.gif)"></span>
    		</a>
    
    		<a href="gar.jpg" rel="lightbox-cats">
    			<img src="bol1.gif" alt="hey there this is a pic" />
    			<span style="background:url(bol2.gif)"></span>
    		</a>
    
    		<a href="dadd.gif" rel="lightbox-cats">
    			<img src="square1.gif" alt="hey there this is a pic" />
    			<span style="background:url(square2.gif)"></span>
    		</a>
    
    		<a href="sno.jpg" rel="lightbox-cats">
    			<img src="motor1.jpg" alt="hey there this is a pic" />
    			<span style="background:url(motor2.jpg)"></span>
    		</a>
    
    		<a href="myplate.gif" rel="lightbox-cats">
    			<img src="newplate1.gif" alt="hey there this is a pic" />
    			<span style="background:url(newplate2.gif)"></span>
    		</a>
    
    		<a href="sol.gif" rel="lightbox-cats">
    			<img src="diamond1.gif" alt="hey there this is a pic" />
    			<span style="background:url(diamond2.gif)"></span>
    		</a>
    
    		<a href="goopy.gif" rel="lightbox-cats">
    			<img src="goop1.gif" alt="hey there this is a pic" />
    			<span style="background:url(goop2.gif)"></span>
    		</a>
    
    		<a href="gar.jpg" rel="lightbox-cats">
    			<img src="bol1.gif" alt="hey there this is a pic" />
    			<span style="background:url(bol2.gif)"></span>
    		</a>
    
    		<a href="dadd.gif" rel="lightbox-cats">
    			<img src="square1.gif" alt="hey there this is a pic" />
    			<span style="background:url(square2.gif)"></span>
    		</a>
    
    		<a href="sno.jpg" rel="lightbox-cats" >
    			<img src="motor1.jpg" alt="hey there this is a pic" />
    			<span style="background:url(motor2.jpg)"></span>
    		</a>
    
    		<a href="myplate.gif" rel="lightbox-cats">
    			<img src="newplate1.gif" alt="hey there this is a pic" />
    			<span style="background:url(newplate2.gif)"></span>
    		</a>
    
    		<a href="sol.gif" rel="lightbox-cats">
    			<img src="diamond1.gif" alt="hey there this is a pic" />
    			<span style="background:url(diamond2.gif)"></span>
    		</a>
    
    		<a href="goopy.gif" rel="lightbox-cats">
    			<img src="goop1.gif" alt="hey there this is a pic" />
    			<span style="background:url(goop2.gif)"></span>
    		</a>
    
    		<a href="gar.jpg" rel="lightbox-cats">
    			<img src="bol1.gif" alt="hey there this is a pic" />
    			<span style="background:url(bol2.gif)"></span>
    		</a>
    
    		<a href="dadd.gif" rel="lightbox-cats">
    			<img src="square1.gif" alt="hey there this is a pic" />
    			<span style="background:url(square2.gif)"></span>
    		</a>
    
    		<a href="sno.jpg" rel="lightbox-cats" >
    			<img src="motor1.jpg" alt="hey there this is a pic" />
    			<span style="background:url(motor2.jpg)"></span>
    		</a>
    
    		<a href="myplate.gif" rel="lightbox-cats">
    			<img src="newplate1.gif" alt="hey there this is a pic" />
    			<span style="background:url(newplate2.gif)"></span>
    		</a>
    
    		<a href="sol.gif" rel="lightbox-cats">
    			<img src="diamond1.gif" alt="hey there this is a pic" />
    			<span style="background:url(diamond2.gif)"></span>
    		</a>
    
    	<!-- #gallery --></div>
    
    </body></html>

  8. #8
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Huh, recent change then?

    I don't use it so I must have missed that. Never really understood the point when I can glean most of the same data using analog or webalizer, and I don't care about the rest (or even see the point really)

    Waste of code and time IMHO.
    Well, if you consider December of 2009 "recent."

    The simple fact is that GA provides a wealth of information that awstats and Webalizer don't. In any event, your opinion about the value of it isn't relevant to the proper method of incorporating it.

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks again for your time.

    so here is my attempt at recreating my page semantically.

    Semantic markup attempt

    one issue i am having is getting the whole button on the top menu to act as a link. (only the text does) but one cant put the a ref around the li class.....correct?.....id like the whole button to act as a link.

    also I was under the impression the slimbox2 was pretty fast for image viewing..partly because one doesnt have to click the back button to cycle through images they can just click the image.....are there any suggestion as to what a better alternative would be where a large image appears on clicking a thumbnail....and gives the option to cycle through the image gallery? would linking these "thumbnails" to their own page with navigational arrows be faster? or are you of the opinion that it should be the bare basics and open in its own unscripted page?

    also w the script you gave me how do i get the hover effect to work properly?
    heres is my attempt to do that though i doubt it is semantic and probably behaves in a goof y way under certain circumstances
    http://www.philipdusel.com/s.html

    any other suggestions on the semantics, performance, usability of this page would be greatly appreciated

    thanks

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    google image viewer example of what id like....i know its loathed by many but...

    the images enlarge on hover in firefox and not in safari for what reason? but my point is that in both circumstances the gallery is clean...and the enlarged hover image is prevented from being cut off the sides of the page.

    id love to do that

    thanks everybod for the help

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by phillycheese123 View Post
    one issue i am having is getting the whole button on the top menu to act as a link. (only the text does) but one cant put the a ref around the li class.....correct?.....id like the whole button to act as a link.
    You can set the <a> to display: block:

    Code:
    a:link, a:visited {
      color: inherit;
      text-decoration: none;
      display:block;
    }
    also I was under the impression the slimbox2 was pretty fast for image viewing..partly because one doesnt have to click the back button to cycle through images they can just click the image.....are there any suggestion as to what a better alternative would be where a large image appears on clicking a thumbnail....
    What's wrong with Slimbox2? I find it's the best of such galleries. Sure, some folks will dislike the downloading of libraries, but it's a small matter, really. If you link to Google's version of jQuery, many users will already have it cached.

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate all the help! ive learned alot from it...thanks.....

    but i still have the same issue i started with...unresolved....id like to make my image gallery a hover gallery with the hover bringing up a larger image of the "thumbnail" and keeping it centered over the "thumbnail"

    if i get it centered(and this is my some non straight forward - margin padding etc on several divs)in one browser it is not in the other. unfortunately im only testing in safari and firefox


    also id love to achieve the behavior of google images, where if you hover over and image which is cut off by screen size, or if the on hover image will be cut off....their code makes it so the image will remain in the viewing area...not cut off.

    addressing these issues would be awesome!

    page im working on


    thanks alot
    p

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by phillycheese123 View Post
    id love to achieve the behavior of google images, where if you hover over and image which is cut off by screen size, or if the on hover image will be cut off....their code makes it so the image will remain in the viewing area...not cut off.
    I don't really understand what you are describing here.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •