Bulletproof - sidebar content CSS cascade

[user1234]

Hi,

I'm trying to style the twitter sidebar plugin, which displays correctly in FF, but looks quite horrid in IE. I've searched the forum for an answer, but unfortunately the easy one (using #twitter_update_list) doesn't do a thing to how that output is displayed, namely that it is being pushed halfway out of sight to the right. The css I tried

Code: Select all

#twitter_update_list {
         list-style: none;
}

There seems to be something else at work there, but reviewing all the other style sheets didn't give me a hint what would be pushing that list to the right in IE.

Has anyone else met with this problem and how did you deal with it?

Cheers,

Dachs

[garvinhicking]

Hi!

It might be that you need to apply list-style to a different element. Use Firebug to pick the right element to add that to your CSS.

We could help you better if we had at least a screenshot, best of course a site with your actual HTML and CSS. Be prepared to hear this sentence often in your postings.

Best regards,
Garvin

[user1234]

Hi,

screenshots here.

Thats what this looks like in IE6

IE

twitter.jpg (8.33 KiB) Viewed 9693 times

And here's what FF gives as info

FF output

twitter2.jpg (22.95 KiB) Viewed 9695 times

Cheers,

Dachs

[garvinhicking]

Hi!

That looks a lot like a default padding/margin from either the ul/ol or li elements inside that box. Try to set both to 0 of parent and child containers.

HTH,
Garvin

[user1234]

Hi Garvin,

aaah - but - the question is what is what there?

I have not touched any of the standard Bulletproof ul/ol or li elements at all anywhere. I tried styling that using the code above, as said, it didn't work. I can't find the relevant container for the twitter plugin. So actually *that* was my question: what and where? As reference please take the standard CSS coming along with Bulletproof.

Cheers

Dachs

[garvinhicking]

Hi!

You could add the container to your CSS, simply to the bottom, the file where you currently do your customizations. Anything that is missing would be extra styling that can be inserted.

There are a dozen of combinations of which sidebar plugins are used in which position on any template, so not all template authors have inserted any special sidebar styling to the templates. By usual, many plugins deliver their own CSS, but the templates would be bloated if they'd all ship with plugin specific CSS code.

I think in recent s9y versions, Yellowled did add some CSS rules that would correct this margin/padding thing for any list items in the sidebar, but I'm not deep enough into this to remember/inspect this.

Best regards,
Garvin

[user1234]

Hi Garvin,

well, what is currently styling this thing in IE? That's what I can't seem to find.

Cheers,

Dachs

[garvinhicking]

Hi!

ul/li has a default (inherited from the browser, not by any CSS file/serendipity itself!) padding and margin, so if the CSS has nothing declared, it will kick in and you need to overwrite it.

Regards,
Garvin

[yellowled]

I have not touched any of the standard Bulletproof ul/ol or li elements at all anywhere.

... and you shouldn't have to. The CSS provided with the twitter plugin should usually take care of that, since when we developed BP, twitter was unheard of, so it doesn't have any styles for the twitter plugin, just the default styles for said elements (ul/li) -- and those should be overridden by the twitter plugins's styles. (Whoo, getting a little dizzy here.)

I can't find the relevant container for the twitter plugin.

That would be .container_serendipity_plugin_twitter, if you want the container for the whole sidebar plugin.

Have you already tried both margin:0 and padding:0 for #twitter_update_list? Other than that, Don is usually the IE6 bughunting expert.

(On a personal note, I wouldn't really bother about this dinosaur of a browser )

YL

[Don Chambers]

....Don is usually the IE6 bughunting expert.

I don't know if "expert" is the right definition.... perhaps "sadist" is more appropriate.

I can only attempt to correct the problem if I can see the site live.

[user1234]

Hi,

Have you already tried both margin:0 and padding:0 for #twitter_update_list? Other than that, Don is usually the IE6 bughunting expert.

Ha! That did the trick! And for the record, here's the CSS:

Code: Select all

#twitter_update_list {
list-style: none;
margin-left: 0;
padding-left: 0;
}

I used -left, as I still want to style the horizontal spacing between list items.

(On a personal note, I wouldn't really bother about this dinosaur of a browser )

Unfortunately too many coders and geeks are of that opinion, I can only say from a webmaster's vantage point

Quite many people have no choice but to use IE6. There are large firms which bought the relevant licenses and built third-party, highly specialist software/intranets on that browser version. They will be using it until they can afford to change their whole software infrastructure, which means it's going to be used for quite some time yet. Graceful downward compatibility is still a must for serious applications. Else you lose large fractions of potential readers/customers.

That said, I hate the hoops IE6 forces me through still too

Cheers,

Dachs

[yellowled]

Quite many people have no choice but to use IE6. There are large firms which bought the relevant licenses and built third-party, highly specialist software/intranets on that browser version. They will be using it until they can afford to change their whole software infrastructure, which means it's going to be used for quite some time yet. Graceful downward compatibility is still a must for serious applications. Else you lose large fractions of potential readers/customers.

I am aware of all of this. Good for them, 2014 they're in for a big surprise

YL

[user1234]

Hi YL,

I can read your pain In an ideal world all we'd need to develop for would be CSS-compatible browsers ... well, one can dream ...

Cheers,

Dachs

[yellowled]

I can read your pain

I have no pain w/ IE6. I usually charge extra for not ignoring it. Period.

YL