Solved

Fixed height & relative position

Posted on 2006-07-17
7
3,627 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 50 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 250 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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 250 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

830 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