Link to home
Start Free TrialLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

asked on

Minor CSS Issue

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?
Avatar of jonahzona
jonahzona
Flag of United States of America image

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



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?
Avatar of catonthecouchproductions

ASKER

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
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?
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 User generated image User generated image
Working on it. You may have to wrap these in a div for it to work in IE. Give me 5.
Try adding this:

.wysiwyg a {
  display: inline !important;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of jonahzona
jonahzona
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Second one worked, thanks!