Grow your CSS skills. Land your dream job.

EM-based-website

  • # May 15, 2008 at 6:35 pm

    Hi everybody,

    As I already told last weeks, I am working on a revision of my website and I try to build it up by using em’s so I can make an elastic design of it. Here on Mac OSX with Firefox and Safari everything looks fine, but when I tried it in Internet Explorer with using IE Netrenderer, it doesn’t look that good.

    I am still trying and learning a lot of using em’s and I am sure it’s not perfect yet, but I wonder what you all think of it and maybe you have a solution for the fact that it doesn’t look good in IE?

    Some points I’ve been working on:
    – sticky footer: the footer sticks to the bottom of the page
    – holy grail: the navigation and sidebar are floated to the left and right side of the page and the content is centered in the middle of them.

    The link to the temporary page (this page will be removed again in the future): http://www.edmin2.nl/temp/EdMin2_revised/

    What is your opinion about the code? What is good, what could be done better?

    # May 15, 2008 at 10:27 pm

    I think that’s a very solid structure Edwin. Looks like you hit the holy grail :D

    One thing I would consider is setting a max-width as well, where you have your min-width set. One of the problems with elastic em based sites is that they can grow extremely wide very quickly, which causes users to do a lot of horizontal scrolling which can be nasty. Perhaps even make the site narrower than the full browser window at first so it can be bumped up a little without causing any horizontal scroll.

    # May 16, 2008 at 7:10 am
    "chriscoyier" wrote:
    One of the problems with elastic em based sites is that they can grow extremely wide very quickly, which causes users to do a lot of horizontal scrolling which can be nasty.

    Not just nasty, but not readable at all. I’ve already put it up for my personal site upgrade. Both max/min-width so it’ll have a more natural flow, and be readable for users with high resolutions (1600+). A rule of thumb is to have min-width to 780px (which means you’re covering all down to 800×600 resolutions).

    About the EdMin 2.0-page: It’s very good. You’re getting the content up high in the markup, which is nice both for search engines and for screen-readers/text-browsers. It’s also good that you’ve used em-sizing on fonts, making it easy to resize. Smallish note: I thought you could click on "Menu"-text, since it was underlined.

    # May 16, 2008 at 11:13 am

    I personally, don’t like elastic websites as I use a wide-screen monitor.

    It makes the centre column almost unreadable with so many words per line.

    Laptop users will have the same problem.

    I’d definitely take Chris’s advice on setting a max width to solve the problem.

    # May 16, 2008 at 2:55 pm

    I just viewed the website in IE6 and IE7 and found the following problems:

    IE6 + IE7: the menu is dissapeared!

    IE7: The footer doesn’t stick to the bottom but about 20 pixels above the bottom.

    Can somebody maybe give a solution for these problems? I am not an expert in IE-hacks, I hope there is a solution for these two problems…

    # May 18, 2008 at 5:13 am

    Somebody got a solution :?:

    # May 18, 2008 at 1:40 pm

    for your sticky footer try changing your vertical margins for padding. That should hopefully sort that. I found 2 cases of vertical margin at 1em and that would be the 20px you’re talking about (since you set 1 em to 62.5%). these were id=button and id=content.

    It also looks like you may have to set an absolute position for the menu to get it to work in IE, instead of the relative position. Not quite as sexy I know, but it should work.

    # May 22, 2008 at 12:13 pm

    Isn’t there another solution then using absolute positionating? I don’t like that too… Maybe some more people would like to take a look at this site? What do you think of the xhtml structure and the css? And how could it be done better?

    http://www.edmin2.nl/temp/EdMin2_revised/

    # May 23, 2008 at 7:28 pm

    For those who are interested (not so many I guess, looking at the less response) I found out that decreasing the margin-left of the navigation in IE will bring the menu back on his place. I don’t know why it is like this, but it works. So that problem is solved :)

    # May 24, 2008 at 10:24 am

    I thought that may be something like that, but didn’t have the time to look at it properly. IE doesn’t deal with margins as you’d expect, (that’s why the sticky footer thing breaks in IE if you use margins). Microsoft’s interpretation of the box model is screwed up. This is probably why it was shifting the menu off the left side of the page.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".