[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Can't get UL navigation list to look the same in IE and Firefox.

Posted on 2005-04-05
11
Medium Priority
?
238 Views
Last Modified: 2008-03-10
Howdy.  Here is a sample: http://home.comcast.net/~e394td/temp/list/

I want the navigation list to look the same in IE and Firefox.

This is what I'd like to fix:

1) In IE, get the nav list to stay within its own div.  Right now it extends pretty far into the content div.

2) In IE, get sub-level nav tabs to be right-aligned with the top-level tabs.

3) In both IE and FF, get consistent spacing between nav tabs (for example, the space at the bottom of the sub-tabs is too large, and there is no space between the first top-level tab and the sub-level tabs).

Also, if anyone knows of good examples of nested navigation lists, I'd love to see them!

Thanks!
0
Comment
Question by:vulture99
  • 4
  • 3
  • 3
10 Comments
 
LVL 11

Accepted Solution

by:
matt_mcswain earned 300 total points
ID: 13713665
1 & 2)Try setting your width on #navcontainer li a selector from 100% to auto
3) The thing is it's adding the bottom border of the last nested li and parent li. I fixed it by adding these inline styles:
                            <li style="border-bottom:0;"><a href="#" tabindex="1">Home</a>
                              <ul>
                                    <li style="padding-top:1px;"><a href="#">Home.sub1</a></li>
                                    <li><a href="#">Home.sub2</a></li>
                                    <li><a href="#">Home.sub3</a></li>

                              </ul>
                        </li>

There may be a more elegant way though.
0
 
LVL 1

Author Comment

by:vulture99
ID: 13713796
1 & 2) Moving from 100% to auto works, but now the tabs are no longer links in IE.  Just the text in the tabs are links.  Any ideas?

3) This works.  The nav bar will be dynamically built via PHP, so it will work to assign inline styles (or classes) accordingly.  If anyone has a more elegant solution, I'm all ears!

Thanks Matt.
0
 
LVL 11

Expert Comment

by:matt_mcswain
ID: 13714227
Hmm, this is tricky. I believe IE needs the anchors to have width 100% to behave appropriately.
You could mimic the behavior with javascript or possibly a hack job with negative margins, but let's see what others have to say.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 18

Expert Comment

by:Eternal_Student
ID: 13714755
It's a bit hacky but to get that right you could use this on the relevent widths:

/width: 100%; */for IE/*
width: auto;


Unless some-one else has a better solution for this specific problem?

Here is a good place to find css list menus:

http://css.maxdesign.com.au/listamatic/

0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 13714760
/width: 100%; /*for IE*/
width: auto;


Sorry I did my comments wrong [it's early OK] !!
0
 
LVL 1

Author Comment

by:vulture99
ID: 13722531
The hack doesn't work - on IE it just pushes the tabs back into the content area, and gets rid of the sub-tab effect.  width:auto works the best so far, except that the tabs are no longer links.

Thanks for the url.
0
 
LVL 18

Assisted Solution

by:Eternal_Student
Eternal_Student earned 300 total points
ID: 13727512
There is a bug in IE, when using un-ordered lists in this way, where width:auto is not applied. That is why the background is not 'clickable'.

That is why you need to give each li a class where the width is:

/width:100%

except for the nested list where you need to specify [in the same way] a pixel amount so it doesnt push into the content area.


Do you follow ?



0
 
LVL 11

Expert Comment

by:matt_mcswain
ID: 13729068
The problem is, he already had it at 100%, but IE blows up the nested lists when using 100%. So I suggested using auto, which fixes the blown apart nested list, but makes the rest of the tab unclickable.

0
 
LVL 11

Expert Comment

by:matt_mcswain
ID: 13729099
Ah, you're suggested fixed width for the nested list.
Ok, nevermind. :)
0
 
LVL 1

Author Comment

by:vulture99
ID: 14286382
Eternal Student, your hack worked!  Thanks.  Here are the two relevant classes:

#navcontainer ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
/width: 100%; /* for IE to make entire "tab" a link */
}

#navcontainer ul ul li a {
margin-left: 15px; /* indent level 1 */
/width: 117px; /* for IE to make entire "subtab" a link */
}

A bit hacky, and I worry about explicity defining the width in pixels, but it is now working the same in both IE and Firefox so I can't complain!  Thanks.  This combined with Matt's inline style fix has it working great.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month19 days, 13 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question