This is why doing this stuff is so much fun! I did the five steps Michael suggested. The result is now that both the content area and the left nav appear *below* the header, as if there is some sort of clear:both in operation.
On the good side, the page now breaks consistently in Safari and Firefox and IE. :-) This request is still open, folks. If you've got any tips on how to structure this header/leftnav/content, I'd sure appreciate it. I've done it multiple times over the past few years and every time I've done so much hacking I had to rent a machete. This time I'd like to get the job done a little more elegantly! (btw, the only browsers I'm really concerned about are the three listed above. If I can get it to work well, with no hacks and few kludges, I'm confident it will degrade gracefully and will be accessible) Skip Knox Boise State University [EMAIL PROTECTED] >>> "Michael Landis" <[EMAIL PROTECTED]> 07/05/06 1:20 PM >>> On 7/5/06, Skip Knox <[EMAIL PROTECTED]> wrote: > I am experimenting with a template design and thought I had everything > worked out. I wasn't especially happy with the kludge I had to do with > the header, though, and then a user reported that the header didn't > align properly in Safari. > > I have spent a while trying to find information on whether this is a > bug in Safari and have come up empty. > > More importantly, though, I don't like that I've used absolute > positioning for the header. Plus a *html hack for IE6. > > So, I'm really asking for advice on how to handle the header better > than it is here: > http://webtest.boisestate.edu/templatedev/styles/main.css > > The template home is here: > http://webtest.boisestate.edu/templatedev/ > > > You can see browsercam shots of the page in Safari, IE6 and Firefox > here: > http://www.browsercam.com/public.aspx?proj_id=266306 > The layout is as desired on the latter two. Hi, Skip, I'd probably do the following: 1) replace the absolute positioning on #header with float: right; 2) remove "float: right" from #topnav 3) move the bottom border on #header to be a top border on #content 4) replace #content's margin-right with padding-right 5) adjust margins and paddings on the heading and #content to taste HTH, Michael ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
