Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET CSS HTML CSS3 HTML5
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
 
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
<%@ 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 6:12am
JacoBosch1.5K
Edited 24-Jul-12 6:13am
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

This is what I have changed in my stylesheet to work with IE8.
 
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; }
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 532
1 Maciej Los 470
2 Sergey Alexandrovich Kryukov 421
3 CPallini 200
4 Peter Leow 165
0 Sergey Alexandrovich Kryukov 6,888
1 OriginalGriff 5,342
2 Peter Leow 3,962
3 Mika Wendelius 2,850
4 CHill60 2,748


Advertise | Privacy | Mobile
Web02 | 2.8.150224.1 | Last Updated 25 Jul 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100