|
|
Posted by Slick50 on 12/14/06 05:15
Thanks again Vince, very helpful. I studied your example, and I found that
instead of adding an additional DIV, moving the closing DIV tag below the
navigation UL got me pretty much where I wanted. There are differences in
the way IE and FF display the right-hand UL. FF seems to vertically align
the list, but IE aligns at the top. And the spacing between the bottom list
and the elements above have nice spacing in FF, but IE seems to collapse the
margin. Not sure which one is *right*, but I'm closer. Thanks for your
effort.
http://messiah.scojul.homedns.org/vince.html
"Vince Morgan" <vinhar@REMOVEoptusnet.com.au> wrote in message
news:45809d4d$0$19406$afc38c87@news.optusnet.com.au...
>
> "Slick50" <spam@yahoo.com> wrote in message
> news:JfMfh.7402$Ka1.1231@news01.roc.ny...
>> http://messiah.scojul.homedns.org
>>
>> Two problems:
>> 1) UL does not display below header DIV in FF, looks OK in IE6
>> 2) UL list items will not center in FF or IE.
>>
>> I had a hard enough time getting the stupid gif and text to display on
>> the
>
> I took the liberty of downloading your css file and modifying it slightly.
> I've added a <div> and made a few small changes to the css. I removed
> 'display:block' from #square as it is an inline element in an inline
> context, that is inline by default.
> The change in case is simply my editor setup.
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/HTML4/strict.dtd">
> <HTML>
> <HEAD>
> <TITLE></TITLE>
> <META http-equiv="Content-Type" content="text/HTML; charset=utf-8">
> <!--<LINK rel="stylesheet" href="css/style.css" type="text/css">-->
> <style type="text/css">
> body
> {
> padding-right: 0px;
> padding-left: 0px;
> background: #fff;
> padding-bottom: 0px;
> margin: 0px;
> width: 100%;
> color: #000;
> padding-top: 0px;
> font-family: "georgia", "arial", sans-serif;
> height: 100%;
> }
> #wrapper
> {
> background-color: #f6ec2a;
> }
>
> #header
> {
> font-weight:bold;
> font-size:1.5em;
> color: red;
> }
> #square
> {
> margin-top: 1em;
> float: left;
> margin-left: 1em;
> width: 75px;
> height: 75px;
> }
> #logo
> {
> float: right;
> margin-right: 2em;
> list-style-type: none;
> }
> #navbar
> {
> clear: both;
> text-align: center
> }
> #navlist
> {
> padding-right: 0px;
> display: inline;
> padding-left: 0px;
> padding-bottom: 0px;
> margin: 0px;
> padding-top: 0px;
> list-style-type: none
> }
> #navlist li
> {
> display: inline;
> margin: 1em
> }
> </style>
> </HEAD>
> <BODY>
> <DIV id="wrapper">
> <DIV id="header">
> <IMG id="square" src="imges/square.gif">
> <UL id="logo">
> <LI>Messiah
> <LI>Lutheran
> <LI>Preschool
> </UL>
> </DIV>
>
> <DIV id="navbar">
> <UL id="navlist">
> <LI>Newsletter
> <LI>For Parents
> <LI>Daily Schedule
> <LI>Monthly Planner
> <LI>School Calendar
> <LI>Policies
> <LI>About Us
> </UL>
> </DIV>
> </DIV><!--wrapper
> </BODY>
> </HTML>
>
> The background should now be the desired color. I haven't had the time to
> check it very thoroughly so......
> All the best,
> Vince Morgan
>
>
[Back to original message]
|