HTML/CSS Margin issue in certain browsers

StackOverflow https://stackoverflow.com/questions/17869757

  •  04-06-2022
  •  | 
  •  

Question

Im having an issue with the right hand margin in certain browsers on my web site. When the page loads, the content is not centered (i.e. you have to scroll right to see the entire page). Once you scroll over, it looks like there is no right hand margin, the text just runs to the edge. The site looks fine on my computer on FF (version 22) and IE (versions 7-10) but when viewed on other computers (and Safari on iOS) you can see the outlined problem. Any ideas? The only thing I can think of is that I'm asking the browser for more space than is available on the screen, but I'm not sure how to test this. Changing the left and right margins in the CSS file did no help.

EDIT: I'm using http://www.browserstack.com/ to test various browser versions since I'm not seeing the issue on my screen.

HTML: 

//if browser is IE, displays IE specific navbar
if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
   {include('navbarIE.php');}
//if browser is anything else, include original navbar file
else
   include('navbar.php');

?>
<!--formatting and style-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <title>Daiko Construction Remodeling</title>


<style type="text/css">
div#wrapper 
{
        position: relative;
        margin-left: 0px;
        margin-right: 0px;
        top: 20px;
        width: 866px;

}
</style>



</head>
<body>
<br/>

<div id="wrapper">
   <p>For your conveniece, we have listed just a few of the projects that we most commonly undertake. 
  If there is a specific service that you require and it is not listed below, 
  please <a style="color: white;" href="contactus.php">contact us</a> for more information. Additionally, 
  we offer FREE estimates for our services. While larger projects may require us to do an on-site 
  evaluation and no two projects are exactly alike, we request that you send us a short email with 
  an inquiry or any question you might have. 
   <br><br>
   </span>
   <ul>
     <li>Window and door installation (European and Domestic)</li>
     <li>General and central HVAC, A/C, heating</li>
     <li>Remodelling of:</li>
     <ul>
       <li>kitchens</li>
       <li>bathrooms</li>
       <li>bedrooms</li>
       <li>basements</li>
   <li>etc.</li>
     </ul>
     <li>Flooring (wood and tile)</li>
     <li>House additions</li>
     <li>Lighting and electrical work</li>
     <li>Plumbing<br></li>
     <li>Regular handyman work</li>
     <li>And many others</li>
    </ul>
    <br>
   </div>
</div>
</div>

</form>

<?PHP

   include('footer.php');

?>


</body>
</html>

An here's the CSS:

body 
{
    font-family: "Vijaya", "Andalus", Serif;
    font-size: 20px;
    color: white;
    margin-left: 250px;
    margin-right: 250px;
}

ul.jsddm
{
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 2.0em;

}

ul.jsddm a
{
    color: #000000;
    background-color: #F5DEB3;
    border: 1px solid #444;
    display: block;
    text-decoration: none;
    text-align: center;
    width: auto;
    height: 32px;
}

ul.jsddm a:hover
{
    color: #000;
    background-color: #FFF;
    height: 32px;
}

ul.jsddm > li
{
    position: relative;
    float: left;
    list-style: none;
    width: 20%;
}
Was it helpful?

Solution

You are defining margins to body, but it doesn't have a defined width. Using FF22's element inspector, for example, one can see that it is way more narrow than it should be (it doesn't even wrap your main div).

Since your wrapper div is set at 866px, something like body { width: 866px; } and, as @Sam R. noted, defining auto margins to it (margin: auto; or margin-left: auto; margin-right: auto) would suffice. If you want to make it a little better, you could resize your divs relatively (e.g. 100%) after that.

OTHER TIPS

There are a lot of formatting errors in your site's html, but aside from that, it seems the problem you are facing now is in your body margins. Try setting 

body { margin: auto; }

instead of

body { margin-left: 250px;
       margin-right: 250px;
    }

and your containing div to 

{ margin: auto; }

Setting fixed margins for the right and left sides of a container will cause issues when the browser is resized. Margin: auto will center your content.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top