Member Avatar for VanPetrol

In the page you will see a div called div_topbanner. I want to load a flash in there.
But I bet I messed up with the css a bitbecause the dimensions of header get a bit messed up when resizing the window. Also it's "higher" in IE (7) than FF.

Thought someone would be so kind to have a look?
header.php

<div id="header"> 
  <img id="mainlogo" src="image/main_logo.png">
  <div id="div_login">
    <ul>
      <li>User Name:</li>
      <li><input id="txtUserName" type="text" /></li>
      <li>Password:</li>
      <li><input id="txtPassword" type="password" /></li>
      <li>Remember Me<input type="checkbox" id="chkRememberMe" /></li>
      <li><input type="button" id="btnLogin" value="Login" /></li>
      <li><a href="/">Forgot Password?</a></li>
    </ul>
  </div> <!-- login -->
  <div id="div_topbanner">
  
  </div>
  <div id="div_topnav">
    <ul id="ul_topnav">
      <li id="li_home"><a href="home.php">Home</a></li>
      <li id="li_cand"><a href="about_cand.php">China Automotive News Daily</a></li>
      <li id="li_trial"><a href="trial_access.php">Trial Access</a></li>
      <li id="li_translations"><a href="translation_services.php">Translation Services</a></li>
      <li id="li_work"><a href="work_with_us.php">Work</a></li>  
      <li id="li_lang"><a href="home.php">Language</a></li>    
    </ul>
  </div>  <!-- div_topnav-->
</div>

style.css

body
{
 color: #333333;
 margin: 0;
}
#header
{
 height: 150px;
}
#mainlogo
{
 position: relative;
 top: 60px;
}
#div_login
{
 position: absolute;
 right: 0px;
 top: 0px;
 background: #ececec url(../image/login_right.gif) no-repeat bottom left;
 text-align: right;
}
#div_login ul
{
 margin: 0;
 padding: 6px 20px 4px 20px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 70%;
}
#div_login li
{
 display: inline;
}
#div_login #txtUserName, #txtPassword
{
 border: 1px #666666 solid;
 width: 70px;
 font-size: 80%;
 margin-right: 6px;
}
#div_login #chkRememberMe
{
 margin: 2px;
 margin-right: 10px;
 vertical-align: middle;
}
#div_login #btnLogin
{
 border: 1px #666666 solid;
 font-size: 80%;
 margin-right: 10px;
 vertical-align: middle;
}
#div_login a
{
 color: #333333;
}
#div_topbanner
{
  background-color: #333333;
 position: absolute;
 right: 0px;
 top: 40px;
 width: 500px;
 height: 80px;
}
#div_topnav
{
 position: relative;
 top: 60px;
 float: left;
 width: 100%;
 margin: 0;
 padding: 0;
 list-style: none;
 background: #ffffff url(../image/topnav_bottom.gif) repeat-x bottom left;
}
#div_topnav li
{
 list-style: none;
 float: left;
 margin: 0;
 padding: 0;
 font-family: "Lucida Grande" , sans-serif;
 font-size: 70%;
}
#div_topnav a
{
 float: left;
 display: block;
 margin: 0 1px 0 0;
 padding: 4px 8px;
 color: #333;
 text-decoration: none;
 border: 1px solid #9B8748;
 border-bottom: none;
 background: #F9E9A9 url(../image/topnav_off.gif) repeat-x top left;
}
#div_topnav a:hover, body#home #li_home a, body#about_cand #li_cand a, body#trial_access #li_trial a, body#translation_services #li_translations a, body#work_with_us #li_work a
{
 color: #333;
 padding-bottom: 5px;
 border-color: #727377;
 background: #fff url(../image/topnav_on.gif) repeat-x top left;
}
  • 3 Contributors
  • 3 Replies
  • 121 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Likely causes: the header mixes absolute-positioned children with a non-positioned container and a fixed header height, so the banner/login are being anchored to the page (or behave differently across engines) instead of to the header. That explains the “moves when resizing” and the vertical offset differences between IE7 and Firefox. As hinted, a fixed-height header makes the layout brittle; and while is right that IE has quirks, many differences come from missing DOCTYPE/quirks mode or from positioning choices rather than an unavoidable browser bug.

Concrete fixes to try (apply to the header area, not the whole page):

  • Make the header a positioned container so its absolutely positioned children are anchored to it.
  • Let the header size to its content rather than hard-coding a height; contain floats with a clearfix or overflow so the header grows.
  • Prefer floats for simple left/right alignment (logo left, login/banner right) rather than using top offsets; use absolute positioning only for overlays that must sit on top.

Example snippets:

/* make header the positioning context and contain floats */
#header {
  position: relative;
  overflow: hidden; /* or use a clearfix */
}

/* simple clearfix */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Flash note: for historic Flash embedding use a small library like SWFObject to get consistent HTML/IE behavior and pass a wmode parameter when layering is needed:

<script src="swfobject.js"></script>
<script>
  var params = { wmode: "opaque" };
  swfobject.embedSWF("banner.swf","div_topbanner","100%","80","10.0.0",false,{},params,{});
</script>

Important: Flash has been deprecated and removed from modern browsers — consider replacing the Flash banner with HTML5/CSS/JS for long-term compatibility (Adobe EOL). For positioning/containment details see MDN’s guide on CSS positioning (MDN: position). Checklist: add a standards DOCTYPE, remove fixed header height, make #header positioned, contain floats/clear, and embed Flash via a library if Flash must be used.

Recommended Answers

All 3 Replies

Member Avatar for phper

Have you tried using -

height:auto; or height: inherit;

Member Avatar for VanPetrol

No, I did not. Willl give it a try.
I should read a bit more about css layouts.

Member Avatar for MidiMagic

It will ALWAYS be different in IE. MS won't stick to the standard.

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.