Vista Style CSS Site
Im just playing around with CSS and Photoshop and made this so far:-
http://www.o0matte0o.myby.co.uk/windows-vista/
It look as its ment to in IE7 and IE6 (apart from the PNG Transparancy) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please?
I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S
Code:body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; }
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }
___________________
Microsoft Technical Beta Tester
My Web Site | Windows Live Space
