Place Custom Menu Code with CSS & Javascript Looks Ugly

GRF · #1 Jul 21, 2012, 03:56 PM

What is the way to have the theme code leave custom CSS & Javascript code alone that is contained in a Text Widget?

Do you have to put !important before the closing ";" in each line of code?

Thanks
Glenn

juggledad · #2 Jul 21, 2012, 03:59 PM

it depends on the selectors. If the text widget has a div with a unique ID and you use that in the CSS there should be no conflict. It is all about how qualified the CSS Selector is.

GRF · #3 Jul 21, 2012, 05:08 PM

OK, here is a small snippet of code in one of the files that is generated by a menu program I use which works perfectly on my main web site...

Maybe you can give me some guidance on how to have the theme ignore all this code.

//Core CSS
document.write('<style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;pos ition:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility :hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;fon t-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style>');

juggledad · #4 Jul 21, 2012, 07:02 PM

well since every CSS selector begins with '.imcm' that means this css applies to html elements with a class of 'imcm' and since no Atahualpa html uses that, it won't effect any of the atahualpa generated HTML.

No will the Atahualpa CSS effect the menu's HTML...without seeing the menu's HTML and not knowing the URL of the site, there is no way to tell

GRF · #5 Jul 21, 2012, 10:43 PM

Could the reason the menu CSS code displays correctly on my web pages and not in the theme be due to the DocType?

All my web pages use this DocType...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I'm not sure what the theme uses.

juggledad · #6 Jul 22, 2012, 04:37 AM

what version of Atahualpa and WP?
What is the url?

GRF · #7 Jul 22, 2012, 05:54 AM

WordPress 3.3.1, Atahualpa 3.6.4, http://www.selfdefensegearco.com/personal-protection

The menu can be seen on the left sidebar all the way down the page. I put it there so, it doesn't look bad when people view my blog. Normally it is at the top of the sidebar.

The menu should look just like the one I have on my retail web site at http://www.selfdefensegearco.com/JPX...ectorBlack.htm

Thanks,
Glenn

juggledad · #8 Jul 22, 2012, 10:00 AM

You need to use firebug in firefox and look at the li's and see what CSS is being applied - remember that CSS cascades if you want the widgets to look different, you need to find the css that is being applied and override it.