 Home Services Contact Us About Us Back |
| Article Topic: HTML & CSS Tips, |
| Home Services Contact Us About Us Back |
| Article Topic: HTML & CSS Tips, |
In this article we will be providing some general HTML and CSS tips and tricks mostly geared toward those just starting out coding in HTML.
Images use the <alt=""> attribute to enable a small popup of text or tooltip to appear when you mouseover. How can you get the same effect for Hyperlinks? If your target browser supports HTML 4.0 you can add a TITLE attribute to the <A HREF> tag, as well as many other HTML tags, to get the same effect! See my example below: <A HREF="htmltips.html" TITLE="My Tool Tip!">This is my link</A> Position your mouse pointer over this link to see how it works! This is my link
This can be used to provide that extra bit of clarifying information to a link when needed without taking up precious web page space! The title attribute works with other tags such as I(talics), b(old), L(ist)I(tem) and more!
You have a web page with both a left pane and a right pane with content in the middle. You set this up using CSS Instead of tables. The links on your right pane work fine but the links in other sections are dead. They may be colored like links but nothing happens when you click them. They also don't display the Tool Tips when you hover your mouse over the link. You've tested the page on IE and Opera and it works fine! What is going on and how do I fix this? Firefox seems to be more critical of proper coding than other top browsers especially in processing CSS. I ran into this dead link issue when I had panes on the page located by CSS using the position:absolute attribute and the panes overlapped. Also if you add or change padding: or margin: attributes recheck and make sure your panes do not start overlapping. What I like to do when creating pages or new page templates with CSS is to use the border: attribute. I also make each pane's borders a different color for easy identification. You do however, have to take into account the width of the borders in your positioning and adjust your width: and height: attributes accordingly. Also, remember to remove any temporary border attributes before you publish these pages in production! P.S. Firefox is the favorite of many of us out there so be sure to include it in your QA process!
When your pages are displayed on Firefox the font size seems to be larger than they should. You've tested the page on IE and it works fine! Why? How do you fix this? The default fonts for each browser might be different and you may not have declared a specific font for the pages elements. I have also seen this occur when the font size you are using is an "odd" size like 15,17, and 19 but this is rare. The effect is if you are using a font size of say 15, Firefox may round this up to font size of 16. To help insure you maintain the same look across various browsers, be sure to declare the font and font size you prefer and try to use the more popular types. Even better yet, use multiple types in a CSS font-family: so the browser doesn't default if your specified font is not supported. You can also try using even number fonts and rounding DOWN any current font sizes. For example, If you are using < FONT SIZE="15"> change that to < FONT SIZE="14"> Note: The <font> HTML element has been depreciated. I recommend using CSS to set font parameters.
When your pages are displayed on Firefox the colors are not correct or they revert to defaults. You've tested the page on IE and it works fine? Why? How do you fix this? This frequently occurs for either of two reasons. First, All your page elements may not have the color explicitly set, causing the default browser settings to define the color. The other is a little less obvious. IE seems to be more "forgiving" than Firefox when it comes to HTML syntax errors. When you specify the color attribute be sure to include the pound sign before the hex digits. For example, For a red element you would typically specify COLOR="#FF0000". If you specify COLOR="FF0000" instead IE will ignore the fact that the pound sign is missing and just use the six hex characters, and the element(s) the color attribute refers to will be red. Firefox correctly sees this as invalid HTML coding, ignores it and will use the current color designation or if there is none, reverts to its default settings, which may or may not be what you want. So what do you do? First make sure you declare colors for all elements on your page so they do not default to something unexpected. Next, make sure your HTML code is syntactically correct. Try to use an editor that highlights your code with different colors that makes unclosed brackets, quotes, missing greater than and less than symbols, etc. easier to recognize. Finally, Carefully scrutinize your coding for logical errors as well as syntactically. For the latter, there are a number of products available that automate this task for you. Some are free, Online, or available for a price. For more information on validation, check out our article: Building a quality web site - Using HTML, CSS, and link validation tools That about does it for now for this version of the article on General HTML and CSS Tips and Tricks. Back to the top
If you found this page useful, consider linking to it.
Just copy (mark then ctrl-c) and paste into your website.
This is how this link will look: HTML and CSS Tips
Version 1.1 Copyright © 2014 www.AITechSolutions.net. All rights reserved. Terms of Use
Adding ToolTips to text links
Fix dead link issue on Firefox
Fix font size issues on Firefox
Fix color issues on Firefox