Rollovers and borders

Ok this one is a two-parter.

both based on this WIP http://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

heehee said:

Are you using frames? I don't have photoshop installed and in IE, it looks weird.

Click to expand...

Nope, no frames. Just css and divs.

Whats weird about it in IE

wheezy said:

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...

http://www.jthomasphotography.net

I did that in photoshop and imageready

Click to expand...

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.

Benjamin said:

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.

Click to expand...

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?

heehee said:

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.

Click to expand...

When you say "doesn't look good" are you refering to the same scroll bars as the ones you mention here?:

heehee said:

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

Click to expand...

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

heehee said:

It's the same with a PC in IE 6.

May I ask why you want to have "loading pages"?

Click to expand...

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.

CaptainCanuck said:

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.

Click to expand...

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