17 replies [Last post]
dkperez
dkperez's picture
Offline
newbie
Last seen: 11 years 34 weeks ago
Timezone: GMT-6
Joined: 2010-01-14
Posts: 5
Points: 6

I'm new to using CSS and at times the entries I put in the .css file don't appear to work. For example:

In my html file I have:

    <link rel="stylesheet" href="salonentry.css" type="text/css" />
 
and in my html table Ive tried:
<th align=left><input id="salonheaderbutton" type="submit" value="Category" name="TCategory"/></th>
 
<th id="salonheaderbutton" align=left><input type="submit" value="Category" name="TCategory"/></th>
 
<th align=left><input style="background-color:#dddddd; color:#000; font-size:16px; font-weight:bold; border:1; height:40px; width:100%;" type="submit" value="Category" name="TCategory"/></th>

Of these, the only one that works is the one with the style embedded in the line.....

Here's the entry in the css file:
#salonheaderbutton {
background-color:#ee0000;
color:#000;
font-size:16px;
font-weight:bold;
border:1;
height:100%;
width:100%;
}

Is there some incantation that actually makes the entries in the css file work? Am I missing something that's intuitively obvious to the informed observer? Something? 'Cause this happens frequently, and I have to keep putting style tags in the html... So, what's the secret?

Mod edit / First secret is to learn how to display code in posts and to use preview button before submitting, code tags added.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hmm

It could very well be how your linking your external CSS file to your HTML.

Where is salonentry.css? Is it in the same folder as your HTML?

Does anything work when you use internal styles (instead of the external <link> tag, try <style type="text/css"> in the <head>, just for testing).

The height and width = 100% part wouldn't necessarily work well, but the rest of it looks valid. Inputs in most browsers are displayed like inline-block so they can have widths and heights but someone somewhere doesn't do it right (forget which browser, prolly IE) and height: 100% has its own special rules anyway.

So maybe we need to see either more code (in code tags) or if you have something online, even if it doesn't work, we can see your code if you provide a link. Then we can see also how you're trying to link your CSS.

Whenever CSS isnt' working, give someone like the body an ugly background colour. This always tells you right away if your CSS is getting to the browser at all and gives you a place to start (instead of worrying if it's some small part of code not working).

I'm no expert, but I fake one on teh Internets

dkperez
dkperez's picture
Offline
newbie
Last seen: 11 years 34 weeks ago
Timezone: GMT-6
Joined: 2010-01-14
Posts: 5
Points: 6

My salonentry.css file is in

My salonentry.css file is in the same directory as the php code and the php file that contains the html form.

Yes, some things work. I have a "container" tag that's outside the form and it sets background color and such. It works so I presume I getting to the .css file.

But I regularly run into trivial style entries that work when embedded in the html and are ignored when in the .css file. I figure there's got to be something I don't know that causes thing stuff to work (or not)... Is there ANY reasonable way to debug this stuff? The stuff in the .css file doesn't seem to show in the page source.

Up until I've been "debugging" by doing what you recommended... I start from the top of the css file and give each successive tag some wild color. That way I can tell they're getting to the browser. Most do.

>Does anything work when you use internal styles (instead of the external tag, try > in the , just for testing).

Can you show me the syntax for this? My knowledge of css is fledgling at best so I'm not sure how to change

to style......

Unfortunately, this is all running locally and not on the web yet. Developing in Firefox then seeing how badly IE 8 mangles it.

Here's a section of the code for my form:

  <body>
    <div id="container">
      <form name="salonentry" method="post" action="<?php echo htmlentities($_SERVER['REQUEST_URI'], ENT_COMPAT, 'UTF-8'); ?>">
 
        <TABLE id="salontable" width="98%" CELLPADDING=3 CELLSPACING=1 frame="box" rules="all">
 
          <tr id="salonheader" style="background-color:#dddddd; font-size:16px;  font-weight:bold;" valign="bottom">
 
            <th><input id="salonheaderbutton" style="background-color:#eeeeee; color:#000; font-size:16px; font-weight:bold; border:1; height:40px; width:100%;"
              type="submit" value="Media Type" name="TMediaType"/>
            </th>
          </tr>
        </table>
      </form>
    </div>
  </body>

