?
Solved

Relative positioning incorrect in FF

Posted on 2009-04-10
7
Medium Priority
?
504 Views
Last Modified: 2012-05-06
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
Comment
Question by:Yury Merezhkov
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 25

Assisted Solution

by:kevp75
kevp75 earned 200 total points
ID: 24120310
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
 
LVL 7

Author Comment

by:Yury Merezhkov
ID: 24120480
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
 
LVL 42

Expert Comment

by:David S.
ID: 24121018
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Author Comment

by:Yury Merezhkov
ID: 24124908
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
 
LVL 7

Author Comment

by:Yury Merezhkov
ID: 24161978
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
 
LVL 42

Accepted Solution

by:
David S. earned 1800 total points
ID: 24163185
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
 
LVL 7

Author Closing Comment

by:Yury Merezhkov
ID: 31569098
Thank you!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question