Solved

Strange background behind text (CSS?)

Posted on 2010-11-20
10
225 Views
Last Modified: 2012-11-02
Please visit www.mwebdev.com/mos.html. Look at the section that has rotating specials, immediately under the REQUEST A CATALOG button. The rotation is being handled by jquery. Where is the green background behind the text coming from? The page background is green, but the background for that block is the light colored image. I need to remove the green background behind the text.

Any help would be appreciated.
0
Comment
Question by:isaacr25
10 Comments
 
LVL 19

Accepted Solution

by:
Montoya earned 100 total points
ID: 34180398
I'm away from my own computer, so I'm offering very limited help. To find things like this out, I always use the FireBug extension in Firefox. That way you can just put your mouse over the item in question and look at the CSS in question. Since I'm away from my Mac, I don't have the plugin to help you now.

Hopefully it will at least lead you in the right direction, or provide help for the future.
0
 

Author Comment

by:isaacr25
ID: 34180414
I already tried using Firebug. The problem is that it shows fine in FireFox.
0
 
LVL 13

Assisted Solution

by:dsmile
dsmile earned 300 total points
ID: 34180451
I suspect the problem is that jquery auto rotation text is forced to use some style that isn't supported on IE.


In jquery.cycle.all.min.js, I think this line is the cause
if($.support==undefined){$.support={opacity:!($.browser.msie)};}

Change it to

if($.support==undefined){$.support={opacity:1};}

then you should see that strange background disappears.

I think opacity might make the background of the text transparent so that the page background appears on that area.
0
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 52

Assisted Solution

by:Carl Tawn
Carl Tawn earned 100 total points
ID: 34183418
I agree, it is an opacity being applied to this element:

<div class="views_slideshow_singleframe_slide views_slideshow_slide views-row-1 views-row-odd" id="views_slideshow_singleframe_div_specials-block_1_0" style="z-index: 2; position: absolute; filter: alpha(opacity=0); BACKGROUND-COLOR: #3f572c; zoom: 1; display: none; top: 0px; left: 0px;" jQuery1290355288201="3" oldblock="block" cycleH="28" cycleW="905">

The style is being applied inline so must be coming from the JQuery script.
0
 

Author Comment

by:isaacr25
ID: 34184024
Ok... that worked... the green background is gone!

One more thing... the text in IE looks horrible! Its really jagged. Any suggestions?
0
 
LVL 13

Assisted Solution

by:dsmile
dsmile earned 300 total points
ID: 34186843
0
 

Author Comment

by:isaacr25
ID: 34199232
Where would the code in that article go? Does it go in style.css?
0
 
LVL 13

Assisted Solution

by:dsmile
dsmile earned 300 total points
ID: 34204271
Create a new style in style.css with this code

.goodAntiAliasing {background-color: white;
      opacity: 0.5;

        /* IE 8: yes, it is ugly but it has to be on one line. :-( */
        -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100)";

        /* IE 6,7 is more flexible: it can be on multiple lines. */
      filter: progid:DXImageTransform.Microsoft.Chroma(color='white')
                progid:DXImageTransform.Microsoft.Alpha(opacity=100);

}

then put it in those "field-content" styled divs in your htm so it looks like this
<DIV class="field-content goodAntiAliasing">

It runs well on IE but gives FF a blur blackground on that rotation text area.
So you have to write some code to apply it only when user's browser is IE. And this part is what you might do easily, I think :)


0
 

Author Comment

by:isaacr25
ID: 34321414
I'll be trying this solution this weekend. Thanks.
0
 

Author Comment

by:isaacr25
ID: 37957271
Haven't tried this solution yet. I will try soon.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question