Rollovers and borders

[Muskie]

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

 

[heehee]

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.

 

[Muskie]

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

Nope, no frames. Just css and divs.

Whats weird about it in IE

 

[wheezy]

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

 

[Muskie]

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

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]

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.

 

[Muskie]

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.

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]

Whats weird about it in IE

Okay, I don't have IE here at work now.

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

 

[heehee]

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.

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.

 

[Benjamin]

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.

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.

 

[Muskie]

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.

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

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

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]

/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

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

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

 

[Muskie]

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

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

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]

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?

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.

 

[Muskie]

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.

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