Re: [css-d] Problem with CSS nav bars in IE

[Jeff Rechten]

Kevin:
I'm not sure this is the best way to fix this problem, but this does
work. Someone else may have a better fix. For the "exhibits nav" try this:

#exhibit_two_links {
   vertical-align: bottom;
   margin-left: 41%;
}
html>body #exhibit_two_links {
   margin-left: 36%;
}

I'm not sure about the bottom links, I would try to make the margins on
#side_port_links a
a tad bit smaller.

     


Thanks Jeff.  I've applied the changes you've suggested, but now I'm
having major problems with the #side_port_links in Firefox.  They've
somehow drifted into the footer.  Any ideas what I can do to fix this?
Everything looks great in IE!

Thanks for your help,
Kevin
--
Kevin Old
[EMAIL PROTECTED]

Kevin:
There are a couple things I tried when attempting to fix the 
#side_port_links . I think the easiest approach is to lighten the load 
in the html a bit, just to simplify the problem ( and save bandwidth too) .
[html code]
       <div id="newcontainer">
           <img id="portdragonimg" src="Dragon_blue.jpg" alt="Dragon">
           <img id="portheaderimg" src="radtv.jpg" alt="Radio &amp; TV">
           <ul id="exhibit_two_links">
               <li><a 
href="http://jshannonlowe.com/site2/ambassadorship.html";>EXHIBIT 1</a></li>
               <li><a 
href="http://jshannonlowe.com/site2/articulation.html";>EXHIBIT 2</a></li>
           </ul>
           <ul id="side_port_links">
               <li><a 
href="http://jshannonlowe.com/site2/marcomm.html";>MARCOMM</a></li>
               ...
               <li><a 
href="http://jshannonlowe.com/site2/testimonials.html";>TESTIMONIALS</a></li>
           </ul>
       </div> <!-- end "container" -->
[/html code]

Then I tried to simplify the css. I tried floating the IMG and using 
margins to center. Then Floating the UL's and centering them with 
margins too. I added top padding to the "#side_port_links a" to keep 
them down where they belong. I hope this fix works for you.

[css]
#newcontainer {
   margin: 0;
   padding: 0;
   height: 375px;
   width: 748px;
   border: solid #8f9391;
   border-width: 0 1px;
   color: #000000;
   font-family: Verdana, Helvetica, sans-serif;
   font-weight: normal;
   font-size: 11px;

}
#portdragonimg, #portheaderimg {
   margin: 0;
}

#newcontainer img {
   float: left;
   clear: left;
   margin: 0 0 0 35%;
}
html>body #newcontainer img {
   margin: 0 0 0 55%;
}
#newcontainer ul {
   clear: left;
   margin: 0;
   padding: 0;
}

ul#exhibit_two_links {
   margin: 0 0 0 38%;
}
html>body #exhibit_two_links {
   margin: 0 0 0 37%;
}

ul#side_port_links {
   margin: 0;
   padding: 0 0 0 5%;
}


#side_port_links li {
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
}

#side_port_links a {
   float: left;
   /*line-height: 14px;*/
   font-weight: bold;
   font-size: 10px;
   margin: 60px 22px 17px 8px;
   text-decoration: none;
   color: #576081;
}

[/css]

If anyone has a better suggestion, I'm sure it's better than mine.

Jeff Rechten
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/