[olePigeon]

ClickWidget: Contact

I'm having a problem with this webpage. I can't get my navigation links to work correctly.

I have it set so the Top is at 250px. That's where I want it. However, the hover isn't working over the image. If I move the links to, say, 200px, they work fine. If I move them past to 260px or lower, the links don't work at all.

Maybe someone can explain to me why it stops working after a certain Y coordinate? This is very frustrating.


I also noticed that, when I set my background image as a repeating image so I could dynamically extend the website to any length, WebKit messes up on the rendering. The background image does not line up with the main part of my website on every other pixel as I resize the window. Lines up correctly under FireFox and Internet Explorer. So I can only guess this is a WebKit problem.

Any suggestions?

[olePigeon]

I solved the background problem. I didn't know I could have multiple backgrounds, layered on top of each other. So I put the bars on repeat layered beneath the main background. Since it's apart of the same element, it's no longer messing up. Now I just change the X height and make it as big as I want.

Still don't have a clue whats going on with my links. To be honest, I just copy/paste from an example of some navigation links and replaced it with my own images. I would be open to any other method.

I miss the simple hovers in HTML3.

[besson3c]

I would suggest learning how to use the Webkit inspector, it's your friend. I'm not sure how to reproduce this problem of yours, I'm not sure I get it, but the problem might have to do with layering and ambiguity over what the top layer should be. Playing around with z-index might help you. Otherwise, adjusting heights so that the elements only consume the space they need would be what I'd suggest. You can position things using your cursor keys with the Webkit inspector so that you save a ton of time in coming up with the exact numerical values to things. The inspector will also highlight your div blocks on mouseover so that you can see what kind of space they consume, according to your CSS.

As far as the background images, I'd have one absolutely position div tag with the background image of the non-repeating part of the pic - everything down to around where the nav is, and a repeating background pic in a separate div where your content goes.

I'd suggest making the navigation a background sprite too, it will save a ton of time should you have to alter the navigation.

[olePigeon]

Well, before anyone spends too much time on this, I'm just going to start from scratch again, see if I can't find out where it's messing up. I'm also moving all my background images into a single div element. I'm wondering if breaking everything up into sections was causing it to mess up.

It's also possible I have a stray bracket or something that's not working.

[andi*pandi]

Glad you've got the backgrounds sorted. The hover is working for me now in Firefox.

I don't think you need absolute positioning as much as you're using it. You can get by with floats and margins and it makes life simpler.

Without rejiggering your whole file though, my first suggestion would be to move the background from the li to the a.

#home a { background: url(images/home.png) no-repeat 0 0; }
#home a:hover{background: url(images/home_u.png) no-repeat 0 0; }

I also like Firebug for debugging css and playing around on the fly.

[besson3c]

Originally Posted by olePigeon 

Well, before anyone spends too much time on this, I'm just going to start from scratch again, see if I can't find out where it's messing up. I'm also moving all my background images into a single div element. I'm wondering if breaking everything up into sections was causing it to mess up.

It's also possible I have a stray bracket or something that's not working.

You can test for stray tags by seeing if the page validates. There is a great Safari extension for this. Not only is validation useful for ensuring that browsers are not put in quirks mode, but it's actually a useful troubleshooting tool since it will identify the missing/extra div tag by line number.

[besson3c]

Originally Posted by andi*pandi 

Glad you've got the backgrounds sorted. The hover is working for me now in Firefox.

I don't think you need absolute positioning as much as you're using it. You can get by with floats and margins and it makes life simpler.

Without rejiggering your whole file though, my first suggestion would be to move the background from the li to the a.

#home a { background: url(images/home.png) no-repeat 0 0; }
#home a:hover{background: url(images/home_u.png) no-repeat 0 0; }

I also like Firebug for debugging css and playing around on the fly.

I agree that putting the background image on the a tag is a good idea... Your implementation above is also just a smidge away from a background sprite implementation, which I'd recommend.

I used to live and breath Firebug until the Safari/Webkit inspector was updated to do pretty much all of the same stuff you can do with Firebug. The only exception is with tracing AJAX requests, which is a feature you can get in the Webkit Nlghtlies or Google Chrome.

[olePigeon]

Originally Posted by besson3c 

Playing around with z-index might help you.

I didn't even know what a z-index was, so I Googled it.

