simcoweb

Yes, the markup is out-dated as the menu is about 2-3 years old which makes it a dinosaur in the tech world. I used your idea and it fixed the display. Thanks for those suggestions! I'll most likely be replacing that menu with a more modernized setup in the near future.

We are using a CSS multi-level menu that works fine in FF, Chrome and even IE8. But, in IE9 it won't hide the sub-menus on page load. Actually, there's 5 'main' menu items of which 4 have sub-menus that come down on hover. In IE9, 3 of the sub-menus display all the time and the 4th hides like it should. Not rhyme or reason for the 4th to work like it should. That's part of the mystery. Look at http://www.integrityautorepair.com in IE9 and then Chrome or FF and you'll see what I mean. There's a selector, i'm sure, that IE9 is either not compatible with or one that it needs in order to satisfy it. I've posted the CSS below for that menu. *** Added this screenshot for those who may not have IE9 but may have an answer *** .nav, .nav ul {list-style-type:none; margin:0; padding:0;} .nav a {text-decoration:none;} .nav {font-family: arial, sans-serif; font-size:12px; width:547px; margin:0 auto; text-align:left; height:32px;} /* style the links */ /* needs a background for IE6 - can be a color or a transparent gif */ .nav a {background:#f00; height:32px;} .nav ul a {height:auto;} /* style the <b> element so that is does not affect the size of the link */ .nav a i {position:absolute; left:-9999px;} .nav a b {display:block; border:1px solid #1552ad; border-width:1px 1px 0 1px; background:#fff; color:#444; font-size:11px; line-height:15px; font-weight:normal;padding:10px; cursor:pointer;} .nav a b.last {border-bottom-width:1px;} .nav b img {display:block; float:left; padding-right:5px; border:0;} .nav b span {display:block; font-size:14px; color:#069; padding-top:5px; font-weight:bold;} /* WIDTH change this WITH CARE to suit your requirements */ /* FOR NAV1 */ .nav1, .nav1 a {width:70px;} .nav1 a {background:url(../images/home.png) no-repeat left top;} /* FOR NAV2 */ .nav2, .nav2 a {width:102px;} .nav2 a {margin-right:-101px; background:url(../images/aboutus.png) no-repeat left top;} /* 1px less than the top level link width */ .nav2 ul li {max-width:102px;} /* FOR NAV3 */ .nav3, .nav3 a {width:95px;} .nav3 a {margin-right:-94px; background:url(../images/services.png) no-repeat left top;} /* 1px less than the top level link width */ .nav3 ul li {max-width:95px;} /* FOR NAV3 */ .nav4, .nav4 a {width:143px;} .nav4 a {margin-right:-142px; background:url(../images/offers.png) no-repeat left top;} /* 1px less than the top level link width */ .nav4 ul li {max-width:143px;} /* FOR NAV5 */ .nav5, .nav5 a {width:137px;} .nav5 a {margin-right:-142px; background:url(../images/scheduling.png) no-repeat left top;} .nav li.drop ul li a {width:230px; margin-right:-200px;} /* ---------------------------------------------------------------------------- */ /* DO NOT CHANGE ANYTHING BELOW */ .nav li {float:left;} /* fixes several IE related bugs, and allows for clearing */ .nav ul {float:left; position:relative; z-index:20; left:1px; top:-1px;} /* necessary for float drop and to stack the <ul>s */ .nav ul li {clear:left;} /* must clear the floated list item inside sublist */ .nav a {position:relative; display:block;} /* needs to have a position, to be above the rest */ .nav a.main {float:left; /* necessary for float drop */ margin-top:10000px;} /* bring the top level links back into view */ .nav .drop {margin-top:-10000px;} /* hide the sub links and their containers, opera has low upper limits */ .nav ul {margin-bottom:-5000px;} /* avoid any interaction between the subs, can be any large size */ /* ---------------------------------------------------------------------------- */ /* The bit that does ALL the work to bring the sub menus into view */ .nav a:hover, .nav a:focus, .nav a:active {margin-right:0; z-index:10; outline:0; background-position:left bottom;} .nav a:hover b, .nav a:focus b, .nav a:active b {background:#f8f8f8;} .nav .nav2 ul a:hover, .nav .nav2 ul a:focus, .nav .nav2 ul a:active {margin-right:-128px;} /* The margin-right value is the dropdown link width minus the top level link width */ .nav .nav3 ul a:hover, .nav .nav3 ul a:focus, .nav .nav3 ul a:active {margin-right:-135px;} /* The margin-right value is the dropdown link width minus the top level link width */ .nav .nav4 ul a:hover, .nav .nav4 ul a:focus, .nav .nav4 ul a:active {margin-right:-87px;} /* The margin-right value is the dropdown link width minus the top level link width */ .nav .nav5 ul a:hover, .nav .nav5 ul a:focus, .nav .nav5 ul a:active {margin-right:-87px;} /* The margin-right value is the dropdown link width minus the top level link width */ /* OPERA fix */ .nav ul:hover {clear:left;} /* to stop intermittent sub link :hover problems */ /* IE6 and 7 fix */ a:active {}

