I'm using a small table to display some bullet points in a two column layout.

When I mouseover this area, the table background color changes from white to a pale yellow.

I have noticed this before with the Ubercart shopping cart block on another site, so this glitch must be coming from Omega, presumably from one of the css files.

Does anybody know where I should be looking?

Comments

JSCSJSCS’s picture

JSCSJSCS commented

I can suggest that you install the Firebug add-on to the Firefox browser from here: http://getfirebug.com/. It's absolutely necessary for any web person.

Then load up your page with Firefox. Right click the table and select "Inspect Element". The bottom of your browser window will open with Firebug. It will tell you on the right side, what CSS stylesheet and selector is making the table change color. You can click just to the left of each line and it will disable the style and show a red circle. Click again to undo that. See what makes the change that you are looking at.

mrpauldriver’s picture

mrpauldriver commented
Category: support » bug
Priority: Normal » Minor

I've tracked this down to the table styles in omega-visuals.css and I've flagged it as a minor big, pending the review of a maintainer.

It seems the lines concerned are;

tr:hover td,
tr.even:hover td.active,
tr.odd:hover td.active {
background: #FFFEEE;
}

I should also say that the use of borders may also be questionable.

I think the intention was to provide for colorizing of table rows, however I doubt whether it was intended that this would cascade down to views grid layouts and all other table implementations.

JSCSJSCS’s picture

JSCSJSCS commented

Good job. I doubt the developers of the Omega theme would classify any styling as a bug, and probably question the use of tables as opposed to CSS in any event. But at least you discovered what was bothering you about this part of the Omega theme and can start to enjoy it!

Have fun!

fubhy’s picture

fubhy commented
Assigned: Unassigned » himerus
Status: Active » Needs review

Thanks for helping on the Issue Queue JSCSJSCS

fubhy’s picture

fubhy commented
Status: Needs review » Active
David Stosik’s picture

David Stosik commented
Title: Table line hover coloring applied to all <table> tags, even Views Grid layout » Table css glitch

So, is "theming all <table> tags so that hover coloring is applied" considered as a feature, or should it be restricted to a selection of tables ?
Or maybe a "cancel class" should be provided, which would cancel the above "feature" ?

David Stosik’s picture

David Stosik commented
Title: Table css glitch » Table line hover coloring applied to all <table> tags, even Views Grid layout
David Stosik’s picture

David Stosik commented
Title: Table css glitch » Table row coloring on hover applied to all <table> tags, even Views Grid layout

Bad English, sorry...

By the way, this applies to 2.x too. :)

mrpauldriver’s picture

mrpauldriver commented

Regarding views formatting. I think the styling in omega-visuals.css is appropriate for a views 'table format' layout, where a single views item typically spans the whole table row and a hover color value helps to highlight that table row.

But it is probably not appropriate for a grid format row as this highlights a number of items in the row. Using this logic I suppose you could argue that individual cells could be highlighted on hover.

Whilst acknowledging that tables are not commonly used these days, this styling can cause problems where they do appear. For example with Ubercart (and I think Drupal Commerce) a table is used in the shopping cart block. Ubercart also makes extensive use of tables in category views of products.

Of course you can disable omega-visuals.css but then you lose the paging css which is really neat.

I suppose there is no one answer and anyway you can override everything in the sub-theme css.

An improvement would be to split omega-visuals into separate files, one for pagers and one for tables. Even better still would be a toggle for tables which would highlight on hover the active views items, whether this is a whole table row or an individual cell.

tfin’s picture

tfin commented

Thank you all for this thread, you helped me track down the issue.

fubhy’s picture

fubhy commented
Status: Active » Fixed

Didn't you fix this Jake? Slacker!

David Stosik’s picture

David Stosik commented

Could we have a view on what's the fix please ?

fubhy’s picture

fubhy commented
Status: Fixed » Active

Is it not fixed? I thought Jake changed the table CSS, didn't he?

David Stosik’s picture

David Stosik commented

I don't know. I'm just saying that some follow up would be appreciated. :)

geoffmallo’s picture

geoffmallo commented

I've fixed this for now with

tr:hover td,
tr.even:hover td.active,
tr.odd:hover td.active {
	background: #FFFFFF;
}

This works as I've got a white background content area.

Snugug’s picture

Snugug commented

Thanks for figuring this out, it's been driving me insane.

nmillin’s picture

nmillin commented

Thanks! I am using CSS3PIE and using background:none; was able to fix my issues with IE8 removing PIE.

marcoka’s picture

marcoka commented

so the problem is css3pie?

jdabbott51’s picture

jdabbott51 commented

No. Referring back to the second comment. Just go to sites/all/themes/omega/omega-visuals.css
Find the line that sets the background for all the td table tags (for me it was on line 186) and then disable or remove the following line: background: #FFFEEE;

It took me a full half-hour to determine this issue applied exclusively to the omega theme . . . ugh.

On a prior note, I'd like to just make a serious confession: I absolutely love tables. Loved them the moment I learned them back in 1999. I use them when I can. They STILL render solidly without wrapping which can require loads of messy markup in CSS3. With respect to the Omega theme (which I adore) it seems the moment you use a full width wrapper it causes fluid-like wrapping upon minimizing the browser. I might be wrong on this, but it created a bit of a headache.

