Browser Compatability

[BillyBoB]

I'm working on a site for a church down the road from my school. We have created the design and I have finished coding the nav drop down menu.

 

The problem I am experiencing is that the drop down menu(dd-menu) expands to the far right side of the design when it is supposed to adhere the width of the largest dd-item.

 

Example of working menu: (firefox)

 

Example of not working menu:(ie 6)

 

The stylesheet for the nav is:

#navigation {
color: #ffffff;
text-transform: uppercase;
margin: 0px auto;
width: 927px;
height: 34px;
clear: both;
}

.nav-btn {
font: normal 0.75em/34px Arial;
padding: 0px 30px;
height: 34px;
background: #cd6b2b;
float: left;
}

.nav-btn:hover {
font: normal 0.75em/34px Arial;
padding: 0px 30px;
height: 34px;
background: #a2460a;
color: #ffa56a;
float: left;
font-weight: normal;
}

.nav-sep {
font: normal 16px/34px Arial;
height: 34px;
width: 2px;
max-width: 2px;
overflow: hidden;
background: #cd6b2b;
color: #a2460a;
float: left;
}

.nav-left {
background: #cd6b2b url('../images/nav/corner_tl_au.png') no-repeat top left;
}

.nav-left:hover {
background: #a2460a url('../images/nav/corner_tl_au_hover.png') no-repeat top left;
color: #ffa56a;
font-weight: normal;
}

.nav-left-hover {
background: #a2460a url('../images/nav/corner_tl_au_hover.png') no-repeat top left;
color: #ffa56a;
font-weight: normal;
}

.nav-right {
background: #cd6b2b url('../images/nav/corner_tr_au.png') no-repeat top right;
}

.nav-right:hover {
background: #a2460a url('../images/nav/corner_tr_au_hover.png') no-repeat top right;
color: #ffa56a;
font-weight: normal;
}

.nav-right-hover {
background: #a2460a url('../images/nav/corner_tr_au_hover.png') no-repeat top right;
color: #ffa56a;
font-weight: normal;
}

.nav-cur {
font: bold 12px/34px Arial;
color: #463a1f;
background: #ffffff;
}

.nav-cur-left {
font: bold 12px/34px Arial;
color: #463a1f;
background: #ffffff url('../images/nav/corner_tl_au_cur.png') no-repeat top left;
}

.nav-cur-left:hover {
font: normal 12px/34px Arial;
color: #ffa56a;
background: #a2460a url('../images/nav/corner_tl_au_hover.png') no-repeat top left;
}

.nav-cur-right {
font: bold 12px/34px Arial;
color: #463a1f;
background: #ffffff url('../images/nav/corner_tr_au_cur.png') no-repeat top right;
}

.nav-hover-right {
font: normal 12px/34px Arial;
color: #ffffff;
background: #a2460a url('../images/nav/corner_tr_au_hover.png') no-repeat top right;
}

.nav-hover {
color: #ffa56a;
background: #a2460a;
}

.nav-ddhover {
color: #ffffff;
background: #a2460a;
}

.dd-menu {
background: #a2460a;
float: left;
}

.dd-item a:visited {
color: #ffffff;
text-decoration: none;
font: normal 12px/34px Arial;
background: #a2460a;
}

.dd-item a:link {
color: #ffffff;
text-decoration: none;
font: normal 12px/34px Arial;
background: #a2460a;
}

.dd-item a:hover {
color: #ffa56a;
text-decoration: underline;
font: normal 12px/34px Arial;
background: #a2460a;
}

.dd-item {
text-align: left;
font: normal 12px/34px Arial;
color: #ffffff;
padding: 0px 30px;
height: 34px;
background: #a2460a;
white-space: nowrap;
min-width: 75px;
}

 

The html is built by javascript... if you need, I will post.

 

The link is: http://dreamshowstudios.net/development/BerrysChapel/index.php

 

I tend to over-complicate some things, but any guidance is appreciated.

 

 

[jcombs_31]

The html would help, as of now there is no way to see how the classes are being applied. I can say that you will probably have to declare a fixed with in IE6 for the submenu list.

[BillyBoB]

The html wouldn't help much to determine the problem because the javascript changes the classes a lot.

 

But here it is anyways:

<div id="navigation">
<div class="nav-btn nav-left" id="navHome">Home Page</div><div class="nav-sep">|</div><div class="nav-btn nav-dropdown" id="navAbout">About Us</div><div class="nav-btn nav-cur nav-dropdown" id="navMembers">Members</div><div class="nav-btn nav-dropdown" id="navEducation">Education</div><div class="nav-sep">|</div><div class="nav-btn nav-dropdown" id="navYouth">Youth</div><div class="nav-sep">|</div><div class="nav-btn nav-right nav-dropdown" id="navPreschool">Preschool</div>
</div>

[haku]

Where are you setting the width for the dropdowns?

[jcombs_31]

Why are you using all those divs instead of a list?

[nadeemshafi9]

Do people still develop for ie6 ? i dont even develop for ie7, i used to for 1.5 years , the code gets messy with irrelevant fixes and hacks, your doing yourself bad. Peopel that dont have java script enabled or are using ie6 dont deserve to see your website.

[BillyBoB]

@haku:

The width isn't being set because it is supposed to inherit the width from the length of the text plus the padding.

 

@jcombs_31: I'm not sure, kind of a tradition thing for me. I know of the list way I just choose to do it with divs.

 

@nadeemshafi9:

I have to develop for ie6 because my demographic is people that go to church, young people and old people. The older people may or may not have their systems upgraded with the latest browser. The client has requested the code work for ie6.

[haku]

BillyBob - I'm thinking that IE6 probably needs a width explicitly set. You can do this using conditional comments so that they only apply to IE6 and not other browsers.

 

As for IE6 - developing for IE6 is part of being a professional developer. I just spent half a day yesterday on a particularly tricky layout that had to work in IE6, since 14% of our users are still using it. Can't afford to leave those 14% behind.

 

It's actually not that hard for most layouts if you know a few tricks and code your layout with them in mind.. My difficulty yesterday came in that there were diagonal menus and transparencies galore, which made it quite difficult.

 

 

[jcombs_31]

You will definitely have to set a width for IE6 to work correctly.

[Dorky]

dont use padding on <a unless its padding-top or -bottom an implement overflow:hidden; on all <li in the menu.

[BillyBoB]

Dorky: why exactly not use a padding on the left and right?

[Dorky]

unless you need a to i guess. but if you dont, text-align: and display: block works best for link lists.

[JJ2K]

Maybe try setting inline-block if a width is a problem.