Printable Version of Topic

Posted by: TW Allen Apr 12 2021, 06:39 PM

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

Posted by: pandy Apr 12 2021, 06:44 PM

Looks styled to me. Both pages look the same.

Posted by: TW Allen Apr 12 2021, 07:17 PM

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

Posted by: pandy Apr 12 2021, 07:59 PM

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/validator?uri=http%3A%2F%2Fallendesigns.com%2Fad.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

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

Posted by: pandy Apr 12 2021, 08:23 PM

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.

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



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.

Posted by: TW Allen Apr 13 2021, 11:16 AM

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

Posted by: pandy Apr 13 2021, 11:50 AM

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

Posted by: TW Allen Apr 13 2021, 12:05 PM

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,

Posted by: pandy Apr 13 2021, 12:15 PM

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

Should be like so.


And you have a lot of HTML errors.
https://validator.w3.org/check?uri=http%3A%2F%2Fallendesigns.com%2F&charset=%28detect+automatically%29&doctype=Inline&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.

Posted by: TW Allen Apr 13 2021, 03:18 PM

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.

Posted by: pandy Apr 13 2021, 05:03 PM

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

Posted by: TW Allen Apr 13 2021, 09:06 PM

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.

Posted by: pandy Apr 13 2021, 09:32 PM

Is this the background image?



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.




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.




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






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

Posted by: TW Allen Apr 14 2021, 08:54 AM

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

Posted by: pandy Apr 14 2021, 11:51 AM

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.

Posted by: Christian J Apr 14 2021, 12:57 PM

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:


...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.

Posted by: pandy Apr 14 2021, 01:03 PM

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

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.

Posted by: TW Allen Apr 14 2021, 01:32 PM

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

Posted by: Christian J Apr 14 2021, 01:37 PM

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.

Posted by: Christian J Apr 14 2021, 01:42 PM

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

Posted by: TW Allen Apr 14 2021, 01:55 PM

Soooo....if I have some tables with lines (borders) and some without, I have to create a class (or classes), right?

Posted by: pandy Apr 14 2021, 02:13 PM

Classes, IDs... If there isn't already something in the HTML you can use to create a selector.

Posted by: TW Allen Apr 14 2021, 03:33 PM

I've learned (finally) that if it has to do with formatting and I use HTML, I'll get a validation error. So, if I have tables that are formatted differently, I need unique classes for each one. I'm getting it. Slowly but surely. I got that (lines around cells) done. See allendesigns.com/projects.html. It doesn't look the same on my phone as it does on my monitor. I'm guessing that might have something to do with resolution, number of pixels, etc. Maybe not. Still having trouble with Chome on my desktop.

Posted by: TW Allen Apr 14 2021, 03:34 PM

I've learned (finally) that if it has to do with formatting and I use HTML, I'll get a validation error. So, if I have tables that are formatted differently, I need unique classes for each one. I'm getting it. Slowly but surely. I got that (lines around cells) done. See allendesigns.com/projects.html. It doesn't look the same on my phone as it does on my monitor. I'm guessing that might have something to do with resolution, number of pixels, etc. Maybe not. Still having trouble with Chome on my desktop.

Posted by: pandy Apr 14 2021, 03:43 PM

Well, you need *something* that distinguishes the table you want to target from the others. If there's nothing else, class or ID it is.


Say you have some Ps (a table would be odd and I can't think of another example right now) in a sidebar where you also have other things, links and images maybe. You have probably wrapped everything in the sidebar in a DIV to be able to style it uniformly.

Maybe the HTML looks like this (simplified).

Now you want the Ps in the sidebar to be red, but only those. You don't need to class them, because you can use the ID the DIV already has.



Without the DIV, yes you would need to use class.

Posted by: TW Allen Apr 14 2021, 04:19 PM

Thank you!