SchwebDesign’s picture

SchwebDesign commented

thanks, found this issue too. just added this to my global.css:

tr:hover td,
tr.even:hover td.active,
tr.odd:hover td.active {
	background: none;
}
cellar door’s picture

cellar door commented
Assigned: himerus » Unassigned
Status: Active » Fixed

If you run into this issue you can also disable the omega-visuals.css which will remove this styling, but also any others that are in the file as well. Overriding in global.css is another way to handle if you want to keep omega-visuals.css enabled.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

TelFiRE’s picture

TelFiRE commented

They say not to hack the omega theme directly, well this absolutely has to be an exception, there is no way around it. Please remove that line. Anyone can add table hovers if they want, it is completely dumb that it is included in the theme. There's no way to override this. Background:none is not useful as I do not want the background to disappear on table hover any more than I want it to change colors.

JSCSJSCS’s picture

JSCSJSCS commented

There is an override. If someone does not like the suggested theme css provided by Omega's authors, you go to Omega theme settings, Toggle Styles, and in this case uncheck "Omega Styles (all) - omega-visuals.css"

Then one can write their own css in any of the subtheme css files to do whatever they want where ever they want.

TelFiRE’s picture

TelFiRE commented

That kills a million other styles too! You should not have to erase all of the base styles to get rid of this one! It's a bad design, all there is to it, and it would be a big improvement to simply take it out. Writing that single style in your stylesheet if you need it is only about 5000 times easier than re-creating ALL of the styles that are contained in omega-visuals.

By your argument, we should add as a base style to make all buttons big and green, because some sites might use it. But it's even worse than that because you can't override it in your own styles.

TelFiRE’s picture

TelFiRE commented
Priority: Minor » Normal
Status: Closed (fixed) » Needs review

I apologize for the harshness of my past comments. However...

Given the frequency at which I see requests on how to fix this bug,
and given that in dozens of layouts I have created in Omega I have never once felt the need to have this particular yellowish table hover color,
and given that there is literally no fix other than hacking Omega itself, completely disabling hundreds of other styles, or writing dozens of new styles to accomidate every possible table hover throughout your site,

May I please, please, please suggest that this just simply be removed? I see literally no reason for this line to be in Omega, and going forward I have every intention of hacking it out of core for every single site, because there is absolutely no other fix. I really don't see why I should be forced to do something like this. The negatives outweigh the positives by a landslide.

mrpauldriver’s picture

mrpauldriver commented

There is a case for keeping it but it should be a separate style sheet which can be toggled on and off, as with the all the others style sheets

Moreover, the table css should be revised so that is looks like a proper table, with contrasting table header colors and proper cell borders. In other words, styled for showing off tabular data.

I have taken to putting the code below in my global.css and suggest that the Omega defaults should be somewhat similar

/*---------  TABLE STYLES -----------  */
table {
  border: 1px solid #CCC;
  width: 100%;
}

thead th, th {
  background: #f7f7f7;
  border-bottom: 1px solid #ccc;
  color: #333;
}

td, th {
  padding: 4px 8px;
  vertical-align: middle;
  border: 1px solid #CCC;
}

tr:hover td,
tr.even:hover td.active,
tr.odd:hover td.active {
  background: #EBEBEB;
}
TelFiRE’s picture

TelFiRE commented

Yes I'm absolutely ok with that, if there is just an omega-tables.css which I can turn off, I would be quite happy.

gintass’s picture

gintass commented

I totally agree with "TelFiRE" and I wish that they would remove this code from omega-visuals.css:
tr:hover td,
tr.even:hover td.active,
tr.odd:hover td.active {
background: #FFFEEE;
}

Obviously this is not a bug, but feature, so I guess we need a new category in the issue queue - "Feature removal request". I think this little "feature" spoils otherwise one of the best Drupal themes.
For now I don't see any better way except disabling it in omega-visuals.css.

datarazor’s picture

datarazor commented

Omega theme should be updated so that the css selector is not so broad so that it affects ALL table elements... the way it is coded now, you have to write CSS to over-ride omega to restore normality, whereas the css selector should only work in admin pages, or where you want this coloration to occur. Omega should change the css selector on this part of the code to be more specific in their next release, IMHO.

So either delete it, or make it specific to just some admin-tables. Or allow it to be disabled in the UI if you are feeling fancy... (disabled = style sheet that you will load, or not load, depending on theme setting)

thummper’s picture

thummper commented

"not a bug" - bug, or sloppy, take your pick, but its obviously not a working model if it expects people to add override css, or edit (*cough* fix) the original css file. Has nobody considered using classes for this? .default_omega_tr:hover. Done.

And yes, divnazis, there are very valid reasons for using a table, like when you wish to display a data TABLE in a post. It's not the end-all layout tool people use it for, but it is there for a reason.

zanndoth’s picture

zanndoth commented

This solution works only if you don't intend to style any table, tr or td at all. I can remove it from the stylesheet but trying to remember what you did when something breaks after updating modules can be a pain when you are managing a lot of websites.

Is it really necessary to have it in the first place?