Resolved, see the last answer made by myself!

Hi there,

I've created a simple CSS + javascript rollover solution that works well on any platform, piece of cake. BUT. Company where I work use that non customizable CMS that seems to overwrite my style so that when I place my code over the web, nothing works.

... it's morning, it seems to me that I'm not able to be as clear as I should be so, let's see some screenshots!

Here is what is should looks like: http://imgur.com/AItNt.jpg

Here is what it does over the CMS: http://imgur.com/0hdCy.jpg

As you can see, the CMS places bullets, even though my style have the list-style-type: none css applied. My first reaction was to convert the (ul) tag to an (ol) one, wich then does this: http://imgur.com/0f60K.jpg and that's not good either.

Any help? Yes, the shots where taken on the same OS and browser. The only difference is that the good shot had been taken locally, and the wrong ones over the web, in the CMS...

5 answers

2
points

Hmm.. If the CMS is adding inline CSS to the elements then you're out of luck (if not using JS to convert them after rendering, but that is ugly like hell). However, if it only overrides your list-style property then maybe you could use some absolute positioning to overlap the bullets?

It would be best if you could reach the part of the CMS API that generates the navigation.

If the CSS added is imported externally you could always use a more specific rule, ie #wrap #content #left-col #navigation ul li instead of #navigation li a. Be as specific you need but not more.

Answered over 7 years ago by Jens Hedqvist
George 68
1
point

Try to target your ul element as specifically as possible. Assigning an ID to the ul should work. Here is an article for more information about Css Specificity

If your styles are still being overwritten apply the !important tag in your style ex

background: none !important;

Will override the CMS style and remove their background.

Answered over 7 years ago by George
1
point

Okay! I did find a work around with your help! As George suggested, I've used the !important tag on a padding style 0, but it didn't work entirely. The bullets where still appearing, but without the problematic space too. Applying the important tag to the list-style-type or background image none still wouldn't make the bullet disapear!

So I went back to change then the (ul) tag to an (ol) tag and... Bingo.

It's SO not a good way to make it, but I'm stuck with an impossibly complex, not friendly, not customizable CMS, that will do it for now... Thanks people!

Answered over 7 years ago by jpmurray
  • Using an ol instead of an ul really isn't that big of an issue. George over 7 years ago
0
points

It looks like the CMS may be placing bullets as background images in an inline style which would explain why you can't override it with CSS. However I am only guessing, its hard to tell without an actual link to the CMS/html code behind it. Include a link and people will be able to help you better.

Answered over 7 years ago by Ara Garabedian
  • I can't right now, it's on a hidden dev server. I'm trying to make it available to the public as we speak ;-0 jpmurray over 7 years ago
-1
points

It would be best to use an <ul> as you propose, but as an alternative, could you use divs? This might be a way around the issue.

Answered over 7 years ago by Edward Williams