That was my problem! Man. Hours and hours playing with this thing trying to get it to work. Turns out that my links were slipping under my main content area making them not work. So when I set the z-index to 10 or something, and everything else below it, it worked.

Now I know how to layer things properly.

[olePigeon]

Tadaaaaa!

ClickWidget: Contact

[besson3c]

Cool, congrats!

[olePigeon]

Great. Tested the website with every browser. Of course it works absolutely every single browser that I could throw at it except the one that matters: Internet Explorer.

Website is completely destroyed. Nothing shows up.

Now I remember why I hate Microsoft.

[olePigeon]

I validated my code on the About page, using that as a template for the rest. It is now XHTML compliant.

So I narrowed it down to CSS issue. Apparently multiple backgrounds is a feature in CSS3. That means every browser on the planet supports it except Internet Explorer, that worthless piece of shit browser.

Now I have to go back to breaking everything up into parts with single backgrounds.

God damn it I hate Microsoft.

[andi*pandi]

You don't have to break it up. As I said before, put the stripey bits as background for body, and then put the face bit as background for nav, or first element, or anything.

[olePigeon]

Originally Posted by andi*pandi 

You don't have to break it up. As I said before, put the stripey bits as background for body, and then put the face bit as background for nav, or first element, or anything.

When I do that, it doesn't line up on every other pixel as you resize the window (the problem I described above.) Some sort of rendering bug with WebKit (looks fine in FireFox and Opera.)

What I may be able to do is make a #main div that has the repeat-y image, then nest everything inside that as if it were the body.

[olePigeon]

ClickWidget: About

OK, everything looks good now except that my right most navigation link does not show up. I think, again, is because I used two background images. So I'll combine the two and make a single image for that.

[olePigeon]

OK, looks good across the board except for my contact form. Explorer messes up all the margins. I may have to tweak it with Explorer, then make an exception that loads that CSS when people use Explorer, then the default CSS when using anything else.

[andi*pandi]

Which version of explorer are you aiming for? There are some famous double-margin bugs with IE.

To target IE6 use underscore prefix, after you define it for the rest of the world.

margin: 15px;
_margin: 10px;

To target IE7, use *

for a few hacks it might be simpler to use these than do browser sniffing.

[olePigeon]

Just for margin, or for all the properties?

[andi*pandi]

For anything!

[besson3c]

Originally Posted by olePigeon 

OK, looks good across the board except for my contact form. Explorer messes up all the margins. I may have to tweak it with Explorer, then make an exception that loads that CSS when people use Explorer, then the default CSS when using anything else.

I strongly suggest a CSS reset library. It fixes a lot of these sorts of problems automagically.

[olePigeon]

Fixed it. Just loading the CSS externally got it to work in IE 7 and 8. I don't understand it.

[besson3c]

Originally Posted by olePigeon 

Fixed it. Just loading the CSS externally got it to work in IE 7 and 8. I don't understand it.

I'm glad you fixed it, you shouldn't have to use IE hacks for something like this. IE hacks come into play when you need to add in support for stuff like CSS inline-blocks, rgba, the dreaded IE 6 float bug, etc. but for just getting margins to look the same you shouldn't need to incorporate any hacks. You don't need to include multiple background images within a single div to make this design work.

External CSS is likely better for SEO anyway, and certainly maintainability, so I'm glad you got this to work!

[olePigeon]

I included a CSS reset library like you suggested, and this even removed the main text shifting that I was experiencing when using IE6/7.

Thanks for the tips, it looks like it's finally all coming together.

[besson3c]

Originally Posted by olePigeon 

I included a CSS reset library like you suggested, and this even removed the main text shifting that I was experiencing when using IE6/7.

Thanks for the tips, it looks like it's finally all coming together.

Good choice going with the Yahoo/YUI CSS reset library, that's the one I use too. You can actually make your page load a little faster by using Yahoo's CDN (content distribution network), by simply replacing the call in your head tag for:

css/reset-min.css

with:

http://yui.yahooapis.com/3.3.0/build.../reset-min.css

In addition to a very slight performance boost this will also give you one less file to maintain, and a very easy way to upgrade this library.

I CSS reset libraries an absolute must for making webpages, they remove so much of the hassle of wrestling with IE.

[besson3c]

BTW, jQuery is available on Google's CDN should you want to do the same thing with jQuery.