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, , 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.

Dani AI

Generated

A short, practical summary tied to the thread: the visible “whitespace to the right” is almost always caused by at least one element that is wider than the viewport; forcing body to a fixed 1024px (as tried) hides the symptom but removes fluid behavior on larger screens. and not seeing the problem points at an environment-specific reproducer (browser zoom, OS DPI/scale, or a single wide element such as an image, large fixed margin or an absolutely positioned block).

Quick diagnosis (repeatable, no guesswork)

  • Open devtools and toggle responsive/device mode at widths above 1024px.
  • Run this snippet in the console to log and highlight offending elements:
(function(){
  var W = document.documentElement.clientWidth;
  var els = document.querySelectorAll('body *');
  for (var i=0;i<els.length;i++){
    if (els[i].offsetWidth > W){
      console.log('Overflower:', els[i], els[i].offsetWidth);
      els[i].style.outline = '2px solid rgba(255,0,0,0.6)';
    }
  }
})();

Concrete fixes to avoid the fixed-width band‑aid

  • Wrap page content in a centered container and use a max width rather than a fixed width:
    .site-wrap { max-width:1024px; width:100%; margin:0 auto; box-sizing:border-box; }
    img,embed,object,iframe { max-width:100%; height:auto; display:block; }
    .clearfix::after { content:""; display:table; clear:both; }
  • Replace large inline left/right offsets (and fixed pixel margins on feature blocks) with centered flow or percentage/grid-based layouts. Use box-sizing: border-box to make width math predictable.
  • Use media queries for layout changes beyond 1024px, and avoid overflow-x:hidden as a permanent solution — it masks the cause.

About mixing pixels and percentages: it’s fine to mix units, but ensure no child has a fixed pixel width or margin that can exceed its parent. Convert px→% with percent = (px / parentWidth) * 100 (for example, 200px in a 1024px container ≈ 19.53%). Modern debugging via browser devtools (responsive mode) — the practical alternative to the “web kits” idea mentioned by — makes finding the offending element fast and reliable.

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

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

, 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.