We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Minor CSS Issue

catonthecouchproductions
on
Medium Priority
235 Views
Last Modified: 2012-05-11
In trying to add some sharing icons to the bottom of some pages, the first icon gets enlarged.

Take a look at the bottom of
http://bit.ly/eJXrtY

The issue is because the CSS tells it to make the first image a certain size. I can't seem to undo it though.

If you look at a page that has an image on it already like

http://bit.ly/eEoNZo

you'll see that it looks fine.

The section of code in question is

 
.fitbriefingEntryFirstImage			{ float: right; width: 184px !important; height: 138px !important; margin-bottom: 12px; margin-left: 15px; background: url("http://wac.381d.edgecastcdn.net/80381D/images/img/img-bg-01.png") no-repeat top left; padding: 5px; }

Open in new window


I tried doing the code below but it won't work
 
.wysiwyg img.fitbriefingEntryFirstImage{width:auto;height: auto;}

Open in new window


Thoughts?
Comment
Watch Question

Top Expert 2011

Commented:
Are you not able to adjust the actual CSS file?

It seems like you are going to have a hard time overriding it because both the width and the height are given px dimensions and both have a !important property, telling it to not let anything override that particular property.

What you could try is also using the !important property.
.wysiwyg img.fitbriefingEntryFirstImage{
  width: auto !important;
  height: auto !important;
}

Open in new window


Of course this might only work if the CSS that calls it is called after the original CSS.

Also, the classification depends on the HTML markup. It should only be img.fitbriefingEntryFirstImage if your markup is
<img class="fitbriefingEntryFirstImage">

Open in new window


Otherwise it would be
.wysiwyg .fitbriefingEntryFirstImage img {
  width:auto !important;
  height: auto !important;
}

Open in new window



Top Expert 2011

Commented:
However, the easiest way would be to change the original CSS


From width: 184px !important; to the width you want, be it auto or a specified amount.

Again, do you have the ability to change the CSS?
Yes I do have the ability. Your first line of code worked but now I'm flush left instead of flush right.

http://bit.ly/eJXrtY
Top Expert 2011

Commented:
What do you mean? It looks like it is floating right to me. Probably because of the float that is on the class.

Try adding a float: left !important; as well.

But maybe I am misunderstanding you. What exactly do you want the Facebook logo to do?
Top Expert 2011

Commented:
Also, is it possible to adjust the markup so that the first image is the same as the other ones? If you can't change the markup, you could always copy the styling from the other images and apply the same to the first images CSS.
Got it man, I had my directions backwards earlier. So, it looks good in FF but if you look in IE7 the icons are stacked. Any thoughts on how to unstack them?

Screenshot attached Stacked icons Stacked icons
Top Expert 2011

Commented:
Working on it. You may have to wrap these in a div for it to work in IE. Give me 5.
Top Expert 2011

Commented:
Try adding this:

.wysiwyg a {
  display: inline !important;
}

Open in new window

Top Expert 2011
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Second one worked, thanks!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.