Skip to main content

Forums

Forum Replies Created

Viewing 7 posts - 151 through 157 (of 157 total)
  • Author
    Posts
  • in reply to: Strange results using normalize.css #153299

    paulob
    Participant

    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.

    in reply to: Strange results using normalize.css #153288

    paulob
    Participant

    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 :)

    in reply to: Strange results using normalize.css #153250

    paulob
    Participant

    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;
    }
    
    in reply to: How to remove select box border in ie7 and ie 8 ? #151695

    paulob
    Participant

    You can’t remove the border in ie6 and 7 I’m afraid.

    Maybe you could use this trick:

    http://cdpn.io/akyqz

    It just puts a floated span around the select with overflow:hidden and then uses negative margins to hide the original border under the span’s border.

    in reply to: [Solved] Line-Height #151693

    paulob
    Participant

    To expand on what was correctly said above:

    Unitless line-height (line-height:1.2) differs from line-height with units (line-height:1.2em etc) in that it is the “scaling factor of 1.2” that is passed down to children so a child will get 1.2 times the line-height of its own font-size.

    On the other hand a line-height with a unit is converted by the browser into a fixed pixel value and it is this pixel-value that gets handed down to the child even if the child has a smaller line-height (unless you re-define line-height for the child of course).

    As an example a parent with a font-size of 20px will get a line-height of 24px if line-height:1.2 was used. The same holds true if the parent was given a line-height of 1.2em. Both would get a line-height of 24px.

    However, if a child of those parents has a font-size: of 10px then the line-height will be 12px and 24px respectively. 12px where the parent has a unit-less line-height and 24px where the parent’s line-height was stated with a unit.

    It can therefore be seen that the difference can be considerable.

    Unit-less line-heights can lead to layouts that perform better as the relationship is maintained with the font-size of the children.

    in reply to: [Solved] Problem with fluid layout and position fixed #151184

    paulob
    Participant

    Yes I know the margins were off on resize but were better than a fixed width.

    If you can change the html then it can be made perfect but you’d need a wrapper around the right column which would become your fixed element and then you would apply the same properties to the fixed element as your main wrapper and thus keep everything together.

    Here’s a proof of concept.

    in reply to: [Solved] Problem with fluid layout and position fixed #151180

    paulob
    Participant

    Hi,

    The problem is that the affix class simply adds position:fixed to the element and removes it from the flow. This would be no problem if you could apply a width to the new fixed element (as mentioned in the SO post) but a fixed width will break your layout at certain points.

    The only simple solution I can see at the moment without changing the html is to add some code like this:
    .panel-default.affix {
    left: 0;
    margin: 0 13% 0 40%;
    position: fixed;
    right: 0;
    }

    It’s not perfect but closer than a fixed width.

Viewing 7 posts - 151 through 157 (of 157 total)
icon-link icon-logo-star icon-search icon-star