According to W3C, you can add lang=”en” (for english) attribute to your HTML tag and this is still valid for HTML5.
Here are some other options for the lang attribute:
“en”: English
“en-US”: the U.S. version of English.
“en-cockney”: the Cockney version of English.
“i-navajo”: the Navajo language spoken by some Native Americans.
First you’ll want to put a DIV somewhere on your page and give it a class, for my example I’m going to call it floatingbanner.
So, our HTML will look like this:
<div class="floatingbanner"> <!-- Banner Appears Here --> </div> Then we drop in some CSS, setting the image as a centered background and give the div positioning properties so that it’s fixed at 0px from the bottom of the browser window:
.floatingbanner{
background:transparent url(../images/floatingimage.png) no-repeat scroll top center;
bottom:0;
left:0px;
position:fixed;
width:100%;
z-index:9999;
height:80px;
} Here’s what it looks like:
This can be done with CSS, you’ll need to change button to whatever class, tag or id you need to remove those dotted lines from.
button:focus {outline: none;}
button:focus {outline: none;}
button::-moz-focus-inner {boder:0;}
For old HTML files I’d typically create a 301 permanent redirect with apache by editing the .htaccess however when that isn’t an option, I use a meta redirect in the head tag like so:
<head>
<meta http-equiv="refresh" content="3; URL=http://iamchristinabot.com">
</head>
If your old files are PHP extensions, you’re in luck, because the following method is better since it notifies search engines of a permanent redirect and moves your user to the new page. Editing the .htaccess file sometimes gives me the heebie jeebies and so this is my preferred method.
<?php
header ('HTTP/1.1 301 Moved Permanently');
header ('Location: http://www.newurl.com');
?>
It’s almost impossible to get every site working properly on IE6 and with the way it renders HTML & CSS what developer in their right mind would even want to try? I wrote a little HTML & CSS to target users on IE6, in hopes that some of them will upgrade to something a bit more current.
HTML
<div id="ie6_user">
<!--[if IE 6]>
Looks like you're using Internet Explorer 6 but Headliner.fm does not support it. For the best experience use <a href="http://www.mozilla.com" target="_blank">FireFox</a> or <a href="http://www.google.com/chrome" target="_blank">Chrome</a>.
<![endif]-->
</div>
CSS
#ie6_user{
background-color:#f6f37d;
color:black;
border:1px solid #edc748;
padding:10px 0px;
text-align:center;
font-size:14px;
}
Here’s what it ends up looking like:
Here’s how you can style the Horizontal Rule tag with CSS. Just a note, the default of an HR tag is 100% wide, 2px high (1px for line the and 1px for a border to give the line a 3D effect).
hr{
width: 100%;
height: 1px;
background: #DFDFDF;
margin: 30px 0;
display: block;
border: none;
}
I prefer to add borders to divs to create horizontal lines but there are situations where an HR tag is useful.
If you ever tried to display a row of linked images in a row, you may notice some white space in between them when viewing in Internet Explorer 7, this is because IE7 adds a default line-height of 16px which, in the case of seeing whitespace isn’t what you need.
To fix this change the parent container’s line-height property to something like 1em.
I tried something silly today… to find that it didn’t work, here’s what:
<p>
<p>Title</p>
<p>Description</p>
</p>
I thought that by nesting p-tags I would have text that was indented much like a blockquote but with my p-tag CSS attributes. It didn’t work because before CSS styles can be applied, the HTML has to be valid and as it turns out, nested paragraphs are not possible because when an HMTL parser sees two p-tags it interprets them as 2 paragraphs following each other, extra closed p-tags are ignored as errors. Do not do this.
I started thinking I was crazy when my text-align center worked inline but not when I added it to the stylesheet, this was due to the order in which the CSS loaded. The center property was being over-written by a left property somewhere else so adding !important fixed it right up.
.center{text-align:center !important;}
One of the reasons your active or hover state isn’t working is because there is actually a particular order for pseudo-classes (link, visited, hover, active) in CSS. If they aren’t in the proper order, they won’t work.
This seems to be the shortest way to put it:
.footer a:link { text-decoration:none; color:#737373;}
.footer a:visited{ text-decoration:none; color:#737373;}
.footer a:hover{ text-decoration:underline; color:#0095e0;}
.footer a:active{ text-decoration:none; color:#FFFFFF;}
Note: a:hover MUST come after a:link & a:visited.
Note: a:active MUST come after a:hover.
It’s kind of a bummer for pseudo-classes to work this way because it seems like more code than it needs to be. I typically only use the link and the hover, so even though I define active link it doesn’t do anything and I only have two lines of CSS.
.footer a:link, .footer a:active, .footer a:visited {text-decoration:none; color:#737373;}
.footer a:hover{ text-decoration:underline; color:#0095e0;}
Feel free to comment if you have a better method.