11 replies [Last post]
maxl
maxl's picture
Offline
Regular
United States, Fort Collins, CO
Last seen: 12 years 6 weeks ago
United States, Fort Collins, CO
Timezone: GMT-6
Joined: 2007-06-25
Posts: 20
Points: 0

Hi everyone. This is my first post here.

I have this unordered list that creates a horizontal link menu. there is nothing special or fancy about it, it just hold links. Im trying to absolutely position the UL and i've noticed that Firefox seems to display padding or a margin around the LI elements, while IE doesn't. I've tried specifying that all padding and margins be removed from the LI elements and from the UL element, but Firefox still renders it fatter compared to IE.

Here is the link to the site: http://www.olympusdentalceramics.com/index2.html

here is the CSS:

#nav{ position: absolute; height: 20px; width: 635px; left: 213px;top: 120px; padding: 0px;}
#nav ul { margin: 0; padding: 0; list-style: none inside;}
#nav li { font-weight: bold; font-size: 10px; font-family: "Trajan Pro"; display: inline; height: 15px; margin: 0px 30px 0px 0px; padding: 0px;}
#nav li#last-item { font-weight: bold; font-size: 10px; font-family: "Trajan Pro"; display: inline; height: 15px; margin: 3px 0px; }
#nav li a { text-decoration: none; color: #006699;}

I can't figure out whats happening and i'm quite new to the world of web development, especially when it comes to browser specific quirks.

Thanks!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 14 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

maxl wrote:I have this

maxl wrote:
I have this unordered list that creates a horizontal link menu. there is nothing special or fancy about it, it just hold links. Im trying to absolutely position the UL

Why, in heaven's name. There's nothing about that layout that I can see that would require such a trick and it's a good way to mess it up and make it brittle and, as you have found, not work right in some browsers.

But one thing we can be pretty sure of, and that's if it looks fine in IE and "messed up" in FF, it is IE that is lying to you. Firefox applies the standards correctly in 95% of the cases and if IE looks different it is almost always IE that is displaying it wrong.

I'd go back and re-think the layout from scratch. Then check your design in Firefox until it looks right and then, and only then, if necessary, fix it up for IE. It will save you tons and tons of time in the long run.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

maxl
maxl's picture
Offline
Regular
United States, Fort Collins, CO
Last seen: 12 years 6 weeks ago
United States, Fort Collins, CO
Timezone: GMT-6
Joined: 2007-06-25
Posts: 20
Points: 0

Some updated CSS

Here is the latest CSS. i think its a bit cleaner and less confusing:

#nav-home { position: absolute;width: 550px;left: 300px;top: 122px;padding: 0px; margin: auto;} #nav-home ul { margin: 0px; padding: 0px; list-style: none; border: 1px solid black; height: auto;} #nav-home li { font-weight: bold; font-size: 10px; font-family: "Trajan Pro"; display: inline; height: auto; margin: auto 3em auto 0em; padding: 0em;} #nav-home li#last-item { font-weight: bold; font-size: 10px; font-family: "Trajan Pro"; display: inline; height: auto; margin: auto 3px auto 0em; padding: 0em;} #nav-home li a { text-decoration: none; color: #006699;}

maxl
maxl's picture
Offline
Regular
United States, Fort Collins, CO
Last seen: 12 years 6 weeks ago
United States, Fort Collins, CO
Timezone: GMT-6
Joined: 2007-06-25
Posts: 20
Points: 0

Thanks for the reply. I have

Thanks for the reply. I have considered just using div's for the list and ordering them in a horizontal fasion. I will try this way if there is no resolution for this problem. But, i want to know why this simple horizontal list is being displayed differently in different browsers.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 14 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

maxl wrote:Thanks for the

maxl wrote:
Thanks for the reply. I have considered just using div's for the list and ordering them in a horizontal fasion. I will try this way if there is no resolution for this problem.

Good heavens! Don't do that. Menus are lists of anchors and belong in a list structure! It's easy to float the list elements (LI) left or just make them display:inline depending on the exact effect you want and that's the appropriate thing to do.

But positioning the overall UL element with absolute positioning is probably the wrong solution. As much as possible we should use the natural flow of elements rather than removing elements from it. You can use widths, margins, maybe negative margins if they prove necessary. CSS provides a large toolkit for this, and almost all of the time "position: absolute" is not the best tool though on occasion it is.

