Hello Please see this http://www.sarehesfahlani.com/. I want when a visitor go on left links, on hover of the links, CSS of links change to: text-decoration: underline; color: #00B8C9; It is OK on FireFox explorer. But it doesn't work on Chrome and Safari. Why? How can i resolve this? Thanks.
That page is filled with broken and outdated coding techniques that are likely part of the problem -- the doctype alone proudly proclaims the code is in transition from 1997 to 1998. You seem to be using tables for layout, presentational images in the markup, non-semantic markup, broken semantics like having a P around your menu (which is NOT a paragraph), breaks and double-breaks doing CSS' job, HTML in a XHTML document, 49 validation errors meaning it's not even XHTML, it's gibberish -- but topping the list of issues? A bunch of massive javascript for nothing also doing CSS' job. That said scripting uses that idiotic jquery bloat asshattery certainly isn't helping matters either. Stellar example of why I say jquery, mootools and all those other idiotic scripting and CSS frameworks have zero business being used on 99.999% of websites that voluntarily put themselves in shaiza videos with it. jquery and most websites = two girls one cup! Much less the goofy animooted stuff you're having issues with basically making that page a splash page -- something that's on just about every 'top ten list' of how not to build a website since you are presenting zero useful information to people who land on that page. As I tell a lot of people with pages like that, I'd swing an axe at that entire concept and instead make the about/contact page the home page. Likewise it's shoe-horning you into a fixed width layout that's an accessibility /FAIL/. BUT, if you really want to do that... I'm on the road right now, but when I get back to my workstation I'll toss together a quick rewrite of how I'd handle that... for now, let's just say there is ZERO reason for the markup of that page to be much more than: <!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" /> <meta http-equiv="Content-Language" content="en" /> <meta name="keywords" content="illustration,photography,jewellery,design,painting,draft" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <meta name="description" content="Featuring a variety of artwork in many different mediums" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <link rel="shortcut icon" href="http://sarehesfahlani.com/favicon.ico" /> <title> Sareh Esfahlani </title> </head><body> <!-- Empty span below are image replacement sandbags Do not remove! --> <div id="pageWrapper"> <div id="splashMenuSandbag"></div> <h1> Sareh Esfahlani <span></span> </h1> <ul id="splashMenu"> <li class="illustration"><a href="#">Illustration<span></span></a></li> <li class="photography"><a href="#">Photography<span></span></a></li> <li class="jewellery"><a href="#">Jewellery Design<span></span></a></li> <li class="painting"><a href="#">Painting<span></span></a></li> <li class="draft"><a href="#">Draft<span></span></a></li> <li class="about"><a href="#">About/Contact<span></span></a></li> </ul> <!-- #pageWrapper --></div> </body></html> Code (markup): With EVERYTHING else you're doing there handled by CSS... To outline some of the changes: 1) got rid of the pointless javascript. 2) switched to a MODERN document type. 3) used semantic markup. 4) fixed the keywords meta. Keywords should be eight WORDS at maximum with 100% relevance to the content on the page, since half what you had was NOT on the page, it was kinda pointless. 5) Description should describe the site to be shown below the TITLE... making it contain the same text as TITLE is pointless and missing the entire point of having that META. 6) got rid of the table -- I would load that as a single image as a background of the UL, then use absolute positioning of those span in the UL to apply the hover effects. ... which I'll toss together the CSS to make that work when I get a chance. You got too complex for your own good while at the same time using decade or more out of date methods -- hardly a surprise it's biting you cross-browser.
Here's what I came up with: http://www.cutcodedown.com/for_others/onlyFreewares/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/onlyFreewares is wide open for easy access to the bits and pieces... all four of them. Valid XHTML 1.0 Strict, would be valid CSS if not for a few browser specific tweaks (OH WELL... valid CSS is a pipedream, but there's no excuse for invalid markup). Tested working in the latest flavors each of Opera, Firefox, Safari and Chrome, and works in every version of IE from 5.5 through to 9. Yes, it works in IE 5.5! Cuts it down from your original's 27 files totaling 195k, and drops it to just 5 files totaling 39k... The reduction in the number of files alone could chop anywhere from two to twenty seconds off the page load time -- added bonus of using just one image to handle all the hover states, NOT wasting images on the menu text (which is bad accessibility), etc, etc... It's pretty simple... I ended up using a dummy DIV to hold the background image and nulled it's height with negative margins so it flows behind both the H1 and menu without playing with min-height or any extra trickery. HTML: <div id="splashMenuSandbag"></div> Code (markup): CSS: #splashMenuSandbag { height:556px; margin-bottom:-556px; /* null this element's height */ background:url(images/splashMenuBackground.png) top right no-repeat; } Code (markup): Yeah We then have the empty span in the menu LI... since a menu is a list of short choices, that's UL's job. HTML: <li class="illustration"><a href="#">Illustration<span></span></a></li> <li class="photography"><a href="#">Photography<span></span></a></li> <li class="jewellery"><a href="#">Jewellery Design<span></span></a></li> <li class="painting"><a href="#">Painting<span></span></a></li> <li class="draft"><a href="#">Draft<span></span></a></li> <li class="about"><a href="#">About/Contact<span></span></a></li> Code (markup): By setting position:relative on the UL, those span position in relation to the UL... from there it's just a matter of making those span into absolute positioned blocks using that same background image: CSS: #splashMenu span { position:absolute; width:128px; height:176px; background:url(images/splashMenuBackground.png) 600px 0 no-repeat; /* sliding background left 600px hides it until we need it */ } Code (markup): positioning them where we want the hover states: #splashMenu .illustration span { top:-26px; right:296px; } #splashMenu .photography span { top:-2px; right:72px; } #splashMenu .jewellery span { top:118px; right:192px; } #splashMenu .painting span { top:306px; right:296px; } #splashMenu .draft span { top:238px; right:56px; } Code (markup): then sliding the backgrounds into place on hover and keynav: CSS: #splashMenu .illustration a:active span, #splashMenu .illustration a:focus span, #splashMenu .illustration a:hover span { background-position:-76px -566px; } #splashMenu .photography a:active span, #splashMenu .photography a:focus span, #splashMenu .photography a:hover span { background-position:-300px -590px; } #splashMenu .jewellery a:active span, #splashMenu .jewellery a:focus span, #splashMenu .jewellery a:hover span { background-position:-180px -710px; } #splashMenu .painting a:active span, #splashMenu .painting a:focus span, #splashMenu .painting a:hover span { background-position:-76px -898px; } #splashMenu .draft a:active span, #splashMenu .draft a:focus span, #splashMenu .draft a:hover span { background-position:-316px -830px; } Code (markup): Look ma, no javascript, no stinking jQuery, just good clean fun.
Deathshadow, you got all the shebang into that code! Lol, I have actually moved over to using Css selectors instead of javascripts. CSS3 really adds a flavour to the design without bloating the code!
lol.. I think my sentence construction was wrong.. The appreciation of your work and the use of my CSS3 are two different statements.. no connection between them.
Very thanks for your nice help. I wanted to see these URL but i think your removed it from your host, because i saw 404 error. Please upload those page again. Thanks your very much.
About the same time I was uploading it my host went and messed with their DNS. It should be resolving fine now. http://www.cutcodedown.com/for_others/onlyFreewares/ Works ok from here.