I'm trying to generate reports with header, footer and content. The header and the footer works fine, however the text of the content div breaks higher than I want. See the image. I really don't understand why the page is breaking so high.
This is the CSS code:
#page {
margin: 180px 50px;
}
#header {
position: fixed;
left: 0px;
top: -150px;
right: 0px;
height: 150px;
text-align: left;
}
#footer {
position: fixed;
left: 0px;
bottom: -180px;
right: 0px;
height: 80px;
text-align: right;
background-color: lightblue
}
#footer .page:after {
content: counter(page, upper-roman);
}
#content {
padding-left: 10mm;
padding-right: 5mm;
line-height: 6mm;
background-color: lightgreen;
height: 850px;
}
#logo {
height: 4cm;
}
#head_text {
display: inline-block;
line-height: 6mm;
padding-top: 15px;
}
And this is the HTML:
<html>
<head>
<style>
'.$css.'
</style>
</head>
<body>
<div id="header">
'.$header.'
</div>
<div id="footer">
<p class="page">Página </p>
</div>
<div id="content">
'.$content.'
</div>
</body>
</html>
Could anyone help to solve this problem? Tanks!
If your DOMPDF_DPI is set to 72 then a 180px margin is pretty expansive. A DPI of 72 gives a one-to-one translation from PX to PT (the native unit in a PDF). PDF documents produced by dompdf are always 72 PPI. That translates into 2.5 inches of margin around the content. I don't think you meant to pad your margins quite that much.
Another problem I see is that you've set a height condition on your content element. You don't really need this and I see it causing some problems as I run some test renders. If you want your content background to have a specific color then I'd recommend setting it on the body element, which is the true bounds of your document content.
Try the following:
#page {
margin: 180px 50px;
}
#header {
position: fixed;
left: 0px;
top: -150px;
right: 0px;
height: 150px;
text-align: left;
}
#footer {
position: fixed;
left: 0px;
bottom: -180px;
right: 0px;
height: 80px;
text-align: right;
background-color: lightblue
}
#footer .page:after {
content: counter(page, upper-roman);
}
body {
background-color: lightgreen;
height: 850px;
}
#content {
padding-left: 10mm;
padding-right: 5mm;
line-height: 6mm;
}
#logo {
height: 4cm;
}
#head_text {
display: inline-block;
line-height: 6mm;
padding-top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="footer">
<p class="page">Página </p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id erat blandit, auctor massa eu, aliquam lacus. Suspendisse justo ante, gravida vel diam quis, porta luctus nisi. Donec id enim sem. Sed et lobortis magna. Ut et dignissim augue. Cras quam libero, feugiat ac auctor eget, semper a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse quis hendrerit ex. Phasellus auctor dolor sit amet nibh rhoncus sagittis. Sed quis odio sit amet purus feugiat malesuada.</p>
</div>
</body>
</html>
Related
i'm trying to recreate this element
I've created the following structure:
.slider-container { max-width: 300px; margin: 100px auto; background: red; position: relative; box-sizing: content-box; }
.slider-background { background: white;
position: absolute;
top: 10px;
right: 10px;
width: 90%;
height: 90%;
text-align: right;
z-index: 1; }
.slider-background a {
padding: 15px 20px;
display: block;
}
.slider-info {
padding: 45px 30px;
}
.slider-content { position: absolute; top: 0; left: 0; z-index: 2; background: lightblue; }
<div class="slider-container">
<div class="slider-background">
more<br>info
</div>
<div class="slider-content">
<div class="slider-info">
<img src="https://via.placeholder.com/140x100"/>
<h2>
lorem<br><b>ipsum</b>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
</p>
</div>
</div>
</div>
But i'm not sure on how to recreate the curved angle on the top div, what would be the best solution to achieve that result?
Here is an idea with pseudo element and skew transformation.
I kept only the relevant for so we can see the trick:
.slider-info {
padding: 45px 30px;
}
.slider-content {
background:
linear-gradient(lightblue,lightblue) bottom/100% calc(100% - 200px) no-repeat;
width: 300px;
margin: 20px auto;
border-radius:20px 0 20px 20px;
position:relative;
z-index:0;
overflow:hidden;
}
.slider-content::after {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
height:200px;
background:lightblue;
transform-origin:bottom;
transform:skew(30deg);
border-radius:0 20px 0 0;
}
<div class="slider-content">
<div class="slider-info">
<img src="https://via.placeholder.com/140x100" />
<h2>
lorem<br><b>ipsum</b>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
</p>
</div>
I need some help with a practice project I'm working on. I've got my content divs (.primary, .secondary and .tertiary) sat within a wrapper that's currently set to 100% width (for the sake of debugging).
I want it so that .primary and .secondary appear next to each other side by side at a screen size of 779px and above with tertiary set at 100% of the wrapper's width below them.
All three content divs also have the class col which I've floated left so in theory, I should be able to set .primary and .secondary to 50% and they should happily sit next to each other, right?
Wrong.
They sit as blocks below each other. Both have a width of exactly half of the wrapper (used dev tools in google chrome to check) but they won't sit next to each other until I sit their widths to 48% and then they leave a gap to their immediate right.
I honestly can't make heads or tails of it. I'm going to include the full code below for anyone that wants to just copy and paste to see the weirdness. I should note as well, there is a normalize file on there, downloaded from: https://necolas.github.io/normalize.css/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dragon Ball Fan Site</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
</head>
<body>
<header class="main-header clearfix">
<div class="container">
<h1 class="title">Dragon Ball Fan Site</h1>
<ul class="main-nav">
<li>Main</li>
<li>Manga</li>
<li>Anime</li>
<li>Video Games</li>
<li>Register</li>
</ul>
</header>
<div class="banner">
<img src="img/main-img.png" alt="Main Image, Goku" class="main-img">
<h1 class="name">Dragon Ball Fansite</h1>
<span class="tagline">A Site For Fans, By Fans</span>
</div>
</div>
<div class="wrapper clearfix">
<div class="secondary col">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem. Praesent eleifend dignissim ligula. Nunc enim lectus, fringilla at odio vel, sagittis volutpat velit. Integer pretium ac nisl eget volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="primary col">
<h2>About Dragon Ball</h2>
<img src="img/cast.png" alt="Main Cast" class="cast">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</p>
</div>
<div class="tertiary col">
<h2>About Us</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac.</li>
<li>Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</li>
</ul>
</div>
</div>
</div>
<footer class="main-footer">
<span class="copyright"> ©Dragon Ball Fan Site 2018</span>
</footer>
</body>
</html>
/* =========
Fonts
========= */
#font-face {
font-family: 'Roboto', sans-serif;
}
##font-face {
font-family: 'saiyain-sans';
src: url(font/Saiyan-Sans.ttf);
}
/* =========
Elements
========= */
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', helvetica, sans-serif;
font-size: 1.25em;
}
h1 {
margin: 0;
font-weight: 400;
font-size: 2.441em;
}
h2 {
font-size: 1.953em;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
div {
margin: 0;
}
/* =========
Classes
========= */
.main-header {
text-align: center;
color: #f85b1a;
margin-bottom: 1em;
padding-top: 2em;
}
.title {
padding-bottom: 1em;
}
.main-nav li {
padding-bottom: 0.5em;
font-weight: 400;
}
.main-nav a {
text-decoration: none;
color: #f85b1a;
display: block;
}
.banner {
text-align: center;
background-color: #f85b1a;
color: #fff;
padding: 1em;
margin-bottom: 2em;
}
.main-img {
border-radius: 50%;
border: 3px solid #000;
margin-bottom: 2em;
}
.name {
font-family: 'saiyain-sans', 'Roboto', sans-serif;
margin-bottom: 0;
}
.wrapper {
margin: 0 auto;
width: 90%;
}
.col {
border: 1px solid red;
}
.primary,
.secondary {
margin-bottom: 1em;
}
.cast {
width: 100%;
padding: 0;
margin: 0 auto;
}
.main-footer {
background-color: #072083;
text-align: center;
padding: 1em;
margin-top: 1em;
}
.copyright {
font-size: 0.8em;
color: #8a9294;
}
/* =========
media queries
========= */
#media (min-width: 779px) {
.container {
margin: 0 auto;
}
.main-header {
padding: 1em;
}
.title,
.col {
float: left;
}
.title {
padding-top: 0;
padding-bottom: 0;
font-size: 1.25em;
}
.main-nav {
float: right;
}
.main-nav li {
display: inline-block;
float: left;
list-style: none;
font-size: 1.25em;
padding: 0 0.2em;
border-right: 1px solid #8a9294;
}
.main-nav li:last-child {
border-right: none;
}
.name {
padding-bottom: 0.5em;
}
.tagline {
font-size: 1.5em;
}
.wrapper {
width: 100%;
padding: 0;
}
.secondary,
.primary {
width: 50%;
}
.copyright {
padding: 2em;
}
/* =========
Clearfix
========= */
.clearfix::after {
content: " ";
display: table;
clear: both;
}
}
I finally figured it out. It was the border box property. Adding any padding and things like that were pushing it to be bigger than the wrap. I had the border property added to test where it was going wrong and that was just adding to the problem.
Thanks to everyone that took the time to look.
I am trying to set up a page that has two background colors. One color for the left half of the page and another for the right half of the page and content that sits in the middle that is centered horizontally. If the content in the page does not fill the entire browser window vertically, the content ends and I can see the two background colors below it. Is there a way to extend the content vertically to always fill the browser window? I know sticky footers works well, but I can't seem to get it to work with what I am doing.
Here is my HTML:
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>
</div>
<div id="footer">Footer footer footer</div>
This is my CSS:
html, body {
margin: 0; padding: 0; border: 0;
}
#left, #right {
position: fixed;
width: 50%;
height: 100%;
top: 0;
}
#left {
background: #014c8d;
left: 0;
}
#right {
background: #0f2451;
right: 0;
}
#container {
background: #fff;
width: 70%;
max-width: 500px;
height: 100%;
margin: 0 auto;
padding: 10px;
position: relative;
}
#wrapper {
position: relative;
background: #006d46;
}
#footer {
background: #006d46;
position: relative;
}
I have a jsfiddle to show what I currently have: http://jsfiddle.net/snPYb/1/
You just have to add height:100%; to your wrapper and html,body :
html, body {
margin: 0; padding: 0; border: 0;
height:100%;
}
#wrapper {
position: relative;
background: #006d46;
height:100%;
}
FIDDLE
EDIT #1 :
Try this :
html, body {
margin: 0; padding: 0; border: 0;
display:table;
height:100%;
width:100%;
}
Added display:table and width:100%
FIDDLE
http://jsfiddle.net/snPYb/3/
What you were missing was the height:100% on the wrapper as well.
I know, this topic has been opened 1000 times, but I didn't find a suitable solution (or a solution I could understand).
I have a simple page (wordpress) with a fixed nav menu on the left, scrollable content in center and a fixed footer (always visible).
I have 2 problems I have tried to solve in every way:
1) the wrapper (100% height) wraps ok until you scroll the page, but does not extend after the scroll (see attached image, page is scrolled to bottom).
2) the content at the bottom is under the footer, I couldn't find a way to apply a -30 padding to make readable the final part of the content ( I think this relates to the problem no.1).
Here is the CSS (also used a reset.css based on YUI reset):
/* LAYOUT */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }
/* GENERAL LAYOUT */
html, body{
margin : 0;
padding : 0;
height : 100%;
border : none;
}
#wrapper{
min-height: 100%;
width: 100%;
background: red;
overflow: hidden;
}
#container{
width: 960px;
margin-left: 40px;
padding-bottom: 30px
}
#navigation{
position: fixed;
overflow:hidden;
width: 200px;
}
#content{
position: absolute;
overflow: auto;
width: 420px;
margin-left: 220px;
}
li > a {
display: block;
}
a {outline: none;}
/* NAVIGATION */
h1.logo {
height: 155px;
}
#navigation ul{
margin:0;
padding:0;
text-align: right;
}
#navigation ul li{
height:28px;
display: inline-block;
color:#000;
padding: 0 0 0 0;
overflow:hidden;
line-height: 28px;
margin-bottom: 7px;
}
#navigation li a{
padding: 0 28px 0 0;
}
.nav-blog{
width:190px;
border-left-color: #d1bbe8;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-eventi{
width:190px;
border-left-color: #aa87a0;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-bio{
width:190px;
border-left-color: #e2b893;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-discography{
width:190px;
border-left-color: #365f68;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-photos{
width:190px;
border-left-color: #545768;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-videos{
width:190px;
border-left-color: #4b5668;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-contact{
width:190px;
border-left-color: #686055;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
/* ----------Active links----------- */
.home .nav-blog
{
width: 150px;
}
/* POST */
#ilpost{
width: 420px;
margin: 0 0 18px 0;
}
.spaziovuoto{
height: 155px;
}
.type-blog{
border-top-color: #d1bbe8;
border-top-style: solid;
border-top-width: 12px;
}
#tempo{
height: 32px;
background: url('../images/flatback.png');
}
.iltitolo{
background-color: #edece6;
}
.ilcontenuto{
background-color: #edece6;
}
/* PLAYER */
#player{
clear: both;
width: 100%;
position: fixed;
bottom: 0px;
height: 30px;
background: #000;
color:#fff;
}
And the HTML:
(head omitted)
<body class="home blog">
<div id="wrapper">
<div id="container">
<div id="navigation">
<h1 class="logo">Logo</h1>
<ul>
<li class="nav-blog "><a href="/">blog</li>
<li class="nav-eventi sel">eventi</li>
<li class="nav-bio sel">bio</li>
<li class="nav-discography sel">discography</li>
<li class="nav-photos sel">photos</li>
<li class="nav-videos sel">videos</li>
<li class="nav-contact sel">contact</li>
</ul>
</div><!-- .navigation -->
<script type="text/javascript">
jQuery(function($){
$.supersized({
//Background image
transition_speed : 50,
slides : [ { image : 'http://localhost/xxxxxxxx/wp-content/themes/xxxxxxxxxx/images/sfondotest1080.jpg' } ]
});
});
</script>
<div id="content">
<div class="spaziovuoto"></div>
<!-- LOOOOOOOOOOOP -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">test post 4</p>
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p>
<p> </p>
</div>
</div><!-- .ilpost -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">test post 3</p>
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p>
<p> </p>
</div>
</div><!-- .ilpost -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">test post 2</p>
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} --> <!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p>
<p> </p>
</div>
</div><!-- .ilpost -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">Hello world!</p>
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</div>
</div><!-- .ilpost -->
</div><!-- .content -->
<ul class="xoxo">
</ul>
</div> <!-- container -->
</div> <!-- E wrapper-->
<div id="player">Player</div>
</body>
</html>
Just in case, I attached an image with an explanation.
Thanks for your help!
#navigation{
position: fixed;
overflow:hidden;
width: 200px;
left: 40px; /* add this */
}
#content{
/*position: absolute; remove this*/
overflow: auto;
width: 420px;
margin-left: 220px;
}
your page has no content.. well it thinks it doesn't ;)
so remove the absolute positioning from the content .. let the content remain in the flow this should mean that the existing min-height on the wrapper actually gets a chance to work (at the minute it thinks there's nothing in it so it can't grow)
that then appears to work but IE7 gets a bit pernickety, like it does and moves the nav over the content - so just explicitly (give a tsk and) tell it where you want it to be (help it count!) and add the left position on #navigation
Have you tried using min-height: 100% instead of height: 100% on your body and html styles?
As far as the wrapper, take off the 100% height. It will default to auto height and expand to the content.
For the content under the footer you just apply a bottom padding to the content, and take off the absolute positioning. Just put a left margin on it (and possibly a float).
I just wrote a sample page with a corner banner and tool tip. Everything is working just fine with firefox. But in IE things are not working correctly. I surfed the internet and found that IE doesn't support position: fixed.
So does anyone know how to work around this problem ?
Here is my source code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
.tooltip {
width: 200px;
position: fixed;
top:auto;
bottom:70px;
right:70px;
left:auto;
font-family: Verdana, Geneva, sans-serif;
font-size: xx-small;
}
#cornerbanner {
position: fixed;
top:auto;
left:auto;
right:0px;
bottom:0px;
}
.tooltip .tooltip_top {
background-image: url(images/Box_BG_01.png);
height: 34px;
background-repeat: no-repeat;
background-position: center top;
line-height: 45px;
text-align: right;
padding-right: 30px;
vertical-align: text-bottom;
font-size: xx-small;
font-weight: normal;
overflow: hidden;
}
body {
background-color: #F90;
}
.content p {
font-family: Verdana, Geneva, sans-serif;
color: #000;
font-size: x-small;
text-align: justify;
padding: 15px;
border: 1px solid #FFF;
}
.tooltip .tooltip_top a {
text-decoration: none;
color: #333;
}
.tooltip .tooltip_con {
background-image: url(images/Box_BG_03.png);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
display: block;
clear: both;
text-align: justify;
letter-spacing: normal;
}
.content {
width: 800px;
margin-right: auto;
margin-left: auto;
}
.tooltip .tooltip_bot {
background-image: url(images/Box_BG_05.png);
height: 24px;
background-repeat: no-repeat;
background-position: center bottom;
}
.tooltip .tooltip_con #tooltip_link {
text-align: right;
color: #666;
text-decoration: none;
margin-top: 10px;
}
.tooltip .tooltip_con #tooltip_link a {
color: #666;
text-decoration: none;
}
.tooltip .tooltip_con img {
float: right;
margin-right: 5px;
margin-left: 5px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tooltip").fadeOut(0);
$("#cornerbanner").mouseover(function(){
$(".tooltip").fadeIn("slow")
});
$("#close_tooltip").click(function(){
$(".tooltip").fadeOut();
});
});
</script>
</head>
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel ligula
leo, ac aliquet ante. Sed ut elit et purus ultricies ornare. Sed eu justo sem.
Suspendisse convallis elementum eros, vitae consequat lorem sollicitudin vitae.
Phasellus bibendum, libero ac semper lobortis, orci tellus lacinia nisl, eget
luctus risus felis sed dolor. Phasellus commodo imperdiet neque vitae elementum.
Ut iaculis vestibulum velit cursus blandit. Cras ornare iaculis velit, vitae
malesuada mi mattis tempor. Ut consequat dapibus massa eget scelerisque. Quisque
sed suscipit sapien. Duis metus urna, consequat tempor feugiat sit amet, placerat
non lorem. Integer eget urna elit, et ullamcorper libero. In iaculis aliquet</p>
<div id="tooltip_link">Click here</div>
</div>
<div class="tooltip_bot"></div>
</div>
</body>
</html>
Do you mean "doesn't work in IE6"? The following fixed position CSS works fine for me to anchor a footer to the bottom of a page in IE7 and IE8:
Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }
The problem is that the most popular most used browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute; which would be better than nothing, it reverts to position: static; as specified by the CSS standard. This has the same effect as having no position at all. Note that IE 7 from beta 2 upwards does support position: fixed; (if you use a document type declaration that triggers strict mode) so I will exclude IE 7 from this fix.
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
right: expression(0+((e=document.documentElement.scrollRight)?e:document.body.scrollRight)+'px');
This would float the element in the very top right corner. If you wanted to position it elsewhere, change the 0 in expression(0+( for either value
Internet Explorer 6 understands position:absolute, which is a good basis for this working. The similarity between absolute and fixed positioning is that it removes it from the flow of the normal content. So then you use the top and right positionings normally, with a little bit of javascript in there. I'm not sure how it reads the javascript. But who cares. It works ;)
You can sort of hack it in using JavaScript/jQuery.
E.g. What is the simplest jQuery way to have a 'position:fixed' (always at top) div?