Forum Moderators: not2easy
The layout I'm looking for is fairly simple: header div with image at left and right-floated company info; content div, enclosing main div and right-floated right rail; and a footer, with nav buttons to the left and a copyright statement at the right.
It all works except for the copyright, which is positioned only with float:right. It's container divs are not positioned at all. It displays correctly in Opera 7.2, but IE 6 puts the copyright only about 2/3 of the way across the page, instead of all the way right. Haven't tested (yet) in any other browsers.
IE has numerous bugs, of course, but is this a bug, or am I just missing something?
Page, with CSS, is available here: <snip>
Any help is appreciated. Thanks.
[edited by: DrDoc at 9:08 pm (utc) on April 28, 2004]
[edit reason] No URLs, thanks. See TOS [webmasterworld.com] [/edit]
You might find the fix just from the process of doing this. It almost always comes down to commenting bits and pieces of code in and out, until you zero in on the trigger of the problem.
Few of my problems are bugs. They are usually self inflicted wounds.
It sounds like the ie double margin bug -- if something is floated and has a margin in the same direction, internet explorer mysteriously doubles it. Supposedly it can be fixed with no cross-browser problems by declaring
display: inlineon the floated element. There's more information at "position is everything".
Adam
#top {height: 200px;
background: white;}
#address {float:right;
font:bold italic 130% helvetica;
padding:0px 20px 0px 0px;}
#address:first-line {font-size:150%;}
#content {border: 1px solid blue;}
#main {background:#fff;
border:1px solid #000;
margin-right:220px;}
#rightrail {border-left:1px solid #000;
border-bottom:1px solid #000;
float:right;
clear:none;
width:220px;
background:#eee;
margin:0px 0px 10px 10px;}
#footnav {background:black;
margin-top:5px;
padding:5px 5px 5px 25px;
font: 60% helvetica;}
#footnav .button {color:white;
font-weight:bold;
display:inline;
margin:0px 10px 0px 10px;
border:1px dashed white;}
#copyright {color:white;
font-weight:bold;
float:right;
margin:0px 10px 0px 10px;
border:1px dashed white;}
</style>
</head>
<body>
<div id="top">
<p id="address">Name<br />
Street Address<br />
City, State, Zip<br />
Phone Number</p>
<img src="images/red.jpg" width="200" height="200" />
</div> <!-- end "top" -->
<div id="content">
<div id="rightrail">
Right<br />
Right<br />
Right<br />
Right<br />
Right<br />
Right<br />
Right<br />
</div> <!-- end "rightrail" -->
<div id="main">
Main<br />
Main<br />
Main<br />
Main<br />
Main<br />
Main<br />
Main<br />
</div> <!-- end "main" -->
<div id="footnav">
<div id="copyright">Copyright 2004, Business Name</div>
<div class="button">Foot</div>
<div class="button">Foot</div>
<div class="button">Foot</div>
</div> <!-- end "footnav" -->
</div> <!-- end "content" -->
I have seen the double-margin bug; but this doesn't look like it; the right margin on the copyright float is only 10px, and it's offset by over 200. . .
BTW, the doctype is xhtml strict, and the xmlns is included in the full page (just clipped out to save posting space), and the page validates, aside from a missing alt tag and type declaration on the style statement.
I'm half expecting a "self-inflicted wound" :-), but I sure don't see it at this point. Thanks, guys. . .
#footnav {background:black;
margin-top:5px;
padding:5px 5px 5px 25px;
font: 60% helvetica;}
#copyright {color:white;
font-weight:bold;
float:right;
margin:0px 10px 0px 10px;
border:1px dashed white;}
You've got the copyright nested inside of the footnav, so it's picking up the padding.
you could try adding this to the copyright:
padding: 0px!important;
Add {clear: right;} to #copyright.
You are clearing the float from #rightrail. Looking like an IE thing, which may mean bug after all.
#rightrail {border-left:1px solid #000;
border-bottom:1px solid #000;
float:right;
clear:none;
width:220px;
background:#eee;
margin:0px 0px [b]0px[/b] 10px;}
Adam
The bigger issue, now that the problem is isolated, may be what the final content is, and if it breaks the intended layout.
If the content is not subject to frequent rewrite-and-associated-expansion, this should work just fine. If there's a lot of change in this portion of the page layout....
Hmmm. The fix I was going to post doesn't work in all browsers.... Not that that's unusual.... *sigh*....
I'll try one or both tomorrow. For now, no more work. . . :-)
