• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 227
  • Last Modified:

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?
0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 7
  • 3
1 Solution
 
jonahzonaCommented:
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



0
 
jonahzonaCommented:
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?
0
 
catonthecouchproductionsAuthor Commented:
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
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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

.wysiwyg a {
  display: inline !important;
}

Open in new window

0
 
jonahzonaCommented:
if that doesn't work, try

.wysiwyg a img {
  display: inline !important;
}

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
Second one worked, thanks!
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now