...

View Full Version : HTML Tabs with pixelated border



beazley66
04-05-2011, 11:44 PM
Hi ,

I'm a new member here, and hope to learn more from your collective expertise in coding. I have an annoying issue with the tabs for our website.
There is faint non-uniform pixelation around each tab. Each tab is separated by a space, and each tab was built independently, and Mapped.

The code used for the tabs also includes this onmouseover syntax:

[CODE]<a href="http://cameronbrett.ehclients.com/index.php/2011/principals"><img src="http://cameronbrett.ehclients.com/images/principals.png" style="opacity:1.0;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" alt="principals" hspace="2" vspace="0" border="0" align="left" /></a>[CODE]

Is there a way to eliminate the black pixelation around the tabs?
Does the problem have to do with rounded corners?
Thanks in advance for any advice any of you can provide.

BulletTimeBill
04-06-2011, 10:21 AM
Well the problem here is...you're a designer :P You don't even have to read it to tell that. One thing all designers have is a love for images. "IMAGES FOR EVERYTHING MWAHAHAHA".
On a more helpful note, i'm sure i've seen small images like that show up a lot better on the web, what did you use to create them? Web browsers don't have all the magic that your software does, stuff will become slightly pixelated. This can also depend on the browser, Internet explorer for example renders images horribly. I'm not sure if it can be fixed or not, someone might have an idea though.
While we're on the topic though, from a coding perspective, you could just use css background colours for that. They will be rectangular by you can employ css 3 to make those images rounded for those it is compatible with.
Also you shouldn't have all that text as images. Just use text. No, it won't look as pretty but if you use images, no one can copy paste anything (they may want to?), it won't be available to screen readers, but most importantly google will ignore all of it and you won't get a high ranking on there, if at all.

Apostropartheid
04-06-2011, 12:13 PM
What browser are you seeing this in?

And the phrase is bona fide, not bonafied!

harbingerOTV
04-06-2011, 01:10 PM
Most likely because you are using png images. IE hates adding CSS opacity to png images. This may not be the issue but, look at it in IE. Looks pretty bad.

It looks like your navigation is always on a white background. There is no need for transparency and no need for png images. Re-cut all the buttons into jpg with a white background.

beazley66
04-06-2011, 02:00 PM
What browser are you seeing this in?

And the phrase is bona fide, not bonafied!

using IE8
and thanks for the correction...

beazley66
04-06-2011, 02:08 PM
Well the problem here is...you're a designer :P You don't even have to read it to tell that. One thing all designers have is a love for images. "IMAGES FOR EVERYTHING MWAHAHAHA".
On a more helpful note, i'm sure i've seen small images like that show up a lot better on the web, what did you use to create them? Web browsers don't have all the magic that your software does, stuff will become slightly pixelated. This can also depend on the browser, Internet explorer for example renders images horribly. I'm not sure if it can be fixed or not, someone might have an idea though.
While we're on the topic though, from a coding perspective, you could just use css background colours for that. They will be rectangular by you can employ css 3 to make those images rounded for those it is compatible with.
Also you shouldn't have all that text as images. Just use text. No, it won't look as pretty but if you use images, no one can copy paste anything (they may want to?), it won't be available to screen readers, but most importantly google will ignore all of it and you won't get a high ranking on there, if at all.

OK.
I'm actually an architectural designer. I have never coded ANYTHING until now. Why? I hired a website designer to create this site. I fired the website designer months ago, violation of contract. Meaning, I inherited the structure of site, and the syntax of the site as is, complete with spelling errors, (which I will fix.) I'm learning as I go. Thanks for your input.:mad:

teedoff
04-06-2011, 02:23 PM
OK.
I'm actually an architectural designer. I have never coded ANYTHING until now. Why? I hired a website designer to create this site. I fired the website designer months ago, violation of contract. Meaning, I inherited the structure of site, and the syntax of the site as is, complete with spelling errors, (which I will fix.) I'm learning as I go. Thanks for your input.:mad:

hmmm the bad thing is, now as you have said either you or another web designer has inherited his/her bad work. Might have been better to stick it out until at least a somewhat finished product. Then pay them only what the site work was worth..lol

Can you post a link to the site? or did you and I missed it?

beazley66
04-06-2011, 02:32 PM
hmmm the bad thing is, now as you have said either you or another web designer has inherited his/her bad work. Might have been better to stick it out until at least a somewhat finished product. Then pay them only what the site work was worth..lol

Can you post a link to the site? or did you and I missed it?

I'm sticking it out until I get a somewhat finished product. I decided(right or wrong) to take up learning to complete it myself.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum