Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML Tabs with pixelated border

    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.
    Last edited by beazley66; 04-06-2011 at 02:10 PM.

  • #2
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    What browser are you seeing this in?

    And the phrase is bona fide, not bonafied!

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Apostropartheid View Post
    What browser are you seeing this in?

    And the phrase is bona fide, not bonafied!
    using IE8
    and thanks for the correction...

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BulletTimeBill View Post
    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.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by beazley66 View Post
    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.
    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?
    Teed

  • #8
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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.
    Last edited by beazley66; 04-06-2011 at 06:51 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •