CSS Layout Fundamental Verification Help?

Thanks for confirming. The reason I considered it relevant is because you can measure distances on screen like spacing between margins. Since some of this thread was about that like the part where we did the padding. You can use it to measure the changes after making any change to the code. Also the tool is free unless you want the premium features which I don’t use. Lastly I am not associated to I have no relationship to the app or person who created it in any way. Just something I find valuable. I have used it on this project already.

Screen Calipers

I still use an older version without the 360degree rotation. I am sure they will send a link to that if you would rather go that way.

Yet, defintiely handy, although I find I use that sort of thing less these days than in the past. I use as similar thing called xScope. I used to use it more to measure up Photoshop, PDF and other such docs that web pages. Using the Inspect Element feature in browsers, you can hover over elements and see straight away what the various margins, paddings etc. are too.

Thanks for letting me put that here. I know not a lot of people will want it but there may be some that will. That is why I asked.

I would never promote myself here for profit so I wanted to make sure that it was okay first. I don’t even plan to put a link in my profile to anything related to me.

1 Like

Heh, you are welcome to, though. It’s not that strict. When you become a part of a web community, chances are that people will want to know more about you, connect with you etc.—and that’s a great thing. But that’s quite different from someone introducing themselves to you and immediately stuffing ads in your face, which no-one would want—either in a forum or in real life. :slight_smile:

Glad to know in case I ever do decide to put something there. But really other than forums and one small blog with only a couple of posts I try to keep my personal life off of the web.

As an end note here. I am still struggling with a menu. The software I downloaded to try does not validate with W3C so I am just going to pick something, get it up, finish the site then as time goes by if I find something really nice that fits my needs I will change it then.

I will keep the css for the menu as a separate file to make that chore a bit easier.

1 Like

What you have now looks pretty good. Validation is important but not the be-all. It’s useful for pointing out potential failure points, but sometimes it’s a bit too purist, complaining about things that work just fine, so don’t get too hung up on it.

Agreed, the validator is a tool, not the rule.

As long as you understand any warnings it might give you. you’re all set

So you guys are saying that 100% validation is not necessary? If so great. The menu there is from a program I downloaded. It does have limited layouts but I can purchase it for just a few $ and then I can change things very easily by just copying the nav section into my pages if I change links or simply just replacing the associated style sheet if I just want to change looks.
So based on that do you guys think I should just stay with what I have?

The key is, as long as you understand what the warnings are about, and that you accept any potential problems you may have because of them.

That is, don’t ignore them, understand them.

That is the thing, Since I did not write the menu I am not sure of the errors.
These are what they give me along with a long list of unknown vendor extensions.
12 ul#css3menu1 Property zoom doesn’t exist : 1
13 ul#css3menu1 Parse Error *display:inline;
13 ul#css3menu1 Parse Error ;}
23 ul#css3menu1 a Value Error : border-color Parse Error :

The other great thing you get with Notepad++ is an FTP client - you won’t find one of those in Notepad. Whilst I wouldn’t necessarily use that feature for updating a live site (i.e. out on the internet), it’s perfect for firing updates at my local server. For uploading to my live site, I use FileZilla, as I can upload multiple files/folders as a single job.

Has anyone mentioned Accessibility guidelines yet? I use a little Bookmarklet to check for things like adequate contrast between text and background, and at the smaller font sizes, the contrast on your site is lower than recommended. Especially if the audience for the site is retired folks, you have to keep in mind how easy it is to read the content.

Try this website to check the contrast: http://webaim.org/resources/contrastchecker/

All images should have alt text, too.

Regarding references above to Java: if it hasn’t been mentioned yet, it’s important to note that Java and JavaScript are two different things. I admit that I haven’t quite forgiven Netscape for renaming it JavaScript as a marketing ploy.

I’m not sure how this will work with the dropdowns in the nav package you’re using, but I’ve started using display: inline-block instead of float: left for the li elements in a horizontal navigation. It seems to work better for spreading the navigation across its container while keeping the contents centered.

2 Likes

Thank You for the contrast site, at the moment this is just a template to get my general setup ready. Colors are not set in stone yet and images are just place holders so no need to put alt text until we get to that point.

I’m glad to help. I only mentioned the alt text because I wasn’t sure if you were aware of it.

I also noticed in the thread in the HTML and CSS section that superfish was recommended to you for the navigation. I used it for a website I built with dropdown menus and it worked well.

Ya I am looking at that but not sure how to implement it yet. No matter what I do the site will probably be fine, as my old site was so out of date I can’t imagine the improvements I am making could be worse.

The main thing about superfish is due to the nature of time allowed to manage the site when it is finished I want to rely on a few outside libraries as possible so something they do won’t break the site. I would rather have the ability to control changes on my time schedule as it is not always possible to just drop another project and come back to the site if something happens.

The time set aside for this project is fine but when done I have to be more concentrating on making sure the customer experience with our software on the property is working at it’s best.

No, it’s just a guide. HTML and CSS have their rules, and that’s great. But what really counts is what the browsers support. Sometimes browsers introduce elements that you can use for various purposes, but which are not included in the actual specs. They are perfectly safe to use, though the validator will cry foul. As long as you know what’s going on, there’s no problem.

Take zoom for example. It’s a proprietary property for Internet Exploder. It’s not real CSS, but has a useful purpose when dealing with that browser.

The use of the * in *display: inline is a hack that people have used to deal with IE again. It’s not valid CSS, as such, but serves a useful purpose to trick older IE, which is stupid enough to think that it is real CSS.

Thanks raphm, I was just reading about those vendor specific issues errors. So in reality you are telling me that this is a safe enough menu to use and I should not see any ill effects from it?

Just one thing. The pars errors on 13 and 23 since they are in the menu style sheet and they were set there that way by the vendor, should I try to clear them or just leave them alone?

Thanks

Always check, just in case they are something important that could break your layout.

I think the problem with line 13 is that the line starts with *, which the validator isn’t expecting, so it’s also not expecting the ; at the end of the line. All swell in that case.

In line 23, you have border-color:;. There should be a color value in there, or that declaration should just be removed. It won’t cause a problem, probably, but still a bit messy.

You know when there’s a serious HTML or CSS problem when your site layout is broken in one or another browsers. But we don’t always check in all browsers, so to be sure a validator warning isn’t going to cause problems, fix it, unless you know it won’t do any harm.

Well then,
I see if I can pull the code from the menu sheet later or just wait for an answer from the company. As you know this only the beginning. As for older browsers, the reality is the client base that we are geared toward will not normally have anything lower than IE10 so not too much of an issue there.

Also since it is just the menu should a problem arise then the site map will always be available to navigate.

I do plan to build out PaulOBs menus to have on hand in case something should break at a bad time. I am currently using the tool that was mentioned earlier in the day about contrast and also have an email out to the owners to help decide more on colors.

I may even learn to have a color switcher in the main content page to convert it to pure black and white for users that would need that, I have seen it done just not researched how to do that yet.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.