This didn't work in IE6 which was being used by enough of my intended audience to make it worth checking for compatabilty. The banner was being displayed on top of the links.
I've moved the links out of the banner division and given them their own division and abso;lutley positioned it and it works fine in Firefox and IE8. In IE 7 the links are in the middle of the page although I have floated them to the right.
Could anyone suggest what I'm doing wrong?
BTW, the page is 980px wide.
Expand|Select|Wrap|Line Numbers
- <div class="site_head">
- <div class="site_logo">
- <a href="/"><img alt="" src="/images/logo.jpg" border="0"/></a>
- </div>
- <div class="site_header">
- <a href="/my page1.html" style="width: 170px; padding-left: 30px;">Page 1</a>
- </div>
- <div class="site_header" style="margin-top: -140px;">
- <a href="/my page 2.html">Page 2</a>
- </div>
- </div>
Expand|Select|Wrap|Line Numbers
- .site_head {
- position: absolute;
- z-index: 3;
- top: 0px;
- padding-left: 30px;
- width: 950px;
- }
- .site_header {
- margin: -180px 10px 0 0;
- background:#8e6f90;
- height:25px;
- line-height:25px;
- text-align:left;
- border:none;
- font-family:verdana, arial, sans-serif;
- font-size:12px;
- font-weight:normal;
- color:#ffffff;
- text-decoration:none;
- border:none;
- width:160px;
- padding: 0 0 0 5px;
- float: right;
- position: relative;
- z-index: 2;
- border: 1px solid #000000;
- }
- .site_header a {
- background:#8e6f90;
- height:25px;
- line-height:25px;
- text-align:left;
- border:none;
- font-family:verdana, arial, sans-serif;
- font-size:12px;
- font-weight:normal;
- color:#ffffff;
- text-decoration:none;
- border:none;
- width:160px;
- padding: 0 0 0 5px;
- float: right;
- position: relative;
- z-index: 2;
- }
- .site_header a:hover {
- background:#8e6f90;
- height:25px;
- line-height:25px;
- text-align:left;
- border:none;
- font-family:verdana, arial, sans-serif;
- font-size:12px;
- font-weight:normal;
- color:#ffffff;
- text-decoration:underline;
- border:none;
- width:185px;
- padding: 0 0 0 30px;
- float: right;
- position: relative;
- z-index: 2;
- }
- .site_logo {
- position: absolute:
- z-index: 2;
- }