Noobie help please, HTML page does not apply the CSS Options

[TW Allen]

I'm rebuilding my website, originally built in Frontpage lo so many years ago.

I'm doing it in basic HTML and CSS.

I created a basic page and style sheet. They work fine on my local machine, but they don't work when I load it to my server unless I create a subdirectory and it will work.

The site is at: allendesigns.com
That's where it doesn't work (CSS styles are not applied).

the site at allendesigns.com/temp does work.

What am I doing wrong? This is driving me nuts, especially when it works locally and at my site under a subdirectory.

TIA

[pandy]

Looks styled to me. Both pages look the same.

[TW Allen]

Looks styled to me. Both pages look the same.

It's fine on my phone, too. This is driving me crazy!

[pandy]

So it is in a specific browser the CSS doesn't load? What browser?

The validator finds a bunch of fatal errors in your style sheet. But I confess I don't understand them
https://jigsaw.w3.org/css-validator/validat...ng=&lang=en

Parse Error cursive? I've never seen that before.

[pandy]

Ah, I'm stupid. I thought cursive was some kind of keyword I didn't know. But the validator points out where you have used the word cursive.

You've accidentally written a semicolon where you should have a comma in those rules the validator points out. For example here.

CODE

h1, h2, h3,  nav        {        font-family: "Comic Sans MS";
                                        cursive;
                                        text-align: center;}

The font families should be separated with a comma, not a semicolon. Like so.

CODE

h1, h2, h3,  nav        { font-family: "Comic Sans MS", cursive;
                          text-align: center }

As you have it 'cursive' is an unknown property without a value. Enough to make a browser choke.


The next mystery is why you see the CSS OK in the temp directory, because the style sheet is the same as far as I can see. And why I see it fine in both places. I shouldn't, with those errors.

[TW Allen]

I found the problem!
After I rebooted the computer, it appears fine.
Thanks for the review and taking the time to look at this.

[pandy]

An you use a different style sheet. All is well then.

[TW Allen]

I guess I didn't find the problem. Once I started to use the computer, I looked at the site again and no css effects. That is with Chrome. I loaded it in Edge and it looks fine. I cleared out the cache and that didn't help. I'm still looking for the culprit. I'll report back if/when I find something.

Thank you,

[pandy]

You have the same error again, but in another spot.

CODE

.AD.TITLE {
    font-family: "Arial"; centered;
        ...

Should be like so.

CODE

font-family: "Arial", centered;

And you have a lot of HTML errors.
https://validator.w3.org/check?uri=http%3A%...ine&group=0

But those shouldn't stop Chrome for displaying the CSS. I don't have Chrome, but I have Iron that's supposed to be the same without the spy components. And again I see a styled page.

Anyway, please fix the errors. It's much easier when one knows everything is kosher.

[TW Allen]

At least I'm consistent!
:-)
Yes, I now remember to validate my files before publishing them.
I'm not sure if that's the reason for my current problem. The webpage works fine in MS Edge and on my phone and Android tablet.

[pandy]

I don't think it is the reason. But if you fix the errors we'll know if it is or not.

[TW Allen]

O.K. I think I've got the errors cleaned up. I still have three problems.
1. I can't figure out how to do the background image. If I let Dreamweaver (CS6), it puts errors in the code. When I solve the errors, the background doesn't display. I've got it in my CSS code, but I don't know where to put the call for that. I've tried "body", but that doesn't work.
2. The name of the company and address are supposed to be centered. I've got CSS code to center it, but it still won't center.
3. In the table below "Specializing in...", I would like to make the columns equal width.
The HTML file is at allendesigns.com/index.html
and the CSS file is at allendesigns.com/AD.css
the background image is greybrk.jpg.
Another question. I know DW CS6 is an old version, but I don't want to go on subscription. DW CS6 seems to put a lot of errors in my code that I have to clean up. It's nice to use to make tables, but I still have to do a lot of manual coding behind it. Any advice here?
Thank you.

[pandy]

O.K. I think I've got the errors cleaned up. I still have three problems.

