Strange results using normalize.css

[Anonymous]

If I enter the css in the head of my page to test it, then all line spacing gets expanded to where the lower icons are pushed off the bottom of the page and the upper two are shown as bullets. If I put the normalize.css as a separate stylesheet and transfer it to my server, I get no change in either Firefox (24.0) or Explorer 8. Obviously I’m not doing something right.

Page here.

Main css here.

normalize css here.

Best Regards.

[paulob]

Hi,

I don’t know if this is the problem you mention but you seem to have cut short the normalise.css and left unclosed comments hanging in mid air which will most likely break something.

i.e.

/**
 * Remove most spacing between table cells.

It should be:

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

[Anonymous]

Greetings, and thank you for your reply.

Strange that I cut off the bottom of that as I use “select all” when copying.
I was thrown off a bit by the download as I expected it to be a program.

Anyway, I made sure all of the code is in the stylesheet, but I still see no changes in the page when viewing in Firefox and Explorer. They look the same with the code as they do without and there is a noticeable difference in placement in Explorer. I’m still missing something here.

Best Regards.

[paulob]

Hi,

The normalise.css is working and if you remove it live (use edit.css in Firefox developer toolbar) you can see the minor differences to margins and padding in the layout.

I’m not sure what you expect normalise.css to be changing exactly but it just sets some suitable defaults for your elements so that browsers start on an even keel. There will be no big changes if it is present or not (depending on the elements in your layout).

You will have to remind me exactly what the problem is here that we are addressing? The normalise css is working on your live page and if you remove it you can see the body margins appearing so we can tell it is working.

If there are discrepancies in your page then it is likely to be the elements that you have styled yourself and you have a number of bad practices going on.

First of all you are using the html5 section element but do not use the html5 doctype or the html5 shiv that IE8 and under need in order to recognise the new html5 elements.

https://github.com/aFarkas/html5shiv

Secondly you are creating space on your page with spacer divs. Spacer divs are not necessary and should not be used in modern design. They are something that was used in old school table layouts of the last century. Just apply margins/padding to the elements concerned to make the appropriate spacing.

You are using the new html5 elements but at the same time using old deprecated elements like the font tag and the align attributes which have no place in a modern design. Use css and get rid of the font tags and align attributes and use classes on the elements to make the style changes you need.

Don’t use floated elements just to create a border as that is a recipe for disaster. Use the right border of the container itself. Also don’t fix heights on columns that are going to hold fluid content but just let the content dictate the height. If you want equal height columns then use display table-cell for the columns (ie8+) (and floats for ie7 and under who wil get unequal columns). Or use a faux column technique (google css faux columns).

Remember to validate the html and css at regular intervals to avoid typos like this from occurring.

ul.socialicons {
    list-style: none;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 0;
<
}

Hope some of that is of some use :)

[Anonymous]

Thank you for your suggestions, I deeply appreciate them.

Yes, given your directions I can see the normalize.css is working, but I don’t see that it is really doing anything for my page other than fitting the page snug to the top and bottom of the browser windows (which I don’t like). I will keep it and the link on file as it is something that may prove useful for me in the future, or is now and I’m not seeing it.

I’ve only been working with css on this level for a few weeks now. My only other experience with it was using bits and pieces to obtain certain effects. I recently realized I am going have to learn it in a broad scope if pages I design are to load quickly.

The divs as spacers are a throwback to an old habit of mine of using tables as spacers. I learned html in the early to mid 90’s, so your “last century” comment was dead on. LOL I figured if a similar approach works in css and doesn’t inhibit the page load time, what’s the harm. I am all for a better, or right way, of doing things but am very new to all of this.

I tried using padding and margins for the <div class="info"> tag to get the placement of the text and elements in that tag where I wanted, but nothing I tried worked to the degree I needed. I’m pleased with the result the <p style="padding: …> and the <p class="we"…> tags give, but I don’t know what tag(s) to apply to either the <div class="box"> or the <section> tags to control their positioning.

Best Regards.

[paulob]

Hi,

It does take a while to,lose the old school table habits and you need to approach CSS layouts in a different more structured way. Rather than putting in loads of empty elements for the background graphics you should look at putting repeating background images on the containers that hold your content instead.

Usually there is something already available for you to use without adding extra html. In cases where there are no extra elements available then you could add an empty element but these elements should not be structural as such (like your floated dividers and left and right borders).

Your page is basically two columns so you start the html with two columns. If your browsers support is IE8+ then you can use display:table-cell and that will create the equal column table effect that your design shows but if you need to support older browsers then you will need to float the columns and lose the equal column effect or use a faux column approach as already mentioned.

So you start with two columns an then inside these columns you stack the content for each column. You don’t create multiple left and right floats as that will never work.

For your borders you can repeat the background effect on a main container and then nest an inner element for the content to hide the background where not needed.

The html should be structural so mark it up with the appropriate headings and content. At present you have no h1 which means you have no page in effect as all pages must have a main heading. Yours looks like it should be the text from the logo.

e.g.

    <h1 class="logo">The White Star Line Memorial Foundation<span></span></h1>

The logo image would be placed in the span using the gilder /levin approach.

http://www.mezzoblue.com/tests/revised-image-replacement/

Content should come first and ultimately dictate how the design needs to work and not the reverse although you do need to keep an eye on both.

Regarding your questions with normalise.css thenI;m not sure what you expected. It’s just a default stylesheet that sets elements to suitable defaults. You mention the body margin and that is one of the rules that it resets because some browsers use margins on the body by default yet some others use padding instead or different amount of margins. Therefore the rules just set everyone to an even keel and then its up to you to apply what you need. If you want extra padding on the body then go ahead and add it; you won;t need to worry that it might also have default margins because normalise has taken care of that.

I’m a bit busy today but I will try and run up a quick demo tomorrow to give you a better idea.

[Anonymous]

Greetings,

Thank you for all of the information. I have been, and will continue looking into and studying what you have covered and will go into more detail tomorrow when I have looked into things a bit more.

I appreciate your offer to make a demo and look forward to seeing it.

Best Regards.

[paulob]

Hi,

Sorry for the delay in replying but have been a bit pushed for time.

Here is a very rough demo of how I would go about this.

The code is in the head so just view source. I left your normalise.css in place but then added the main styling rules after it.

If I had time I would have changed things around to avoid the negative margins I used to overlap your logo and header onto the borders as you had incorporated borders onto your images. Indeed those multiple borders are a little fiddly and I would have simplified them in some way (e.g. left them out).

The page is in two columns with content stacked in each column. The columns use display:table-cell to keep the full length dividing border (ie7 and under get floated columns instead as they don’t understand display:table properties).

For your icons I would normally have used the same image replacement technique I used for the logo but was short of time so just used text-indent to hide the text (not the best technique for accessibility).

The rest is pretty straight forward.

Hope it’s of some use anyway and sorry that I didn’t have to time to make it perfect.

[Anonymous]

Greetings,

I am sorry for the extremely long delay in replying. My health issues took a dive a few days ago and I was unable to be at my computer.

I deeply appreciate your doing the demo for me. It provides me with more information and ideas. The biggest issue I think I now face is finding a program other than Dreamweaver to assist me. Neither the working page or the demo you created are shown correctly in the design mode of DW, and the demo you did is in such a disarray with DW that I cannot make sense of it to any large degree. For example, the <h2 class="header">1849 - 1935<span></span></h2> is below and to the left of the <div class="info"> as is the <section class="main-content"> which only adds to the confusion of a newbie like me.

What do you use to design pages?

Best Regards.

[paulob]

Hi,

Never use design view in Dreamweaver. It’s not a browser and it’s more wysiwtf than wysiwyg.

Just use the code editor (which is very good) and code by hand and then view the result in a real browser (or two or three browsers).

I usually load the page I’m working on in three browsers (IE, Firefox and Chrome) and as soon as I change the css or html (or at regular intervals) I just click refresh in each browser to see the result. That’s the most reliable way and also does most of your browser testing while you design. Don’t use the F12 preview in DW either as that is also occasionally broken and sometimes doesn’t give true results.

That’s the way I work anyway.

[Anonymous]

I usually load the page I’m working on in three browsers (IE, Firefox and Chrome) and as soon as I change the css or html (or at regular intervals) I just click refresh in each browser to see the result.

I’ve been doing similar (old habit from html & js days). I just wanted to be sure I was doing it alright with what I have.

I appreciate the demo, but it’s a bit more than I can chew at this point with everything I have on my shoulders. What parts in the head of your demo could/should be included in what I’ve come up with so far here to make the page operate better on all browsers?

I’m in a bit of a rush as I need something showing online by mid November. Once this first page is finished, the rest should easily fall into place as it will be a template for almost all others. The site will consist of a lot less pages as well.

Best Regards.

[paulob]

Hi,

The problem with your page is it is too fragile and prone to break at the slightest discrepancy. The biggest flaw in beginners web design is setting heights on containers that hold fluid content. That is the number 1 design error.

If you simply zoom the text in the browsers controls your content jumps out of the left column and into black space. Now do the same thing to my demo (zoom “text only” in Firefox browser controls) and see the massive difference. Ultimately you have no control over what font size the user may have specified so you have to accept that the text may be bigger or smaller than you designed and then allow for that in your design, i.e. your design should grow or shrink with text zoom. The simplest way to do this is to let content dictate the height and don’t use fixed heights. Also what happens when other pages need more content in those sections?

The backgrounds should be accomplished with repeating graphics so that they can grow and shrink as in my example.

Whether you take my advice or not is up to you and you may well get away with it as it is but on the other hand it may break irretrievably down the line so you are better getting it right now.

Keep it simple and logical and don’t fix heights on content where you will be holding fluid text as you never know what size that text will be – you have virtually no control over that as it is down to the user and their preferred settings.

Lastly if you do use empty elements to create your borders and graphics then usually you wouldn’t let them take part in the flow but just absolutely place them into position. For example if you add clear:both to .info you can see it drops below your floated border graphic and breaks the layout. A layout shouldn’t be that fragile.

Hope that some of this helps but I appreciate you may have deadlines to meet but you wouldn’t build a house on shaky foundations would you :)

[Anonymous]

Wow, I wasn’t aware of that issue with text zoom and I’m worried now as to what else I don’t know and am trying to cram into a short period of time. It is clear at this point I have certainly bitten off more than I can chew and I should have went with html and js and at least had something. Then I could have addressed the site is CSS at a later time. Now I’ve no time for either and with so many things going on in my life, to try to put a reasonable CSS site together with what little I know of it is futile at best.

I appreciate you pointing out the issues. I now realize my only accomplishment was working on a page concept for several weeks that never had a chance at being a viable design from the get go. Perhaps my situation is clouding my judgement after all.

Best Regards.

[paulob]

Hi,

You can always take my demo code (just view source as all the code is in the head) and it will work back to IE6 (unlike yours). I know there are some small visual differences but they are minor.

Assuming you are only going to add content into these beige background areas then you don’t need to do anything special except put your content into those areas as required. The design will grow with content if needed and won’t break.

As I said above I would have redesigned the logo and header so that they didn’t need negative margins but assuming that display is the same on all pages then you can leave them as it is as they will work the way they are.

The code is quite simple and is basically two divs side by side using display:table-cell for ie8+ and floated for ie7 and under. The two main wrappers are needed because of the background effect you have around the content and enables a pattern to be repeated.

Apart from that and the negative margins to squeeze the logo into a smaller space than their widths would usually allow the rest is pretty straight forward.

[Anonymous]

I’ve been looking at the code more after your description and I better understand it. I’ve done the easy part of substituting the original images from my working page into your demo. There are some things I have questions about and have created a screen grab of the demo from your site to illustrate here.

There seems to be an extra pixel width at the top and I assume I need to change something in either the #outer { or #inner { tag but am not sure what, and hesitant to “play around” at this point.

I believe the line in red is the product of the border color in the #main { id, but I don’t like it in the right hand side. Is there a way to get rid of it there?

The border I used in the column right, and which you use a narrower version of in both (and I understand why) has a width 6px greater than yours and a few nuances that I want to keep as it blends into the header better. How can the original be incorporated?

I deeply appreciate you explaining these things to me as it greatly aids my understanding. It is frustrating not being able to concentrate at times due to my condition, and I’ve had friends tell me to hire someone to create the site for me, but where’s the fun in that? The things that can be done with CSS are amazing, I just can’t concentrate on it to the degree necessary at time to absorb it and it only makes things worse.

Best Regards.

[Author]

Posts