I finally finished my website, but the top frame is too large when I visit the site!

In Dreamweaver Live preview it is fine - and I have tested it in 2 different browsers BEFORE putting it online and it was also fine.

And yet when it is live, the header is too large? I set the frame size to 100 pixels
Here is the code for the frame:

Code:
<frameset rows="100,*" cols="*" frameborder="no" border="0" framespacing="0">
  <frame src="jontopframe.html" name="topFrame" scrolling="no" noresize="noresize" marginwidth="250" marginheight="100" id="topFrame" title="topFrame" />
  <frame src="jonhomepagepic.html" name="mainFrame" marginwidth="0" marginheight="0" id="mainFrame" title="mainFrame" />
</frameset>
And here is the code for the frameset

Code:
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #333333;
    margin-left: 252px;
    margin-top: 0px;
    margin-bottom: 0px;
}
    

</style>
<style>


.style1 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style1:visited {
    text-decoration: none;
    color: #999999;
}

a.style1:link {
text-decoration: none;
color: #999999;
}

a.style1:hover {
    text-decoration: none;
    color: #ff3366;
    
}
    

.style2 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style2:visited {
    text-decoration: none;
    color: #999999;
}

a.style2:link {
text-decoration: none;
color: #999999;
}

a.style2:hover {
    text-decoration: none;
    color: #ff3300;
}

.style3 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style3:visited {
    text-decoration: none;
    color: #999999;
}

a.style3:link {
text-decoration: none;
color: #999999;
}

a.style3:hover {
    text-decoration: none;
    color: #FFCC33;
}
a.style3:active {
    text-decoration: none;
    color: #FF6600;
}

.style4 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style4:visited {
    text-decoration: none;
    color: #999999;
}

a.style4:link {
text-decoration: none;
color: #999999;
}

a.style4:hover {
    text-decoration: none;
    color: #66ff33;
}

.style5 {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.style5:visited {
    text-decoration: none;
    color: #999999;
}

a.style5:link {
text-decoration: none;
color: #999999;
}

a.style5:hover {
    text-decoration: none;
    color: #3366cc;
}

.styletitle {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.styletitle:visited {
    text-decoration: none;
    color: #FFFFFF;
}

a.styletitle:link {
text-decoration: none;
color: #FFFFFF;
}

a.styletitle:hover {
    text-decoration: none;
    color: #FFFFFF;
}



.styletumblr {
font-family: Helvetica, Ariel;
font-size: 16px;
line-height: 21px;
}

a.styletumblr:visited {
    text-decoration: none;
    color: #999999;
}

a.styletumblr:link {
text-decoration: none;
color: #999999;
}

a.styletumblr:hover {
    text-decoration: none;
    color: #9933cc;
    
}
a.styletumblr:active {
    text-decoration: none;
    color: #FF6600;
}


body,td,th {
    color: #999999;
}
</style>
</head>

<body>
<p><a href="jonhomepagepic.html" target="mainFrame" class="styletitle"><br />
  JONATHAN MCCREE</a><br />
  <br />
 <a href="newmenupage.html" target="mainFrame" class="style1">PROJECTS</a> // <a href="recent paintings.html" target="mainFrame" class="recent style2"> RECENT PAINTINGS</a> // <a href="joncontact.html" target="mainFrame" class="style3">CONTACT</a> // <a href="jon-cv.html" target="mainFrame" class="style4">CV</a> // <a href="news.html" target="mainFrame" class="style5">NEWS</a> // 
    <a href="http://JONATHANMCCREE.TUMBLR.COM" target="parent" class="styletumblr"> TUMBLR</a></p>
</body>
</html>
PS. i have already been informed that frames are stupid :/