Hey, I'm rather new to web development I'm still in college and making a few small sites on the side to help pay for books and other supplies.
So I've been making this website for a small residents association, and it looks the way its supposed to in Chrome, Opera and Firefox but IE.... Well it looks horrible :( This website has helped me endlessly with learning CSS but I have no idea whats gone wrong here. I was testing it in IE 8 I dare not look at it in a lower version.The website is http://drynamhall.org . Any help is apreciated. Even if someone could tell me what elements are causing the trouble.
to get those HTML5 elements display correctly in IE. And last thing try validating your code and you'll see that there is plenty errors. I hope that help.
@krysak4ever I have it set up to load from a cms that I made, the dashes are only there because I didn't put any articles in the database yet they're not meant for decoration. I'll let the customer do that through their admin page. I avoided using the tags because I'm not sure if the customer will want to use them in the posts. I will agree my code isn't the most mature though there are probably better ways.
@krysak4ever Thanks for all the help! Ha I've got alot ahead of me :) I've gotten that zip by the way so you can remove it from your server! Thanks for that!
We are now using normalize.css developed by Nicolas Gallagher along with Jonathan Neal instead of the traditional CSS Reset stylesheet.
normalize.css retains useful browser defaults and includes several common fixes to improve cross-browser (desktop and mobile) styling consistency.
Lots of research has gone into normalize, verifying what are the default user agent styles provided by each browser. We can very specifically change only the ones we need to instead of the bulldozer approach.
Why this is great news:
Who likes being so damn redundant and declaring: em, i { font-style: italic; } By using normalization instead of a reset + building up default styles, we use less styles and save bytes Less noise in your dev tools: when debugging, you don't have to trawl through every reset selector to reach the actual style that is causing the issue.
So I've been making this website for a small residents association, and it looks the way its supposed to in Chrome, Opera and Firefox but IE.... Well it looks horrible :( This website has helped me endlessly with learning CSS but I have no idea whats gone wrong here. I was testing it in IE 8 I dare not look at it in a lower version.The website is http://drynamhall.org . Any help is apreciated. Even if someone could tell me what elements are causing the trouble.
Thanks,
Peter McKinney.
you simply need more experience
from looking at your code and some other details
GOOGLE following and its combination
but as I see you got
so you should be able to figure out how to target and fix
IE 7 + 8
if I open your web in IE 8, social icons got thick blue border
I would start fixing your web there ;]
as oppose to this
Second you are using HTML5 elements which IE8 and below do not understand. You may have to use this to get those HTML5 elements display correctly in IE. And last thing try validating your code and you'll see that there is plenty errors. I hope that help.
http://www.css-101.org/
http://htmldog.com/
http://www.catswhocode.com/blog/
http://cssglobe.com/
+
http://net.tutsplus.com/
http://webdesign.tutsplus.com/
+
http://www.smashingmagazine.com/
that should suffice for like 6 months of reading :]
@krysak4ever Ill get right on that thanks :)
try to use simple things, not the new stuff if not sure
read few basic tutorials
1. for instance you are missing HEADINGS
2. you got no meta data
and you need to make your code mature
isntead of
you could do this, looks nice :]
CSS
HTML
here you go mate
**deleted**
there is zipped my own portfolio
http://krsiak.cz/
I just deleted my google analytics ID ;]
all is heavily commented so read around
open style.css for inside of what I mean
ignore the contents yeah, not English text right :]
but no fear I speak pretty well so all comments, IDs, classes are in English
use as you wish
learn from it
look at folder strucutre, naming convention what you want
*
download and use
http://necolas.github.com/normalize.css/
load it 1st before your very own CSS
trust me, this file evens behaviour of misc browsers and save ton of oyur time !
*
drop the blank part
drop border=0 ... use CSS instead
quote everything!
save yourself a headache when debugging or searching
you got this
do it also for all others
use these "x"quotes for HTML ... "xyz"
and these 'y' use for javascript ... 'xyz'
just quote all attributes
CSS TRICKS VIDEO #36
short version
if you got ID set for body you can aim your menu items easily
HTML ... weird spaces for better readability
CSS
quick-tip-html5-features-you-should-be-using-right-now
that is all from me ;]
read, read, read and write code
"Practice makes perfection."
using a framework with someone who has basic knowledge ain't smart
if you know framework does not mean you know the language
they are great help once you know what you do and what you are looking at
+ resets suck
yeah I used them too but once http://necolas.github.com/normalize.css/
saw the light of this world
guess what
it is better, even guys from http://html5boilerplate.com/
mention it in the new version
I myself am using it and it is so much smarter than reset
you are missing opening HTML tag, you have doctype + ending tag = wrong
correct way
I had a look on your menu
you have only clickable the anchor area
you still can hover on the button linking nowhere?
that sucks :]
little example how to fix your menu
look on source + style.css
try to hover aside the text not touching it to get the point ;]
http://krsiak.cz/temp/css-tricks/example/menu-block/
read first ask later
so once more
http://html5boilerplate.com/
It's still a reset - a well thought out one, but a reset nonetheless.
And, IMHO, it's still useless (but I'm just a peon).
agreed
I consider other resets as very basic ones
and like normalize.css
because you do not have to redefine stuff all over again