Hey Lars, I really admire your website. It's simple and beautiful. I feel guilty, because I always find it annoying when people point out shortcomings, but at the risk of annoying you i'll continue. On your blog item pages your right sidebar overlaps the bottom blue bar (with copyright info etc) in both IE6 and Firebird on XP. Keep up the good work, I enjoy the quotes you post as well.
Something like clear: both perhaps applied to your footer might clear that up. If not the surest way is to put a break (yes, a break) below your content to clear everything, like . The clear="all" in that last example is optional.
Taylor, thanks for the kind words and sitecheck. I'm not at all annoyed, but rather pleased to have constructive feedback on the design!
I'm aware of the particular problem you mention though. The overlap occurs when viewing short posts one at a time, with or without comments. I'm not happy with this behavior, but haven't had the time to look into it. The only known solution is to write longer posts
Matt, a clear would be an easy solution, but it will have no effect since the sidebar is absolutely positioned rather than floated. So the footer follows the content regardless of the height of the sidebar. My first CSS attempt used floats, but then I decided I wanted a differently colored "border" extending below the sidebar. I couldn't get this to work using floats. A much easier way seemed to be to apply a right border to the #content div, and this is the solution you are seeing. I do believe it's possible to do this with floats though, and now that other people have noticed it's definitely something I will look into in more detail. After a thorough review of Floatutorial, that is. I'll make sure to report any progress.
Anne, thanks for the first smilie. I think the Mozilla website represents a huge leap forward in usability. It's now much easier to get an overview of the different products/projects, find the download links, etc. It also loads fast, the layout handles well when resizing, and readability is excellent. But it's not a perfect design. The header uses whitespace ineffeciently, which pushes the content down and below the viewport on my 12.1" laptop screen. From a purely aesthetical point of view, I could do without the 3D effect on the header. I would also have chosen a different color scheme, to better represent or match what I consider to be the Mozilla brand identity. But despite this, it's a major improvement.
Taylor and everyone else: do let me know if you stumble upon any other quirks. It's much appreciated!
Taylor
Comment on October 15, 2003 at 9:44 pm
Hey Lars, I really admire your website. It's simple and beautiful. I feel guilty, because I always find it annoying when people point out shortcomings, but at the risk of annoying you i'll continue. On your blog item pages your right sidebar overlaps the bottom blue bar (with copyright info etc) in both IE6 and Firebird on XP. Keep up the good work, I enjoy the quotes you post as well.
Matt
Comment on October 16, 2003 at 4:12 am
Something like
clear: bothperhaps applied to your footer might clear that up. If not the surest way is to put a break (yes, a break) below your content to clear everything, like
clear="all"in that last example is optional.Anne van Kesteren
Comment on October 16, 2003 at 6:42 am
Matt,
The
.
clearattribute is deprecatedclear:bothshould work though.BTW, check also the new Mozilla website out when you have time.
Lars Holst
Comment on October 16, 2003 at 8:48 am
Taylor, thanks for the kind words and sitecheck. I'm not at all annoyed, but rather pleased to have constructive feedback on the design!
I'm aware of the particular problem you mention though. The overlap occurs when viewing short posts one at a time, with or without comments. I'm not happy with this behavior, but haven't had the time to look into it. The only known solution is to write longer posts
Matt, a
it's definitely something I will look into in more detail. After a thorough review of Floatutorial, that is. I'll make sure to report any progress.
clearwould be an easy solution, but it will have no effect since the sidebar is absolutely positioned rather than floated. So the footer follows the content regardless of the height of the sidebar. My first CSS attempt used floats, but then I decided I wanted a differently colored "border" extending below the sidebar. I couldn't get this to work using floats. A much easier way seemed to be to apply a right border to the#contentdiv, and this is the solution you are seeing. I do believe it's possible to do this with floats though, and now that other people have noticedAnne, thanks for the first smilie. I think the Mozilla website represents a huge leap forward in usability. It's now much easier to get an overview of the different products/projects, find the download links, etc. It also loads fast, the layout handles well when resizing, and readability is excellent. But it's not a perfect design. The header uses whitespace ineffeciently, which pushes the content down and below the viewport on my 12.1" laptop screen. From a purely aesthetical point of view, I could do without the 3D effect on the header. I would also have chosen a different color scheme, to better represent or match what I consider to be the Mozilla brand identity. But despite this, it's a major improvement.
Taylor and everyone else: do let me know if you stumble upon any other quirks. It's much appreciated!
Matt
Comment on October 16, 2003 at 8:24 pm
Couldn't you float the two divs left and then put the light blue "bar" that stretches to the bottom as the background on the contaning? I'll be the first to admit that floated layouts have their problems though.
-
- Comments are the properties of their posters.
- Email addresses will never be shown or shared with third parties.
- Offensive, distasteful, and irrelevant comments will be deleted.
-
HTML is optional, but if you do use it, please make sure that:
- markup is well-formed and valid XHTML 1.1
- ampersands (&) are encoded as
- angle brackets (< and >) are encoded as
-
HTML allowed (please close tags):
Leave a Comment
Comment Information and Guidelines
&<and>