The "container" tag works. The "salontable" one doesn't. The "salonheader one doesn't. The "salonheaderbutton" one doesn't. Here's the content of the css file:

#container{
text-align:left;
background-color:#eebb77;
padding:0px 10px 0px 10px;
margin:auto;
width:900px;
height:650px;
border-style: ridge;
}

#salontable {
margin:auto;
font-size:14px;
background-color:#aaeebb;
width:"98%";
frame:"box";
rules"all";
}

#salonheader {
background-color:#dddddd;
font-size:16px;
font-weight:bold;
}

#salonheaderbutton {
background-color:#ee0000;
color:#000;
font-size:16px;
font-weight:bold;
border:1;
height:100%;
width:100%;
}

I've tried taking the pieces out of the inline code, and adding things into the css one at a time. It doesn't seem to make any difference. The stuff that works, works. If it doesn't work, nothing I do seems to MAKE it work......

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Some errors

I'm not 100% sure what's happening here:

#salontable {
margin:auto;
font-size:14px;
background-color:#aaeebb;
width:"98%";
frame:"box";
rules"all";
}

I would *think* that the background would appear but the other stuff doesn't exist or the syntax is wrong.

width should be
width: 98%;
and the last two as far as I know don't exist. I've never heard of those properties before.

But I don't see any error with font-size, background-color, or margin (though you should know that tables act a bit different than regular boxes and sometimes even when you limit a width like that, they'll expand to container all children if they have to).

We don't know if you are using a proper doctype or not (since that affects how a browser will deal with your page). Here's the HTML code I would use if this were mine:

  <body>
    <div id="container">
      <form name="salonentry" method="post" action="php junk...">
        <div>
        <input type="submit" id="salonheaderbutton" name="TMediaType" value="Media Type" />
        </div>
      </form>
    </div>
  </body>

If this really is a one-button form (I'm not sure since you may be posting a stripped-down example) then instead of fieldset and legend, a div would work.
*edit I changed the code above to a div because HERE that makes more sense...
A div would act more sensibly [than a table] too, if you really do want a different-coloured container within the form. So long as the form has some set width, a div inside with width: 98% and margin: 0 auto should definitely show up correctly (again assuming you have a proper doctype).

#salonentry input {
width:100%;
height: 40px;
color: #000;
font-size:16px;
font-weight:bold;
background-color: #e00;
border: 1px solid #colour; /*need a colour here*/
}

Border generally requires at least three parts: a width, a style, and a colour. While black seems to be the default for many browsers, someone somewhere won't play ball. border: 1 doesn't tell the browser much, and has to guess (so will be determined by whatever default rules for error-handling the vendor programmed in).

Anyway I can't tell how much of the issue was the bad CSS (whenever the browser comes across something it doesn't recognise as valid CSS, it should just ignore those lines and skip them... however sometimes it will ignore the whole rest of the stylesheet, so that may be the problem) and how much is something else.

You will definitely want to get a server to throw these pages on because esp with images there are differences between local files and files on pages online. I always throw my pages on a server to test unless I'm doing an initial build.