First, thanks for the response! I did try several of the available JQuery plugins from the repository. The problem is that most of them trigger off an attribute of the element itself. Typically an #id or using a title= tag. Basically i'm looking for a 'global' solution that would identify ALL the external links and display either a hidden div or simple text string that is part of the JQuery code. If I can use $('a[href*=http]') so it simply finds all links that aren't relative and, when moused over, displays a simple text string like "clicking this link will exit this site" as a tooltip (of displays a hidden div). What we want to avoid is having to go back and manually insert either a title tag, a rel tag, a class tag, etc. to all the hyperlinks (there's literally a 1000 or more) and want to make it easier for the future admin to add external links without worrying about all the extra details they'd have to embed into each one. Since Wordpress already loads the jQuery library, I came up with this bit of code that would create the <div> displaying the tip using the appendTo function and this works perfectly in a standard HTML document (see http://www.simcomedia.com/tooltips-demo.html ) but won't work when I paste it into Wordpress. The question is...why? Here's the code: <script type="text/javascript"> $(document).ready(function() { var changeTooltipPosition = function(event) { var tooltipX = event.pageX - 8; var tooltipY = event.pageY + 8; $('div.tooltip').css({top: tooltipY, left: tooltipX}); }; var showTooltip = function(event) { $('div.tooltip').remove(); $('<div class="tooltip">Clicking this link will exit this site.</div>') .appendTo('body'); changeTooltipPosition(event); }; var hideTooltip = function() { $('div.tooltip').remove(); }; $('a[href*=http').bind({ mousemove : changeTooltipPosition, mouseenter : showTooltip, mouseleave: hideTooltip }); });</script> I'm under a crazy deadline trying to get this done. Any help would be unbelievably appreciated!

I'm running a Wordpress site and we want all the external links to automatically have a mouseover tooltip style message display a simple line of text. But for some reason i'm having a ridiculous time getting this to work. 1) I need to find/locate all external links. I'm using a plugin that actually adds the rel="external" to all links that don't match the base url of the site already. Therefore, i've tried using that as the selector: $('a[rel=external]') which is supposed to look for all 'a' elements that have the rel="external" reference. 2) It needs to then append (or insert) the title tag (if missing, which 99.9999% of them are) for the mouseover text. That is, unless there's another way to display the message without having to insert the title tag? I tried appending a hidden div and couldn't get that to work either. So, the title tag (or whatever method we use) should be inserted between <a href="#"> and </a>. Tried using append but that goes at the end, not the middle. 3) Then create hover effect that would display the title tag contents on mouseover. I've tried multiple methods and can't get any results. Not a JQuery guru but learning. Any help is appreciated!

Thanks for your post. I had already found that link through another source. The problem is it's using a completely different library/class to generate the PDF files ( the fpdf.php ). I emailed the that author but did not hear back. I was hoping he would explain what part of the code was necessary element in opening the print dialog box and how it could be adapted to our use. The first code box shows that it 'requires' the fpdf.php file to work and states it's an extension of that file. Then the next code box shows an example of how to do exactly what we want, open the dialog box, but there's nothing about how this code actually gets INTO the PDF file. What I really need, regarding that script, is how it can be used with other scripts other than the fpdf.php. As mentioned, we're already using a Wordpress plugin that generates the PDF files just fine. All we want is to have it open with the print dialog box. Do you have any ideas on how the code from that link would be adapted into our use?

We are using a PDF generator plugin for Wordpress that creates the PDF for the page being viewed. We'd also like to add the option for the visitor to generate AND print the PDF (option #1 just to generate and download, option #2 to generate and print). However, when they choose the 'print' option we want the PDF file to generate, open in a new tab/window, and immediately display the printer dialog box so all they have to do is hit the Print button. I've seen this done before and, from what i've found on how to do it, it requires embedding the javascript code into the PDF file which then, when being opened by the browser, acts on the command to open the printer dialog box. Anyone have a solution for this? Thanks in advance!

I'm working on a Wordpress based site and am using a plugin that generates PDF files from posts. The client has expressed a great desire to have the PDF generated and have the print dialog box opens automatically so the visitor can one-click and print. So, first.. is this possible? And, second... anyone have a lead on the code or methods to do so? I always thought that the PDF viewing was a browser based Acrobat issue and required the File | Print method to get to that point. ANY help would be appreciated. Thanks in advance!

First, thanks for the post. Regarding your suggestion, would this need to replace any of the current functions in the category.php file? Or, be an addition to?

