Code critique

HTML & CSS
1

I have created a responsive site that I would like to get some feedback on. Not from a design perspective but for the coding. I am still learning CSS and HTML and I’m sure some of my techniques are incorrect or could be improved on. Specifically the top portion of the site I found challenging to achieve what I wanted. Notice how the intro text “Welcome to Alderbuds…” pushes the green background down as the browser shrinks. This is what I wanted, but is the method I used correct?

here is the site: http://www.ashleykirk.ca/AB9/

Also, I would like to convert this to a Wordpress site (I know next to nothing about Wordpress). Is there any reason that my current setup would not work for Wordpress?

I realize these are big questions. Any tips big or small appreciated.

Thanks,

Ak

2

Hi,

It looks like this path is not correct as there is no css file at this address:


<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="enhanced.css" />
<![endif]-->

IE8 therefore is mostly unstyled.

You don’t seem to have added the html5 shiv which ie8 and under need in order to recognise the new html5 elements.


 <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

To enable media queries in IE8 to work it would be better to use a polyfill.

e.g.
http://code.google.com/p/css3-mediaqueries-js/

Notice how the intro text “Welcome to Alderbuds…” pushes the green background down as the browser shrinks. This is what I wanted, but is the method I used correct?

What method exactly? It just looks like you have content in the flow and the background:size to 100% and so all will stretch as required. You might want to try background-size:cover instead as it may produce a better looking picture all the way across the resolutions.

3