WTF is element.style? It's overriding my div's width!

By tflmike on 3 Mar 2008 at 10:45 UTC

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

Just check the Theme that

karthimx commented 3 March 2008 at 11:05

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

It's just Firebug's way of

krudd commented 3 March 2008 at 11:07

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.

element.style FTW!

dman commented 3 March 2008 at 11:12

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/

_{.dan. is the New Zealand Drupal Developer working on Government Web Standards}

FYI, inline styles or

dvessel commented 3 March 2008 at 19:40

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

can you demonstrate?

dman commented 3 March 2008 at 22:48

<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/

_{.dan. is the New Zealand Drupal Developer working on Government Web Standards}

That important declaration

dvessel commented 3 March 2008 at 23:40

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

wow cool

dman commented 3 March 2008 at 23:50

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/

_{.dan. is the New Zealand Drupal Developer working on Government Web Standards}

CAN YOU HELP ME?

Bijay-1 commented 20 August 2013 at 18:34

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!

Very useful, thank you!

colbtron commented 3 February 2017 at 20:03

!important

dalleyasaurus commented 24 February 2011 at 01:29

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.

Thanks guys! I'll take a

tflmike commented 3 March 2008 at 22:26

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!

Something to keep in

Nick Lewis commented 3 March 2008 at 23:00

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 think this problem is more

bredi commented 20 June 2012 at 01:21

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

!important fixed it.

Having same issue with background color

joomjohnny5 commented 14 August 2012 at 11:18

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!

I can't tell from looking at

dman commented 14 August 2012 at 12:54

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?

_{.dan. is the New Zealand Drupal Developer working on Government Web Standards}

interesting

joomjohnny5 commented 14 August 2012 at 17:46

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!

It's not in your css, it's in

dman commented 14 August 2012 at 20:50

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.

_{.dan. is the New Zealand Drupal Developer working on Government Web Standards}

?

joomjohnny5 commented 15 August 2012 at 05:36

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.

Set Number of visible items to "Auto"

scoflo commented 2 October 2012 at 19:08

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.

For me it was Image Style

jebbushell commented 10 March 2013 at 11:54

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? :)