Internet Explorer Image Link Borders

Does Internet Explorer image link’s border annoy anyone else from me???

Well, here is a short quick way to avoid having any borders to image links.  In your HTML page or in your CSS file add:

HTML page in your Head section: <style>body{  a img: 0; } </style>

CSS file beginning of file: body{  a img: 0; }

Firefox Top Left Right Paddings

I can across a very irritating issue with firefox since I needed my images to look in the center.

CSS Before (wrong):.panelImage
{
position: absolute;
top: -50px;
text-align: center;
padding-left: 30%;
}
CSS After (Right):.panelImage
{
position: absolute;
top: -50px;
top: -50px!important; /* for Firefox */
left: 0;    /* since firefox was putting the image in the centre */
text-align: center;
padding-left: 30%;                /* padding in IE and Chrome */
-moz-padding-start: 30%; /*padding in firefox */
}

Without adding the “left: 0;” the -moz-padding-start was starting from the other edge of the divider. -Moz-padding-start moved an element to the right, if you need to move to the left you can use -moz-padding-left however both do not except negative values.

Before (Wrong):
After (Right):

CSS3 My Most Suggested Quick and Easy Tips

css3

Using CSS3 we can now design creative images, backgrounds, patterns, etc without the use of actual images. This article will cover how to:

  • Create a rounded element (element can be a divider, paragraph, textbox, label, etc)
  • Create a circle from an element
  • Drop shadow of an element
  • Create gradient color in an element
  • Drop text-shadow
  • Creating Columns
  • Background Gradient:
    • Linear
    • Radial
    • Repeated

Continue reading

CSS link Style Tips

 

cascading style sheet

There are different styles to set on links in different environments:

When we want to set a whole page/divider/table to have a certain link style we use the below CSS:

.MyLink {font-family: arial; font-size: 16px;}

.MyLink a:link{color: black; text-decoration: none;}

.MyLink a:hover{color: black; text-decoration: underline;}

Meanwhile if we would like to add a style to a specific link such as:

<a href=”MyPage.html” class=”MyLink”> My Page </a>

Then the CSS would look like:

a.MyLink:link {color: black; text-decoration: none;}

a.MyLink:hover {color: black; text-decoration: underline; }