Don't forget that some who use your page won't see it. Blind folks, but also search engine spiders. Some might see it but not the graphics, and not the layout. They might have money to spend on your products too, might they not?

Have you looked at your site un-styled? I have and it actually looks better that way to me, but have you?

It looks to me that you are designing your site like a graphics artist would do it, not like a web designer would do it. But it is a web site, not a piece of paper! I invite you to take a look at the "truth and consequences of web design" site and spend some time reading it and understanding it.

Whew! End of rant....

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

maxl
maxl's picture
Offline
Regular
United States, Fort Collins, CO
Last seen: 12 years 6 weeks ago
United States, Fort Collins, CO
Timezone: GMT-6
Joined: 2007-06-25
Posts: 20
Points: 0

Ed, Thanks for the advice.

Ed,

Thanks for the advice. I will browse the documenation you have provided, i do need it. I don't like to absolutely position things, so its good to hear that sticking to the natural flow of elements and modifying that is the better route.

As i stated earlier, i am new to web development. i have been working with CSS for about 2 months so forgive me if i haven't quite figured out all the best practices yet. But, back to the problem at hand:

Why is my unordered list displaying padding in Firefox, but not IE?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 14 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Your CSS is awfully

Your CSS is awfully complicated for such a short page, but I did spot this:

#nav{ position: absolute; height: 20px; width: 635px; left: 213px;top: 120px; padding: 0px;}

You should also set margin to 0 - you have to control for both when restyling UL and OL lists because different browsers, perfectly legally, use different methods for indenting lists in their default styles.

But really, all that absolute positioning looks like a nightmare to me.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 14 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Here's a few of the tricks I

Here's a few of the tricks I learned for using lists to create a navigation window.

Unless we want the result to look like a list normally does, we need to use CSS to change it.

First, to remove the bullets, "list-style-type: none;".

Then we are left with the default padding or margin on the left to make room for the bullets. We need to set both padding and margins because different browsers use different methods and that is allowed by the standard so neither is wrong.

If we want the anchors in the list to behave like normal anchors which only follow a link if you click on the text then we don't have to style them further.

If on the other hand we want the whole "tab" to be clickable we must give the A element a "display:block". In compliant browsers that will make the A element expand to fit in the available space. IE will probably need more than that and in addition you may have to set width and height on the A element to 100%.

If we want to make the list a horizontal one we have two methods: 1. display:inline on the LI element, and 2. float:left on the LI element.

The former works well for simple tab menus where you want the A element to behave normally. The second will work in more cases though, especially when you want the entire area of each tab to be clickable.

IE sometimes has problems with floats where it adds in extra margins, and IIRR this is usually cured by putting a redundant "display:inline" on the floated element. Compliant browsers will ignore it as they should, IE will render better, and the validator will accept it as legal CSS.

I think that covers most of the common tricks.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

maxl
maxl's picture
Offline
Regular
United States, Fort Collins, CO
Last seen: 12 years 6 weeks ago
United States, Fort Collins, CO
Timezone: GMT-6
Joined: 2007-06-25
Posts: 20
Points: 0

Well i've tried both margin:

Well i've tried both margin: auto and margin: 0(em)(px) both of which have no effect on the rendering that FF outputs. if i didn't absolutely position the list and instead modified the margins as needed, i would still have the same problem wouldn't I? with FF's mysterious padding (or margins) on the LI elements, the exact position of the LI elements will vary from browser to browser.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 27 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Do you have a link? In

Do you have a link? In standards mode IE and FF can quite happily manage to display elements approximately the same size.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Not a margin/padding issue

You've made the list items inline. In the case of inline content, all white spaces are collapsed to one space. The white space (a newline, eg.) is effectively a character in the line of <li>s.

To remove the space, you must remove the white space. White space within the tags does not matter, so you can do something like this:


  • item content
  • <
    li>item content<
    li>item content

You might also consider floating the <li>s, which not being inline, don't include the white space between elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

maxl
maxl's picture
Offline
Regular
United States, Fort Collins, CO
Last seen: 12 years 6 weeks ago
United States, Fort Collins, CO
Timezone: GMT-6
Joined: 2007-06-25
Posts: 20
Points: 0

Thanks for your expertise

Thanks for your expertise Gary. That worked perfectly. It turns out that Mozilla (i love this browser) was displaying it correctly, while IE just does something behind your back that confuses you (or me in this case).