Rollovers and borders

Discussion in 'Web Design and Development' started by Muskie, Feb 21, 2007.

  1. Muskie macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #1
    Ok this one is a two-parter.

    both based on this WIP www.visualcomm.com/site

    I've been loading content into a div tag with javascript. What I'd like to do is have the button corresponding to the current loaded html file stay at a certain state while that content is present. And when the user clicks on another button to load different content, that button will then change states. I don't even know if its possible with the way I'm doing this. So if someone could let me know either way that would be great.

    Second part, same site. Everything displays fine and works fine in Safari and Firefox (haven't had a chance to try IE yet though), except that in FF there are blue borders around the nav buttons. After noticing this, I went back into the stylesheet and added a border: none; to each of the buttons, but that didn't work. I'm thinking the borders are for some other reason. Possibly because of the javascripting. Any ideas?

    Thanks

    Zac
     
  2. heehee macrumors 68020

    heehee

    Joined:
    Jul 31, 2006
    Location:
    Same country as Santa Claus
    #2
    Are you using frames? I don't have photoshop installed (can't take a screenshot, using a pc at home) and in IE it looks weird.
     
  3. Muskie thread starter macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #3
    Nope, no frames. Just css and divs.

    Whats weird about it in IE
     
  4. wheezy macrumors 65816

    wheezy

    Joined:
    Apr 7, 2005
    Location:
    Alpine, UT
    #4
    So you're referring to how it always has the top button highlighted in yellow, despite what section you have clicked in?

    I just built the same idea on a website for myself, but I did it all with seperate HTML pages, it works, but I don't know if that's what you intended...

    www.jthomasphotography.net

    I did that in photoshop and imageready
     
  5. Muskie thread starter macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #5
    nah thats not what i need. the way i have it set up is so that main page only loads once. that way every time you click a link the whole page doesnt reload, just the content in that div tag. thanks though.
     
  6. Benjamin macrumors 6502a

    Benjamin

    Joined:
    Oct 27, 2003
    Location:
    Portland, OR
    #6
    probably...

    #navBar img { border: none; }

    personally i like your js for loading pages but search engines are going to have a hard time indexing those imo.
     
  7. Muskie thread starter macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #7
    That didn't seem to work either. //edit i fixed the border. i had to throw a style="border: none;" in the img src for each button.

    You have a point about indexing though. I suppose if someone searched for something and a search engine turned up info form the "team" page and they clicked the link it would jsut bring them to that HTML document, and not the website. Hmm. Could I get around this with meta tags or something?
     
  8. heehee macrumors 68020

    heehee

    Joined:
    Jul 31, 2006
    Location:
    Same country as Santa Claus
    #8
    Okay, I don't have IE here at work now. :D

    In IE, your "loading pages" came with scroll bars in the middle of nowhere.
     
  9. heehee macrumors 68020

    heehee

    Joined:
    Jul 31, 2006
    Location:
    Same country as Santa Claus
    #9
    What's wrong with having the page load everytime? Your site doesn't take that long to load. I know it's easier to manage, but it also creates more problems and it just doesn't look good.
     
  10. Benjamin macrumors 6502a

    Benjamin

    Joined:
    Oct 27, 2003
    Location:
    Portland, OR
    #10
    I was going to suggest each individual one but firefox with the web dev toolbar when i tried it worked with just the single all encompassing #navBar, oh well anyway good you have that solved.
     
  11. Muskie thread starter macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #11
    When you say "doesn't look good" are you refering to the same scroll bars as the ones you mention here?:

    Those would show up anyway, it's a div set to overflow: scroll; at least I haven't found a way to make them go away if there is no content to scroll.

    /edit: ok, i just found a mac here with IE on it. wow. it looks awful(granted its v 5.2.3 for mac). i dont even know where to start fixing it... thanks IE
     
  12. heehee macrumors 68020

    heehee

    Joined:
    Jul 31, 2006
    Location:
    Same country as Santa Claus
    #12
    It's the same with a PC in IE 6.

    May I ask why you want to have "loading pages"?
     
  13. Muskie thread starter macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #13
    So that if the user is on a slower connection it will give them at least some feedback as to what's happening while the html is loaded, rather than just staring at a blank box.
     
  14. CaptainCanuck macrumors member

    Joined:
    Aug 15, 2005
    #14
    The problem stems from FireFox and IE automatically placing borders around images that are within <a> tags (if that makes any sense). In order to fix it, you need the following CSS

    a img { border:none; }

    That should fix it while adhering to W3C standards. It will also work for any other images you are using as navigation icons or links in general.
     
  15. Muskie thread starter macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #15


    yea i discovered that. kind of annoying, though i guess it could be useful to some people. i have since fixed those instances
     

Share This Page