• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 510
  • Last Modified:

Relative positioning incorrect in FF

Hello guys,

Please look at my website http://www.titanmusicstore.com. I would like it to look in the FF the same way it looks in IE 6 and 7. The div with sitepath and Login to My Account is not where it is supposed to be. I attached the portion of HTM code for that div and CSS for all 4 sections on a page.

Thank you.
<div id="sitepath">
                   <table style="width:100%; height: 25px;">
                       <tr>
                           <td align="left">
                              Sitepath here
                           </td>
                           <td align="right">
                               <div id="myLink">
                                           <strong>Some links here</strong>
                               </div>
                               <div id="myLink">
                                    <strong>Login to My Account</strong>
                               </div>
                           </td>
                       </tr>
                   </table>
        </div>
 
#navigation
{
    width: 665px;
    position: relative;
    top: -79px;
    left: 148px;
}
 
#sitepath
{
    margin-left: 837px;
    position: relative;
    top: -99px;
    left: -648px;
    width: 639px;
    border: thin #4F89F4 solid;
}
 
#mainContent
{
    margin-left: 836px;
    position: relative;
    top: -87px;
    left: -647px;
    width: 625px;
    border: thin #4F89F4 solid;
    padding: 7px;
}
 
#copyright
{
    width: 639px;
    position: relative;
    top: -74px;
    left: 189px;
    border: thin #4F89F4 solid;
    font-family: Tahoma;
    color: #666666;
    font-size: small;
    text-align: center;
}

Open in new window

0
Yury Merezhkov
Asked:
Yury Merezhkov
  • 4
  • 2
2 Solutions
 
kevp75Commented:
first things first...  stop using tables to design a site...

secondly, you can't have two HTML objects with the same ID

try:

<div id="sitepath">
                   <table style="width:100%; height: 25px;">
                       <tr>
                           <td align="left">
                              Sitepath here
                           </td>
                           <td align="right">
                               <div class="myLink">
                                           <strong>Some links here</strong>
                               </div>
                               <div class="myLink">
                                    <strong>Login to My Account</strong>
                               </div>
                           </td>
                       </tr>
                   </table>
        </div>
 
 
CSS:
.myLink {
     padding:0 0 5px 0;
     }

Open in new window

0
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
Those divs would never appear on the page at the same time, that's why I assigned the same IDs. One shows up on anonymous LoginView, the other one on logged in.

I can give them different IDs, that's not a problem. But it doesn't fix my issue. I tried what you mentioned here but it didn't work. I am pretty sure you were trying to fix something else.

I've heard people say bad things about using tables for web design. But why? At least they show up the same way across all browsers. I've never had a problem with them.

Anyways, if you can change that portion of code to using CSS instead of tables that would be great.

Any other ideas? Thanks.
0
 
David S.Commented:
IE8 is displaying it the same as Firefox.

I recommend you set the color and background-color properties on body.

You're using an awful lot of relative positioning. I recommend you use margins and negative margins instead. Try the following two rules.

These explain why you shouldn't use tables for layout:
http://www.hotdesign.com/seybold/index.html
http://www.dynamicsitesolutions.com/html/tables-for-tabular-data-only/
#navigation {
  margin: -79px 0 0 148px;
  min-height: 10px;
  padding: 0;
  position: relative;
  width: 665px;
}
#sitepath {
  border: thin solid #4F89F4;
  clear: both;
  margin-left: 149px;
  position: relative;
  width: 639px;
}

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
Ok, thank you, guys! I figured it out. You can check it out at the same link.

Is it ok to use this type of code instead of tables (for example instead of two TDs next to each other)?

span
{
   display: table-cell; /* For FireFox and Opera */
   display: inline-block; /* For Opera and IE */
}

Or is display: table-cell; the same as the table approach?
0
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
Anybody wants to answer my last question I posted?
Also, when I create forms, I shouldn't use tables either (for positioning labels and textboxes)?

I need to close this.
0
 
David S.Commented:
display:table-cell merely tells the browser to make an element behave like a table-cell. It does not imply that the element is marking up tabular data.

I would probably have used floats myself, but using display:table-cell in some browsers and display:inline-block in others should work fine.

Here's an example of how I prefer to do form layouts:
http://www.dynamicsitesolutions.com/css/form-layout-example/
0
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now