Another Alignment Problem in IE10 and Edge

[al2henry]

I have created a footer with links for the major pages of the "upgrade" to my choir's website. It displays perfectly in Chrome and Firefox but the alignment is bad in IE10 (I don't doubt IE 9 and earlier makes a bigger mess of the whole page.) Edge dislpays the same mis-alignment. I keep reading that I shouldn't use <table> as a layout tool and indeed in this case using table rows and data cells produces other unwanted results. So I messed around with non-breaking spaces until it looked right. Happy was I until I checked how it looked in internet Explorer! Clearly I'm using the wrong approach - any tips on how I should code to get the results I want in all desktop browsers?

An additional oddity - IE 11 although initially mis-aligning the footer now displays it all OK on my test m/c while a friend in another city with the same, identical version of IE sees the prblem alignment: what could be going on there? Any ideas?

The site is http://www.vivaldichoir.org -if I should post any code or a CSS excerpt to help with diagnosis, please let me know. Thank you!

[mattster]

In the nicest possible way,   characters were never going to display correctly.

Yes tables are bad practice, but the correct alternative involves a CSS grid system. By all means give this a go and see how you get on. The beauty of grids is that, once you get going you can easily sort out your site for mobile/tablet viewing.

On a side note, your code involves extensive use of the style="" attribute, which is bad practice. You should really try to keep ALL CSS in external CSS files - it makes it far easier to organise.

[drjohn]

Quick solution.

<div class="footerBox">Your text link code here</div>

Style the div to

.footerBox{float:left; width:200px;)

Make ten such divs, one with each text link in it, .
You might need to adjust padding or make them a little bit narrower.
But it will work. Just play with the numbers to get what you want.
You might need to add an extra class to just the first such box to stop it catching on the content above it

.clearfix{clear:both}

So the first div would become

<div class="footerBox clearfix">your first link text here</div>

While the other nine would be as in the first example. This would give you two lines of five divs, each with one link in it.

Try putting your styles in an external stylesheet, it makes life easier and gives a more consistent appeareance.

Also, the links in the footer / siteInfo div all look like this ./about.php
The leading ./ is not necessary. You use that to move up a folder when you use sub-folders to keep related content together. And it should be ../filename anyway if it was in a higher folder.

NEVER use :nbsp; to pad out things to get a particular layout, it will never work okay in other browsers (other browsers being not the one you are using, which ever one you start with)
This is NOT an IE or Edge problem it is simply not the way to work, ever. It's a designer's error.

[al2henry]

Thank you mattster! The link to PURE will be very useful as my next endeavour (when everything works on the desktop in popular browsers) will be to create something that is responsive. Hello learming curve! Meanwhile I appreciate what you say about &nbsp; - I had not been able to figure out and alternative. So, drjohn thanks for those very concrete suggestions. Will go to work!

[al2henry]

drjohn - I have set up the divs as you suggested and the alignments are fine & I understand how to move them or pad them to get the result I want. However as you can see from http://www.vivaldichoir.org/index.php (my test file) the background colour & 75% font as set in siteInfo had to be included as a property of footerBox even though on the page it is inside the siteInfo div. What do I have to do get the whole block (including the copyright notice) into a single footer - as per the live site, mis-alignments not withstanding. Thanks for the reminder about "./"
gawd knows why I started doing that way back - belt & braces kind of guy, I guess. Thanks for your tips & advice you've given already - much appreciated!

[al2henry]

OK - marking this as solved. Thanks drjohn for the pointers. Changed my design a bit & after all I think I like it a bit more. Tested in Firefox, IE11, Edge & Chrome. Only problem is that Chrome shows the background colour of the links bar 1 or 2 px shorter than that of the "Top" link. Now to apply some of that understanding of "float" elsewhere. I had thought that it was just for image handling. Again Thank you!

[al2henry]

So I was too quick to mark solved! The recommended set of div's as adapted by me work great on the pages with sidebars but broke the non-sidebar pages. I will donate again for a specific solution based on the current look of the Home page. If any code is required please let me know. Thank you!

[al2henry]

So marking it as "Unsolved" didn't seem to change the status so I don't have to re-mark "Solved" as it in fact is. In panic this a.m. - forgetting I had separate CSS for the non-sidebar pages. Some detail to clean, but I'm happy - tks again drjohn!