Buttons display block in IE, but not Safari

[Greg_2]

I have recently gotten a friend to design a website for me, and I just got the template to begin to add pages. Unfortunately, the pages do not display properly in IE, the browser most will use to access the site. The main problem now is the buttons, which I think is a problem somewhere in the button's CSS. Instead of all the buttons being side-by-side horizontally, they are stacked on top of each other.

Safari:
http://img.skitch.com/20080518-c2g5re419cut5mqcmdga6wugs7.png

Internet Explorer:
http://img.skitch.com/20080518-jakjxkxukn2ws69pqagbnr36h4.png


#button {

background-image: url(images/button.png);

height: 31px;

width: 99px;

text-align: center;

margin-left: 20px;

color: #152209;

text-shadow: #8fcc94 0 1px 1px;

font-weight: bold;

font-variant: small-caps;

font-size: 20px;

margin-top: 20px;

vertical-align: 30px;

padding-top: 7px;

display: inline-block;
}

Any help I can get with this would be greatly appreciated.

[Greg_2]

The site is here: http://ecrs.ca/ccsoccer/ is anyone would like to take a look at the whole thing in general.

[WebJoel]

Oddly enough, -it displays 'block' in Firefox also (same as the IE view), ergo, we can deduce that it is Ssfari displaying it 'incorrectly'...
I'll have a deeper look at this..

back: -solved it!

You are nesting a block-level DIV inside of a inline-level "<a> ~ </a>" tag. See screenshot image.

Get the nest order correct and this will be solved and yes, -Safari is rendering this incorrectly.

This should be marked up as an "unordered list":

<ul id="navigation">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
....
</ul>

and instead of a DIV with an id="", it should be class="", and applied directly to the "li"s

#navigation li a {selector:declaration}

so EVERY "<a>" in the UL with id="navigation" will be the stated CSS rules. -Saves MUCH time re-typing for every link to just state it ONCE in your CSS, and let the rule 'cascade' down to every element..

Use of a complete !doctype (one that includes the URI link), and use of "<p>" tags would really make this cross-browser..

....<div id="content-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc. Donec neque risus, fringilla a, consequat vel, tristique non, enim. Suspendisse bibendum malesuada risus. Ut leo orci, tincidunt id, dictum vitae, posuere quis, sapien. Sed non eros. Vivamus id felis ac sapien facilisis aliquam. Donec luctus interdum turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer dictum nibh et enim. Phasellus bibendum diam eleifend nisl interdum ultrices. Vestibulum pulvinar. Proin quis turpis ut eros pharetra imperdiet. Etiam tristique orci eleifend est.
<!-- <br><br> -->
<p>
Lorem ipsum.... Then you can get rid of the presentational markup bunk and let the margins of "<p>" do the vertical spacing, as it is supposed to be. :)