Topic: Firefox/Opera/IE CSS problems.

Yet another one of these threads... roll

.sidenav {
    position: absolute;
    top: 120px;
    left: 10px;
    width: 160px;
    margin: 0;
    border: 1px solid #CCCCCC;
}

This is my CSS code snippet for a left sided column. It works fine with Firefox but looks really ugly in Opera and IE7. Basically, the vertical alignment of the column is way off in both these browsers! Any ideas on how I could resolve this issue? I would really hate to have to go back to using tables again :shudder: Thanks for any insight/help provided. smile

Last edited by RailsRocks (2007-01-31 13:03:05)

http://www.webyfi.com
It's not the size of the app that matters, it's how you code it. ~ railsenvy

Re: Firefox/Opera/IE CSS problems.

do you have an entire page mockup that we can look at?

Re: Firefox/Opera/IE CSS problems.

danger wrote:

do you have an entire page mockup that we can look at?

Do you mean a snap shot(print screen) of the problem?

Here is the entire style sheet for it(please excuse the ugliness..still in development phase)

body {
    background-color: #FFFFFF;
    font: small 'Lucida Grande', Verdana, Arial, Sans-Serif;
    margin: 0 0 0 0;
}

/* header */

.header {
    background: url(/images/bgGrayHeader.gif) repeat-x;
    height: 50px;
    width: 100%;
    margin: 0 0 0 0;
}

.header p {
    text-align: right;
    margin: -40px 20px 0 0;
}

.header a {
    color: #509CEA;
}

.header a:hover {
    color: #000;
}

.search {
    text-align: right;
    margin: -10px 20px 0 0;
}

.search input
{
color: #000;
background: #EFEFEF;
border: 1px solid #CCCCCC;
font-size: 95%;
}

.content {
}

.main {
background: url(/images/bgGrayHeader.gif) repeat-x;
height: 100%;
border: 1px solid #CCCCCC;
margin: 10px 10px 0 180px;
padding: 20px 20px 20px 20px;
}

.main h2 {
    background: url(/images/bgGray.gif) repeat-x;
    color: #000;
    font-size: 95%;
    line-height: 25px;
    border: 1px solid #EFEFEF;
    text-align: center;
}

.main fieldset {
    border: 1px solid #CCCCCC;
    background: url(/images/bgGrayHeader.gif) repeat-x;
    height: 100%;
}

.main legend {
    background: url(/images/bgGray.gif) repeat-x;
    border: 1px solid #CCCCCC;
    padding: 2px 6px;
    font-weight: bold;
}

.main th {
    background: url(/images/bgGray.gif) repeat-x;
    border: 1px solid #CCCCCC;
    padding: 2px 6px;
}

.main input
{
color: #000;
background: #F5F5F5;
border: 1px solid #CCCCCC;
font-size: 100%;
}

.main a {
color: #509CEA;
}
.main a:hover {
color: #000;
}

.main select {
border: 1px solid #CCCCCC;
background-color: #F5F5F5;
}

.main textarea {
border: 1px solid #CCCCCC;
background-color: #F5F5F5;
}

.footer {
border: 1px solid #CCCCCC;
background: url(/images/bgGray.gif) repeat-x;
height: 25px;
margin: 10px 10px 0 180px;
text-align: center;
padding: 0 0 5px 0;
}
   
.footer p {
margin: 7px 0px 0 0px;
font-size: 85%;
}

/*- Menu Tabs B--------------------------- */

#tabsB {
      text-align: left;
      margin-top: 0px;
      width:100%;
      font-size:93%;
      line-height:normal;
}
#tabsB ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
}
#tabsB li {
      display:inline;
      margin:0;
      padding:0;
}
#tabsB a {
      float:left;
      background:url("/images/tableftB.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
}
#tabsB a span {
      float:left;
      display:block;
      background:url("/images/tabrightB.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
    /* End IE5-Mac hack */
#tabsB a:hover span {
      color:#000;
}
#tabsB a:hover {
      background-position:0% -42px;
}
#tabsB a:hover span {
      background-position:100% -42px;
}

#row {
margin-top: 22px;
background: url(/images/bgGray.gif) repeat-x;
border-top: 1px solid #EFEFEF;
border-bottom: 1px solid #CCCCCC;
height: 20px;
width: 100%;
}

