Hey guys-

I've been trying to do some theming of a jCarousel item and for some reason the width didn't look right. So I checked it out using firebug (I love that plug in) and I discovered that my div's width specification was overridden by "element.style {}"!!! So I search all of my CSS files and I can't find element.style anywhere. Is this something in system.css?

Anyone know how I can get rid of this element.style thing?

Thanks!

Comments

karthimx’s picture

Just check the Theme that you are using and see the corresponding theme's style.css. If you want to modify your div's width do it in style.css.

Thanks,

Karthi

krudd’s picture

It's just Firebug's way of showing style attributes that are applied directly to the element. In this case these are styles that have been set via JavaScript. The jCarousel is altering the width of your DIV, this overrides all the other CSS.

As to how to stop it, you'll have to look at the documentation for the plugin/module.

dman’s picture

HA!

element.style is the style that's defines on the element - directly - using style=""

It's the royal flush of element selectors. It's the most specific, un-over-ridable setting.
It's in the source!

so it's coming from the jquery code itself, written in at runtime. And nothing to do with Drupal or your theme for that matter.

You gotta debug jCarousel to find out why it thinks that's a good size. Maybe its calculations are wrong, or maybe it's just hard-coded some padding it thinks looks beter.

You should have seen it in the DOM inspector.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

dvessel’s picture

FYI, inline styles or anything applied through js can be overridden through CSS. It must be very specific though. "body div.content div#my-id .yadda". Not pretty but not the royal flush either. ;-)

joon park

dman’s picture

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

.divcontainer div{
  width:200px;
  margin:5px;
}
/* this doesn't work */
#div1 {  background-color:green; }

/* nor this */
body div.divcontainer div.#div2 { background-color:green; }

/* or even this */
html body div.divcontainer div.#div2 { background-color:green; !important }

</style>
  <title>over-ride element.style</title>
</head>

<body>
  <div class="divcontainer">
    <div id="div1" style="background-color:blue">1</div>
    <div id="div2" style="background-color:blue">2</div>
  </div>
</body>
</html>

Even with reference to the rules I can't get that div green.

How would you do that?

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

dvessel’s picture

That important declaration was misplaced.

#div2 { background-color:green !important; }

It looks like it doesn't have to be that long. The important declaration is enough but I've seen cases when that doesn't work either and that's when you have to chain longer selectors.

Anyway, what Nick Lewis said. Haven't played with jCarosel but if the style is set from the script, I'd assume it was for good reason.

joon park

dman’s picture

Thanks for that, I learned something today!
I've never trusted !important, I always thought it was a desperate hack :)

but that's all cool.
Agreed that actually doing so may mess up the javascript calculations that were probably there for a reason.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

Bijay’s picture

Hi dvessel!
I am having trouble with element.style too.

Issue:
when i inspect element on firebug it shows me there's element.style{ float:right; }
because Of this its causing problem on my navigation tab.

if i click that red sign left of that float:right; in css through inspect element its all good.
But how do i get rid of that float:right; or may be change that to float:0 which will solve my problem.

Any help from anybody is appreciated!

colbtron’s picture

!important

dalleyasaurus’s picture

Had the same problem in DDblock module

I just wrote what formatting I wanted in my style.css and added !important; to the end of the line and it did what I wanted.

Not sure if this was the proper way to do it - but worked for me.

tflmike’s picture

Thanks guys!

I'll take a look at adding some really specific CSS and see if I can figure anything out with the javascript calculations... I'll report back when I get it all figured out!

Nick Lewis’s picture

Something to keep in mind:
jCarousel needs hard coded widths in order to calculate how far it needs to slide for the next item -- hilarity ensues if you try to mess with that. Generally speaking, all elements must be able to fit within that fixed width if you're going to go using the carousel. A carousel with items of varying widths is either a fool's, or javascript genious's errand.

jCarousel i believe auto calculates the width, but in my experience does so badly -- and number of variables can fudge that up including weather you hide the carousel items until it finishes rendering itself. I ended up using jcarousel lite, and altering it to fit my needs.

--
"I'm not concerned about all hell breaking loose, but that a PART of hell will break loose... it'll be much harder to detect." - George Carlin
--
Personal: http://www.nicklewis.org
Work: http://www.onnetworks.com

--
"I'm not concerned about all hell breaking loose, but that a PART of hell will break loose... it'll be much harder to detect." - George Carlin
--
Personal: http://www.nicklewis.org
Work: http://www.zivtech.com

bredi’s picture

I think this problem is more wide spread. I had this issue using views module.

!important fixed it.

joomjohnny5’s picture

Hi all, thanks for great thread and info!

Having similar issue and was hoping for some guidance from the wiser folks :)

Trying to find where/how to edit a random brown background color appearing in a div, and it seems the entire div is being added "inline" or "dynamic" (or whatever the proper term is).

Firebug is labeling as just "inline" and element.style {

Its the light brown backgound color towards the bottom (#ab8e63) found in div.icf-inline-style

page is w w w . reallygreathomes dot com

Any thoughts? Thank you!

dman’s picture

I can't tell from looking at the theme what color is supposed to be there and what isn't, but I do see (in view-source)

<div style="position: relative; left: -20px; width: 773px; background-color: #ab8e63;">
<div style="padding-left: 15px;">

giving one of your divs that light-brown.

Seeing as it's visible in an inline style directly in view-source, that means it's not being added dynamically (client-side via js) but is just normal content, probably pasted right into your editor.
If you have other plugins that are adding it for you, then you should look at them, but it currently looks like it's just node-content that has a normal inline style.

This is not the same issue as the js-added hard-to-debug inline styles, it's just about learning css.

icf-inline-style was actually added by one of your browser plugins I'm going to guess.

While you are at it, note that the left: -20px; and padding-left: 15px; look like they are just fighting against each other for no obvious reason. Do you have a reason for putting that stuff there?

joomjohnny5’s picture

Thank you very much for comments. I see that code too in HTML and Firebug..

Interesting because i cannot find it in any css for template or plugin, so assumed it was dynamic inline thing - why would Firebig list it as so?

I just inherited this site and making some 'quick' tweaks (usually work with Joomla stuff, myself) so I am not sure how this came to be.

I will scour the CSS again for this color code, thank you very much for your input. If you have any other quick thoughts on how to maybe find it, please drop a line

Cheers!

dman’s picture

It's not in your css, it's in your content.
It's not listed as dynamic, it's listed as inline.
Edit that node to remove it.

joomjohnny5’s picture

So there is no way to find out which file to edit?

Thank you but I can't find it anywhere. Not sure what edit that node means, or how to pinpoint it.

scoflo’s picture

Set Number of visible items to "Auto" in Views under Format: Settings.

If you set the visible items it will override any width properties in your CSS.

jebbushell’s picture

When using module "Views Slideshow", the View has a special format "Slideshow" and the the image field has an image style. That image style has to be right. Who knew? :)