catonthecouchproductions
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
I tried doing the code below but it won't work
Thoughts?
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; }
I tried doing the code below but it won't work
.wysiwyg img.fitbriefingEntryFirstImage{width:auto;height: auto;}
Thoughts?
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?
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?
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
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?
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.
ASKER
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;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Second one worked, thanks!
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.
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.fitbriefingEntryFirstI
Open in new window
Otherwise it would be
Open in new window