Throw your HTML (after it has a proper doctype) through the W3C HTML validator and the CSS through the W3C CSS validator. Note that vendor-specific extensions will be called up as errors (that's ok) and any CSS3 will as well (you can change to CSS3 but those specs change regularly) but it would definitely catch stuff like syntax errors, missing ; and } and missing units.

I'm no expert, but I fake one on teh Internets

dkperez
dkperez's picture
Offline
newbie
Last seen: 11 years 34 weeks ago
Timezone: GMT-6
Joined: 2010-01-14
Posts: 5
Points: 6

I have to admit I've gone

I have to admit I've gone back and forth on the div versus table thing. I created one form using the div/label/input model and ran into enough problems that I converted it to a table.

In this particular case I posted a stripped down example. The form actually has 6 columns and is of indeterminate length. SO, because I had so much trouble finding a reasonable scrolling method, I stayed with the table model 'cause it's so easy to use table within a table for scrolling. And, of course, also because I've got a half dozen columns per line.

I'm still a lot flummoxed on the differences between style in html and style(Drunk in css.... I've spent a lot of hours formatting lines in html then trying to translate them to css. Sometimes it works, sometimes it doesn't work at all. So, I now have this odd amalgum of things that are in the css file and work, things that are in the css file and don't work so they're REPEATED in a style statement in html, and things that I've removed from the css file because they don't work and are no ONLY in the html code...

I guess I'm just going to have to live with the limitations, but it surprises me less than it did a month ago when I started with html, php, mysql, and css, and was TOTALLY astonished and dismayed at how primitive the tools and environments are... After weeks of wasting hours trying to resolve what SHOULD be utterly trivial issues, and getting responses to questions that usually amount to "the web doesn't do that very well" or "you can't do that here" or "you need additional tool to do that", I now have a much better understanding of why so many websites are so basic and difficult to navigate and work with. We had much better language sensitive editors and high quality screen-mode debuggers for building databases, and OLTP, mission-critical systems 20-years ago than I have now for doing web design and development... Its a lot like being thrown back to 1970 with primitive brute-force 3GL programming and print statements for debugging.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 31 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

dkperez wrote: I have to

dkperez wrote:

I have to admit I've gone back and forth on the div versus table thing.

Well, you shouldn't, because actually there is no "div vs. table" thing. Both are equally bad when abused.

The real dichotomy is "tables for layout" versus "semantic markup in html with added CSS for layout"

If you don't get the idea of "semantic markup" yet it's time to learn it. Tables have a perfectly valid use in semantic html as do divs, but "divitis" is just as bad as abusing tables for layout.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Heh

Quote:

I guess I'm just going to have to live with the limitations, but it surprises me less than it did a month ago when I started with html, php, mysql, and css, and was TOTALLY astonished and dismayed at how primitive the tools and environments are... After weeks of wasting hours trying to resolve what SHOULD be utterly trivial issues, and getting responses to questions that usually amount to "the web doesn't do that very well" or "you can't do that here" or "you need additional tool to do that", I now have a much better understanding of why so many websites are so basic and difficult to navigate and work with. We had much better language sensitive editors and high quality screen-mode debuggers for building databases, and OLTP, mission-critical systems 20-years ago than I have now for doing web design and development... Its a lot like being thrown back to 1970 with primitive brute-force 3GL programming and print statements for debugging.

Aha, a programmer trying to deal with CSS! Frustration is common there. You guys think too differently : ) And you have to realise that teh wereld-wide-wide-web was and essentially still is just a huge-ass collection of linked documents... with emphasis on the word "documents". Yes, web-apps aside... they are trying to do the work of compiled languages in an interpreted, document-based web.

The problem isn't the code standards so much as it is the interpreter. Each browser has its own bugs and people are using about 6 or 7 different browsers or more (and possibly with Accessibility Technology on top of that such as a Braille display, screen reader or screen magnifier).

Nested tables are definitely a b*tch to navigate when you have a linear browser or even a regular browser with a (linear-reading) screen reader on top. That's the main reason people say "tables are inaccessible". They're not, but when they're nested it just gets too hard to keep track of what is related to what, and you get gobbledygook.

I think you should sit back, take a break, and go get a decent CSS book (the one that got me started was Ian Lloyd's Build Your Own Web Site the Right Way Using HTML and CSS and I recommend it for starters) which tells it plain to you how the whole basis of this stuff works. I think going through a book like that (using the book's examples and not trying to make a current project work with it) will clear a LOT of things up and will ease hair loss on your part : )

