Does CSS Actually Work?

[Anonymous]

I love your menu and most everything about how it is implemented.  That said, I’m having one weird problem.

I’m not exactly a novice to using CSS and PHP and customizing things to work with WordPress.

Yet for some reason I absolutely cannot get the CSS to modify in any way.  Nothing I do to change the CSS either working in the MLN settings or directly editing my CSS file seems to actually change the look of the menu. I can’t change the fonts or the dimensions of the navbar in any way.  I can change the CSS, but it has no effect on how the menu displays once I save it.

Take a look at my page at http://www.fontcraft.com – all I want to do is change the width of the Navbar from 100% to 940px centered and it just will not do it.

Any thoughts on what the cause might be?

TIA

Dave

[imported_Ryan]

Hi,
You have two version of the CSS running at the moment. One in the style.php file from the plugin and another in your themes CSS file.

Perhaps you are getting confused between the two? Ie: You are trying to edit one, but the other is displaying it for you?

[reesmaxwell]

Is there a way to point MLN to use my custom.css file?  (My site: http://dancingsol.com)  I see there is add_option(‘suckerfish_css’,… in the MLN plugin file: index.php.  And MLN plugin style.php calls that suckerfish_css option.

I ask because I am using the Thesis theme (by Chris Pearson) and when I use a custom.css file, it somehow overwrites all the colors in the MLN navbar.  I was thinking that maybe I need to put the MLN css in the theme’s custom.css and can have better control there?  At the moment, I have the Thesis theme set to NOT use my custom.css file, but that isn’t going to be a real solution.

Is it possible to bring the MLN css elements into my custom.css file and call them from there?

[imported_Ryan]

Hi,
Your solution won’t work, although it is definitely possile. To fix your problem, you will need to modify the themes CSS or HTML to avoid it interfering with the plugin CSS file. If you need any help with this, then let me know and I’ll take a closer look at your site.

[reesmaxwell]

Oh please oh please? I’d love a hand!

[imported_Ryan]

I can’t see any difference between the menu when I load ALL your style sheets and when I only load the menus style sheet.

I see that you don’t have a custom.css style sheet loaded either though and I can’t bug fix anything in it without seeing it first.

[reesmaxwell]

Okay, so I’m an idiot.  Woops.  Here you go:
http://dancingsol.com/wp-content/themes … custom.css

When I turn on using the custom.css, then the link hover (#FFF97F) becomes used as the hover in the navbar. There may be another issue as well, but I can’t think of it at the moment… it’s too late for my brain to work very well, but this should give you an idea.  What else do you need to tshoot this?

And THANKS for looking at this for me!! Anything I learn here I’ll bring back to the Thesis forum!

[imported_Ryan]

I can’t find any problems. Is this perhaps a browser specific problem?

When I loaded the custom.css file immediately before your </head> tag it did not have any affect on the menu in FF3.

[imported_Ryan]

PS: It would be handy if you could provide examples with the problem in action. Otherwise I need to download your page and manually add the CSS myself.

[reesmaxwell]

I know what you mean, Ryan, just that it’s a bit difficult to figure out how best to do this.  If I make my site not function well, then you can see the issues, but so can every visitor to my site (not that I have many more visitors than the parents of the kids whom I teach, but still…)

Okay, I’ll turn on the custom.css … and hope you’ll be able to check it out without too many days passing.

I really appreciate your assistance, Ryan!

Thanks,
  Rees

[reesmaxwell]

Okay Ryan,

  Got the custom.css ‘turned on’ so go ahead and take a peek.

Thanks again,
  Rees

[imported_Ryan]

You did’t need to alter your site. You could upload a static HTML page somewhere which demonstrated the problem. Static pages are generally easier to work from as you don’t need to much around setting up a local server to do testing on (or upload everytime you change something).

The following CSS code seems to be causing your problems:
[code:32di05fp].custom #header { border-bottom: 3px double #DCB; }

.custom a:hover, .custom a:focus { color: #4A7F00; background: #FFF97F; padding: 1px;}[/code:32di05fp]

[b:32di05fp]Off-topic:[/b:32di05fp] Do you know why your theme has so many style sheets in it? Your theme seems to have 13 sheets, plus another five for plugins and some code entered directly between your head tags. I usually try to just have one sheet, plus maybe another a couple for various plugins if the author hasn’t made an easy way to deactivate their style sheet. It’ll work fine the way it is, but it just seems rather odd to me, and it will take a teeny bit longer to load.

[reesmaxwell]

Thanks for taking a peek!

Hmm, I guess I’m not sure what you mean .. I commented out those lines in my custom.css file, and I still have the same behavior.  My yellow highlight effect on hover of the green hyperlinks are still effecting the navbar, such that when I move my mouse over it the yellow doesn’t appear to change (same color of yellow) and you only see the navbar blue hover on About Us when moving down the secondary menu under About Us. 

Sidenote on style sheets: I am using a theme from Chris Pearson (diythemes.com)
style.css
ie7.css
ie6.css
deprecated.css
options.css
custom.css … that’s all that I can find… 13!  ” title=”Cheesy” />  That does sound crazy!

They’re just what came with the Thesis theme.  I like Chris’ stuff, so I haven’t messed with anything other than the custom.css… well, I think I did mess with style.css while I was still trying to find a resolution to the issue here.

[imported_Ryan]

[quote:3mz3nh2c]
Hmm, I guess I’m not sure what you mean .. I commented out those lines in my custom.css file, and I still have the same behavior.
[/quote:3mz3nh2c]

No, your menu is behaving much better now. I think maybe I fixed problems you were unaware of and left whatever problem it was you were trying to fix.

[quote:3mz3nh2c]Sidenote on style sheets: I am using a theme from Chris Pearson (diythemes.com)
style.css
ie7.css
ie6.css
deprecated.css
options.css
custom.css … that’s all that I can find… 13!  ” title=”Cheesy” />  That does sound crazy![/quote:3mz3nh2c]

Here they are …

[code:3mz3nh2c]<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/custom/custom.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/fonts/content.php?font=georgia&size=14&m=1" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/fonts/nav.php?size=11" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/fonts/header.php?size=36" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/fonts/headlines.php?size=22" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/fonts/bylines.php?size=10" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/fonts/multimedia.php?size=14" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/fonts/sidebars.php?size=13" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/fonts/footer.php?size=12" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/widths.php?c=3&w=480" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://dancingsol.com/wp-content/themes/thesis/lib/stylesheets/deprecated.css" type="text/css" media="screen, projection" />
[/code:3mz3nh2c]

[quote:3mz3nh2c]
My yellow highlight effect on hover of the green hyperlinks …[/quote:3mz3nh2c]

I can’t see any ‘green’ links.

I am very confused. If you need more help, post your exact problem as a stripped down page (no style sheets except for the ones causing problem, no other HTML but the menu) and explain exactly what you need corrected and what browser causes the problem. Preferably also include an image showing the problem. Then I’ll take a closer look for you.

[Author]

Posts