CSS: "Rollover" problem

[foolishone]

On this page, the "rollovers" (the gray images become invisible on hover, revealing the blue background images) don't line up. Is there any way I can fix this? The backgrounds and front images(the disappearing ones) don't line up.

Here's the CSS.

^fo

[Deitel]

Why are you using images?

It seems to be just text. It would be a lot easier, and a little faster, if you simply change the text colour on hover instead of move the image to show another one.

[Stryker]

I'm going to fully agree with Deitel.
CSS is so much more powerful and flexible than just replacing an image. Change the links to text and make use of CSS to change the color, border, background, position, etc... and I think you will be much happier with the results. Plus your page will load faster for slower connections because there won't be any images involved.

If you're REALLY set on using the images, let us know and we can figure it out, but I would recommend ditching the images.

If you need a hand with it, feel free to ask.
Stryker


• • • • • • • • • • • • • • • •
EDIT: take a look at a few samples to see how easy it is. Combine this stuff with a couple of images or other effects, and you can do some pretty cool stuff. Just right-click and View Source. Everything is in that page. Not the most complex stuff, but that's the beauty of it!

[Deitel]

Just a bit of a start.

In the css use the following:

a.menuItem
{ 
  text-decoration: none;
  display: block;
  color: #000000;
  padding: 8px; 
  line-height: 1em;
}

a:hover.menuItem
{  
  color: #FF0000;
}

And then simply use the following for each menu item:

</a>

Hope this helps.

Just ask if not

[foolishone]

Since the post, I have completely changed the CSS, but I am still having a tough time getting things positioned right (as in not correctly, not float:right; right).

I am going to bed right now, but in the morning I will upload the current files and you can see what I am dealing with.

(I did switch over to text instead of the images because of the load time.)

Til the morning...

[foolishone]

I slept really late so sorry about the 'in the morning' thing.

If you guys ever thought of a diaster, my page is one. Colors, text, and images are all over the page, not lined up, etc...diaster.

To start, my goal is to look just like this, well really only the auto centering part of the site, with two fluid divs on either side. Then from top to bottom, all lined up, in the center div would be banner, navigation, content, and footer.

WARNING: the following code looks like it was written by my dog. A validation check would surely crash the server.

I have taken the code from simplebits and chopped it down, and probably messed it up, and put it into my own file. (Don't tell him.) But the sight is so complex with 5 or 6 CSS sheets that it get bulky.

The CSS for my page are found here and here.

If you are using IE, don't even try and look at the pages, as I have basically given a few explicits to IE users and written them off until I get it the way I want in FF, Opera, Netscape, etc., the real browsers.

First, I need the banner and navigation to 1) line up and 2) be auto-centered on every browser window width.

^fo

[Stryker]

Hiya foolishone,
If you like, here's a little "nudge" in my recommended direction (I won't say the right direction, because others will have different approaches). I put together a quick and dirty sample for you to use, if you want it.

First, download these images and replace the ones you have with mine:
http://home.cogeco.ca/~stryker/pcmech/helpstuff/1.png
http://home.cogeco.ca/~stryker/pcmech/helpstuff/3.png
http://home.cogeco.ca/~stryker/pcmech/helpstuff/6.png
http://home.cogeco.ca/~stryker/pcmech/helpstuff/top.png
They still look the same on the browser, but removed some white space.

Next, grab this .html file and change the image links to match your URLs. You will need to change a couple of this before it will come out perfect in the browser. There is no style sheet, but I would recommend removing the CSS at the top of my page and creating a style sheet out of it. I put it there for easier download.

Feel free to change whatever you like, or not use it at all. Just a little cheat-sheet if you want to use it. Some don't like the use of tables, but I've never had a problem with them.

If you have any questions, feel free to post back.
Hope this helps.
Stryker


Edit: by the way... it's I.E. friendly, as well as other browsers.

[foolishone]

It works perfectly, thank you Stryker!

I have always loved tables, but I was a little hestitant to use them with CSS because I thought that DIV's would be easier to control and manipulate.

I had originally created the banner in Fireworks and chopped it up, and the thought of using the same image for all the dividers had never crossed my mind.

The page looks even better on my <24 hr old ViewSonic 19" Flat Panel.

^fo

[Stryker]

No problem fo, glad to help.

Many people will say tables are bad, but I have yet to hear a valid reason why. Positioning with divs and CSS isn't really easier (at least not to me anyway), just a different method. I meant to mention too... if you have the means to do so, you might be better off making the images .jpgs or .gifs. Generally you will get smaller file sizes and therefore faster load times for users.

By the way, NICE MONITOR!
I have a 19" Viewsonic, but it's CRT and probably about 14" deeper than yours!!! They make great products though.

[foolishone]

Newegg for $300, 8ms and only 2.5" deep. VGA only, but after seeing this, I don't know how DVI could any better. 0 dead pixels.

EDIT: Uploaded it and...yeah....it doesn't quite come out. Take a look. Looks find locally. FF adds 70 pixels of whitespace on to the bottom. Fireworks, Windows, Paint, everything tells me thats 683 X 152.

^fo (For record, its short for foolishone, not.....)

[Deitel]

Sorry for stopping my replies, but was away.

Tables are the easiest and best to use, I agree.

Its frames which cause the problems. I think we have all seen a page which keeps loading inside a frame constantly

Never had that problem with a table!

Edit
----

Just checked the page. You banner image size, according to IE, is 703 x 212. Same when I downloaded it.

Make sure you crop the image before you save/export it to remove the extra canvas.

If the problem isn't happening locally, make sure you uploaded the correct image file online

Also, try and use jpg/gif for images. png works, but gif's load faster and jpg are better quality. I'd recommend gif for your images.

[foolishone]

I am back. (I left on Tues. and drove down to FL to see the shuttle launch and well...yeah...)

So I did a little tweaks to the design, and I think I am heading in the right direction, I am still not sure about the gray sides, but that is fixable.

No longer is it a rollover problem but a gap problem. When I put the doctype up top it put a gap in between the banner and the links, and I can't get it down. As far as I know the code should pass a validator. BTW, the gap is in FF, IE doesn't stretch it to the end of the 683px wide cell, what's up with that?

Just for giggles, I am going to try and see if I can get the small blue images to a jpg format, from a png, but I don't know. I still don't like what the conversion did to the top of the banner.

Link

^fo

[Stryker]

Should be as simple as changing your doctype declaration. You are using strict, but if you change it to transitional you should be alright (see below). It looks strange in FF because it tends to be more "picky" when it comes to interpreting code, whereas I.E. is a little more forgiving in most cases.

Change your doctype to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Let me know if it works.
Stryker

[foolishone]

Alright, I got that solved, but when I viewed it in IE, it didn't quite line up. It seems like an easy fix, I hope. If it isn't, I'm not too worried about it.

The 'home' link is a little to the right and last image is a little left.

^fo