Content moves over header when zooming

Question

4.00/5 (1 vote)

See more:

Good day

I have created a ASP.net website for IE9 using CSS3 and HTML5. It works for IE9, Firefox, Google Chrome and Safari.

I made some modifications in my stylesheet that it can work for IE8. When I tested the website in IE8 (changing screen resolution, zooming in and out etc) the main content moves over the header. The menu, main content and footer stays together when zooming in and out.

When I zoom out, the menu + main content moves over the header. When I zoom in, the menu + main content moves away from the header and leaves a white space between the header and menu.

I used some css3 coding in the stylesheet that is not ompatible with IE8.

Here is my css code

//stylesheet

CSS

html, body, #main{ height: 100%; margin: 0; padding: 0;}

 #form1
 {
  height:100%;
  margin:0;
 }

 #UpdatePanel1
 {
  height:100%;
  margin:0;
 }

#header
 {
  -moz-background-size: cover; //css3
  background-size: cover; //css3
  background-image:url(/Images/header.gif);
  background-size:100% 100%; //css3
  background-repeat:no-repeat;
  clear:both;
  background-color:#585858;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:25%;
  z-index:-1;
  background-position:center;
 }

  #menu
 {
  background-color :#7C7C7C;
  height:auto;
  text-decoration : none;
  margin:150px 0px 0px 0px;
  padding:0px 40px 0px 40px;
  width:100% auto;
  border-bottom:3px solid #B1ABAB;
  min-height: 2%;
  bottom:-200px;
  position:relative;
 }

#main
 {
 margin-right:60px;
 margin-left:60px;
 margin-top:200px;
 height:auto;
 background-color: #ECECEC;
 width :100% auto;
 padding:40px 40px 0px 40px;
 overflow:auto;
 min-height:100%;
 }

#footerbottom {
 clear: both;
 position: relative;
 z-index: 0;
 height: 3em;
 margin-top: -3em;
 background-color: #585858;
 border-top:3px solid #B1ABAB;
 overflow:hidden;
}

#main { padding-bottom: 4em; }
#contactus { padding-bottom: 20em; }
#applications { padding-bottom: 20em; }

//master page

XML

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="site.master.cs" Inherits="site" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head runat="server">

<title>TsogoSafe</title>
<link href="Styles/main.css" rel="stylesheet" type="text/css" />
  <asp:ContentPlaceHolder ID="HeadContent" runat="server">
</head>
<body>
 <form id = "form1" runat="server" autocomplete="off">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
   <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
  <ContentTemplate>
 <div id = "header">
 <h1><br /><br /><br /></h1>
 </div>

<div id = "menu">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href = "Default.aspx">&nbsp;Home</a><span class="style1"></span>&nbsp;|&nbsp;
<a href ="Applications.aspx">Applications</a><span class="style1"></span>
&nbsp;|&nbsp;<a href ="Contact.aspx">Contact Us</a></div>
<div id = "main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id = "footerbottom"></div>
</ContentTemplate>
 </asp:UpdatePanel>
</form>
</body>
</html>

My problem is, that my menu with the main content and footer is not "sticking" to my header.

What am I doing wrong in my stylesheet?

Posted 24-Jul-12 5:12am

JacoBosch

Updated 24-Jul-12 5:13am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

JacoBosch · Answer 1 · 2012-07-25T01:51:00

This is what I have changed in my stylesheet to work with IE8.

CSS

html, body, #main { height: 100%; margin: 0; padding: 0;}

 #form1
 {
  height:100%;
  margin:0;
 }

 #UpdatePanel1
 {
  height:100%;
  margin:0;
 }

#header
 {
  -moz-background-size: cover;
  background-size: cover;
  background-image:url(/Images/header.gif);
  background-size:100% 100%;
  background-repeat:no-repeat;
  clear:both;
  background-color:#585858;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:25% auto;
  z-index:-1;
  -ms-filter:&quot;progid:DXImageTransform.Microsoft.AlphaImageLoader  (src=&#39;Images/header.gif&#39;, sizingMethod=&#39;scale&#39;)  &quot;;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#39;Images/header.gif&#39;, sizingMethod=&#39;scale&#39;);
  background-position:center;
  margin:0 auto 0 auto;
  overflow:none;
 }
  #menu
 {
  background-color :#7C7C7C;
  height:auto;
  text-decoration : none;
  margin:150px 0px 0px 0px;
  padding:0px 40px 0px 40px;
  width:100% auto;
  border-bottom:3px solid #B1ABAB;
  min-height: 2%;
  bottom:-128px;
  position:relative;
 }

#main
 {
 margin-right:60px;
 margin-left:60px;
 margin-top:120px;
 height:auto;
 background-color: #ECECEC;
 width :100% auto;
 padding:40px 40px 0px 40px;
 overflow:hidden;
 min-height:100%;
 }


#footerbottom {
 clear: both;
 position: relative;
 z-index: 0;
 height: 3em;
 margin-top: -3em;
 background-color: #585858;
 border-top:3px solid #B1ABAB;
 overflow:hidden;
}

#main { padding-bottom: 4em; }