/* sub navigation quick*/
.sidenav {
    position: absolute;
    top: 120px;
    left: 10px;
    width: 160px;
    margin: 0;
    border: 1px solid #CCCCCC;
}
.sidenav h2 {
    background: url(/images/bgGray.gif) repeat-x;
    color: #000;
    font-size: 95%;
    margin: 0;
    padding-left: 5px;
    line-height: 25px;
    border-bottom: 1px solid #CCCCCC;
}
.sidenav ul {
    padding: 0;
    list-style: none;
}
.sidenav li {
    font-size: 90%;
    margin-top: 10px;
    padding-left: 20px;
}
.sidenav li a {
    color: #509CEA;
}
.sidenav li a:hover {
    color: #000;
}

#notice {
padding: 5px;
color: #444;
background-color: #e8e8e8;
margin-bottom: 5px;
}

http://www.webyfi.com
It's not the size of the app that matters, it's how you code it. ~ railsenvy

Re: Firefox/Opera/IE CSS problems.

That helps quite a bit.  Can you post the html that you're using with this css?  The only way I can figure out why it's displaying weird is to actually look at it in different browsers :-)

Re: Firefox/Opera/IE CSS problems.

Thanks for the quick replies Danger smile

Firefox HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Create new operation</title>
      <link href="/stylesheets/style.css?1170223404" media="screen" rel="Stylesheet" type="text/css" />
  </head>

<body>
               
    <div class="header">
    <img src="/images/logo.png" >

    <p>
       
        Logged in as: | <B>Admin</B> | <a href="/account/logout">log out</a>
       
    </p>
  </div>
 
  <div class="search">
        <form action="/admin/device/search" method="get">

<input id="q" name="q" type="text" />
<input name="commit" type="submit" value="Search" />
</form>

  </div>
 
    <div id="tabsB">
    <ul>
       <li><a href="/admin/device/new"><span>Device</span></a></li>
        <li><a href="/admin/plan/new"><span>LAN</span></a></li>
        <li><a href="/admin/ip/new"><span>IP</span></a></li>

        <li><a href="/admin/mac/new"><span>MAC</span></a></li>
        <li><a href="/admin/function/new"><span>Function</span></a></li>
        <li><a href="/admin/software/new"><span>OS</span></a></li>
        <li><a href="/admin/tech/new"><span>Tech</span></a></li>
        <li><a href="/admin/organization/new"><span>Company</span></a></li>
        <li><a href="/admin/udprotocol/new"><span>UDP</span></a></li>

        <li><a href="/admin/tcprotocol/new"><span>TCP</span></a></li>
        <li><a href="/admin/associate/new"><span>Associate</span></a></li>
        <li><a href="/admin/operation/new"><span>Service</span></a></li>
    </ul>
    </div>   
 
    <div id="row">
    </div>
   
  <div class="content">

   
    <div class="main">
    <div>
           
        <div>
          <fieldset>
          <legend>Create new operation:</legend>
          <form action="/admin/operation/create" method="post">
 

<!--[form:operation]-->
<p><label for="operation_name">Name:</label><br/>

<input id="operation_name" name="operation[name]" size="30" type="text" value="" /></p>
<!--[eoform:operation]-->
  <input name="commit" type="submit" value="Create" />
</form>

<p><a href="/admin/operation/list">List operations</a></p>
          </fieldset>
        </div>
        </div>
    </div>
   
    <div class="footer">

      <p>&copy; 2007 Network-Asset. All Rights Reserved.</p>
    </div>

        <div class="sidenav">
            <h2>Quick Menu:</h2>
            <ul>
            <li><a href="/admin/device/list">Device List</a></li>

            <li><a href="/admin/plan/index">LAN List</a></li>
            <li><a href="/admin/ip/index">IP address List</a></li>
            <li><a href="/admin/mac/index">MAC address List</a></li>
            <li><a href="/admin/function/index">Function List</a></li>
            <li><a href="/admin/software/index">OS List</a></li>
            <li><a href="/admin/tech/index">Tech List</a></li>

            <li><a href="/admin/organization/index">Company List</a></li>
            <li><a href="/admin/udprotocol/index">UDP List</a></li>
            <li><a href="/admin/tcprotocol/index">TCP List</a></li>
            <li><a href="/admin/associate/list">Associate List</a></li>
            <li><a href="/admin/operation/index">Services List</a></li>
            </ul>

    </div>
    <div class="sidenavgeneral">
      <h2>General:</h2>
      <ul>
          <li><a href="/admin/device/devicepdf_list">PDF device list</a></li>
            </ul>
    </div>
    <div class="sidenavadmin">

      <h2>Admin:</h2>
      <ul>
          <li><a href="/account/signup">New User</a></li>
          <li><a href="/account/index">List Users</a></li>
            </ul>
    </div>
   
    </div>

