Problem with different resolutions

[dawg9]

I created this header with an empty horizontal menu. I added the text to the menu with css. The problem that I'm having is that when I change either the resolution or font size the header/menu doesn't stay in line. Is this a result of me creating a header with an empty menu space and then adding the actual menu items later? I attached a copy of the header.

[Ryan Fait]

Could be a number of things. Please post a link to the page if you can

[dawg9]

Here's the link to the page:
http://www.betagammachapter.com/welcome.html

I haven't put in any IE special hacks or made use of the hover htc code yet.

[Ryan Fait]

Ah, you can't do it like that. Add a border to the <li> directly instead of using a background image for separations. Borders or a different background will solve this.

[dawg9]

Originally Posted by Ryan Fait

Ah, you can't do it like that. Add a border to the <li> directly instead of using a background image for separations. Borders or a different background will solve this.

Actually, the problem was me using an invalid align="center" in the div tag. The solution was to use css to center my objects. The background and the dividers had nothing to do with it.

[Ryan Fait]

Yes, but in other browsers, things aren't aligned properly. It looks horrible in Safari. It also looks horrible when you resize the text. Do this the right way!

[dawg9]

Originally Posted by Ryan Fait

Yes, but in other browsers, things aren't aligned properly. It looks horrible in Safari. It also looks horrible when you resize the text. Do this the right way!

What's the right way? Scrap my header that I took so much time to make? Why are their even tutorials on creating headers like this with dividers and all. Unless you're not explaining it correctly it seems as if you're telling me I can't have a menu like this and I just don't believe that. As long as I can get it to work in IE and FF I could care less about Safari or any other browser.

[Ryan Fait]

As long as I can get it to work in IE and FF I could care less about Safari or any other browser.

That's the wrong attitude for designing websites. There is no need to cut out anyone not using the main browsers or anyone who uses larger default text sizes when it's easier to do it my way.

If you do it this way, it works no matter what font, size, margin, padding, or anything that affects size changes. You also don't need to worry about changing the background image if you want to add or remove a link. There are hundreds of tutorials on this subject if my example just doesn't cut it for you.

Code: Select all

<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

Code: Select all

ul {
    width: 100%;
    height: 3em;
    background: #fff url(nav-bg.gif) repeat-x 0 0;
}
li {
    margin: 0 10px;
    font: 1em/3em arial,sans-serif;
    border: solid #fff;
    border-width: 0 2px;
    display: inline;
}