Then, when you get back to your more complicated sites, you know better where to go sniffing for specific things. Yes, there's a lot of stuff you can't do with CSS, but there are a lot of ways to fake it, which is just as good. Some of them are too clever for their own good but most of them are actually standard techniques used by those of us who have the time to keep up on what's going on in CSS.

Quote:

In this particular case I posted a stripped down example. The form actually has 6 columns and is of indeterminate length. SO, because I had so much trouble finding a reasonable scrolling method, I stayed with the table model 'cause it's so easy to use table within a table for scrolling. And, of course, also because I've got a half dozen columns per line.

I wondered. There's a better way (markup-wise) to write a form, but it does require a decent knowledge of CSS to pull it off without hair loss.

In the meantime you could take a look at this:
*edit, the imaginekitty site has taken the form down!! Those nuts! It was a nice multi-column tableless site.

I could link to my personal forms site but I don't have a multi-column one on there.

Again, if there were a live site (even a dummy one) we could still pretty easily see why some styles aren't appearing at all etc. There ARE rules for these things, they just take some time to figure out.

I'm no expert, but I fake one on teh Internets

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

How to link styles

I missed this earlier:

Quote:

>Does anything work when you use internal styles (instead of the external tag, try <style> in the <head>, just for testing).

Can you show me the syntax for this? My knowledge of css is fledgling at best so I'm not sure how to change

to style......

Three ways to introduce CSS, and then a fourth:

You're familiar with inline styles, those ones you reference when you say
<table style="background-color: #000;" ...>

They override all other styles (except any styles a visitor sets in their own browser) and are limited in that they cannot deal with the pseudo-classes (such as :hover).

Next is internal styling, which can be overridden by any inline styles (above) but itself will override any external styles (another file). Internal styles are writtin in the HTML document, but up in the <head> inside <style> tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en">
    <title>OH LOOK A TITLE</title>
    <style type="text/css">
table {
  background-color: #000;
}
    </style>
  </head>
<body> rest of page...

Last (for authors) is external styles, brought to the page with the
<link> tag in the <head>. Things like adding @import in places, while considered valid as far as the specs are concerned, don't always work well cross-browser. I generally try to avoid @import unless I specifically need it for something... this includes the charset-setting some people put at the tops of their CSS files. If you want the CSS file to be utf-8, set that with in the server headings and save the document in that charset in your text editor. If the two don't match, the server will override... if the two charsets are very different from each other, you'll get a lot of mangled characters.

