Website Layout Design in IE

-=al=-

Im trying to edit a page on my website www.alanmckenna.com/music.htm

just redesigned the page for some new updates, layout and design is all fine in firefox and Chrome but once i tried to load it in IE 8 it goes on a mad one

I've no idea how to fix it and spend ages getting it to the way it is on firefox/chrome...

the only knowledge i know of sites/design is what ive picked up online and designed the website by winging it with some trial and error, but can't figure out whats goin on now!

any help appreciated... css script is > http://alanmckenna.com/main.css


im sure the page and html source looks kinda messy to anyone profesional looking at it, but like i said, im not really sure what im doing half the time!

tricky D

Your code is quite messy which is probably where the problem lies.

Get yourself firebug for FireFox and use a validator for your markup. Also look at Total Validator and HTMLTidy This will enable you to tidy up your code.

At a quick glance it looks like your tables aren't put together properly. Get out of the bad practice of using tables for layout and use divs instead. At a deeper glance it's probably a 'box model problem' i.e. width, margins and paddings are handled differently by IE.

The Gibmiester

The code needs validated. I think you have not closed all your div tags. In IE8 the the rightcolumn div is inside the leftcolumn div. FF will try to render unvalidated code the best it can.


Developer Tools in IE8


Firebug for FF

-=al=-

wow that firebug thing is pretty neat thx

and your right about the div its gona awol somewhere, i still have the old page that i worked off of to update it ill just try and redo it and try to be a bit more careful


i tihnk i tried to verify the code before but never really done anything about it, once it looks ok in IE, Chrome and firefox i just go with it, i don't know too much about the errors i got :S

-=al=-

Redone the page there pretty quick looks fine now in those 3 browsers i mentioned it was just a case of the div tags being sorted, there was one missing somewhere, but all fixed and good to go now

thx

The Gibmiester

Yeah, looking good

TomPich

You might want to IE6 it as bandtunes and bandtunes2 are breaking onto two lines.

At a quick glance I'm not sure why you have positioned these two divs absolutley? You better off floating them. It isn't scalable as if you or another developer wanted to add more text into div.tunesbg then it would just carry on and sit behind bandtunes and tunes2. If they were floated the site would scale properly.

Also you're nav is terrible. You have placed all items in one span and used images as the borders? Why? You could simply use a ul, float the lis left and place a right border on each item. This has a number of benefits, a) its scalable and you can quickly and easily add and remove nav items. If someone has come to your site with a screenreader or without css they will see a clear site structure. Your nav isn't labelled at all, you need to put in the text for each nav item and if you want to replace the text with images assign them as a background to the anchor and indent the text off screen. Therefore without css the images (which are useless for seo and screenreaders) won't display and the text will sit back in its place.

Sorry to be picky lol, there is a bunch of other stuff but these are the things I'd address first.

Cheers.

-=al=-

bloody IE, i hate it! i tried making the nav bar with a list like that but couldnt figure it out to work the way i wanted and im not to sure how to do it the way you mentioned! i'll look into it when i get some time too

im sure theres many things wrong with it, but it should be ok for most of the visitors i geuss!

thx for the help, theres tonnes more to figure out

paradisepaddy

not to be the bearer of bad news but your page isn't displaying correctly again on IE8. Checking on http://validator.w3.org/ I can see that there are a few problems.

one of the problem areas were to do with the doc type... something that has never actually bothered me until now. reading up on it was interesting actually. Just out of curiosity i'd love to know if changing yours to another one would help....


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

it got me reading this link below.

http://www.webmasterworld.com/forum21/10359.htm