Previous Message
Next Message

Problem with CSS Positioning in IE6

Sent by James C. McMaster (Jim) on 11 November 2003 21:09


I am developing a page using CSS positioning.  It displays properly in NS7, 
but not in IE6.  What I want is:

------------------------------------------------------------------------------
-
|    (logo)   |                                          (right-aligned 
links)|
|             |                                                    (site 
name)|
------------------------------------------------------------------------------
-
              ^                                                               
^
The site name should have a tan background, stretching from the caret to the 
end of the box.


In IE6, I get:

------------------------------------------------------------------------------
-
|    (logo)   |(right-aligned links)                                          
|
|             |(site name)                                                    
|
------------------------------------------------------------------------------
-
              ^            ^

The text is on the left, and the tan background stretches only from caret to 
caret.  It seems IE is ignoring the right:0; positioning directive.  Here is 
a stripped-down version of the page.  Can anyone tell me what is wrong?

Thank you
-- 
Jim McMaster
[EMAIL-REMOVED]


---------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <style type="text/css">
      body {
        background-color: #fff;
	margins: 0;
	padding: 0;
      }
      #masthead {
	margin: 0 30px 35px 0;
	padding-right: 40px;
	height: 67px;
	border: 1px solid #c8bea5;
	position: relative;
	left: 0;
	top: 0;
	marginright: 25px;
	font: 9px Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
        text-decoration: none;
      }
      #topnav {
        position: absolute;
        left: 184px;
        top: 0;
	color:  #c8bea5;
	text-align: right;
	line-height: 30px;
	word-spacing: 10px;
	height: 34px;
	padding-right: 30px;
	overflow: auto;
	position: absolute;
	right: 0;
      }
      #topnav a {
	font-size: 10px;
	color: #0075a6;
        text-decoration: none;
      }
      #sitename {
        position: absolute;
        left: 184px;
        top: 34px;
	height: 34px;
	right: 0;
        color: #fff;
        background-color:  #c8bea5;
	font-size: 24px;
	text-align: right;
	padding-right: 30px;
      }
    </style>
  </head>	
  <body>
    <div id="masthead">
      <div id="topnav">
        <a href="http://intwww.stortek.com/">
          POWERPORT
        </a>
        |
        <a href="http://www.storagetek.com" target="new">
          WWW
        </a>
        |
        <a href="http://www.support.storagetek.com/" target="new">
          CRC
        </a>
        |
        <a href="http://members.storagetek.com/" target="new">
          PARTNERS
        </a>
        |
        <a href="http://salescomm.stortek.com/" target="new">
          SALES
        </a>
        |
        <a href="http://storagetek.shareholder.com/stock.cfm" target="new">
          STOCK
        </a>
      </div>
      <div id="sitename">
        test site
      </div>
    </div>
  </body>
</html>


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: