Loading HTML into a DIV and font questions

Trouble getting DIV to size correctly and how to link to fonts.

Page 1 of 1

1 Replies - 2201 Views - Last Post: 14 May 2010 - 04:44 PM

#1 rodstol  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 63
  • Joined: 03-April 08

Loading HTML into a DIV and font questions

Posted 14 May 2010 - 11:16 AM

The HTML doc loads fine into the div, but upon preview, in FF, Opera, Safari, even IE, but the div is only about 30% of the width its supposed to be. I had this issue before and don't remember how I fixed it. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/chromestyle.css" />
	<link rel="shortcut icon" href="images/favicon.ico"/>

<script src="js/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="js/chrome.js" type="text/javascript"></script>
<title>macQuarium</title>

<style type="text/css">
<!--
body {
	background-image: url(img//bg.png);
	background-repeat:no-repeat;
	background-position:top;
	margin:0 auto;
	background-color: #BCCC1D;}
	
#header{
	height:70px;
	width:800px;
	margin: 0 auto;
	text-align:center;
	z-index:20;}
	
.bar{width:100%;
		height:4px;
		background-color:#000;}

.content {
	height:800px;
	width:800px;
	margin: 0 auto;
	background-color: #fff;}

.chromemenu{width:800px;
			height:25px;
			text-align:center;
			}

.h1{ font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:14px;}

.h2{font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:10px;}

.text1 {
width:85%;
height:100px;
padding:10px;
border-color:#000;
background-color:#fff;

}

.frame {

padding:10px;
background-color:#fff;
}

.ul, ol {font-family:"Arial","Veranda", sansserif;
	font-size:12px;}
	
.p{
	font-family:"Arial","Veranda", sansserif;
	font-size:10px;
}


.footer{background-color:#39F;
	height:20px;
	width:800px;
}

-->
	
</style>
<script type="text/javascript">

/***********************************************
* AJAX Content
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ 
if (file.indexOf(".js")!=-1){ 
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" "
}
}
}

</script>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
</head>

<body>


<div class="content">

<div id="header"><img src="img/macQuarium2.png" width="376" height="82" alt="McQ" /></div>
<div class="bar"></div>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="javascript:ajaxpage('home1.html', 'content');">home</a></li>
<li><a href="#" rel="dropmenu1">classic</a></li>
<li><a href="#" rel="dropmenu2">imac</a></li>
<li><a href="#" rel="dropmenu3">links</a></li>	
<li><a href="contact.html" target="frame">contact</a></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="javascript:ajaxpage('clas1.html', 'content');">Stage 1</a>
<a href="javascript:ajaxpage('clas2.html', 'content');">Stage 2</a>
<a href="javascript:ajaxpage('clas3.html', 'content');">Stage 3</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv">
<a href="javascript:ajaxpage('imas1.html', 'content');">Stage 1</a>
<a href="javascript:ajaxpage('imas2.html', 'content');">Stage 2</a>
<a href="javascript:ajaxpage('imas3.html', 'content');">Stage 3</a>
<a href="javascript:ajaxpage('imas4.html', 'content');">Stage 4</a>

</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv">
<a href="javascript:ajaxpage('links.html', 'content');">links</a>
<a href="http://www.google.com/search?hl=en&client=firefox-a&hs=s6K&rls=org.mozilla:en-US:official&ei=_2LsS4izLpLYtgP6u9TJDw&sa=X&oi=spell&resnum=0&ct=result&cd=1&ved=0CCMQBSgA&q=macquarium&spell=1" target="frame">Google</a></div>

<!--4th drop down menu -->                                                   
<div id="dropmenu4" class="dropmenudiv">
 <a href="javascript:ajaxpage('php/contactus.php', 'content');">contact</a></div>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>
<div class="text1">steps menu</div>
<div class="bar"></div>


<div class="frame" height="100%" src="home.html">
<object id="foo" name="foo" type="text/html" data="home.html" height="800px">
  </object>

</div>


 <div class="bar"></div>
    	<div class="footer">asjhdaksjhaskdh</div>
    </div>


</body>
</html>



Also, I know there's a way to link to fonts on the web with out using sIFR. Anyone know how to accomplish that?
I can't seem to find anything on the web showing how.

Is This A Good Question/Topic? 0
  • +

Replies To: Loading HTML into a DIV and font questions

#2 rodstol  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 63
  • Joined: 03-April 08

Re: Loading HTML into a DIV and font questions

Posted 14 May 2010 - 04:44 PM

Well, I got the width issue taken care of. It appears I was missing an object declaration in the CSS.
I assume the height issue is a similar issue.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1