0

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
4
Views
10 Years
Discussion Span
Last Post by MidiMagic
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.