Thank you very much for pitching in, @Ray.H.
I was trying to determine how the boxes are stacked (the layout). I didn’t test adequately before posting that suggestion. Embarrassing but informative.
@pavlosthes, I hope your patience is still holding out because there is more work to do (not all of which will improve this situation right away but still worthwhile.)
Since the site is being “refurbished”, it is a good time to evaluate the usefulness of some of the coding conventions that were used when it was written to see if they are correctly written or outdated. For example, the use of so many
!important modifiers is usually not a sign of good coding.
It looks like you’ve added some text above the watermelon image.
validation warnings and errors
If you don’t mind, I would like to work with you to clean up most of the validation errors and warnings. That is an important step in any development process to assure that the finished product will perform as intended across the greatest number of devices. (In the meanwhile, I’m still thinking about how the boxes are stacked.)
It is useful to realize that the validator is a tool that recognizes variations from expected patterns. Most “container” tags, such as
<style>, etc, require closing tags. So-called “empty” tags, such as
<br>, etc, are not containers and do not require a closing tag.
HTML does not require empty tags to be terminated with a trailing slash before the “gt” symbol. That is an XHTML convention that some have carried into HTML, but it is definitely not required. The validator doesn’t flag it as an error or warning.
One can write perfectly valid code that does not render properly in a browser. The validator cannot tell how the author intends the page to look. It can only flag deviations from expected patterns.
One of the earliest warnings shows a “type” attribute problem. (It is no longer required as of HTML5).
The validator gives the location of the code in question and quotes the string:
From line 12, column 9; to line 12, column 41
Usually, one can copy the string to find and correct all occurrences of the same problem. However, notice the spaces around the equals symbol (spaces should not be there).
And notice that the very next warning describes another “type” problem involving JS that looks like this:
It’s the same warning message, but this time the code has no spaces around the equals symbol.
So, however your editor works, the solution to this warning is to delete the strings
After completing that process, you should have cleared up about 18 warnings.
Further down the list is another warning:
The type attribute for the style element is not needed and should be omitted.
From line 41, column 3; to line 41, column 25
script>↩ <style type="text/css">↩img.w
Again the solution here is to delete the string
Will continue with more later. I do hope that you take advantage of this information.
May as well add a challenge!
It appears that
<div class="art-shapes"> does not have a closing tag. Where should the closing tag be located?
There is also a stray closing
</p> tag but no open
<p> tag. What to do?
(These are listed as validation errors.)