</body>

</html>


HTML from IE7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Create new operation</title>
      <link href="/stylesheets/style.css?1170223404" media="screen" rel="Stylesheet" type="text/css" />
  </head>

<body>
               
    <div class="header">
    <img src="/images/logo.png" >
    <p>
       
        Logged in as: | <B>Admin</B> | <a href="/account/logout">log out</a>
       
    </p>
  </div>
 
  <div class="search">
        <form action="/admin/device/search" method="get">
<input id="q" name="q" type="text" />
<input name="commit" type="submit" value="Search" />
</form>

  </div>
 
    <div id="tabsB">
    <ul>
       <li><a href="/admin/device/new"><span>Device</span></a></li>
        <li><a href="/admin/plan/new"><span>LAN</span></a></li>
        <li><a href="/admin/ip/new"><span>IP</span></a></li>
        <li><a href="/admin/mac/new"><span>MAC</span></a></li>
        <li><a href="/admin/function/new"><span>Function</span></a></li>
        <li><a href="/admin/software/new"><span>OS</span></a></li>
        <li><a href="/admin/tech/new"><span>Tech</span></a></li>
        <li><a href="/admin/organization/new"><span>Company</span></a></li>
        <li><a href="/admin/udprotocol/new"><span>UDP</span></a></li>
        <li><a href="/admin/tcprotocol/new"><span>TCP</span></a></li>
        <li><a href="/admin/associate/new"><span>Associate</span></a></li>
        <li><a href="/admin/operation/new"><span>Service</span></a></li>
    </ul>
    </div>   
 
    <div id="row">
    </div>
   
  <div class="content">
   
    <div class="main">
    <div>
           
        <div>
          <fieldset>
          <legend>Create new operation:</legend>
          <form action="/admin/operation/create" method="post">
 

<!--[form:operation]-->
<p><label for="operation_name">Name:</label><br/>
<input id="operation_name" name="operation[name]" size="30" type="text" value="" /></p>
<!--[eoform:operation]-->
  <input name="commit" type="submit" value="Create" />
</form>

<p><a href="/admin/operation/list">List operations</a></p>
          </fieldset>
        </div>
        </div>
    </div>
   
    <div class="footer">
      <p>&copy; 2007 Network-Asset. All Rights Reserved.</p>
    </div>

        <div class="sidenav">
            <h2>Quick Menu:</h2>
            <ul>
            <li><a href="/admin/device/list">Device List</a></li>
            <li><a href="/admin/plan/index">LAN List</a></li>
            <li><a href="/admin/ip/index">IP address List</a></li>
            <li><a href="/admin/mac/index">MAC address List</a></li>
            <li><a href="/admin/function/index">Function List</a></li>
            <li><a href="/admin/software/index">OS List</a></li>
            <li><a href="/admin/tech/index">Tech List</a></li>
            <li><a href="/admin/organization/index">Company List</a></li>
            <li><a href="/admin/udprotocol/index">UDP List</a></li>
            <li><a href="/admin/tcprotocol/index">TCP List</a></li>
            <li><a href="/admin/associate/list">Associate List</a></li>
            <li><a href="/admin/operation/index">Services List</a></li>
            </ul>
    </div>
    <div class="sidenavgeneral">
      <h2>General:</h2>
      <ul>
          <li><a href="/admin/device/devicepdf_list">PDF device list</a></li>
            </ul>
    </div>
    <div class="sidenavadmin">
      <h2>Admin:</h2>
      <ul>
          <li><a href="/account/signup">New User</a></li>
          <li><a href="/account/index">List Users</a></li>
            </ul>
    </div>
   
    </div>
</body>

</html>

http://www.webyfi.com
It's not the size of the app that matters, it's how you code it. ~ railsenvy

Re: Firefox/Opera/IE CSS problems.

Fixed it with a few "hacks" like the following example:

.sidenav {
    float: left;
    position: absolute;
    top: 120px;
    *top: 135px;
    left: 10px;
    width: 160px;
    margin: 0;
    border: 1px solid #CCCCCC;
}

the *top: 135px took care of the issue in IE7. Now we're gonna have to wait and see how the next release of IE is going to screw things up... roll

Last edited by RailsRocks (2007-02-01 14:00:11)

http://www.webyfi.com
It's not the size of the app that matters, it's how you code it. ~ railsenvy

Re: Firefox/Opera/IE CSS problems.

IE applies default margins to heading tags, FF doesn't. Looks like the margin was what was pushing the box down.