Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Fixed height & relative position

Posted on 2006-07-17
7
Medium Priority
?
3,633 Views
Last Modified: 2012-05-05
Hi folks,

I want to have a picture/text 50px above the bottom of a TD.

My code:

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" class="mainTable">
  <tr>
    <td colspan="3">{header}</td>
  </tr>
  <tr>
    <td colspan="3">{horizonMenu}</td>
  </tr>
  <tr>
    <td width="100" valign="top">{googleSearch}
        <div id="leftBlock"></div>
      <br />
        <br/>
        <div id="icons">{rssButton}</div></td>
    <td width="750" valign="top" id="centralBlock" align="justify"><!-- TemplateBeginEditable name="subTitle" -->
      <h1>{title}</h1>
      <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="content" -->
      <p>&nbsp;</p>
    <!-- TemplateEndEditable --> </td>
  </tr>
  <tr>
    <td colspan="3"><div align="center">{footer}</div></td>
  </tr>
</table>

My CSS :

#icons {
      position: fixed;
      bottom: 50px;
      font-size: 10px;
}

Please note <div id="icons">{rssButton}</div> above. I want to have this rssButton 50 px higher than the following (bottom line of ) TD or the bottom of the browser window, whichever is higher, no matter how I resize the window.

My code does not work properly, though.

right now, it can:

(a) always stay 50 px above the bottom of the WINDOW, but not the TD. While it is okay in many cases (if the height of the table is longer than my browser window's height), it is not what I want if the table is very short.

For example, if the table's height is only 100px, and my browser window's height is 600px, and I maxmize my browser window, the rssButtom will stay far below the table, but exactly 50px above the bottom of the window.

(a) works in fireforx but does not work in IE.

How can I fix that?

Thanks
0
Comment
Question by:tiger0516
  • 4
  • 3
7 Comments
 
LVL 7

Assisted Solution

by:maUru
maUru earned 200 total points
ID: 17126836
i dont think im understanding what you want,

but does this give the desired result?

#icons {
     position: relative;
     bottom: 50px;
     font-size: 10px;
}
0
 
LVL 17

Accepted Solution

by:
mreuring earned 1000 total points
ID: 17128727
Position: fixed doesn't exist in IE and even if it did, it's always relative to your viewport (the window in this case) so you'd never be able to get it to behave as you want it to. What you want would have to be scripted, no amound of CSS is going to make this work (at least, it wouldn't be pretty).
So, I suggest you ask this question to be moved to the JavaScript section http:javascript as they might be more capable of helping you sorting this out.
0
 
LVL 7

Expert Comment

by:maUru
ID: 17131809
changing to relative does what he wants (i think)
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 17

Expert Comment

by:mreuring
ID: 17136429
I think position relative might provide for a nice compromise, but it certainly don't sound like a fix. Position relative doesn't position the element in relation to the viewport after all.
0
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 1000 total points
ID: 17136439
Oh, I just figured I should add this, since it's about an rss feed. The default accepted way of exposing an RSS feed is by adding a link alternate to the head of your document:
<link rel="alternate" type="application/rss+xml" title="RSS" href="your-rss-feed-here">

Although perhaps it won't work in every single browser out there, all the modern browsers will expose that link in one way or another (usually in the address-bar).
0
 
LVL 7

Expert Comment

by:maUru
ID: 17136553
SOME DAMN AUTHOR FEEDBACK WOULD HELP.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 17136610
Cool down maUru, maybe he/she isn't in the office today, or on sick-leave. Nomatter what, there's no reason nor use to start shouting.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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

783 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