Solved

Fixed height & relative position

Posted on 2006-07-17
7
3,628 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
[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
  • 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
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 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

751 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