This is my code http://jsfiddle.net/FbC86/. If you open this page with Chrome or Firefox the text inside the cell is overflowing correctly through a vertical scrollbar. If you open it with Internet explorer it doesn't work properly.
I need your advice as i am new to web development and i cannot find any solution to this problem. Thanks in advance!
Part of the code:
CSS
div.main
{
width:100%;
height:100%;
display:block;
position:relative;
overflow:auto;
}
div.transparent{
padding:3em;
background-color: rgba(255,255,255,0.7);
display:block;
}
HTML
...
<td colspan="7" valign="top" style="height:0;" >
<div class="main">
<div class="transparent">
Here goes a long text
</div</div></td>
...
You need to add a height attribute to the div you want to overflow.
JSFiddle
Related
I need to change custom cursor for scrollbar in Chrome. I have lightbox which has set custom cursor with big X and Close text. Problem is that in chrome the cursor definition is inherited by the scrollbar as well, which looks a bit funny.
See the fiddle:
<div class="below">
<div class="full">
<div class="scrollable">long text</div>
</div>
</div>
CSS:
.full{
position:fixed;
background:red;
height:100%;
width:80%;
overflow-y:scroll;
cursor: url('cursor.cur'),not-allowed;
}
.scrollable{
padding:1em;
background:white;
position:relative;
display:block;
width:80%;
margin:50px auto;
}
http://jsfiddle.net/3fY9r/1/
is there any way how to trigger the scrollbar only and change the appearance back to default cursor?
You can use the vendor selectors for chrome's scrollbar to set styles. However, I don't think it will allow you to change the cursor. You could try this to see if it works:
::-webkit-scrollbar {
cursor:pointer;
}
UPDATE
After looking more into this issue, apparently there is a bug with Chrome and updates to the cursor on scrollbars. Here is the ticket, it is still open. You can still change the styles, but the customizations seem a bit limited.
Try adding cursor: auto to your scrollable class
.scrollable {
cursor: auto;
}
Works with textareas, not sure with divs.
I have a outer container, containing two links. They are aligning horizontally. The first one contains a div with background image and the second one is just text. The problem is the whole outer container acts as the first anchor, links to the first url while it is supposed to link nothing. Here's the simplified layout
<div id="links-block">
<div id="edit-quote-button"></div>
Preview the PDF
</div>
Here is the example JSFiddle. I am just wonder how to structure this set of elements, to prevent this problem.
Define this css
a{display:inline-block;vertical-align: top;}
#preview-pdf-link {
float: right;
margin-top: -30px; // remove this line
color: #999999;
}
Demo
here is your new html structure
<div id="links-block">
<a class="g-link" href="http://www.google.com"><div id="edit-quote-button"></div></a>
<a class="y-link" href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a>
<div class="clear"></div>
</div>
add this css to your css file
.g-link{
display:block;
float:left;
}
.y-link{
display:block;
}
.clear{
clear:both;
height:0px;
width:0px;
display:block;
}
hope this will work for you
It's not a great idea to have a div inside the a like that (invalid in pre-HTML5). If you set the edit-quote-button div to display: inline-block it will work better, though. Then remove the negative top margin on the Yahoo link.
div.horizontalRule {
clear:both;
width:100%;
background-color:#d1d1d1;
height:1px;
margin-top:5px;
margin-bottom:5px;
}
This is what I am doing now but the Margins seem to have no effect! I am not sure why but the text above and below this "horizontal rule" touch the horizontal rule with no margins. Is there a way to implement margins in this scenario?
http://jsfiddle.net/fwqSH/
Problem is your not closing the div:
You cannot close a div as you did there must be a closing tag as so:
<div></div>
and not
<div />
corrected jsfiddle:
http://jsfiddle.net/fwqSH/1/
EDIT
Final solution was to add a min-height of 1px because an empty div sometimes do weird things.
Final CSS:
div.horizontalRule {
min-height: 1px;
clear:both; width:100%;
border-bottom:1px solid #d1d1d1;
height:1px; padding-top:5px;
margin-top:5px;
margin-bottom:5px;
}
The reason the text below it butts right up against the line is because you didn't properly close the div. The browser sees <div /> and thinks that the paragraph after that is part of the div. So change your HTML to something like this:
<div class="horizontalRule" runat="server"></div>
If this is a horizontal rule, I recommend adding your class to the horizontal rule tag, <hr class="horizontalRule" /> This may help resolve some div interaction glitches.
i' m making a website that have to work with all browsers.
I' ve tested IE, FF, Opera, Chrome and solved a lot of thing related to CSS and jQuery compatibility... but the last thing is making me crazy :(
Safari doesn' t work as it should on the vertical div scrollbar. It is blocked at the bottom of div at the first access. Zooming in/out the page is the only way to unlock it... then it works...
I have this CSS (just a part of it) :
html, body {
margin: 0px 0px 0px 0px;
font-family: "Trebuchet MS", sans-serif;
background-color:#FFF2E6;
height:100%;
overflow:hidden;
}
#content {
margin-top:5px;
margin-left:170px;
position:fixed;
float:right;
width:88%;
height: 85%;
display:inline;
overflow:auto;
background-color:#E5E5E5;
}
#main_content {
position:static;
width:99.8%;
height: 85%;
}
The HTML page (just the interested block) :
<div id="main_content">
<div id="menu">
<p>Menu</p>
... menu block ...
</div>
<div id="content"><p>Content</p></div>
</div>
Is there any way to solve the Safari div scroll stuck problem?
Thanks very much for your help and sorry for my english.
Just a lucky shot, not sure if it will work:
try using zoom:1; in your #content css block. Although its not an widely 'supported' tag but I recall that it did miracles for some css in IE, perhaps it will work for Safari too.
Sorry if I am wrong.
The problem is that I have a PHP generated page that is printed in the #content div via Ajax functions, well, this page has some iframe tags for files upload (the only working trick to upload a file in a jQuery/Ajax context..) These iframe had the src property set to src='#' what made Safari stuck on a simple div scrolling...
So if you encounter a problem like this just remember to fix your iframe src="#" to iframe src=".
We have a page that ordinarily has two elements arranged side-by-side. Despite exploring a few angles for this, we can't seem to make it work. We're not averse to using JavaScript, it just feels that a CSS based solution ought to be possible. Is there a way of using just CSS (and possibly extra markup if necessary) to make element2 centre when it appears on its own?
Examples
Sometimes we have two elements, side by side.
<div id="container">
<div id="element1">content</div>
<div id="element2">content</div>
</div>
But in some conditions only element2 is on the page e.g.:
<div id="container">
<div id="element2">content</div>
</div>
There is a pure css solution, however it won't work in versions of IE less than 7 because it won't understand the sibling selector (+), for that you may want to consider a JavaScript solution (perhaps Dean Edwards' IE7). Anyway, some example css:
div#element2{
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div#element1 + div#element2{
width:50px;
float:left;
margin:0;
}
The key is the line div#element1 + div#element2 which selects div#element2 given that it directly follows div#element1.
I think Phil was on the right track, but you should try using the CSS last-child pseudo-class. As far as I know, first-child and last-child are the only way in CSS to approximate an if construct.
div#container div#element2:last-child {
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div##element2{
width:50px;
float:left;
margin:0;
}
The CSS above basically says "if element2 is the last child element of its parent use this set of styles, otherwise use these other styles.
This should even work in IE7.
A strict CSS2 solution:
#container {
text-align:center;
}
#element1, #element2 {
display:inline-block;
}
The inner elements should layout like inline text inside #container, but remain blocks inside.
This is standard CSS, but getting browser support might take some trickery.
it's not cool solution becouse tables are not "trendy" anymore but it solves the problem completly (under all ie)
<style>
#container {
margin:0 auto;
width:100px;
}
#container table{
width: 100%;
text-align:center;
}
#element1{
background-color:#0000ff;
}
#element2 {
background-color: #ff0000;
}
</style>
<div id=container>
<table cellspacing=0 cellpadding=0>
<tr>
<td id="element1">content</td>
<td id="element2">content</td>
</tr>
</table>
</div>