The fourth way is users defining their own stylsheets, which normally should always be able to override your (the author's) stylesheets. The exception is when you use !important. !important exists nowadays to help users override author stylesheets, but sometimes you see people using them in their author stylesheets. It's something to be aware of. The old CSS specs are different than the current ones regarding who controls !important.

Whenever the browser runs across CSS it does not recognise, it ignores it.

If there's a syntax error such as a missing ; then the rest of the ruleset may be ignored. A missing } may mean the rest of the stylesheet itself may be ignored. If there's a syntax error in the HTML, then what you get will vary per browser, as they each have their own personal version of error-correction. Why the validator is good: it's not a Lint program but it's good for catching typos, fat fingers, stoopid mistakes and other things like that.

I went hunting for the weird stuff like rules="all" and found them. The reason I never see or use them is, they're Before My Time, like applets, center tags and framesets : )

w3c wrote:

Note. The following sections describe the HTML table attributes that concern visual formatting. When this specification was first published in 1997, [CSS1] did not offer mechanisms to control all aspects of visual table formatting. Since then, [CSS2] has added properties to allow visual formatting of tables.

For pure lines and no spaces between, I do
table {
border-collapse: collapse;
border: 1px solid #000; /*makes a border around the table itself only*/
}
th, td {
border: 1px solid #000;
}

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The correct nomenclature for

The correct nomenclature for styles referenced from within the 'head' section of a document is 'Embedded Styles'

Programmers Sad( you're all so ill suited to web development Wink (said in a kindly way Smile)

Erm there are plenty of good code editors to be found, never heard of anyone complaining, are you after something that you are more familiar with? an IDE perhaps, they do exist Eclipse, Aptana are two that spring to mind but in reality web development isn't really geared to working this way there are too many disparate elements to it, and I guess why we do what is referred to as Hand Coding?

Side note: @import should really not be used to call files, it was only ever used as a hack as certain browsers (NN4) couldn't understand the property and would fail to load the stylesheet called in this fashion and as they made a complete dogs dinner of any CSS it was better they parsed none. So as it was only ever really a hack it's not justified to continue it's use in this manner it's place belongs inside other stylesheets used in cascading styles down through successive files.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dkperez
dkperez's picture
Offline
newbie
Last seen: 11 years 34 weeks ago
Timezone: GMT-6
Joined: 2010-01-14
Posts: 5
Points: 6

Well, it's been a week....

Well, it's been a week.... And I NO LONGER have any hair. Actually, I didn't have any hair before as you probably guessed from my comment about "its like going back to 1970 and doing brute-force programming"....

I think the earlier comment that programmers are "ill suited to web development" may be
correct. At least in my case. I expect the world to conform to rules and 2+2=4 to always be true, and I'm used to editors that understand language you're writing and perform very basic tasks for me like matching up beginning and ending parentheses and "}" (whatever those are called), and even actually validate the syntax BEFORE you try to run them. And I've been spoiled by good debugging tools that let me walk through code, set breakpoints and watchpoints, and watch variables change, see call stacks, and so on... Clearly, I've led a sheltered life in the Oracle, Microsoft, VMS world(Drunk.

It was a VERY rude awakening when I entered the chaos of doing web stuff... One interesting thing I've found, and NOT just in this forum (so don't get your undies in a bunch), is that there seem to be an awful lot of people obsessed with semantics... Not as defensive as the Mac people, but way too much effort seems to be expended worrying about not having the precise terminology rather than addressing the underlying problem... The php people are really obsessed, the html folks not so much.

In any case, I'm still finding CSS to be haphazard as to when it works and when it doesn't. For example, I said earlier I had an entry for a division and it was working. Today, I copied it, gave it a new name, and now it's not working in the new context.

I (theoretically) validated the css file using one of the online validators, which found no errors. I copied the text from the id= TO the CSS entry to ensure it was spelled right. I finally pulled all the pieces out of the CSS entry and embedded them in the div and they work perfectly...

And yeah, I KNOW I can go get yet ANOTHER book, and spend some number of hours trying to figure out the intricacies of CSS (yet ANOTHER language/tool) rather than designing and building forms, but at this point I'm about at the point of just pulling the stuff out of the CSS file and embedding it where I need it. At least that way I can see what's going on when I look at the source. But, before I surrender completely, two questions:

1. can one entry in a css file "break" another entry? As in can the error in "duescontainer" cause "salonprintcontainer" not to work? 'Cause at the moment, it doesn't.
works when embedded in the html tag:
 <div id="salonprintcontainer" style="background-color:#00eeee; margin:auto;">
doesn't when I pull the style out...

#duescontainer{
background-color:#ccfccf;
border-style: ridge;
align="center";
}

#salonprintcontainer{
background-color:#00eeee;
margin:auto;
}

2. Is there any way to see how the html form is using the CSS file? As in, here's the reference in the html, and here's the entry in the CSS file it's using because of that reference?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: 2. Is there any way to

Quote:

2. Is there any way to see how the html form is using the CSS file? As in, here's the reference in the html, and here's the entry in the CSS file it's using because of that reference?

YES! it's the debugging tool you've been moaning about Smile (only kidding)

