I'm confused as to how I am supposed to make my posts disappear while scrolling...I want my posts to be like this http://yukoki.tumblr.com/page/4 (so once you scroll, it disappears like his black stary header for example). This is my theme http://macaiylaedwards.tumblr.com/ I'm basically using images as my header if thats the problem but there must be a solution. Tried making another wrap around the posts but it didn't work. I'll leave my coding here as well..thanks.
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title></title>
<link rel="shortcut icon" href="{Favicon} />"
<meta name="color:Sidebar Background" content="#000000" />
<meta name="color:Background" content="#000000" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
a:link, a:active, a:visited{
color: {color:Link};
color:#000000;
}
body{
color:#000000;
background-color:{color:bg};
background-image:url({image:background});
Background-attachment: fixed;
background-repeat:no-repeat;
background-size:cover;
margin:0;
word-wrap: break-word;
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.desc{
position:fixed;
margin-top:280px;
margin-left:860px;
width:400px;
height:300px;
font-family:0px;
letter-spacing:1px;
}
.nav{
position:fixed;
margin-top:300px;
margin-left:880px;
}
.pt{
width:500px;
margin-top:400px;
margin-left:700px;
background-color:#fff;
position:absolute;
padding:5px;
}
.pt2{
padding:10px;
background-color:#fff;
width:500px;
float:left;
margin:2px;
background-color:transparent;
}
.cutebox{
position:auto;
width:auto;
border:1px solid #292c34;
}
</style>
</head>
<body>
{block:More}READ MORE{/block:More}
<div class="desc">
{description}
</div>
<div style="position: fixed;width: 100%;z-index: 10;">
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/world_zpswu8twdm2.png" height=650 style="position:fixed;bottom:600px;left:750px;z-index:999"/>
<img src="http://i1298.photobucket.com/albums/ag50/macaiyla/888_zpsopwexxl4.png" height=210 style="position:fixed;bottom:720px;left:550px;z-index:999"/>
</div>
<select style="width: 200px; border: 0px solid; padding: 3px; color: #292c34; background-color: #f1f1f1; font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; position:fixed;bottom:740px;left:880px;z-index:999" onchange='location=this.options[this.selectedIndex].value;' style='width:100px;'>
<option>Explore</option>
<option value="http://www.tumblr.com/home">Home</option>
<option value="http://www.tumblr.com/about">About</option>
<option value="http://www.tumblr.com/home/photography">Photography</option>
<option value="http://www.tumblr.com/contact">Contact</option>
<option value="http://www.tumblr.com/ask">Ask me</option>
</select>
<div class="pt">
{block:posts}
<div class="pt2"
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
<div class="cutebox">
{block:Caption}<center>{Caption}</center>{/block:Caption}
</div>
{/block:Photo}
</div>
{/block:posts}
</div>
</body>
</html>
Here is a basic example using some of the code from the tumblr that you linked to.
The template has a div at the top of the theme with the id of top:
<div id="top"></div>
This div has certain css properties, the important one being position:fixed (which means it is always in the viewport when scrolling.
#top {
background-image: url(http://38.media.tumblr.com/tumblr_m8nhk3w96X1r9g6hvo2_250.gif);
top: 0;
left: 0;
width: 100%;
height: 110px;
position: fixed;
z-index: 1001;
}
You have to specify the width when using fixed positioning so in this case set it to 100%. The item also has a height, so in this instance I have added the same amount of padding to the next element as the height of the top div. Otherwise the next element would be hidden beneath the fixed header.
jsfiddle: http://jsfiddle.net/lharby/6Lbtsfwx/
Related
I have a container which has a fixed width of 200px and the rest of the width is margin equally on both sides.
I have applied margin-bottom on this container but it will occupy only the 200px width since that is the width of the container box.
How can i make the border-bottom occupy the entire screen width.
code:
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
border-bottom:1px solid red
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
FIDDLE
Implementing as two class will be the best choice.
.sch-container{
border-bottom:1px solid red;
}
.content{
max-width:200px;
margin:0 auto;
text-align:center;
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
This is not a straight forward solution to your problem, more of an alternative.
You could use <hr /> tag instead of border-bottom on .sch-container.
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
}
hr{
height: 1px;
border: 0;
border-top: 1px solid;
}
.red{
border-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Some Title</title>
</head>
<body>
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
<hr class="red"/>
</body>
</html>
Why is it that when I move my text down another vertical scroll bar appears on the inside of the browser its right where then width ends at approximately 1000px is there a way to extend the length of my page or a simple way to hide the scroll bar that is showing vertically? I still want the default browser vertical scroll bar to show. All tips are appreciated thank you!
If you need to seen any of my code just ask thanks again!
HTML:
<head>
<meta charset="utf-8" />
<title> Iamdrivingtoday.com </title>
<link rel="stylesheet" href="mfcc.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.min.css"></link>
<style type="text/css">
<!--
#fadein {
position: relative;
height:100%;
width:100%;
}
#fadein img {
position:absolute;
left:0;
top:0;
}
-->
</style>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="iadt.jpg" height="100" width="300"> </img>
</header>
<center><nav id="top_menu">
<ul>
<li>Home</li>
<li>Application</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</nav> </center>
<div class="fadein">
<img src="images/slide1.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide3.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
</div>
<div class="bg1">
<img src="images/bg1.jpg" width=1500 height=308 style="position: absolute; left: -125px; top: 477px;">
</div>
<img src="Images/images/newcar.png" width=150 height=150 style="position: relative; top: 320px; left: 100px">
<img src="Images/images/usedcar.png" width=150 height=150 style="position: relative; top: 320px; left: 500px">
<section id="new_car">
<center> <h3>New Car Loan Requirements</h3> </center>
<p> If you're ready to apply for a new car loan, fill out our quick an easy application here at
Iamdrivingtoday.com But obviously, you don't want to waste your time when you don't
know the requirements to get approved for a new car loan. Here's what you'll need to qualify:
</p>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
$.vegas('next');
});
</script>
<section id="main_section" style="position: relative; right: 0px;">
<article>
<header>
<hgroup>
<center><h1>What is Iamdrivingtoday.com?</h1></center>
</hgroup>
</header>
<p>Iamdrivingtoday.com is where we specialize in providing auto loans for people with bad credit.
We know that new and used car customers in certain times need help
finding the right auto loan provider. If you think you
have a really bad, or low credit rating, or you have been
turned down in the past, chances are we can help!
Our specialty is getting you financed and we guarantee an
approval!</p>
</article>
<article>
<header>
<hgroup>
<center><h1>Having a hard time getting approved?</h1></center>
</hgroup>
</header>
<p>No matter what your prior credit which may be due to bankruptcy, divorce,
foreclosure, repossession, late payments, or unpaid balances we get
you driving the same day no matter your circumstances.
Just fill out the application and drive away today.</p>
</article>
</section>
<div id="new_div">
<aside id="side_news">
<h4>What your Dealer needs!</h4>
<center>Paystubs!</center>
<center>$1000 Down!</center>
<center>Proof of Insurance!</center>
</aside>
</body>
</html>
CSS:
*{
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
h1{
font:bold 16px tahoma;
}
}
header,section,footer,aside,nav,article,hgroup{
display: block;
}
body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
section{
font: 12px Verdana;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: transparent;
padding: 5px;
text-align: center;
}
#top_menu{
border: 1px solid black;
background:-webkit-linear-gradient(left, #BDBDBD, #E6E6E6, #BDBDBD);
width: 998px;
text-align: center;
box-sizing: border-box;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px 20px;
font: bold 14px tahoma;
}
#new_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#new_car{
Position: relative;
Top: 20px
}
#bg1{
border: 3px solid black;
}
#main_section{
Position: relative;
border:1px solid black;
color: white;
text-shadow:
2px 2px 0 #000,
1px 1px 0 #000;
background-image:url('tb.png');
background-size: 365px 325px;
background-color:#cccccc;
-webkit-box-flex: 1;
float: right;
margin: 15px;
margin-top: 300px;
margin-right: 625px;
padding: 20px 20px;
}
#side_news{
border: 1px solid black;
width: 250px;
margin: 20px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
Best guess without seeing code: You have a set height on that container element with overflow:auto
Edit: After looking at your code, I think the best thing to do in this situation is to encourage you to spend some more time reading up about HTML and CSS. You have a lot of inline styles and you're positioning things that really mess up the natural flow of the document. This isn't a small error that's happening but just fundamentally poor code.
I'm not saying this to be mean, but this scroll bar is the least of your problems.
By default when your contents height or width exceeds the height or width of the container explicitly set by you, the css properties overflow-y and overflow-x are enabled.
Disabling the overflow-y value on that particular element will remove the scrollbar.
overflow-y:hidden
To avoid the content from being clipped, increase the height of the container or reduce the content or vice-versa. Not setting the height explicitly or setting it to auto will ensure the container expands enough to prevent its contents from overflowing.
DEMO
You should use,
overflow-y:hidden; - Use this for hiding the Vertical scroll
overflow-x:auto; - Use this to show Horizontal scroll
For IE8: -ms-overflow-y: hidden;
http://www.w3schools.com/cssref/pr_pos_overflow.asp
I'm fairly familiar with HTML and CSS, but for the life of me i cannot get this 'back to top' button to work on my tumblr page. I would really appreciate a keen eye to help me out here. I have added a JQuery code to enable the text to fade in and out when scrolling (infinite scroll past 100).
Thanks very much for your help.
L
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Video Corner Fold" content="red">
<meta name="font:Font" content="'BrownBold'">
<meta name="if:Show Captions" content="0"/>
<meta name="if:Uppercase Links" content="0">
<meta name="if:Fade On Hover" content="0">
<meta name="if:Show Tags on Index Page" content="0">
<meta name="image:header" content="0"/>
<style type="text/css">
#header {
width:100%;
height:100%;
background: url('{image:header}')no-repeat;
position:fixed;
margin: 15px 50% 0 50%;
top:0px;
left: -300px;
right: -300px;
z-index:9999;
}
body {
background-color:{color:Background};
font-family:{font:Font};
color:{color:Text};
font-size:17px;
line-height:25px;
}
a {
padding-bottom:2px;
color:{color:Text};
text-decoration:none;
border-bottom:2px solid;
}
img {
border: none;
border : 0;
outline:none;
}
a img {
outline: none;
}
iframe#tumblr_controls {
display:none;
}
#wrapper {
{block:PermalinkPage}
width:580px;
{/block:PermalinkPage}
position:relative;
margin: 50px auto;
}
#post {
padding:40px;
}
#post img {
width:100%;
}
#post img:hover {
{block:IndexPage}
{block:IfFadeOnHover}
opacity:0.5;
{/block:IfFadeOnHover}
{/block:IndexPage}
}
#post embed, #post iframe {
width:100% !important;
}
#post .photoset a:first-child {
display:block !important;
border:0 !important;
padding:0 !important;
}
#post .photoset a {
display:none;
}
.title {
width:100%;
text-align:center;
margin:auto;
position:fixed;
top:20px;
z-index:5000;
}
.follow {
position:fixed;
margin: 0px 30% 0 16.3%;
bottom:20px;
z-index:5000;
}
.archive {
position:fixed;
margin: 0px 20px 0 30%;
bottom:20px;
z-index:5000;
}
.message {
position:fixed;
bottom:20px;
left:20px;
z-index:5000;
}
.random {
position:fixed;
margin: 0px 0px 0 60%;
bottom:20px;
z-index:5000;
}
#toTop {
width:100%;
margin: 0px 0px 0 43%;
z-index:5000;
position:fixed;
display:none;
bottom:20px;
cursor:pointer;
}
.player {
background:#000;
}
ul.chat {
list-style-type:none;
padding:0;
margin:0;
}
#infscr-loading {
display:none !important;
}
.corner {
top:6px;
right:40px;
position:absolute;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
overflow:hidden;
z-index:4000;
}
.corner:before {
content:"";
position:absolute;
top:0px;
right:0px;
border-width:0 25px 25px 0;
border-style:solid;
border-color:#fff #fff {color:Video Corner Fold} {color:Video Corner Fold};
background:#fff;
display:block; width:0; /* Firefox 3.0 damage limitation */
}
{CustomCSS}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
</head>
<body>
<div id="header"></div>
{block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
<div class="title">{Title}</div>
<div class="archive">Archive</div>
<div class="message">Message</div>
<div class="follow">{block:PermalinkPage}{block:Posts}Reblog / {/block:Posts}{/block:PermalinkPage}Follow</div>
<div class="random">Random</div>
<div id="toTop">Back to top</div>
{block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}
<div id="wrapper">
{block:Posts}
<div id="post"
{block:IndexPage}
{block:Post1}style="width:380px"{/block:Post1}
{block:Post2}style="width:410px"{/block:Post2}
{block:Post3}style="width:500px"{/block:Post3}
{block:Post4}style="width:290px"{/block:Post4}
{block:Post5}style="width:320px"{/block:Post5}
{block:Post6}style="width:460px"{/block:Post6}
{block:Post7}style="width:530px"{/block:Post7}
{block:Post8}style="width:280px"{/block:Post8}
{block:Post9}style="width:340px"{/block:Post9}
{block:Post10}style="width:400px"{/block:Post10}
{block:Post11}style="width:260px"{/block:Post11}
{block:Post12}style="width:370px"{/block:Post12}
{block:Post13}style="width:520px"{/block:Post13}
{block:Post14}style="width:310px"{/block:Post14}
{block:Post15}style="width:250px"{/block:Post15}
{/block:IndexPage}
{block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
>
{block:Text}
{block:Title}{Title}{/block:Title}
{Body}
{/block:Text}
{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}<div class="description">{Description}</div>{/block:Description}
{/block:Link}
{block:Quote}
<a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
{block:Source}
<p>— {Source}</p>
{/block:Source}
{/block:Quote}
{block:Photo}
{block:IndexPage}<div style="border:none"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" border="0"/></div>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photo}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{/block:Chat}
{block:Video}
{block:IndexPage}<div class="corner"></div>{/block:IndexPage}
<div id="video">
{Video-500}
</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Video}
{block:Photoset}
{block:IndexPage}<div class="photoset">{block:Photos}<img src="{PhotoURL-HighRes}">{/block:Photos}</div>{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photoset}
{block:Audio}
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
<div class="player">{AudioPlayerBlack}</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Audio}
{block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}#{Tag} {/block:Tags}{/block:HasTags}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}#{Tag} {/block:Tags}{/block:HasTags}{/block:Date}{/block:PermalinkPage}
</div>
{/block:Posts}
{block:NextPage}<div id="page-nav">{/block:NextPage}
</div>
</body>
</html>
The #header element sits above .archive, #toTop and .random due to its higher z-index (5000 / 9999).
If you make the following change, #toTop is clickable and works as desired:
#header {
width: 100%;
height: 100%;
background: url('http://static.tumblr.com/e72d71d9df861d718427e82229f48499/yo2ke79/iMEn5bbly/tumblr_static_9kpmrzvkfosoo4o0g8k4g80oc.png')no-repeat;
position: fixed;
margin: 15px 50% 0 50%;
top: 0px;
left: -300px;
right: -300px;
z-index: 4999;
}
There is another error though. It seems two versions of jQuery are being requested:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
The later, http://masonry.desandro.com/js/jquery-1.7.1.min.js, fails as it can't be found. I can't see why you need two versions of jQuery or why you are hot linking.
Either use a CDN (like the first link) or upload the javascript directly to Tumblr's own CDN.
Instead of messing around with scrollTop, just use a link.
Scroll to Top
This will take you straight back to the top. Admittedly no animations but if you're just looking for basic functionality then it's perfect.
My code works perfectly with all browsers except IE. I tried every solution I could find on the forums with no luck. I am still learning JavaScript, so I will learn jQuery later. The issue is that in IE the slides appear vertically with no effect. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet...css" rel="stylesheet" type="text/css" />
<title>div test</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var slider = $('#slider1').bxSlider({
controls: false
});
$('#bx-prev').click(function () {
slider.goToPreviousSlide();
return false;
});
$('#bx-next').click(function () {
slider.goToNextSlide();
return false;
});
});
</script>
</head>
<body>
<div id="slider1">
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>
<div id="wrapper">
<div id="head"><img alt="logo" align="left" src="logo.png"/></div>
<div id="main"> <div id="content">content</div> </div>
<div id="rash"><img alt="r" align="middle"
style="position:relative;top:-70px;"
src="image1.png"/></div>
<div style="clear:both"></div>
</div>
</div>
<div>page3</div>
<div>page4</div>
</div>
<div id="bx-next">next</div>
<div id="bx-prev">prev</div>
</body>
</html>
And here is my style sheet:
div#head {
width:100%;
height:100px;
/*background-color:antiquewhite;*/
margin-bottom:100px;
}
div#content {
border-left: 2px solid #F0F8FF;
border-right: 2px solid #8a815d;
border-top: 2px solid #8a815d;
border-bottom: 2px solid #8a815d;
width:400px;
height:300px;
-webkit-border-radius: 0px 28px 20px 0px;
-moz-border-radius: 0px 28px 20px 0px;
border-radius: 0px 28px 20px 0px;
font-family:Arial,Helvetica,sans-serif;
color:#8a815d;
padding-left:100px;
background-color:#F0FFFF;
background-color: rgba(215,227,211,0.3);
position:relative;
top:20px;
left:0px
}
div#wrapper {
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}
div#main {
/* background-color:black;*/
width:50%;
height:360px;
float:left;
}
div#rash {
float:right;
/*background-color:blue;*/
height:360px;
width:50%;
}
body {
background-color: #E8F3F9;
background-image: url('squares layer.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
/*next button*/
#bx-next {
position:absolute;
top:45%;
right:3px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_next.png) no-repeat 0 -30px;
}
/*previous button*/
#bx-prev {
position:absolute;
top:45%;
left:4px;
z-index:998;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url(gray_prev.png) no-repeat 0 -30px;
}
I am also having a similar problem, and I have not yet come to the conclusion but from what I have figured out so far is that to debug this problem you should start out by validating your code. http://validator.w3.org/ I copied your code and it said you had 5 errors so I think a start would be fixing these errors because IE is very picky and if you have any errors if could effect your formatting. Also I know that IE is picky about the Doc Type at the top of your code and if it is not correct it can also effect the formatting of the page. If I can get my similar problem fixed I will let you know because it is most likely the same problem you are having.
<div id="wrapper"> is defined twice. An ID needs to be unique for every element on your page. Same goes for <div id="head">, <div id="main">, <div id="content"> and <div id="rash">.
Also, have you tried debugging it in the IE console? Try and see if the console logs any errors at runtime. Then get back to SO and post those errors.
Cheers.
I am trying to make overlay over image while dragging but its also moving image when I move my textarea. So I want my edit area be transparent and overlay image. Please help
Here is what I have
<head>
<style>
.positionable {
width:100px; height:100px;
position:absolute;
}
.dragRegion {
background-color:#FFF; color:#000;
cursor:move;
top: -2px; left: -2px;
position: absolute;
font-size:14px; line-height:14px;
margin: -5px;
padding-left: 10px;
padding-top: 10px;
background-image:url('arrow_move.png');
background-repeat:no-repeat;
}
.editable {
width: 150px; height: 150px; padding: 0.5em;
position:relative;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<div class="positionable">
<div class="dragRegion"/>
<textarea id="resizable" rows="5" cols="20"></textarea>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" style="z-index: 100" />
<script type="text/javascript">
$('.positionable').draggable({handle: '.dragRegion'});
$('.editable').resizable();
</script>
</div>
Use z-index on the draggable object.
For example:
.dragRegion {
z-index:500
.... old css code
}
You set the code in your CSS