Alternative to overflow-y in CSS? - css

I'm creating a calendar and need to replicate the behaviour I would get with
overflow-x:visible;
overflow-y:hidden;
for browsers that don't support these css attributes. Is there some kind of workaround I can do? I don't just want to compromise and add in overflow:hidden for those browsers, since the client really wants this feature. Does anyone have any good ideas?
Many thanks.

Here is someone who asks roughly the same question (overflow-x visible and -y hidden).
http://forums.devnetwork.net/viewtopic.php?f=68&t=116457
Someone named Weirdan says I'd say there's isn't any expected behavior because such style is unavoidably internally inconsistent, and shows an example where it is not clear (says Weirdan) whether the area to the southeast should be hidden or shown.
S/he also says that the effect you want is easily achieved by wrapping the outer div with another div and setting overflow-y on that div to hidden, and shows this example (I hope it's OK that I copy it to here?).
<style type="text/css">
#outer-wrapper {
overflow-y:hidden;
}
#outer {
width:100px;
height:100px;
background:red;
border:solid red 1px;
overflow:visible;
}
#inner {
width:200px;
height:200px;
background:green;
}​
</style>
<div id="outer-wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>

Related

Is this a good way to put scrolling social bar on my website?

I'm coding my own scrolling social bar but i'm nut sure about method I'm using. As you can see on the pic above, I had put a wider grey div inside the narrower content div. Then I've set grey's one a css to make it's z-index less than the content z-index. It works ok and following content once I scroll the website but my question is - is this a good method to place a bar like this? Maybe there is an easier solution and better for browsers compatibility, isn't it?
Sincerely,
Matt
You can just have the size of the DIV cut down to less space and than make it postion:fixed so that it moves with the scroll.
Fiddle
HTML
<div id='div1' align='center'>
<span id='grey'>Like</span><br>Tweet<br><span id='grey'>Share</span>
</div>
<div id='div2' align='center'>Content</div>
CSS
#div1 {
position:fixed;
top:30px;
left:5px;
background:yellow;
height:60px;
width:50px;
border:4px ridge black;
}
#div2 {
height:800px;
width:200px;
background:orange;
margin-left:60px;
}
#grey {
background:grey;
}
Why don't you position the "like tweet share" div (i guess) relatively to content.
div#content{position:relative;} and div#share{position:absolute;top:...;left:.. }

Why does Firefox display my page differently?

I'm totally clueless to describe my problem clearly enough so I tried to make a jsfiddle as simple as possible here: http://jsfiddle.net/Emf2f/. On Chrome+IE, my image is under #div3, while on Firefox, is next to #div3. Why does this happen? which result is more "standard"?
<div id="div1">
<div id="div2">
<div id="div3"> Text </div>
</div>
<img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>
#div1{
width:500px;
overflow:auto;
border:1px solid red;
}
#div2{
margin-bottom:-1px;
}
#div3{
background:cyan;
float:left;
width:200px;
height:100px;
}
I would use "clear" around the object that you do not want the image to appear inline with. You can read more about positioning here: http://w3schools.com/css/css_float.asp
The site has the exact example you are trying to accomplish.
I added your image into a div tag (div4) then placed the clear:both in the css file for that div and it works properly in Chrome, IE and FF.
div4{Clear:both;}
Let me know if this helps. Thanks.
From a content perspective they are all doing the same thing showing the img inline (as per the HTML spec), what differs is the default overflow behavior. In Chrome and IE they are wrapping as per text (this is actually what I would imagine the correct behavior is) whereas Firefox is not. If you want the image to always display below, mark it as display:block;

Background image only being displayed once

I have a strange problem that I can't get my head around:
I have a header div and I would like to display a background image to be repeated horizontally:
The HTML:
<div id="headerwrapper">
<div id="header">
<p>This is an extremely interesting test. This is an extremely interesting test. This is an extremely interesting test.</p>
</div>
</div>
Here is the CSS:
* {
margin:0;
padding:0;
}
#headerwrapper {
margin:0 auto;
width:630px;
}
#header {
width:630px;
background-image:url(../images/headermiddleback.jpg);
background-repeat:repeat-x;
}
When I look at it in the browser, I can see only 1 instance of the background-image being displayed above the text. But it is not repeating.
Any idea what I am doing wrong here?
You might want to use repeat-y instead of repeat-x
#header {
width:630px;
background-image:url(http://dl.dropbox.com/u/4457768/css/headermiddleback.jpg);
background-repeat:repeat-y;
}
Here is your example on jsFiddle, seems to be working.
http://jsfiddle.net/MgvLT/1/
Perhaps you have some other CSS that's getting into the way or maybe your background image has lots of empty space. Please post your example on jsFiddle.
Perhaps you need to clear your browsers cache?
For example, here's a SO Post showing how to do it for Chrome.

Absolute overlay div element doesn't cover relatively positioned elements

In IE7 browser, I just meet one issue about position.
I made a demo page to test the position conditions of relative and absolute.
There are the related codes below:
[CSS]
.rela{
width:200px;
height:100px;
background:#EEE;
margin-bottom:10px;
position:relative;
}
.abs{
width:50px;
height:50px;
position:absolute;
background:#333;
left:20px;
top:80px;
z-index:10;
}
[HTML]
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
Now, the problem is, in IE7 browser, the "abs" element is covered by the next "rela" element, but it displays well in other browsers like Firefox, chrome, IE8.
I know somebody said that we can add a more higher z-index to the parent "rela" element, but for the codes above, the issue can't be fixed in this condition, coz there are more than two rela elements and all of them have the abs element.
I have no idea about how to fix it now. Also, if someone could kindly provide a official explanation about this "bug", it will be so good.
Give all divs with class rela an z-index, the first with the hightes till the one on the bottom with the lowest value.
<div class="rela" style="z-index: 40;"><div class="abs"></div></div>
<div class="rela" style="z-index: 30;"><div class="abs"></div></div>
<div class="rela" style="z-index: 20;"><div class="abs"></div></div>
<div class="rela" style="z-index: 10;"><div class="abs"></div></div>
Also see this example.
The same question was asked here.
Don't ask me why, but the last answer there seems to fix the problem (though you'll need jQuery or the like):
http://jsfiddle.net/Xmznn/1/
see the changes, it is working in IE 7
.rela{
width:200px;
height:100px;
background:#EEE;
margin-bottom:10px;
}
.abs{
width:50px;
height:50px;
background:#333;
margin:80px 0 0 20px;
z-index:0;
position:absolute;
}
Try adding
z-index : 0;
To div.rela
know issue and well documented out there.
check - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
that might help you out.
There's a helpful resource to address this issue.
Long story short, if your absolutely placed div (.abs) is empty, IE doesn't like to place it in front of other elements regardless of z-index. You can use a 1x1 transparent gif to overcome this, eg. by setting a style like the following on the div:
.abs {
background: transparent url('/images/clear.gif') repeat 0 0;
}
I've found this to help. It's great as there's very little additional styling needed and you don't have to explicitly manage z-indices.

boxes adding up to 100% of the browser

I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext

Resources