Immediately run Firefox open 'Add Ons' search for 'Firebug' when found install said item and start debugging, it's a powerful and great little debugging tool for all manner of frontend client side coding and absolutely indispensable.

I wrote a brief and sloppy beginners guide to using it somewhere in the 'How To' area of the forum (post might be somewhat broken with recent forum changes)

There are a lot of statements/questions you raised which beg some retorts/answers to which we ought to come back to in time.

To defend the position of semantics/nomenclature I would say as a programmer you should really understand this point? It's vital that in any programming, scripting interpreted, declarative languages one follows a convention in nomenclature and semantics otherwise how do we know what the other is referencing?

'}' Curly Brace

As for 1. it's impossible to answer we would need to see all of the code to see where things are going wrong. The fundamental aspect of frontend coding is that it's comprised of a number of languages all doing their thing BUT they do so in a symbiotic harmony and the master of all this is the DOM and the 'thing' that instigates that is your document; the vital thing to always be able to see is your markup file as that is the primary vehicle which everything else serves and works from.

Quote:

and now it's not working in the new context.

Then put simply the context has changed! but we can't see this complete picture to be able to point out that change, but it's there somewhere.

At the moment you are floundering on this aspect of debugging and that is understandable firebug will be your salvation here but also it's worth understanding that to a large degree frontend coding is pretty much a manual discipline when it comes to debugging, if I have issues the first thing I do is scan the relevant code and look for those daft errors.

Lastly - at least for the moment - do NOT surrender, hang on in there and we will attempt to get you over this initial hump and when you have things will start to make a little more sense, you might still have misgivings about the nature of frontend development but you will feel more comfortable with them. You need to show all relevant code though when there are issues CSS and markup are tied together CSS without markup is nigh on meaningless.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hm..

Quote:

I expect the world to conform to rules and 2+2=4 to always be true, and I'm used to editors that understand language you're writing and perform very basic tasks for me like matching up beginning and ending parentheses and "}" (whatever those are called)

If you take the red pill, 2+2 does = 4, except in IE.

I'm used to editors that beep at me when I hit ESC. If you're going to continue in front-end stuff you might need to ween yourself off of pushy editors who think they can code better than you : )

so you don't {
 do {
    C-style languages?;
  }
}

C-style syntax I thought was used for CSS to help it look more familiar to people, lawlz. Even though it's not even a programming language.

Quote:

It was a VERY rude awakening when I entered the chaos of doing web stuff... One interesting thing I've found, and NOT just in this forum (so don't get your undies in a bunch), is that there seem to be an awful lot of people obsessed with semantics... Not as defensive as the Mac people, but way too much effort seems to be expended worrying about not having the precise terminology rather than addressing the underlying problem... The php people are really obsessed, the html folks not so much.

Imagine if semantics didn't exist... good lord, my ramblings in Engrish would possibly make sense!
Semantics tells you how what you say means what you mean, or how it doesn't because you goofed. It also helps people know how to search for something in teh googles.

In the HTML world it means, you used the Right Tag For The Job. Some folks go ahead and built everything in a list, or everything in a table, but they miss that this is saying "Everything here is a list" or "everything here is tabular data". That's semantics.

#duescontainer{
background-color:#ccfccf;
border-style: ridge; <--MEANS NOTHING TO BROWSER ALL BY ITS LONESOME
align="center"; <--ILLEGAL, MEANS NOTHING... DID YOU MEAN TEXT-ALIGN: CENTER?
}
 
#salonprintcontainer{
background-color:#00eeee;
margin:auto; <-- ONLY WORKS IF YOU SET A NON-100% WIDTH
}

If you're familiar with JSON or JS objects... CSS does it like that (except property names aren't strings).
#element {
property: value;
}
no quotes unless it's a multi-word font family, a literal string, or it's optional when mentioning src of data.
Never = signs. Always :

