Inline CSS vs External CSS

HTML & CSS
1

Hello,

I have a small piece of CSS that shows a colored block. If I put it inline like this it works fine:

<div style="margin-left:auto;margin-right:auto;text-align:center;border:1px solid black;height:10px;width:15px;margin-top:1px;background:#ffa70d;"></div>

But if I put it in an external CSS like this, it doesn’t display correctly; it just shows up as a black line. It seems to be ignoring the width in every browser I try it in. Any ideas? This div will be shown hundreds of times on a page so therefore I want to put the styling in a CSS file to cut down on bandwidth.

I reference the following as:

<div class="status notstarted"></div>


.status
{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 1px solid black;
    height: 10px;
    width: 15px;
    margin-top: 1px;
}
.notstarted 
{
    background:#ffa70d;
}
.failure
{
    background:#f32f2f;
}

Thank you!

2

Ok.

I think now we’re at the point where we need to actually see the live page (or full, complete HTML and CSS code… use code tags if you do this). It can have dummy content if you need client confidentiality.

That or it’s something terribly obvious and I’m having a major brain fart and missing it!

You’re setting a width on the div, so it should have its width limited to what you set it to. Sometimes else is going on.

3

Hey,

Thanks for the reply again. My CSS file is referenced correctly as all of the other parts of it are inherited on the form. Also, the div displays a line (the border) from the CSS file and if I include text in the div, the color also shows as it pushes the width out. It seems to be ignoring the width…

&lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /&gt;

Thanks,

Jeffrey

4

The * is not going to cause a problem such as you describe. You’ll have to show us your <link> tag in the HTML.

Remember that the HTML page is calling the file relative to where it is.

So, assuming a Linux system (don’t ask me about windows):


webpagedir____
|              |
html.html css.css

if they are siblings like this (in the same folder), they are referenced as so:

<link type=“text/css” href=“css.css” rel=“stylesheet”>

so, definitely not with a leading slash (I’ll not get into stuff like mod_rewrite which could change that sort of thing).

If it’s in some whole other folder:


webpagedir____________
|                 |
html.html    somefolder
                  |
               css.css

you reference it as
href=“somefolder/css.css”

etc.

Another note: some characters, such as a BOM (Byte Order Mark) are not always visible while still being able to cause problems. When you save your CSS document, your editor you use, it’s saving it as a regular charset? (iso-8859-1, utf-8, etc and not “unicode”)?

BTW you can reduce redundancy in your code:


*
{
    margin: 0;
    padding: 0;<--- most elements do not have default padding, and this can be bad for forms
    text-align: left;<-- in a left-to-right page, this is the default
}
body
{
    border-width: 0px;<-- the body does not default to a border
    padding: 0px;<-- you already did this with the * above
    margin: 0px;<-- you already did this with the * above
}

re forms: removing padding from form elements can make things like submit buttons and select dropdowns more difficult for some users, esp when some browsers (such as Opera) will not let you add the padding back in.

For that reason, many developers only remove padding on elements who have padding and want it gone. Most of the time, for most people, this means lists (ul, ol) because some browsers use margin and others padding to indent lists to make room for bullets.

5

Hey,

Thanks for the reply. Yes it’s on the server and I can access it by typing the location in the browser. Here are the first three lines of the css. I need the * one for the layout. Do you think that could be the problem? What can I do to remedy if so? Thank you!!

*
{
    margin: 0;
    padding: 0;
    text-align: left;
}
body
{
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    font-size: 90&#37;;
    background-color: #ffffff;
}
.status
{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 1px solid black;
    height: 10px;
    width: 15px;
    margin-top: 1px;
}
.notstarted 
{
    background:#ffa70d;
}
6

There must be a problem beyond what you’ve posted.
.status {
height: 10px;
width: 15px;
margin: 1px auto 0;
text-align: center;
border: 1px solid black;
}
.notstarted {
background:#ffa70d;
}

Nothing in there that should stop it from working. The problem is either something like
-the link tag isn’t added to the HTML correctly
-the link tag refers to the wrong path or name of the css file
-something goofy at char 1 line 1 in the css file is preventing it from being readable
-the css file might have been saved as something other than type “text/css” (some text editors may save them as “text/plain” for example, or some other weirdness)

That I believe is where your problem lies: one of those (or a few of them).

Your site is already on a server? What is the file structure? Can you access your CSS as text via your browser (by typing in the path name you use in the link tag)?