Link to home
Create AccountLog in
Avatar of Brian
BrianFlag for United States of America

asked on

Text position issue using CSS

Hello Experts,

I'm trying to put together a template that will look nice in all major browsers. As I layout the page I'm applying borders around each element whicih is why you see the color borders.

My questions are below:

1) Why is the height of the nav ul the way it appears when I do not have a height applied to it. How can I remove that height?

2) How can I place the actually text/links to be aligned to the top so that they are flush to it's parent top near the border instead of centered within the element?

3) what is the best approach to move the <hr> tag so that it's slightly below the nav and logo?

Screenshot:
User generated image
CSS:
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    font-size: 1em; /* 16px */
    line-height: 1.4;
    background-image: url(../img/body-bg.png);
    background-repeat: repeat-x;
    background-color: #ffffff;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html {
    overflow-y: scroll;
}

#page-wrap {
    width: 960px;
    margin: 0 auto;
}

/* =================== 
   Begin HEADER styles 
   =================== */

header {
    width: 940px;
    margin: 42px auto 28px;
    border: 2px solid #f00;
}
    header img {
        float: left;
    }
    header nav {
        width: 600px;    
        float: right;
        border: 2px solid #ff6a00;
    }
        header nav ul {
            list-style: none;
            text-align: right;
            margin-top: 20px;
        }
            header nav ul li {
                display: inline;
                font: inherit;
                font-size: 0.875em; /* 14px / 16px */
                color: #999999;
                padding-left: 30px;
            }
            header nav ul li a:link {
                color: #999999;
                text-decoration: none;
            }
            header nav ul li a:hover {
                color: #999999;
                text-decoration: none;
                border-bottom: 2px solid blue;
            }
            header nav ul li a:visited {
                color: #999999;
                text-decoration: none;
            }

/* =================== 
   End HEADER styles 
   =================== */













/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   ========================================================================== */





/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

Open in new window

Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

It's difficult to know which styles are being applied to your elements from just an image. If you view your page in Firefox with the Firebug plugin installed, you can examine each element and see exactly what styles are being applied, as well as the box model - width/height, padding, margin and borders or each element.

Possible places to look for your answers:

1. In your CSS you have a line height of 1.4 set for BODY. This will cascade down to the content of your UL (LIs, A etc) unless otherwise specified, and it possible what's setting the height of the UL.

2. Change the line height (maybe of the LIs, maybe of A, maybe of SPAN - impossible to tell from image.

3. Remove either a top margin /padding on the HR or a bottom margin / padding on the logo or UL - again, impossible to tell from image.
Avatar of Brian

ASKER

I supplied my CSS code in case you someone needed to see it, which I thought that was enough.

As for the issue, I was able to resolve it. Please see what I had below and what I needed to change it to. Could you explain what that caused the issue? The After solution does what I needed help with. But not sure why I needed to apply that. Should I apply *{ margin: 0 padding: 0 } to my CSS?

Before:
        header nav ul {
            list-style: none;
            text-align: right;
        }

After:
        header nav ul {
            list-style: none;
            text-align: right;
            margin: 0;
            padding: 0;
        }
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Different browsers apply their own default styles to elements and these often don't match one another. The best chance of getting cross-browser layout is to reset all of these styles before starting - a CSS reset.

Applying:

* { margin: 0px; padding: 0px; }

is a kind of CSS reset, but a really lazy one (not too mention old), and I don't advise it. It's cumbersome and doesn't reset everything it need to.

I always start by resetting everythign using Erik Meyer's stylesheet and then building from there. Download his reset sheet, and save it as something like reset.css, then link to it in the head of your document before your own - something like this:

<link rel="stylesheet" href="/css/reset.css" type="text/css" />
<link rel="stylesheet" href="/css/yourStyleSheet.css" type="text/css" />

Download from here - http://meyerweb.com/eric/tools/css/reset/
Avatar of Brian

ASKER

I'm using the HTML5 Boilerplate CSS file and then applying my own styles to that. Is that the problem? If so, can I add a CSS reset within my main css file? If so, how and where do I add that?
If you add a reset stylesheet, just make sure it comes before all other CSS, either as a separate file (see above) or right at the beginning of your first stylesheet. If it comes after any other CSS, then it will reset what you've already put in place!

Using the HTML5 Boilerplate CSS isn't necessarily a problem if you understand CSS, otherwise you will have no idea why certain elements are styled the way they are.

The Boilerplate CSS is meant to be a starting point for you to edit to get the style your want. You may not like the defaults (such as margins on ULs) so it's up to you to change it.

I just prefer to start with a completely reset page, rather than relying on someone else's 'defaults'.

The single best tool you can get for this kind of work is the Firefox / Firebug combo. With that you can click on any element on any webpage and it will instantly show you what styles are being applied, and from where (which stylesheet, what line number etc) - it will speed up your development massively :)
Avatar of Brian

ASKER

@ChrisStanyon,

Ok, Since I'm using the layout of the HTML5 Boilerplate, this is the order they have the CSS. So Do I add the CSS reset on the first line of the normalize.css or the first line of the main.css file?

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
From the author:

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
So based on that, you shouldn't need another reset file.

The best-practice way to do things is to keep the stylesheets as you have them - normalize.css and main.css and anything you don't like in normalize.css, overwrite in main.css.

The difference between the traditional reset.css and the newer normalize.css is that reset removed all styling, borders, margins, paddings, widths etc, whereas normalize.css doesn't remove the styling - it just makes sure that browsers render the elements the same.

The author can put this much better than I can so have a read of the site - http://nicolasgallagher.com/about-normalize-css/
Avatar of Brian

ASKER

Ok, so in my case I can just add margin: 0 and padding: 0 to what ever elements I need to apply to. Rather than adding the css reset to the normolize.css file?
Avatar of Brian

ASKER

Or could I add margin:0 and padding:0 as the following below to my main.css styles?

* {
margin: 0;
padding: 0;
}
You could but it's ugly...

You're better off overriding the style on a per element basis.

If you apply * { margin:0; padding:0 }, are you then going to add suitable margins and paddings back to EVERY html element!
Avatar of Brian

ASKER

ok, thank you.