I'm working on a web version of an old document, and it has sidenotes. I've managed to get it looking right in Firefox and Chrome, but there's a problem with printing: the sidenotes are all jammed together at the top of the first page (image).
I've put up the first section of the old document here, so that you can try it out yourself: http://www.dinkypage.com/117588. As you will see with Print Preview, the paragraph numbers and page numbers work fine (with only one minor problem), it's just the sidenotes that are causing a major problem.
I think the code is fairly easy to understand, but here's the most important snippet of the CSS style:
.sidenote, .widenote {
position: absolute;
left: 745px;
margin-top: 12px;
text-align: left;
line-height: 1.17em;
font-size: 12px;}
.sidenote {width: 200px;}
.widenote {width: 400px;}
.sidenote span, .widenote span {
display: block;
position: relative;
text-indent: 5px;
padding: 0px 0px 8px 0px}
I've messed with the position:relatives and the position:absolutes, but I can't get it to work properly. Any help would be appreciated. Thanks!
EDIT: I've put it up on jsfiddle, but it refuses to increment the page numbers for some reason: http://jsfiddle.net/KDzRp/
You need to specity "top" for ".sidenote, .widenote", FF and Chrome can determine the Top of your absolutely positioned element by it's appearance in the HTML, but older browsers (and apparently your printer) can not do so.
When using position:absolute always take care of both "hoziontal (left/right)" and "vertical (top/bottom)" position.
If you can not specify the exact top position of your site/wide notes, you need to wrap each page in a position:relative container and give top:0 to your sidenotes.:
<div class='page'>
<p>...</p>
<aside class='sidenote'>...</aside>
</div>
.page {position:relative;}
.sidenote {position:absolute; top:0; right:0; ...}
this way your sidenote will stick to the top of it's own section.
Related
With the help of the nice people here I got a reasonably decent mock-up: http://jsfiddle.net/CecilWesterhof/4kLwK/2
In the middle there is a main document and besides this there is a comment section.
It looks reasonable, but there are two problems with it.
When the document becomes less high, the position of the comments is not really correct. It should be top, middle and bottom. But currently (in FireFox, which is the most important) when the document height is lowered the middle section gets into the bottom section.
What should I change in this code?
The other problem is the next button. I would like to have it on the right, but I did not get this to work.
I tried:
button.next {
background: #84a0C4;
border-radius: 10px;
clear: both;
color: #FFFFFF;
float: right;
font-size: 200%;
overflow: hidden;
}
But that places the button at the right, but also makes the comment section bigger and gives you a scrollbar when you do not need one.
EDIT
For the button problem I found a hack. Using the above style and adding a few breaks like:
<button class="next" id="next">Next</button>
<br/><br/><br/>
solves the button problem. Not really neat, so if there is a better way …
To see the problem with the float without the hack:
How it looks in FF under Linux without the hack http://decebal.nl/images/2014-04-30ButtonRightProblem.png
About the alignment problem, this picture displays it:
wrong alignment http://decebal.nl/images/2014-04-30AlignProblem.png
Questioning is merged into ‘Always check for a reference’ instead of being halfway between ‘Be short …’ and ‘Always check …’.
You have to pick minimum min-height for your comment div, as you will always have an issue with that.
Also I've found some weird positioning logic in your css file including tranformations of Y scale... No idea why you need that. It'll probably cause many troubles in IE browsers.
Anyway, here is the fiddle -> http://jsfiddle.net/4kLwK/7/
and in a summary my modifications of the CSS file:
added:
#comment
{ position:relative;
min-height:250px;
height:100%;
}
modified:
.middle {
position: absolute;
border:1px solid red;
top: 40%;
}
.bottom {
position: absolute;
bottom: 0px;
}
Edit:
With one little addition it did the trick.
.bottom {
position: absolute;
bottom: 0px;
width: 99%; /*
In this way the button stays right.
I'm trying to come up with a solution for this problem.
I have a control where the background is an image.
The text that I would like on the form is included in the bg image, however for the purpose of accessibilty, I'd like to include it in an H3 tag.
The problem I have encountered with the solutions I have is that the space is still allocated and I need it to be supressed. It also needs to be Google friendly too.
Here's 2 solutions I have:
text-indent:-999px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
Any ideas?
The normal way to hide elements is to use one of the following:
visibility:hidden; which hides the element but still takes up space.
display:none; which hides the element and does not take up space.
I believe the second is what you want in this instance.
Well, first of all
display: none;
But, if you want, there might be other solutions for styling your heading tag
/* on its container */
overflow: hidden;
/* on h3 tag */
float: left;
margin-left: -100%;
or
font-size: 0;
line-height: 0;
height: 0;
overflow: hidden;
You may also need to set/reset few other properties, to clear any other space around your heading, like
margin, padding, white-space, text-indent, border, etc.
You can give font-size:0; to your h3 tag HEADING will be in your code with your background.
And this will help you in SEO also..
DEMO
HTML
<div id="wrap">
<h3>heading</h3>
</div>
CSS
#wrap {
height: 230px;
width:660px;
background:url("http://www.eldercarefunding.org/Portals/18/Skins/s_eldercare_green/images/header.bgL.png") no-repeat 0 0;
}
#wrap h3 {
font-size:0;
}
If I remove the clearfix div, above the footer, the text falls into place, as it does on Firefox.
But that breaks other things. I don't understand how that clearfix can be affecting the footer at all though...
My page:
http://www.craftonhills.edu/Current_Students/Counseling/Assessment.aspx
It looks like your footer element as these style rules associated with it:
#footer {
clear: both;
font-size: 1.4em;
height: 150px;
margin-top: -150px;
position: relative;
}
If you remove the margin-top: -150px rule, it looks like that clears up Chrome.
In the #content style, it looks like you have a padding-bottom: 150px; rule that is pushing everything down quite a bit. Might want to reduce that a bit as well.
If your goal is a Sticky footer, for some reason adding the margin-bottom: -150px; rule to the #container element worked in Firefox, Chrome, and IE for me. However, I think it's a bit higher than 150px.
I ended up adding a .push div below my clearfix div, giving it a height of 180px (the correct height, with padding, rather than 150px). Not semantic, but it seems to fix Chrome.
I'm trying to AP a div in the header of my blog containing a bg image and a link. I looks correct in Chrome, but incorrect in Safari and Firefox. I suspect it's not the AP div itself but other elements causing the shift, though I can't figure out what, and I'm using a reset.
Here's a link to screenshots show you what I'm talking about:
http://imgur.com/a/hP8dM
Here's a link to the website:
http://www.artyst-tyrant.com/blog
Here's the css I'm using:
#trex-blog {
margin-left: 435px;
position: absolute;
top: 50px;
z-index: 50000;
}
#trex-blog a, #trex-blog a:visited, #trex-blog a:hover {
background: url(../img/blog-trex.png) no-repeat scroll 0 0 transparent;
display: block;
height: 121px;
width: 356px;
font-size: 0;
line-height: 0;
overflow: hidden;
text-indent: -9999px;
}
Here's the html
<div id="trex-blog">Artyst Tyrant - Victor Beazzo Designer for Hire</div>
Designer by trade who's trying his hand at learning to code, but I'm by no means a pro, so please, go easy.
Thank you in advance for your help, it's really appreciated.
Chrome v18 on Win7 renders the image in the same place as my other browsers - perhaps you were browsing a cached version on chrome only?
The only caveat to absolute positioning elements is if they are wrapped in a relatively positioned element - then the absolute position is relative to the parent - http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I looked at your source code and didn't notice any position relative attributes on the parent elements.
I adjusted the css top attribute value to 20px and it aligned for me in all current browsers.
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to