But that the bg colour doesn't appear, as Hugo says it absolutely matters what else is in your tag soup. CSS especially, is a "Cascading" thing, and also an "inheriting" thing. There are rules for this.

Quote:

And yeah, I KNOW I can go get yet ANOTHER book, and spend some number of hours trying to figure out the intricacies of CSS (yet ANOTHER language/tool) rather than designing and building forms, but at this point I'm about at the point of just pulling the stuff out of the CSS file and embedding it where I need it. At least that way I can see what's going on when I look at the source.

There is another possibility, but you'll have to ask yourself: do you WANT to figure this out, or do you want it DONE and working? Both are completely valid paths but one will take you at least a year I think to really get into it well (or maybe I'm just a little slow) and the other will just lighten your wallet (which might be worth saving that last hair).

It's possible when you're trying to write a French novel that you might just want to hire a competent translator who speaks native French, instead of you trying to learn all the semantics (lawlz), grammatical rules and strange idioms of a doesn't-follow-logical-rules language in a few weeks.

Often back-enders who are fine dealing with One Compiler To Rule Them All get pushed into the front-end and either they or their bosses think it's all kinda the same. They're not. You might have been an astronaut but now you need to fly a plane. Very different, and not easier.

I'm no expert, but I fake one on teh Internets

dkperez
dkperez's picture
Offline
newbie
Last seen: 11 years 34 weeks ago
Timezone: GMT-6
Joined: 2010-01-14
Posts: 5
Points: 6

I'll try the debugger, 'cause

I'll try the debugger, 'cause things are composting faster than I can shovel.

#duescontainer{
background-color:#ccfccf;
border-style: ridge; <--MEANS NOTHING TO BROWSER ALL BY ITS LONESOME
align="center"; <--ILLEGAL, MEANS NOTHING... DID YOU MEAN TEXT-ALIGN: CENTER?
}

#salonprintcontainer{
background-color:#00eeee;
margin:auto; <-- ONLY WORKS IF YOU SET A NON-100% WIDTH
}

Isn't this the stuff the online validator is supposed to catch? And if not, what's
the point of running things through it? Or is there a validator somewhere that actually
validates and a bunch that don't?

>It's possible when you're trying to write a French novel that you might just want to hire a competent >translator who speaks native French, instead of you trying to learn all the semantics (lawlz), >grammatical rules and strange idioms of a doesn't-follow-logical-rules language in a few weeks.

I presume you're implication is that it would be good to buy a body.... That's a great idea, and when I'm doing consulting for people with money I stay in the backend and design and build databases and let someone else do the front-end. Unfortunately, this is a non-profit, with no money, and I'm doing them a "favor"... Which very aptly demonstrates the truism that "No good deed goes unpunished".

But, I'm improving. The mistakes I make now are bigger, harder to find, harder to fix, and more interesting than they were a month ago...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm wary that you might still

I'm wary that you might still be thinking that there is this genius debugger that simply fixes stuff?

Debuugers simply - at best - highlight where there is an issue i.e might halt on or step through, you still generally have to have the knowledge to identify the problem and correct it.

The CSS errors would perhaps have been caught by the Jigsaw validator as being illegal but generally most of would not bother valadating CSS as errors like that we simply either don't write or spot quite easily, but that comes with experience as it does with any coding disipline one cares to mention.

Validators only check code against a set of proscribed values/rules they will catch unclosed elements - if your schema you are valadating against says they must be closed - they will perhaps highlight non/deprecated attributes, but what they can't do is say if your layout works. Entirely valid code can still not functions as one was expecting and/or browsers can at times place a different interpretation on that valid code.

Working with firebug will however give you a much better idea of what's going on. Please report back biefly and let us know if you are finding it a help.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Like I said, they're both

Like I said, they're both valid paths. It may also be possible to find a front-ender to volunteer with you to handle the front end as well.

The CSS validator would definitely have caught this:

align="center";