1. I can't figure out how to do the background image. If I let Dreamweaver (CS6), it puts errors in the code. When I solve the errors, the background doesn't display. I've got it in my CSS code, but I don't know where to put the call for that. I've tried "body", but that doesn't work.

Is this the background image?

CODE

.AD_BODY { background-image:url(graybrck.jpg); font-family: Arial; font-size: 16px; text-align: left;
    color: #006898;}

You don't use that class anywhere in the HTML, that's why it doesn't show. Is the background for the whole page? Then use it with BODY, no need for classes.

2. The name of the company and address are supposed to be centered. I've got CSS code to center it, but it still won't center.

Well, text-align: center doesn't apply to inline elements. It applies to block level elements like P, DIV, H1... and centers text and other inline content within them. One way to do it is to wrap that whole section in a DIV and use text-align center with that DIV.

3. In the table below "Specializing in...", I would like to make the columns equal width.

Make all three THs the same width. It could be percent, pixels, em or whatever. For example this would work.

CODE

th    { width: 33.3% }

CODE

Another question. I know DW CS6 is an old version, but I don't want to go on subscription. DW CS6 seems to put a lot of errors in my code that I have to clean up. It's nice to use to make tables, but I still have to do a lot of manual coding behind it. Any advice here?

No, sorry. I've never used programs like that. I just use a text editor.

[TW Allen]

Pandy -
Thank you SO MUCH for you help. Everything is fixed and validated. It still doesn't work on my desktop using Chrome, but it works using Edge and, most importantly, it works on my phone (how most of my customers find me). Additionally, using simple HTML and CSS with no garbage installed by a WYSIWYG editor, the files are a fraction the size of what they used to be. Now, building web pages is no longer a tedious and aggravating task. I can now get things done so I can go back to what I do for a living. You may be an accessory to the creation of a monster! LOL

[pandy]

Glad I could help.

Yes, it gets much smaller without the mumbo jumbo and much easier to maintain too. Odd about Chrome. Maybe Christian can take a look. I think he has Chrome.

[Christian J]

Maybe Christian can take a look. I think he has Chrome.

I'd never use Chrome due to its highly suspect parent company, Google/Alphabet.

But I do have Chromium-based Brave and Vivaldi. Brave explicitly says it's blocking http://allendesigns.com/AD.css because it's considered a "Cross-site tracker", while Vivaldi's web inspector reports:

CODE

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

...a message some websites say could be caused by adblockers. That sounds reasonable, considering the name of the file ("AD.css"). Both these browsers have built-in Ad- and Tracker-blocking, but any other browser's extensions might block the file as well. Didn't Chrome start blocking ads (from sources competing with Google's own ads) a while ago?

Chromium-based Edge didn't block it though. Also it's strange that http://allendesigns.com/temp/ad.css isn't blocked.

[pandy]

Right. I actually have Vivaldi too but didn't think about it. Downloaded it just to check it out and didn't like it.

That sounds reasonable, considering the name of the file ("AD.css"). Both these browsers have built-in Ad- and Tracker-blocking, but any other browser's extensions might block the file as well. Didn't Chrome start blocking ads (from competing sources than Google's own) a while ago?

Reasonable or plain stupid? That's what ad blockers did 15-20 years ago. I thought they were smarter now.

OK. So renaming ad.css should solve the problem.

[TW Allen]

I am having difficulty will table borders. In the page: allendesigns.com/projects.html, I can get the outside border, but I cannot get the borders between the cells. What do I need to do?
Thank you

[Christian J]

Reasonable or plain stupid? That's what ad blockers did 15-20 years ago. I thought they were smarter now.

Reminds me of how pictures were blocked if their dimensions were that same as common ad formats. And why AD.css, but not ad.css?

Everyone knows that to use all caps is spammy.

[Christian J]

I am having difficulty will table borders. In the page: allendesigns.com/projects.html, I can get the outside border, but I cannot get the borders between the cells. What do I need to do?
Thank you

In CSS the TABLE, TH and TD element borders are styled separately, so you need CSS rules for all of them.