CSS and HTML Errorstricks and solutionsBefore we start, remember to save a copy of your layout in case anything happens.In this list, I’m compiling some of the main issues I’ve encountered that are currently affecting people’s layouts. The majority of these have to do with people not knowing how to correctly clean their codes or using some misused techniques that newer code editors will no longer recognize and it is
not any form of imposition by the admins of this site, but merely an update where they are now moving on to HTML5 and cleaning up old editors and HTML4 that allowed certain of these to work… although it is not the correct way. I know this because I’m a certified graphic designer in my country and I finished a three year course two years ago where we were updated in the novelties of the HTML5.
So, let’s tackle these issues. They are divided in two categories as far as I can see which are as follow:
- Parts of your layout are not displaying, appear chopped or the tags have been stripped.
- Parts of your layout displays incorrectly or is not respecting the CSS you applied to it.
For the first, you are going to need to revise your code attentively and look for any missing quotes in attributes. HTML4 and prior allowed you to write things like:
<img src="https://urlofyourimage.here/file.png" width=495px height=350px float=left">
But the correct way is as follows.
<img src="https://urlofyourimage.here/file.png" width="495px" height="350px" float="left">
This error is caused by the orphaned quote at the end. If quotations are missing, then HTML5 is interpreting the following text as part of the attribute instead of a piece of independent code. Adding the required quotations will solve this issue, but
be careful. A missing quotation might cause huge chunks of coding of being eaten by a misreading of the tags.
The second issue revolves around “custom tags”. These are tags that
do not belong to the regular tags of HTML if you aren’t sure which tags belong to HTML here is a complete list of
all of them and their recommended uses. Just like the previous case, HTML4 and prior allowed you to create custom tags with any attributes you wished to add. This type of customization has been in disuse since 2004 due to the fact it slowed down browsers by having to go through countless dictionaries to understand what you referred to while executing. This is trickier to solve, but not impossible.
<style>
myfirst { font-family:Times; size: 30px; }
</style>
<myfirst>Text here</myfirst>
As you can see “myfirst” is not a valid tag from the list I linked. First, you need to turn your custom tag into a class. This is as simple as adding a dot before the name of your custom, but make sure it
does not overlap another class.
<style>
.myfirst { font-family:Times; size: 30px; }
</style>
Once you have the tag turned into a class, you need to re-assign it to a valid tag. In this case, I can only provide an example, but you have to evaluate what tag works better for your customization, if it’s only a text effect font would do the trick, if it’s a more complex effect it could be applied to a div.
<font class="myfirst">Text here</font>
There are other codes causing strange behaviours, but it is mostly for bad programming or having attributes it shouldn’t have.
If I can be of further assistance, you are always welcomed to contact me.
