Hello Again,

Sorry to kep bothering everyone, but I still need a little help. I'm coming across problems I haven't come across before.

My new problem is that beyond a 1024 width resoluton the site--particulalry the home page--gets distorted. As opposed to posting all the code that might be relevatn here I am poting links ot the code. Css for the site, CSS for the menu bar, The PHP include file, and here is teh home page since it's a PHP file:

<!DOCTYPE html>
<html>
<head>
<style>
#menubar {margin-left:16.5%}

</style>
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<meta name="keywords" content="INEC, International Nusring Education COnsortium, nursing, study abroad, dominican republic, haiti, dr. mildred fennal, mildred fennal">
<meta name="description" content="INEC is Nurses preparing to serve a global society through study abroad">
<title>INEC...International Nursing Education Consortium</title>

<link href="inec.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="MM_preloadImages('images/button-hover.png')">
<div id="header">
<div id="left"><a href="index.php"><img src="images/INEC-logo.png" width="118" height="97"></a>
  <div>Nurses preparing to serve a global society through study abroad</div>
</div>
<div id="inec">
<div>International Nursing Education Consortium</div>
<a href="inec-study-abroad.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('study abroad button','','images/button-hover.png',1)"><img src="images/button.png" alt="press to study abroad with inec" name="study abroad button" width="108" height="28" border="0"></a> </div>
</div>
<div id="main">
<img src="images/bigpic.jpg"  alt="register to study abroad">
</div>
<div id="menubar"><?php include 'menu.html';?></div>
<div class="feature" style="margin-left:100px">
<h1>Study Abroad</h1>
<img src="images/study_abroad.jpg" width="241" height="177" >
<p>
Dr. Mildred Fennal is no stranger to study abroad for nurses. Dr. Fennal made history by internationalizing the nursing curriculum at South Carolina State University, and taking undergraduate nursing students abroad.
</p>
<div class="readmore"><a href="inec-study-abroad.php">Read More >>></a></div>
</div>
<div class="feature">
<h1>Who We Are</h1>
<div id="initials">
<img src="images/inec_initials.gif">
</div>
<p>
The International Nursing Education Consortium is a new innovative program involving nurses at all levels. The program provides methodology for education, practice and research as a study abroad experience.
</p>
<div class="readmore"><a href="inec-about-us.php">Read More >>></a></div>
</div>
<div class="feature">
<h1>Visit the Dominican</h1>
<img src="images/visit_the_dominican.jpg">
<p>
A visit to the Dominican Republic to establish relationships,  obtain clinical space, and meet with government and non-government agencies was completed in 2008. During the visit a partnership was established ....</p>
<div class="readmore"><a href="inec-current-projects.php">Read More >>></a></div>
</div>
<div id="footer">
<?php include ("footer.html");?></div>
</body>
</html>

Thanks for any help anyone can provide.

Recommended Answers

All 8 Replies

I'm not seeing any distortion, I have checked in IE, Chrome, and FF with a resolution of 1920x1080.

I'm not seeing distortion on the homepage either. Could you submit a screenshot?

Hey everyone, I seemed to have resolved the distortion issue. Intead of having a body tag width of 100% I made it 1024px. I made it 100% trying to avoid the very problem I now have--whitespace to the right of the webpage. I figured by making it liquid it aould adopt to any resolution or screen size.

I apologize for the "wild goodse chase". After I postred I went seaching my code for solutions and changed some CSS and then couldn't stick around to inform anyone of the changes. For now, I am leaving things as is so you can "search and destroy". Let me know what you find. Thanks again.

Is perhaps some or all of the problem in th fact that my styles are mixed with pixels and percentaegs? Is that confusing the browser (IE)? IF so, would I need to make it percentage uniformly so various screen sizes and resolutions render the same page?? I guess I would have ro convert the pixels aI want into percentages, right?

why don't you use web kits to help you design your page so it "fits" in all browsers?

Also, your 2nd link does not work.

I'm not so much worried abotu browsers as I am monitor resolutions unless that's what you meant. Thanks for your tips, though

@Reliable, can you mark this as solved ....?

@Reliable, can you mark this as solved ....?

Lets not rush him, he may have more questions or wants to leave it open for more resources.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.