however there's nothing syntactically wrong with border-style: ridge; it's just that, borders are made up of three components (colour, thickness and style) and if you're only listing one, the browser will look back to see if somewhere else the other stuff was also mentioned somewhere. If not, it will possibly have a default built in (many but not all browsers will default to black if no colour is set).

likewise there's nothing wrong with margin: 0 auto; by itself on some J Random Box.

But if J Random Box is a static block, then it will follow the natural rules (laid out in obscure Engrish here at http://www.w3.org/TR/CSS21/visuren.html) for static blocks, one of which is
width = 100% of its container

and if you're 100% wide, then you can't be centered, can you? Because centering does imply something like, "equal space on either side of you" but if there's zero space on either side of you, you're not centered.

And if that box were not a static block, but instead, say, floated, then other rules come into play: not only is there no such thing as float: center (no matter how much many of us would LOVE to have such a thing), but auto-margins are ignored by floats. You're either floated, or centered, but not both.

Automargins are also ignored by inlines. Inlines don't have an explicit width and you can't give them one, because they are inlines. Their width is always determined by their content and to some extent by their parent container. So sometimes you see people trying to center some anchor text. They might try this first:
if the HTML is this:

<p class="foolink">
<a href="foo">Linkie</a>
</p>

uh,
a {
margin: 0 auto;
}

nope. Oh we need a width, they think:
a {
width: 5em;
margin: 0 auto;
}

nope, still sitting on the left.

Maybe more specificity?
p.foolink a {
width: 5em;
margin: 0 auto;
}

darn. What about text-align? That works with inlines.

p.foolink a {
text-align: center;
}

hmm, why isn't that working?

People easily lose hair like that. I'm doing the same thing with Javascript right now. I can read the rules but since I also need to actually see what they do, I'm doing a whole lot of the above right now. And losing hair.

You could either
p.foolink {
text-align: center;
}
because text-align is set on a parent to influence inline children. Inlines aren't considered to have inline children by themselves.

or
p.foolink a {
display: block; (now it's 100% wide, but could be centered)
width: 5em; (now the width can kick in!)
margin: 0 auto; (finally, it's centered!)
}

I'm not sure if it will be easy or hard for you to read that visuren page but it mostly explains these.

The CSS validator will mostly only catch syntax errors like align = "center" (and also warns against similar colours which has always been useless for me) but it won't catch you from talking into a paper bag in the park (which maybe is a bit of a shame, and would have saved me hair).

Still none of this answers the first question of why only inline styles get heard but if the CSS validator does not mention any hard syntax errors (like missing brackets or semi-colons) then you'd need to post code, or a link to a dummy page (that way your content is no public and we can see what's going on... either with our own eyes or with above-mentioned debuggers).

I don't get 2% use out of Firebug but that's firstly because regarding CSS I don't need it to tell me because I wrote it myself and I know what's going on (so I use it more for looking at other people's pages where I don't know the code), and second because I'm not using it for JS debugging which I hear is much much more useful for.

But for you, you can get a lot of value out of the Click To Inspect button, then get the element (#salonprintcontainer) highlighted, and on the right (unless your defaults are set differently from mine) you'll see which styles it's getting (at least as far as FF is concerned).

There's also an IE Dev Toolbar which looks superficially similar to Firebug, though it doesn't do as much... but, it will tell you if an element has Layout which is nice.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

There's also Operas tool

There's also Operas tool dungbeetle, earwig, mayfly, well something along the lines of an insect anyway

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

dragonfly

Lawlz, Hugo.

Funnily enough I got it to Do Stuff in 9.64 but Opera 10 I just get a blank console.

*sigh* which means I guess I have to go man up and RTFM. : (

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

That's the one Have to admit

That's the one Smile Have to admit hadn't looked at it in a while, must see if it does still run in 10.10

Still there under tools > advanced > developer tools not sure why I can't activate like firebug from footer bar probably preference setting somewhere can't see a shortcut either?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me