Hey, I just opened up my website www.thedigitaloffering.com and i have came across some issues. 1. My drop menu doesnt work with EI 2. Under Sample work every picture has a blue box around it is there any way to get rid of this? Here is my CSS code and i am sure u can just view source to see everything else I thank you in advance for your help.
Not sure about the menu thing, but number two should be an easy fix. You can either change #lightbox a img{ border: none; } to a img{ border: none; } in your CSS, or leave the CSS as is and add a div with the ID "lightbox" around the entire image set in the HTML file. Something like this: <div id="lightbox"> <a href="images/samples/lizardflyer.jpg" rel="lightbox" title="lizardcaresheets.com flyer cover"><img src="images/samples/lizardflyer.jpg" width="30px" height="90px"></a> <a href="images/samples/sidscot.jpg" rel="lightbox" title="Sidbear Financial Mascot"><img src="images/samples/sidscot.jpg" width="65px" height="90px"></a> [etc] </div> HTML: You could also try adding border="0" to each img tag in the HTML. A couple other issues... 1) you should leave out the 'px' in the width and height of the img tags in the HTML file 2) the "sample work" link in the main body of your home page has the wrong URL.
li:hover. You didn't bother to say which version of IE, but I'll wager you mean it works okay in IE7 and does absolutely nothing in IE6? In which case, since I don't know your HTML or whatever scripts you're running, I'll guess you still need some Javascript to help out our very special friend IE6, which only understands :hover on links (a href...) not list items (li). You'll either need something like what they use on Sons of Suckerfish (http://www.htmldog.com/articles/suckerfish/dropdowns/ ), which means you'll need to add a special class to every place you have li:hover (in this case, sfhover). Or, you can add the Peterned .htc file to your server webpage code which tells IE6 to hover on anything you add :hover to. Or... this is nasty, but it works, even on IE's without Javascript enabled... you can wrap ugly fake tables around each menu item with a dropdown. The fake tables move the closing </a> to after the submenu, making IE6 think the whole submenu is actually a link (and thus hovers over it). The tables are IE conditional comments, so only IE sees them. Stu Nichol's does this, but if he hasn't updated them, you'll want the comment to target "lte IE6" so as to exclude IE7 (who knows how to hover). Example: http://www.cssplay.co.uk/menus/drop_line.html (see his HTML) *edit, looking at your code again, it might be that li.p7hvr is indeed a special class for Javascript for IE6 to hover. If that's the case, you'll need to make sure that the JS is properly showing up in the code, right path, isn't blocked or isn't being tested on a local machine, the usual stuff. ...And if all this time you meant that it works in IE6 but not IE7, then I'd say it's the usual Hasalyout trigger, meaning you haven't set Haslayout on the actual hover (IE7 thinks that's an actual element!)... but before I get into that, there could be something real dumb simple like an unclosed tag or a mispelling somewheres. Did you validate both the HTML and the CSS at the validator? It's a great way to feel damn stupid running around like a chicken looking for some bug when it turns out it's a typo. *edit 2 Went back again because I'd stepped right over the fact that you have a link. First, stick a doctype on that thing. 's a damn shame, letting that thing live like that, without a doctype. You want IE to act dumber than it normally does?? http://htmlhelp.com/tools/validator/doctype.html (without it, IE gets extra stupid) Second, I don't have 7 available to me, but I've got Fake IE6 4 Linux here, and I think it's not getting the Javascript. I don't script, I'm allergic to JS, tend to break out in irritation, but I get Error On Page in my little lower left bar. So, all this, I think there's just a JS error. Or your class in the CSS might not match what's written in the JS, I know that can set it off. *edit 3 sweet Jesus put a doctype on that thing! *edit 4 Any reason why you're taking the width back off the li's here? It might me okay, or it might give Opera the sh*ts. If your menu spazzes like the Pope with palsy, then you'll need to remove that line and keep the width you stated earlier. Also, just a side note, while this funky graphics site is highly unlikely to be visited by any members of the blind community, the whole display: none, display: block method of hiding and showing the submenus is considered inaccessible as screen readers really do honour the display: none (dunno which genius thought that one up), so the method in the link I gave above for Sons of Suckerfish recommends instead moving the subs waaaaaay off to the left with position: absolute; left: -9999999999whatevers, then on :hover, left: 0 or left: auto, whichever floats your boat. *edit 5 so ignore like the first half of my post, okay?
Thanks for the reply but i don't know what doctype to use for starters... ( that menu was kinda copy and paste...) And with out this there the words on the menu bar run over top of each other... I tryed sons of suckerfish and all that did was stop my menu from working in firefox as well as IE (perhaps i am doing it wrong?)
before </head> add <!--[if lte IE 7]> <style> #menuwrapper, #p7menubar ul a {height: 1%;} a:active {width: auto;} </style> <![endif]--> let me know ... when done.
I have this on my index now but IE still says error on page and none of the drop down menus work. Nice try though.
i can see ur css in this location <link href="http://www.thedigitaloffering.com/p7exp/p7exp.css" rel="stylesheet" type="text/css"> i can't see this : <script type="text/javascript" src="http://www.thedigitaloffering.com/p7exp/p7exp.js"></script> check your js file and upload it and a laugh at firefox
Thats because there is no I do have some java script on my site though ( think is is all to do with the image loads on the sample page), however the codes are much to large to copy and past them....
you must replace ur menu div id menuwrapper completely with this one you have missing tags there and YES, you need to keep that java code there... in p7exp/p7exp.js WITHOUT THIS MENU WILL NOT WORK IN IE.. /* ------------------------------------ PVII Menu CSS Express Drop-Down Menu by Project Seven Development www.projectseven.com ------------------------------------ */ function P7_ExpMenu(){ //v1.1.0.2 by PVII-www.projectseven.com if(navigator.appVersion.indexOf("MSIE")==-1){return;} var i,k,g,lg,r=/\s*p7hvr/,nn='',c,cs='p7hvr',bv='p7menubar'; for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){ lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){ lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs; this.className=cl;};lg[k].onmouseout=function(){c=this.className; this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;} } Code (markup): enjoy <div id="menuwrapper"> <ul id="p7menubar"> <li><a href="index.html">Home</a></li> <li><a class="trigger" href="#">Graphic Design Services</a> <ul> <li><a href="logodesign.html">Logo Design</a></li> <li><a href="Advertisementdesign.html">Advertisements</a></li> <li><a href="bussinesscards.html">Bussiness Cards</a></li> <li><a href="signs.html">Signs</a></li> <li><a href="flyerdesign.html">Flyer Design</a></li> <li><a href="letterheads.html">Letter Heads</a></li> <li><a href="mascotdesign.html">Mascot Design</a></li> <li><a href="webgraphics.html">Web Graphics</a></li> </ul> </li> <li><a class="trigger" href="videoservices.html">Video Services</a> <ul> <li><a href="videoediting.html">Video Editing</a></li> <li><a href="conversions.html">Conversions</a></li> <li><a href="duplications.html">Duplications</a></li> <li><a href="slideshows.html">Slide Shows</a></li> </ul> </li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="sample.html">Sample Work</a></li> </ul> <br class="clearit"> </div> Code (markup): and ya please recheck above code snipet. oh ofcourse you can thank me for that or can send anything +ve regards
You've got another one, or, you're page was made for one, I can see that li.p7hvr thing... that's a special CSS class made for a Javascript similar to Suckerfish's, because without it, IE6 will not hover, like smarty said. I have a link in my above post about doctypes. A bit of explanation and you're good to go. I'd recommend HTML 4.01Strict but if you're relying on something that's deprecated then you might have to drop down to transisitional. If width: auto is needed to stop everyone from sitting on each other, something else is wrong. Menus are easily the most complicated part of a webpage. They're not easy, and the Suckerfish works well in FF and IE6 with their Javascript, but IE7 has issues and HTMLdog hasn't changed their Suckerfish to update this. Here's a barebones Suckerfish which doesn't have the Javascript classes (which are still needed if you use a Suckerfish Javascript like you've got now) but works in every other browser including IE7: http://stommepoes.nl/Menus/barebonessuckerfish.html and barebones.css The whole menu has a width, and is set position: relative. The li's are given a width and floated left. The a's are set to display: block. The hovers are given a Haslayout trigger (you could use what smarty gave you with that height: 1% or do this: #menu li:hover { position: relative; z-index: 1; } The z-index is for good luck on really nested menus, but one declaration of position: relative on the :hover takes care of the job. If you use something else, it turns out IE7 needs a NEW, never-before used Haslayout trigger for each new li level (ug) and you start running out after a while. The submenus are set to position: absolute and moved off to the side with a left margin (or left position) of like -9999em or whatever. They are moved back to margin-left: 0 or left: 0 or left: auto (whatever) on :hover to get them to show. The rest is just styling. A basic Suckerfish, they all generally follow these steps. Some people float the a's along with the li's but for me that just makes hassle.