Here's what i'm looking to do. By default when you click on a 'category' link in the menu it takes you to a page that displays the posts of that category. That's ok for the 'child' categories but for the main 'parent' category i'd like it to display the child categories as links. For example, my categories menu is like this: Chapters (main parent category) - Chapter One (child of main parent) -- Sub Chapter One (child of child) - Chapter Two (child of main parent) -- Sub Chapter of Two (child of child) etc. Therefore 'Chapters' is what displays in the main site category menu (when moused over it drops down to display the child categories). When someone clicks on the actual 'Chapters' title it goes to a page that displays ALL the posts of ALL the child chapters. What I want it to do is display the child chapters in a <ul> as clickable links. Wordpress has some available functions for this. For example, wp_list_categories() does just that. But, it lists ALL the categories including the child/child ones which I don't want. Plus, it lists Chapters as a category as well which is redundant. There's also the ability to modify the category.php file and use their 'loop' technique to have is set where 'if' this category is selected 'do this'. That's the point where i'm going to need some assistance. This appears to be the easiest way to go. An example of how it should work using plain text logic is: if (is_category('Category A')) { wp_list_categories(exclude=category_a); ?> Crude and incorrect syntax I know, but basically just to show what the results should be. When the category name Chapters is clicked then display the list of categories in a ul but exclude Chapters from the display. To carry it a bit further, just show the children of Chapters and not the children of the children. Thanking everyone in advance for your time!

Hmm, since it's a dynamically generated table (meaning the rows and columns number depends on how many products are summoned for display) you might try JQuery which has an easy to use alternate row/column color formatting capability.

overflow: auto;

Create a wrapper div that will contain all your content and apply your width to that. It will center it which is the effect I believe you're looking for. #wrapper { width: 700px; margin: auto; padding: 0; }

I'll check out that link. The only problem I see with using the document.write() is it takes away the ability to be able to edit just one global menu file and defeats the purpose of the include concept. The problem i'm having is that when using the standard SSI include statement, because the menu is a UL block element, it's automatically placing a line break ahead of it which makes the menu have a space above it. If I can get rid of that problem then the whole thing is corrected.

Is there a method for doing an SSI type include using javascript, specifically JQuery? I have a menu I want to include in each page but don't want to convert to PHP nor use standard SSI methods if possible. Thanks in advance!

Eek! A table! I urge you to switch to tableless layouts. The only method I know for making a fixed footer utilizes div's and not tables: footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); }

It would be helpful to see the css that's specific to this display. Not the entire site, just this section as you've posted in the image. The box height issue is a little tricky since height: 100%; typically just means expand with the content inserted. But, you can add min-height: 100%; along with the height parameter and see if that fixes it. May not.

The CSS rules dictate how the HTML tags will look to the viewer. <div class="header">Blah Blah</div> The class="header" references your CSS file for how wide, how tall, background colors, fonts, placement, etc. that you dictated in your CSS file: .header { width: 1000px; height: 100px; padding: 10px; background-color: #000000; font-family: Georgia; font-size: 24pt; color: #ffffff; font-weight: bold; text-align: center; border: 1px #cccccc solid; } Now, I just set all the rules for the header and by assigning that class name to the div in your HTML document associates all this styling to it.

You wouldn't use width="200" with CSS. It would be width: 200px; No = sign and no quotes. Your example would be more in line with a width setting for an image ( width="200").

Haku, I've still not solved this. I have viewed the raw code in DreamWeaver CS3 showing all hidden characters, removed them all, removed all indentation, returns, etc. and placed the code in a continuous string with no breaks. Plus, removed the space that was in my ssi include statement was: <!--include virtual="nameoffile.html" --> now: <!--include virtual="nameoffile.html"--> and see nothing that would create the gap. There's no white spaces or characters. When you got it to work without the gap can you provide me with that section of the HTML you changed to accomplish that? The links to the sample page(s) are still the same as the original post.

You could use something this simple: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> input { display: inline; float: left; } label { display:inline; float: left; padding: 0 10px; } </style> </head> <body> <form action="" method="post"> <label for="name">Name</label><input name="text1" type="text" size="10"/><label for="middle">Middle:</label><input name="text2" type="text" size="10" /><label for="last">Last:</label><input name="text3" type="text" size="10"/> </form> </body> </html>

Just flip it around like this: #schoolimage img { border: thin #000 solid; } All images within the #schoolimage div will be affected. Also, make sure you use <div id="schoolimage"> and not <div class="schoolimage"> which is a common mistake.

I've never used text-indent: to position blocks. Try using the usual top: Xpx; left: Ypx; right: Zpx; instead. IE is less likely to be corn-fuzed by the method you're using. The top, right, left, etc. commands work for positioning a box within it's relative box.

Usually i'm fairly good at debugging but i'll definitely refresh my knowledge on it. This was driving me looney since it seemed to just jump to the next line (the error) on each fix. FYI, your last code snippet also produced an error, unexpected '.' on line 27. Changed yours: ."Special Instructions: ".$specialinstructions."\n", ."(From $name, $email, $phone)\n","From: $email")){ to this: ."Special Instructions: ".$specialinstructions."\n", "(From $name, $email, $phone)","From: $email")){ and the error went away. (removed . in front of the "(From ... )

That produces an error on line 26 now unexected T_VARIABLE

thewooleymammoth, that code throws an error on line 24 now. unexpected ';' on line 24