sw9

did you try a display: block; on your a's?

I'm creating some hover menus where I want the hover menus to expand out in width to fit whatever the line items are on one line, but the width seems to be getting controlled by the previous menu. The only way I can seem to get it to work is if I give the hover ul a set width rather than trying to let it do it automatically. It seems like I'm just doing something wrong. I'm attaching two screenshots on how it looks now and how I want it to look. Here is my css-related code: /* the top level menu bar */ ul.nice-menu { border-top:none; background: #971e20; width: 970px; height: 26px; } /* the top menu li's */ ul.nice-menu-down li, ul.nice-menu-down li.menuparent { border-top:none; font-weight: normal; font-size: 14px; background: #971e21; border-left: none; border-bottom: none; } ul.nice-menu-down .menuparent a { padding-right: 38px; } ul.nice-menu-down li a { display:block; padding:5px 38px; } } ul.nice-menu li, ul.nice-menu-down li.menuparent { background: #971e20; border: none; border-right: 1px solid #fff; } ul.nice-menu li.last { border-right: none; } /* top menu hovers */ ul.nice-menu-down li.menuparent:hover, ul.nice-menu li:hover{ background: #80191b; } /* second (hover) ul **/ ul.nice-menu ul { top: 26px; background: #3c529b; } ul.nice-menu ul li { width: auto; padding: 0; background: #3c529b; } ul.nice-menu ul li a { padding: 5px 10px 5px 20px; } [attachment deleted by admin]

thanks, just wanted to make sure i wasn't missing some easier way to do this. appreciate the advice.

If you go to this site, take a look at the hover menus when you roll over 'About Us'. http://dev.vtfeed.org/ That current setup is using the CSS dotted border option, but the dots just don't look that great. I'm also finding I have to set a specific width for each of the li's if I want the dotted box to appear uniform when I roll over something. The only other way I can think of to do this would be to do a background image for each separate menu that's the correct width and then a few pixels high repeating. But this isn't that great either if I decide to change the text on any of the menu items. What I'm asking is, is there any way to get around set widths for these dotted borders if the menu items are not uniform in width but instead are using padding? For example, in order for the 'Tools & Resources' hover to appear dotted all around, I had to set li.244 ul {width: 185px;} And if I didn't do it like this I think I'd have to have a 185px repeating bg image to go behind it. Is there no way to dynamically achieve what I want here?

thanks, haku.the image on the a tag is actually only the tiny arrow (12x7). but your post made me revisit it once again. i tried to put it on the lis again but this doesn't work because i have to have a right border and padding brought down, which seems to mess everything else up when i do that. BUT i was able to fix it. on that particular active trail i set the width to be 10px less than elsewhere, and then i could give it a left-margin of 10px to push it over the image. it works! thanks for the inspiration.

I think I might be losing my mind over here and probably need to get away from the computer. I though this was/is working great, and it seems to be if you look at this page: http://dev.miasole.com/company (look at far left menu item, it looks good). Now look at this page: http://dev.miasole.com/company/management-team So far as I can see, it looks to me like all the classes are the same, being applied in the same order (using Firebug to see this). So I cannot for the life of me figure out why the far left image is overlapping on this page. Any suggestions?

thanks so much, haku! that got me started, i appreciate it very much. the site looks great now!

I've been staring at this code for 2 hours in firebug trying to get this to work and it's killing me! If you take a look at the navbar on this page you'll see my menu's left and right corners are rounded appropriately with my background images: http://dev.miasole.com/customers However, I can't get it to work on this page where it's the active page: http://dev.miasole.com/contact-us I've tried changing the margins on the ul.links but then it bumps my text for 'contact us' down. Can anyone tell me what I need to do with this? Thanks SO much in advance!!

thanks for that suggestion. there had to be a dupe of the same table to really get what was needed. i ended up using this query: SELECT gc.* FROM group_contact gc INNER JOIN ( SELECT id, group_id, contact_id FROM group_contact GROUP BY group_id, contact_id HAVING count(*) > 1 ) dup_gc ON ( gc.group_id = dup_gc.group_id AND gc.contact_id = dup_gc.contact_id AND gc.id <> dup_gc.id )

I have a table with many columns, including: group_id, contact_id It has 20,000 rows in it. I cannot have entries where group_id and contact_id are the same more than once, so for example: group_id | contact_id 100 606 100 606 Are bad. But group_id | contact_id 100 606 68 606 are fine. I need to find instances where they are duplicate entries. If I run this query: SELECT DISTINCT group_id, contact_id FROM table1 GROUP BY group_id, contact_id then I believe it's showing me how many are distinct, and that leaves me to believe that there are about 400 cases of duplicates. I need to see all the ones that are duplicates. How do I write this query?

thanks XeNoMoRpH1030. I was trying to do it direct in mySQL but your way makes way more since. I was able to make a quick while loop and delete all 50,000 applicable entries via your method.

Ugh, REGEXP is something I'm still trying to wrap my head around. Do you have an example query I might start with? Thanks much in advance.

I have table1.columna with numerical entries like '101'. Then I have table2.columnb that has entries like 'path/101'. I want to delete everything from table2.columnb where the number after 'path/' matches the number in table1.columna. I'm not sure how to do that since there is nothing else joining these two columns together. Scratching my head. Any ideas?

hey guys i'm really new to javascript, but i'm trying to get an area map onmouseover to fade in a hover image essentially. i see a fade trying to occur, but nothing is happening to the image itself. You can see the page in action here: http://dev.mountgrace.org/interactive-map. If you roll over the map, one section of it is supposed to turn yellow and fade in a different div with that image. here is my area map code: <div id="small-map-container"><img id="map-image" usemap="#Map" src="/sites/all/themes/mtgrace/maps/MAP_small.jpg" border="0" alt="" width="540" height="390" /> <map id="Map" name="Map"> <area shape="poly" coords="15,4" href="#" /><area shape="poly" class="west" coords="15,5,256,17,262,57,271,58,271,63,280,64,280,68,289,68,291,85,289,107,274,110,265,120,268,139,258,142,261,165,209,163,207,201,158,194,157,187,85,196,77,174,85,155,83,138,73,134,73,141,62,146,30,136,38,80,49,76,15,27" href="/maps/western-map" /> <area shape="poly" class="east" coords="258,14,264,55,272,56,274,61,282,62,282,66,292,67,292,105,276,113,268,119,271,139,260,143,263,165,263,175,277,191,308,162,314,162,368,217,428,165,486,219,518,191,528,192,530,169,517,166,522,55,492,27" href="/maps/eastern-map" /> <area shape="poly" class="south" coords="212,165,209,203,200,202,200,231,190,232,205,341,200,344,198,362,208,385,217,382,214,363,236,362,238,376,261,367,298,362,313,367,352,319,363,323,479,225,472,219,478,213,428,167,368,219,314,164,307,164,278,195,262,177,260,166" href="/maps/southern-map" /> </map> <div> <img id="map-image" alt="" src="/sites/all/themes/mtgrace/maps/MAP_1_rollover.jpg" class="state" usemap="#map" /> </div> </div> then i've got some css hiding the correct element: #small-map-container { position: absolute; top: 100px left: 100px } #small-map-container div { position: absolute; top: 0; left: 0; display: none; } and then my javascript (right now i'm just trying to get this to work on one region, then i'll have rollovers for different parts of the same image once i figure it out): $(document).ready(function(){ var fadeInSpeed = 100; var fadeOutSpeed = 0; //map west $('#small-map-container area.west').mouseover(function(){ $('#map-image').stop().fadeTo(fadeInSpeed, .1, function(){ $(this).attr('#small-map-container div #map-image'); }).fadeTo(fadeOutSpeed, 1); }).mouseout(function(){ $('#map-image').stop().fadeTo(fadeInSpeed, .1, function(){ $(this).attr('#small-map-container'); }).fadeTo(fadeOutSpeed, 1); }); }); i know i'm somehow not grabbing the right element in my javascript. can anyone help me out? thanks a lot in advance.

Duh. Sorry, I was not doing this right because I wasn't nesting my where clause correctly. All in all it just came to: select DISTINCT cs.nid from content_type_showing cs WHERE cs.field_channel_value = '11' AND ('$mytime' BETWEEN cs.field_showing_airtime_value AND cs.field_showing_airtime_value2 OR cs.field_showing_airtime_value >= '$mytime') order by cs.field_showing_airtime_value LIMIT 6