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.
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.
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
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.
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)
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:
<!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>
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.
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
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.
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.
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.
