After a stressful evening trying to sort out one problem (which I've more or less given up on) I've noticed a problem on this page of my site in Safari

http://www.mattpealingdesign.co.uk/about.php

When the 'education' tab is clicked, there seems to be a bigger gap above the 'Education' title, even though the code for each section is basically the same! I haven't noticed this in any other browser (not even IE!), just Safari.

I don't suppose anyone has any ideas? Here is the CSS that I think may have problems in it. Having said that, the page does use JavaScript to rearrange things so I suppose the problem might be in there, but after clicking 'View Generated Source' on the developer toolbar for FF, there doesn't appear to be any difference in the code around the <span> tag.

EDIT: I've just noticed that Chrome has the same problem

@charset "utf-8";
/* CSS Document */
    
.portThumb {
    border-bottom:#CCC dotted 1px;
    width:400px;
    padding:0 0 5px;}
    
.portThumb img {
    margin:0 3px 3px 0;
    padding-top:7px;}
    
.portThumb img:hover {
    background:url(../image/bgLineHorImg.gif) no-repeat;}

.tabSection {
    padding-bottom:55px; }
    
/* set graphic div id's to display with javascript */
#portThumbAll img {
    display:inherit; }

.portThumb form {
    margin:0;}    
    
.portThumb p {
    margin:.5em 0;}    
    
.floatLeft {
    float:left;
    width:40%;
    margin-right:10px;}
    
.floatRight {
    float:right;
    width:40%;
    margin-left:10px;}
    
.box, .boxHide {
    height:1%;
    border:#CCC solid 1px;
    background-image:url(../image/bgStripeFaint.gif);
    margin-bottom:1.5em;
    clear:both;
    padding:1em}
    
.boxHide {
    display:none;}
    
.box p, .boxHide p {
    margin:0;}
    
.box h2, .boxHide h2 {
    margin:1em 0;}

.fileUpload {
    padding-left:9em;}
    
@charset "utf-8";
/* CSS Document */

#wrapper {
    width:100%;}
    
#head {
    height:100px;
    background:url(../image/bgHead.gif) no-repeat 0 100%;
    background-color:#52ACEF;
    text-align:center;
}

#headInner {
    width:850px;
    height:100px;
    margin:0 auto;
    text-align:left;
    position:relative;}

#headFlash {
    width:100%;
    height:100px;
    position:absolute;
    right:0;
    top:0;
    z-index:1;}
    
#headLogo {
    position:absolute;
    width:220px;
    height:60px;
    z-index:9;
    top:40px;}
        
#pageContainer {
    background:#FFF;
    text-align:center; }

#page {
    margin:0 auto;
    padding:20px 0;
    text-align:left;
    width:850px;}

#content, #contentWide {
    padding:1px 15px;
    width:400px;
    background:url(../image/bgCropTop.gif) no-repeat;}

#contentBg {
    width:430px;
    background:url(../image/bgCropBtm.gif) no-repeat 0 100%;}

#contentBgWide {
    width:850px;
    background:url(../image/bgCropWideBtm.gif) no-repeat 0 100%;}
    
#contentWide {
    width:820px;
    background:url(../image/bgCropWideTop.gif) no-repeat;}
    
#footer {
    font-size:80%;
    clear:left;
    width:100%;
    color:#FFF;
    text-align:left;
    margin:0 auto;
    background:#52ACEF url(../image/bgFooter.gif) no-repeat 100% 0;}

#footer a {
    color:#FFF; }

#footerInner {
    width:825px;
    padding:15px 15px 30px;
    margin:0 auto;}
    
#footerInner .floatRight, #footerInner .floatRightEnd {
    width:215px;
    padding-left:10px;
    border-left:#FFF dotted 1px;
    min-height:100px; }
    
#footerInner .floatRight:hover, #footerInner .floatRightEnd:hover {
    background:url(../image/wait.gif) no-repeat 100% 8px; }

#footerInner .floatRightEnd {
    width:100px;
    float:right;
    margin-left:10px; }

#footerInner .title {
    margin:0;
    padding:0; }

#footerInner .bgStripe {
    background:url(../image/bgStripe.gif) no-repeat;
    width:230px;
    height:100px;
    float:left; }
    
#pAbout1 {
    padding-right:0;}

#pAbout1 img {
    float:right;
    margin-left:20px; }
    
#pAbout2 {
    background:url(../image/pAbout2.jpg) no-repeat 100% 3em;
    padding-right:270px;}
    
#pAbout3 {
    background:url(../image/pAbout3.jpg) no-repeat 100% 3em;
    padding-right:270px;}
    
#pService1 {
    background:url(../image/pService1.jpg) no-repeat 100% 3.5em;
    padding-right:270px;}

#pService2 {
    padding-right:270px;
    background:url(../image/pService2.jpg) no-repeat 100% 3em;}

#pService3 {
    padding-right:280px;
    background:url(../image/pService3.jpg) no-repeat 100% 1.5em;}

#pService4 .left {
    width:540px;
    float:left;
    background:url(../image/pService4.jpg) no-repeat 200px 8.2em; }
    
#pService4 .right {
    width:200px;
    float:left;
    margin-left:20px; }
    
#pService4 .box {
    margin-bottom:0; }
    
#portImg {
    width:400px;
    float:left;
    margin-bottom:1.5em;
    text-align:right;}

#portInfo {
    width:400px;
    float:left;
    margin-left:10px;}

#bgImgIndex {
    position:relative;
    min-height:450px;
    width:100%;}

#bgImgIndex object {
    position:absolute;
    right:0;
    top:25px; }

#bgImgContact {
    background:url(../image/bgImgContact.jpg) no-repeat 100% 100%;
    min-height:460px;
    width:100%;}    

#bgImgPortfolio {
    background:url(../image/bgImgPortfolio.jpg) no-repeat 100% 30px;
    min-height:425px;
    width:100%;}
    
#tabBox {
    position:relative; }
    
#liveResult {
    min-height:400px;}

Have you tried removing the clearing <br> you've got in there ? Try using overflow:auto on the containing div to clear floats and see if that works.

Thanks, the <br> trick worked. They were only really there just incase the user has JavaScript disabled, I'll have to code something that works either way! But now that I know what was causing the problem it shouldn't be hard