Open Source Content Management

I usually outsource web design for my clients but I've recently built my very first site using Adobe Dreamweaver.

Everything seems to work well except for my social networking icons on the "Contact Us" page. They shift to the far right in certain browser versions i.e.

IE 6.0
IE 7.0
IE 8.0 - in the right place, but has blue link boxes around the icons
IE 9.0
(all Windows OS)

Safari 5.1 (MAC OS)

It's all correctly placed in all Firefox versions. I used BrowserLab and browsershots.org

It is obviously something I've done wrong with the CSS, but I can't figure out how to remedy it. Could you also let me know if you spot any other issues? And how does it look?

Any help will be HUGELY appreciated !

Firstly you don't need to worry about IE 7 and lower. Those browsers are old and if anyone still used them then shame on them.

Most websites including youtube post notices if you using an old browser and suggest upgrading.

Now the alignment problem.

I would start over with the site. It seems to me you don't know how to correctly float your element.

You cant float half the site left and half of it right. You should rather float everything in 1 direction and use width and margins to get the corrected positons.

Example of this is having main content on the left and a sidebar. You should float them both left then use a margin on the main content to give the needed spacing.

Also try removing all those social divs and replacing with ul and li.

<ul id="socials">
<li><a href="thepetpapers.blogspot.com/"><img src="Graphics/Blogger-64.jpg" width="64" height="64" alt="blogger" /></a></li>
<li><a href="www.facebook.com/pages/Paws-For-Thought/180432735349729"><img src="Graphics/FaceBook-64.jpg" width="64" height="64" alt="facebook" /></a></li>
<li><a href="twitter.com/#!/thepetpapers"><img src="Graphics/Twitter-64.jpg" width="64" height="64" alt="twitter" /></a></li>
<li><a href="www.youtube.com/thepetpapers"><img src="Graphics/Youtube-64.jpg" width="64" height="64" alt="youtube" /></a></li>
</ul>

#socials {
margin 0;
padding: 0;
}
#socials li {
display: inline-block;
list-style: none;
}

But even this does not solve the problem as your elements are floating around. You need to define each element and build a structure.

The "blue link boxes" are from not defining the css. Add a { border: none; } to your css and that should help.

Ethan, thanks very much for taking the time to answer that so well - I do appreciate it .

Floating on one side and using margins makes complete sense, I didn't do that thinking that it wouldn't make a difference. We live and learn.

I'm going to tackle that again and let you know how I get on.

Thanks again.