Hi there, im trying to get out of my older HTML/Javascript menus, so im delving into the world of CSS as ive never quite got round to learning it.

Now this is my first attempt and sadly its not going well.

If you go on http://www.a46designs.com/125 you'll see my issue.

None of the boxes align anymore with the CSS. It was perfect when they were IMG SRC tags with a link, but not with the CSS Roll-Overs ...

Please help as this is driving me mad.

Thanks,

Luke.

I wrote an article awhile back about how to create a simple navigation bar. I think it's basically what you're trying to do so hopefully it will help.

I think the only difference is that I just used a background color and you're looking to use an image to change for the rollovers.

You should be able to replace what I have for the css property background with what you want for background-image and I think it will still work.

Hope it helps and feel free to ask more questions if it doesn't.

Hi there, i have the roll-overs working and everything, its just the alignment of everything, Because my one single horizontal menu is made of roll-overs and just img src images, the roll-vers and images are all out of sync ...

I dont know how to get them to align.

Thanks,

Luke.

Oh sorry, Just so you know it's not working at all in Firefox so when I looked it didn't seem like you'd gotten far. I see it working better in IE though.

The best way I find to create any menu or navigation system in css is by using a list. That's how I do it in the link above. It's much easier to line things up that way, though it may take a little practice to get used to working with the lists and the css for them.

Welcome to Webmaster-talk

I was able to get everything lined up by adding the following css

a
{
position: relative;
right: -2px;
bottom: -4px;
}

This will move all your <a> tags 2px from the right (so to the left) and 4px from the bottom. Watch out though because any <a> tags on the page will take this style, better to change all your navigation links to the same class, like class="navigation" and use id="home", id="forum"

<a class="navigation" id="home" href="#"></a>
<a class="navigation" id="forum" href="#"></a>

now to refer to all of these with class navigation of the <a> tag

a.navigation
{
position: relative;
right: 2px;
bottom: 4px;
}

and change each of your id styles like so

#home{
display: inline;
width: 61px;
height: 49px;
background-image:url(images/home.gif);
border:none;
}
#home:hover{
background-image:url(images/home_roll.gif);
border:none;
}

I also suggest taking vangogh's suggestion about lists, makes it more organized and clearer. Still doesn't work in Firefox though...and not sure why. Anybody?

I think the problem in Firefox is that you can't have a background image on a link that's set to display inline. As soon as I set the links to display: block the images showed. but of course the alignment isn't right.

Lists. I promise lists will make this easier.

I tried grabbing his html/css and putting them in lists, It still didn't load in firefox.

I don't think you can take the same code and just drop it into a list. The background images would go on the list items instead of on the links directly.

There would be a little bit or recoding as much of the css would go on either the entire list or the list items.

Okay, your loosing me, im quite new to CSS as everything before was HTML/Javascript, lol ...


Luke.

The position thing does work, but still leaves a little gap to the laft and right of every image ... So its not the solid bar that it's suppose to be which I can do in JScript ... Why is it always difficult to learn new stuff when you can do it already [even if it is ugly code] ...

Also, as many have found, it doesn't work in FF ... I use Firefox 2.0 RC3 and that doesn't see it either ...


Thanks,

Luke.

For one thing, you need a valid DOCTYPE.
Second, I don't see that you have a list, you have images. Doing the menu as an unordered list is the preferred method. The images become the backgrounds for each link.

I hate to resurrect this old thread, but I'm really hoping that someone can help me with this.

I copied the language used in the article exactly. Works like a charm in Firefox, but has weird spacing and is spreading onto two lines in IE.

http://www.jessweiss.com/ansaphone/index2.html

Any help would be greatly greatly appreciated.

Lynne, you've got a variety of problems there. However, the one causing you headaches in IE is the attempt to use the *html hack.

In your CSS file you have this:

HTML UL LI {
FLOAT: left;
HEIGHT: 1%;
}
HTML UL LI A {
HEIGHT: 1%
}

The proper syntax for that is *html ul li - you forgot the asterisk. As soon as I fixed that, the menu snapped where you want it.

You also should know that the *html hack will BREAK in IE 7 so get in the habit of using conditional comments in your pages to target separate CSS files that contain only the hacks needed for IE 6 and below.

A couple other minor things. You use div id=content - the name of the ID or Class should be enclosed in quotes.

Instead of separate lines for padding and margin values, use the shorthand:
padding: 5px 2px 4px 6px = Top Right Bottom Left - TRouBLe

CSS classes and IDs are case sensitive. You should get in the habit of writing your CSS in all lower case. I use caps in ID or class names but I use camelCase

Hope that helps

I'm so not trying to seem dense here... but when I look at my style sheet, I do have the asterisk.. it reads like this:

/* Fix IE. Hide from IE Mac \*/
*html ul li { float: left; height: 1%; }
*html ul li a { height: 1%; }
/* End */

Is there a different location to which I must add the asterisk instead?

Also - that is for the hover menu, which is actually on the left hand side. The problem I'm having is with the green navigation tabs (home, about us, services, products, contact).

Do I need to add the hack to that portion of the style sheet, which is under "navigation starts here"?

Also, when you say I need to start using conditional comments, I'm lost. Can you point me to an article or resource which discusses them?

Thanks so much in advance - I truly appreciate it.

UPDATE: Well, the problem is now fixed, but I have encountered another one - doesn't it just figure...

I fixed the problem by removing float: left; from the html fix in this line

* html ul li a { height: 1%; }

Seems to have fixed the lineup problem I was encountering in IE, and Firefox is still working.

However, now the rollovers on this page aren't working - there are supposed to be submenus that show as you rollover some of the links on the left. They still work in Firefox, and they still work on this page which uses javascript rollovers, which uses the same stylesheet: http://www.jessweiss.com/ansaphone/services.html

Any thoughts - any other way to fix this problem? TIA - again!

What I wrote specifically referenced your css file when I downloaded it.. and that HTML hack was incorrect in that file. You should not be included a batch of hacks in your main css file anyway, it's going to cause you more headaches with IE 7 users as those hacks don't work any more and IE 7 will upchuck your layout.

Including any hacks for IE Mac is a useless exercise. It's a DEAD browser and most MAC people are going to be using the NEWER browsers and not IE.

Conditional comments - something ONLY IE will 'see' - read this article:
http://www.positioniseverything.net/...-dehacker.html

Rollovers on the left menu - they ARE working in IE 6 and FF 2.0. If they are NOT working in IE 7, it's because of the hacks you're using.

One other thing - specify a background color for the page body. I do NOT use the so-called 'standard windows colors' for my desktop. My default background is pale pink. Without a background color specified, what I see on your pages is a bunch of white boxes on a pale pink background . Other people may have other colors set.. ALWAYS use a background color.

LadyinRed- When you say "Always use a background color", are you referring to the code #333333 , or backgroundcolor="darkgrey" , or something else?

I meant:
body{background: #color value here; }

"body{background: #color value here; }"
Sorry, but I'm still not sure which you are referring to. I am asking if you use hexadecimal, or color name. I've seen both, but don't know which is correct.

What she means is. Always specify a background colour for the body element.
How you code it is up to you
Whether you use;
:#hexvalue, :colourname or :rgb(red,green,blue)
is immaterial. It's the fact that it is specified that matters

Gotcha... thanks.