need two images edges fixed

Hi!

Could someone please fix the rough edges of these two images?
They are currently very fuzzy.
TIA
 end of navigation bar image 1 end of navigation bar image 2
TrueBlueAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
Fuzzy?  What do you want to change about them?
0
TrueBlueAuthor Commented:
Ray Paseur,

If you look at either end of the top navigation bar on this page using IE8 and zoom to either 200 or 400 percent you can see that the images look jagged.
http://www.topsecurityinc.com/ 
Below is a picture of what I mean.
picture of jagged image
0
Ray PaseurCommented:
OK, here is the source code that uses those end cap images:

    <img src="web/images/global_bar_bk_r1_c1.gif" alt="" style="width:15px;height:42px;float:left">
    <img src="web/images/global_bar_bk_r1_c3.gif" alt="" style="width:18px;height:42px;float:right">  

The actual size of the left end cap is 15x42 pixels.  The actual size of the right end cap is 14x42 pixels, so it is safe to assume that the styling may be part of the problem, since it will try to stretch the image somehow.

I think I might make the right cap be a mirror of the left cap (the left one is the better image) and use styling that matches the width exactly.  Not sure if this is any better, but you might try it. Left end Right end
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Paul SauvéRetiredCommented:
If you want to make the edges sharper, simply create a much larger rectangle with rounded corners, then reduce the size.   rectangle 8 x 1,5
0
Paul SauvéRetiredCommented:
Maybe NOT!
0
TrueBlueAuthor Commented:
Ray_Paseur:

That cleaned up the image.
Any idea which rule I need to edit to get rid the 3 pixel horizontal space between the right end cap and navigation bar?
TIA
0
Ray PaseurCommented:
Thanks for the points.  I'm not sure about that part, but I would look at padding and margin in the CSS.  IMHO the fact that there are defaults other than zero for these values is a huge design flaw (as is the fact that invalid tags are silently ignored).  But what can I say?  The people building the WWW are young and inexperienced.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Graphics Software

From novice to tech pro — start learning today.