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?
Related
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>
I've been looking all over and failed to find a solution to this on my own. I'm trying to make a basic contenteditable code editor, and for the line numbers I have chosen to use a paragraph for each line with a counter set in a CSS pseudo element.
.editor {
display: inline-block;
border: 1px black solid;
font-family: "Consolas", "Monaco", "Courier New", monospace;
counter-reset: line;
width: 90%;
height: 350px;
overflow: scroll;
padding-left: 0;
margin-left: 0;
z-index: 1;
}
.editor p {
display: block;
counter-increment: line;
background-color: #FFF;
text-align: left;
margin: 0px;
z-index: 2;
outline: none;
}
.editor p:before {
display: inline-block;
width: 2em;
height: 100%;
border-right: 1px black solid;
padding-right: 1em;
margin-right: 1em;
content: counter(line);
color: #FFF;
background-color: #006;
text-align: right;
/*-webkit-user-select: none;
user-select: none;*/
}
<div class="editor" contenteditable="true" spellcheck="false">
<p>Some paragraph</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat.
In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
<p> </p>
<p> </p>
<p> </p>
</div>
The problem is that if the paragraph is a bit longer the rest of the text will go beneath my counter pseudoelement. I want to strech the :before counter to be the same height as the paragraph.
I have tried using position:relative on the paragraph and position:absolute; height:100% on the p:before pseudoelement like explained here: How can the pseudo element detect the height of the non-pseudo element?
This does not work in my case because I don't want the p:before element to go over and cover the paragraph, I just want the same behaviour as now, just want the p:before element to strech at the same height as the main p.
I also wouldn't want to have the line strech more than the width of the wrapper container. I've been trying many methods but failed to come to a solution.
Instead of height, rather use position: relative; for p, and position: absolute; for :before.
Js Fiddle
Here are the newly added CSS properties:
.editor p {
position: relative;
padding-left: 3.5em;
.editor p:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
Edit
It should be a second question :D
Pressing Enter in IE will not create a br, whereas in modern browsers it creates a br using :after. Here is to guarantee so that p tag does not remain empty:
Js Fiddle
.editor {
display: inline-block;
border: 1px black solid;
font-family: "Consolas", "Monaco", "Courier New", monospace;
counter-reset: line;
width: 90%;
height: 350px;
overflow: scroll;
padding-left: 0;
margin-left: 0;
z-index: 1;
}
.editor p {
display: block;
counter-increment: line;
background-color: #FFF;
text-align: left;
margin: 0px;
z-index: 2;
outline: none;
position: relative;
padding-left: 3.5em;
}
.editor p:before {
display: inline-block;
width: 2em;
height: 100%;
border-right: 1px black solid;
padding-right: 1em;
margin-right: 1em;
content: counter(line);
color: #FFF;
background-color: #006;
text-align: right;
position: absolute;
top: 0;
bottom: 0;
left: 0;
/*-webkit-user-select: none;
user-select: none;*/
}
.editor p:after {
content: " "
}
<div class="editor" contenteditable="true" spellcheck="false">
<p>Some paragraph</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat.
In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
<p>one</p>
<p>two</p>
<p>three</p>
</div>
Since you want the line numbers and lines appear in table-like manner, the natural approach is to make them table: declare the editable area as table (in the CSS sense), make the lines rows, and make the generated line numbers table cells:
.editor {
display: tablek;
border: 1px black solid;
font-family: "Consolas", "Monaco", "Courier New", monospace;
counter-reset: line;
width:90%;
height:350px;
overflow:scroll;
padding-left:0;
margin-left:0;
z-index:1;
}
.editor p {
display: table-row;
counter-increment: line;
background-color:#FFF;
text-align:left;
margin:0px;
z-index:2;
outline: none;
}
.editor p:before {
display: table-cell;
width:2em;
height:100%;
border-right: 1px black solid;
padding-right: 1em;
margin-right: 1em;
content: counter(line);
color:#FFF;
background-color:#006;
text-align:right;
/*-webkit-user-select: none;
user-select: none;*/
}
<div class="editor" contenteditable="true" spellcheck="false">
<p>Some paragraph</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat. In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
<p> </p>
<p> </p>
<p> </p>
</div>
http://jsfiddle.net/zppb29jw/2/
p {
position:relative;
left: 4em;
...
p:before {
position:absolute;
right:100%
display:block;
...
is that ok for you?
.black_right{
position: relative;
display: table;
width: 100%;
z-index: 10;
}
.black_right::after{
content: " ";
top: 0px;
height: 100%;
width: 100%;
box-shadow: 500px 0px #000;
position: absolute;
}
I've been searching for hours now, but can't seem to figure it out.
I want to center the Menu at the bottom of the Header Div, but it seems like it will either center it but keep it at the top or keep it at the bottom but not center it.
It has something to do with the position:relative/absolute, I believe.
This is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Transport2000</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Transport, mobilier, moloz etc." />
<meta name="keywords" content="transport, chican, marfa, duba, bucuresti, romania, transport bucuresti, " />
<meta name="author" content="Iulian" />
<style type="text/css" media="all">#import "css/master3.css";</style>
<style type="text/css" media="all">#import "css/master3.css";</style>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="header">
<!--<h1><img src="images/header/banner.png" alt="Transport2000" /></h1>-->
<div id="menu">
<dt id="acasa">
Acasa</dt>
<dt id="galerie">
Galerie</dt>
<dt id="contact">
Contact</dt>
</div>
</div>
<div id="container">
<!--<div id="menu">
<ul>
<li>Acasa</li>
<li>Galerie</li>
<li>Contact</li><br>
</ul>
</div>-->
<div id="content">
<div class="padding">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur ultricies
scelerisque erat eu mattis. Duis lacinia,
ante non adipiscing euismod, dui lorem
adipiscing turpis, et convallis leo orci
ac ligula. Proin porta risus id tortor aliquet
sollicitudin. Sed suscipit blandit nisi, ac
laoreet nulla ultrices sed. Curabitur velit
enim, eleifend nec faucibus vitae, imperdiet
eget lectus. Suspendisse quis ligula urna.
Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Quisque hendrerit nisl eu nibh facilisis in
rutrum elit tempor. Praesent vel nisi quis
justo sodales elementum.</p>
<p>Fusce felis dui, pharetra vel condimentum
sed, elementum non nisl. Maecenas condimentum
pretium augue, non rhoncus magna hendrerit at.
Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Etiam
euismod laoreet sollicitudin. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Donec tempor
adipiscing nibh, a dignissim nunc rutrum in. Donec
ut nulla neque. Aenean mi sapien, pulvinar a
interdum in, fringilla pharetra turpis. Aliquam
aliquet volutpat imperdiet. Integer eu magna purus,
id mattis tortor. Suspendisse porttitor ligula
vitae erat pellentesque auctor. Vivamus non
interdum urna. Duis fermentum venenatis turpis,
at vestibulum mauris ultricies vel. Aliquam in
arcu in orci rutrum condimentum vel at ipsum.
Pellentesque scelerisque eleifend ipsum, at
scelerisque eros condimentum eu. Phasellus
ante metus, fermentum id lobortis id, rutrum
id magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur ultricies
scelerisque erat eu mattis. Duis lacinia,
ante non adipiscing euismod, dui lorem
adipiscing turpis, et convallis leo orci
ac ligula. Proin porta risus id tortor aliquet
sollicitudin. Sed suscipit blandit nisi, ac
laoreet nulla ultrices sed. Curabitur velit
enim, eleifend nec faucibus vitae, imperdiet
eget lectus. Suspendisse quis ligula urna.
Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Quisque hendrerit nisl eu nibh facilisis in
rutrum elit tempor. Praesent vel nisi quis
justo sodales elementum.</p>
</div>
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © 2013 Blahzx Designs<br />
</div>
</div>
</body>
</html>
And this is the CSS:
html, body {
margin: 0px;
padding: 0px;
}
body {
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 15px;
color: #ffffff;
text-align: center;
background-image:url('bg.png');
background-color:#FFFFFF;
background-repeat: repeat;
}
h1 {
margin: 0;
padding: 0;
text-align: center;
}
#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#container {
width: 960px;
margin: auto;
text-align: left;
}
#header {
width: 100%;
height:141px;
position: relative;
background-image:url('top.png');
background-repeat: repeat-x;
}
#header-content { position: absolute; bottom: 0; }
/* Menu */
#menu { height: 30px;
width: 639px;
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
position: absolute;
bottom: 0; }
#menu dl { margin: 0; padding: 0; }
/* IE5 Mac Hack \*/
#menu { padding-left: 0; }
/*/
#menu { padding-left: 100px; overflow: visible; }
/* End Hack */
#menu dt { float: left; }
#menu dt a {
display: block;
height: 0px !important;
height /**/:44px; /* IE 5/Win hack */
padding: 30px 0 0 0;
overflow: hidden;
text-align: center;
background-repeat: no-repeat;
}
#menu dt a:hover {
}
#menu dt#acasa,
#menu dt#acasa a {width: 182px; background-image: url(../images/menu/acasa.png); }
#menu dt#acasa a:hover {width: 182px; background-image: url(../images/menu/acasa_on.png); }
#menu dt#galerie,
#menu dt#galerie a { width: 221px; background-image: url(../images/menu/galerie.png); }
#menu dt#galerie a:hover {width: 221px; background-image: url(../images/menu/galerie_on.png); }
#menu dt#contact,
#menu dt#contact a { width: 236px; background-image: url(../images/menu/contact.png); }
#menu dt#contact a:hover {width: 236px; background-image: url(../images/menu/contact_on.png); }
#content {
width:960px;
margin-right:280px;
line-height:18px;
}
#content a {
color: #FFFFFF;
text-decoration: none;
}
#content a:hover {
color: #CC00FF;
text-decoration: none;
}
#content .padding {
padding: 25px;
}
#footer {
width:auto;
height:137px;
clear: both;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
text-align: center;
background-image:url('bot.png');
background-repeat: repeat-x;
}
#footer a {
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
color: #ffd800;
}
#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 110px;
}
Thank you!
EDIT: I have added the WHOLE code.
#menu {
height: 30px;
width: 639px;
text-align: center;
position: absolute;
bottom: 0;
left:50%;
margin:0 0 0 -320px; /* left 50% PLUS margin top 0 right 0 bottom 0 left (halfwidth) makes sure it fits different screen*/
}
Try set margins left and right both to be "auto" to center it, rather than margin: 0 auto; <- which sets it to the left hand side.
Since you may have it somewhere else conflicts with those ones, to contains an "!important" declaration, it will override the corresponding declaration in the prior or later style sheet.
You should have to declare the position you just need to set the width of the menu div and set its margins to auto i.e.:
#menu
{
width:80%;
margin-left:auto !important;
margin-right:auto !important;
}
i think this is what you want :
http://jsfiddle.net/CMVbX/
HTML:
<div id="header">
<!--<h1><img src="images/header/banner.png" alt="Transport2000" /></h1>-->
<div id="menu">
<dt id="acasa">
Acasa</dt>
<dt id="galerie">
Galerie</dt>
<dt id="contact">
Contact</dt>
</div>
</div>
Css:
#header {
width:100%;
position: relative;
height:141px;
background-color:blue;
background-repeat: repeat-x;
}
/*#header-content { position: absolute; bottom: 0; }*/
/* Menu */
#menu { background-color:red; width:100%; height: 30px; margin: 0 auto; text-align: center; position: absolute; bottom: 0;}
#menu dl { margin: 0; padding: 0; }
/* IE5 Mac Hack \*/
#menu { padding-left: 0; }
/*/
#menu { padding-left: 100px; overflow: visible; }
/* End Hack */
#menu dt { float: left; }
#menu dt a {
display: block;
height: 0px !important;
height /**/:44px; /* IE 5/Win hack */
padding: 30px 0 0 0;
overflow: hidden;
text-align: center;
background-repeat: no-repeat;
}
#menu dt a:hover {
}
#menu dt#acasa,
#menu dt#acasa a {width: 182px; background-image: url(../images/menu/acasa.png); }
#menu dt#acasa a:hover {width: 182px; background-image: url(../images/menu/acasa_on.png); }
#menu dt#galerie,
#menu dt#galerie a { width: 221px; background-image: url(../images/menu/galerie.png); }
#menu dt#galerie a:hover {width: 221px; background-image: url(../images/menu/galerie_on.png); }
#menu dt#contact,
#menu dt#contact a { width: 236px; background-image: url(../images/menu/contact.png); }
#menu dt#contact a:hover {width: 236px; background-image: url(../images/menu/contact_on.png); }
I'm running into a weird issue that I'm struggling to figure out what's causing the page to break. I have an internal website that's still under development (thus no link to the page) that works great in Firefox and Internet Explorer 8 in IE 7 Standards mode. But when I force it to IE 8 Standards mode the page will only display the title text in the browser tab and an otherwise completely blank page. It seems so broken that the blank page doesn't even have a context menu.
The page generally looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="IE=8" http-equiv="X-UA-Compatible" />
<title>Page Title</title>
<link rel="shortcut icon" href="/Images/favicon.ico" type="image/x-icon" />
<link href="/Style/main.less" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<span id="logindisplay">[ Log On ]</span>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<div id="title">
<h1>APP TITLE</h1>
</div>
<div class="logo">
<img alt="Application" src="/Images/info.png" title="Application" />
</div>
<div>
<div id="company">Offered by: <span>Company Name</span>
</div>
<div id="version">Version: 0.0.0.0</div>
</div>
</div>
<div class="col2">
<div id="menucontainer">
<ul id="menu">
<li>
<a href="/Module1" class="ciApp">
<img alt="module" height="84px" src="/Images/Module1.png" title="module" />
<span>Module</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col3">
<div id="newsfeed">
<span class="welcomemessage">Welcome to <b>Application</b>
</span>
<div>
<span class="newsLabel">New Features</span>
<div class="newFeatures">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas condimentum laoreet. Curabitur urna elit, sagittis vel condimentum sit amet, ullamcorper suscipit diam. Suspendisse non ligula metus, nec ultricies libero. Vestibulum molestie ornare urna, eu posuere ipsum lacinia nec. Nulla facilisi. Curabitur elit ligula, laoreet nec vehicula at, ornare sed metus. Suspendisse gravida mattis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer rutrum erat sed lacus eleifend et dapibus nisi mollis. Nulla elementum lacus quis mauris pulvinar in accumsan odio malesuada. Aliquam ultrices, mauris sit amet pharetra euismod, nisi nunc rhoncus est, eu commodo nunc sem vitae risus. Ut egestas ligula eu elit blandit consequat. Donec nunc justo, congue non mollis at, porta non massa.</p>
<p>Pellentesque consequat fermentum sapien at dictum. In pretium varius tellus, vitae blandit sapien cursus quis. Suspendisse potenti. Sed sollicitudin tempus elit et sodales. Vestibulum fringilla tempus elit, vitae convallis massa laoreet vel. Nulla facilisi. Duis dolor leo, lacinia ut ultrices eu, mollis in purus. Donec sagittis, est id tincidunt pulvinar, magna metus pellentesque nunc, eget tincidunt metus tellus sollicitudin tortor. Donec quis convallis nibh. In luctus, ipsum non sodales ornare, mi lectus molestie orci, id dignissim tellus augue at neque.</p>
<p>Phasellus ut molestie leo. Donec egestas odio ut felis lacinia ut interdum diam interdum. Fusce at posuere tortor. Vestibulum cursus elit quis purus porta vitae adipiscing nulla laoreet. Nam pretium orci a sem volutpat nec rhoncus magna viverra. Aenean non orci sapien. Nunc hendrerit sollicitudin lorem viverra porta. Pellentesque ac porttitor elit. Mauris risus sem, dapibus eu convallis vel, posuere in nibh. Phasellus sit amet tortor neque, aliquam volutpat massa. Sed quam libero, porttitor a lacinia in, pellentesque in libero. Suspendisse adipiscing laoreet lacus, eget fringilla felis tristique id. Maecenas lacinia, ante a vulputate gravida, felis libero hendrerit dolor, non tristique ante massa vitae leo. Aenean laoreet porta urna ullamcorper facilisis.</p>
<p>Nam a ligula a quam interdum ultricies. Suspendisse tempor pellentesque augue at sollicitudin. Sed vulputate, erat mollis fringilla rhoncus, nulla quam ullamcorper lacus, vel molestie metus ipsum quis eros. Fusce eget turpis tortor, viverra volutpat leo. Vestibulum in augue in augue fringilla volutpat sed eu purus. Ut varius lacus eget orci consequat eget tincidunt mi placerat. Donec suscipit suscipit enim, eget iaculis diam pellentesque in. Cras ac ante et lorem porttitor consectetur. Maecenas semper posuere magna. Aliquam erat volutpat. Sed at ante feugiat lectus hendrerit semper et ut elit. Aenean scelerisque fermentum justo, at blandit risus interdum eget. Donec a nulla pellentesque erat volutpat gravida. Nunc mattis est ac dolor dapibus viverra. Nulla facilisi.</p>
<p>Donec diam neque, lobortis quis aliquam nec, fermentum ac quam. Cras porta nisi sed massa pellentesque vitae luctus erat porttitor. Sed porta elit ac ligula semper eget volutpat purus adipiscing. Mauris aliquet convallis consectetur. Aliquam vel neque sit amet odio dapibus feugiat. Morbi vehicula porttitor cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut augue at tellus iaculis fringilla ut at enim. Ut sed lorem nunc. Aliquam ac accumsan eros. Fusce faucibus, lacus in convallis commodo, turpis nisi gravida ligula, sit amet semper odio ante sit amet lorem. Integer mollis, nibh vel malesuada imperdiet, purus justo ullamcorper ipsum, sed volutpat velit dui eget felis. Quisque sapien ante, dapibus quis malesuada ultrices, tincidunt id nibh. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
You may notice the .less extension for the stylesheet. This is an ASP.NET MVC application and I'm making use of DotLess. I have the HttpHandler hooked up for it in the web.config. Of course there's some additional info on the page, but (in theory) it shouldn't be causing this issue. I've run the CSS and the HTML through the W3C validators and both have come back as completely valid. I'm trying the arduous task of removing/re-adding elements until it displays, but any insight into what could cause this would help.
EDIT: it appears to be something related to the DotLess stylesheet. The resulting CSS is valid according to the W3C CSS validator.
EDIT 2: Digging further, and making use of IE's Developer Tools to control the styles, it appears that IE is reading a single statement twice even though it only occurs once in the output. Here's the output of the Less file:
a, abbr, acronym, address, applet, b, big, caption, center, cite, code, dd, dfn, div, dl, dt, em, fieldset, font, form, html, i, iframe, img, kbd, label, legend, li, object, pre, s, samp, small, span, strike, strong, sub, sup, tbody, td, tfoot, th, thead, tr, tt, u, var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
blockquote, q {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
quotes: none;
}
body {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
line-height: 1;
width: 100%;
background: #efebde;
min-width: 600px;
}
del {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: line-through;
}
h1 {
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 2em;
margin: .8em 0 .2em 0;
padding: 0;
}
h2 {
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.8em;
margin: .8em 0 .2em 0;
padding: 0;
}
h3 {
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.6em;
margin: .8em 0 .2em 0;
padding: 0;
}
h4 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.4em;
}
h5 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.2em;
}
h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1em;
}
ins {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}
ol, ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
list-style: none;
}
p {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
margin: .4em 0 .8em 0;
padding: 0;
}
table {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
border-collapse: collapse;
border-spacing: 0;
}
blockquote:before, blockquote:after, q:before, q:after { content: none; }
:focus { outline: 0; }
.bold { font-weight: bold; }
.systemFont { font-family: Arial; }
.labelled { font-style: italic; }
.groovedBorder {
border-color: #adaa9c;
border-style: groove;
border-width: medium;
}
#header, #footer {
clear: both;
float: left;
width: 100%;
}
#header p, #header h1, #header h2 {
padding: .4em 15px 0 15px;
margin: 0;
}
#header ul {
clear: left;
float: left;
width: 100%;
list-style: none;
margin: 10px 0 0 0;
padding: 0;
}
#header ul li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#header ul li a {
background: #eeeeee;
display: block;
float: left;
left: 15px;
line-height: 1.3em;
margin: 0 0 0 1px;
padding: 3px 10px;
position: relative;
text-align: center;
text-decoration: none;
}
#header ul li a span { display: block; }
#header ul li a:hover { background: #336699; }
#header ul li a.active, #header ul li a.active:hover {
background: black;
font-weight: bold;
}
#header #logindisplay {
float: right;
padding-top: .5em;
padding-bottom: .5em;
padding-right: 1em;
padding-left: 1em;
}
#title h1 {
font-family: Arial;
font-style: italic;
font-size: 175%;
text-align: center;
margin-top: 1%;
}
.col1 {
font-family: Arial;
border-color: #adaa9c;
border-style: groove;
border-width: medium;
min-height: 350px;
float: left;
overflow: hidden;
position: relative;
padding-top: 0;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
.col1 div.logo { text-align: center; }
.col3 {
font-family: Arial;
border-color: #adaa9c;
border-style: groove;
border-width: medium;
float: left;
overflow: hidden;
position: relative;
}
#layoutdims {
clear: both;
background: #eeeeee;
margin: 0;
padding: 6px 15px !important;
text-align: right;
}
#company {
padding-left: 10px;
padding-top: 10px;
margin: 0;
}
#company span {
display: block;
padding-left: 1em;
}
#version {
padding-right: 1em;
padding-top: 1em;
text-align: center;
}
#menu li {
padding: 6px;
border-color: #adaa9c;
border-style: groove;
border-width: medium;
min-width: 108px;
}
#menu li a.ciApp {
text-decoration: none;
font-size: 112.5%;
font-weight: bold;
font-family: Arial;
color: black;
}
#menu li a.ciApp span { vertical-align: top; }
.welcomemessage { font-size: 60.95%; }
.newFeatures {
overflow-y: scroll;
max-height: 300px;
}
#newsfeed div .newsLabel {
color: red;
font-size: 60.95%;
font-style: italic;
}
/**************************************************************************************
This statement appears twice in Developer Tools. Disabling one disables both. Disabling it also causes the page to render. Turning it on and the page disappears again
**************************************************************************************/
#newsfeed div .newFeatures {
margin-left: 1em;
margin-right: 1em;
font-size: 60.95%;
}
/**************************************************************************************
**************************************************************************************/
.colmask {
clear: both;
float: left;
position: relative;
overflow: hidden;
width: 100%;
}
.colright, .colmid, .colleft {
float: left;
position: relative;
width: 100%;
}
.col2 {
float: left;
overflow: hidden;
position: relative;
padding-top: 0;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
.threecol .colmid { right: 33%; }
.threecol .colleft { right: 34%; }
.threecol .col1 {
width: 33%;
left: 100%;
}
.threecol .col2 {
width: 32%;
left: 34%;
}
.threecol .col3 {
width: 32%;
left: 68.5%;
}
Notice the #newsfeed div .newFeatures identifier near the end. I don't know what's causing that as it's only appearing once in the output stream. Here's an image of it too:
EDIT 3: It appears that even though it duplicates that particular selector, if I change the font-size to a whole number like 61% instead of the current 60.95% (that specific to defaultly match the existing desktop app as closely as possible) it works fine. I even moved the font-size (still as 60.95%) to a more general selector (just the .newFeature one a few lines up) and it still causes the page to break. Still not sure why that is. I've added the full HTML to see what's going on.
Keep in mind, we have NO way of knowing without seeing any code or anything, so this is basically guesswork. If you can get a sample up which shows the problem, that would be a big help.
Have you tried using the Developer Tools to see and manipulate the structure of the page? That's the first place to start when you get weird rendering issues for no apparent reason.
EDIT: Okay, this is really a tough one. Here's what I've been able to come up with.
For starters, I don't see the multiple defintion issue here, even though I copied all of that CSS into a file - so I can't really tell you what's going on there.
Secondly, it would appear that the problem is not specifically the 60.95% - it does the same if you use 60%, or 60.XX%. 61% works, 60.99 doesn't, 59.99% works, 60% doesn't.
However, it DOES render the page if I remove overflow-y: scroll. In fact, it works if I remove ANY of the definitions on .newFeatures or #newsfeed div .newFeatures. I can also change them to something else, and it works - except for max-height. Just changing one of the two margins on #newsfeed div .newFeatures to 0.999em makes the page render again. I propose doing that as a temporary workaround - or moving to 61% font-size, since there's very little difference.
It's really hard to tell what's going on here, but it looks like there's a bug in IE which causes some internal calculation to go horribly wrong in this particular scenario - and somehow the browser doesn't recover from it.
I think this is definitely something the IE team would like to know about now, so there's a chance they can fix it for IE9. This is a pretty isolated case, and probably not something currently covered by their testing. I'm not sure what the best way of contacting them are - there are some MSFTs on here, including Eric Law, who might know of a better option than opening a support case.
Given the following html
<div class="module">
<div class="header">
<h1>Test Heading</h1>
edit
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu lacus at augue tristique dignissim. Nunc vitae porta lorem. Nullam eu nunc sit amet arcu dictum convallis. Vestibulum quis purus quis sem rhoncus imperdiet eget at nisl. Fusce non metus libero, vel viverra purus. Quisque ullamcorper congue risus vel adipiscing. Quisque vehicula ante in quam malesuada at porta diam gravida. Aenean sagittis, ipsum eget egestas malesuada, turpis neque aliquam metus, lobortis congue ligula nisi quis purus. Integer nec dui et elit suscipit ultrices et sit amet enim. Nulla euismod commodo metus, eget luctus urna dignissim in.</p>
</div>
</div>
and the following css
body { font-family: Helvetica, Arial, "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif; }
h1 { margin: 0; padding: 0; border-bottom: 3px solid #333333; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 0; line-height: 1.3em; }
.module { }
.module .header h1 { }
.module .header a { }
I'm having a tough time figuring out how to float the "edit" link to the right of the h1 tag, but keeping the h1 tag as a block element so that it has its underline (border-bottom)
Can anyone offer me some advise ... done this before? Thank you in advance
There are different strategies to achieve this. You could either float a container to fix a float or use generated content to clear a float. I'll attempt to explain both w/ code. For both you can keep your markup, but need to move the underline from the h1 to the .header class. Then float the header to the left, edit to the right and fix the floats by floating the .header class as well. This technique has the disadvantage of depending on what comes after, but works for your isolated piece of code:
h1 {
margin: 0;
padding: 0;
color: #333333;
font-size: 40px;
font-weight: normal;
letter-spacing: 0;
line-height: 1.3em;
}
.header { border-bottom: 3px solid #333333; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { float: left; width: 100%; }
The imho nicer solution is to use CSS-generated content to clear the opposing floats instead of floating the .header container. But be aware that this will cause trouble on less CSS capable browser versions.
h1 {
margin: 0;
padding: 0;
color: #333333;
font-size: 40px;
font-weight: normal;
letter-spacing: 0;
line-height: 1.3em;
}
.header { border-bottom: 3px solid #333333; }
.header:after { content: "."; display: none; clear: both; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { width: 100%; }
For more information on the first method see Eric Meyer's article http://www.complexspiral.com/publications/containing-floats/. The second method is documented in http://www.positioniseverything.net/easyclearing.html.