|
HTML - Overflow: Hidden Scrolls In Safari
Hello everyone! I've got a pretty strange problem. I have a div with overflow: hidden and it works fine in all the browsers except Safari. In Safari, if you have a Macbook, you can scroll the contain of the div using two fingers. However, there is no problem like this on the iTunes site. Here is my code:
HTML Code: <div style="width: 480px; height: 320px; overflow: hidden; position: relative">
<img src="http://new.yogamen.net/uploads/games/crazy/1.png" style="float: left" />
<img src="http://new.yogamen.net/uploads/games/crazy/2.png" style="float: left" />
<img src="http://new.yogamen.net/uploads/games/crazy/3.png" style="float: left" />
<img src="http://new.yogamen.net/uploads/games/crazy/4.png" style="float: left" />
</div>
Similar Tutorialshttp://cedarcreekyouth.org/chat.html I'm able to scroll below the div.. How can I fix this? Can somebody show my how they would format this page? Please & Thank you! Cody I'm having some trouble with the two scrolls. How do I align them to match up to the picture? This is my code: HTML Code: <table border="0" cellpadding="0" cellspacing="0" width="700" height="700" background="http://img255.imageshack.us/img255/220/noridfg4.jpg"> <tr> <td width="36"></td> <td width="354" valign="bottom"> <div style="overflow: auto; height: 398px; width: 290px; padding: 0px; border: 1px black solid"> </div> </td> <td valign="bottom"> <div style="overflow: auto; height: 292px; width: 220px; padding: 0px; border: 1px black solid; margin-left: auto;"> Write text here </div> </td></tr><tr> <td height="80"></td> <td></td><td></td></tr></td></tr></table> i have an html form that uses javascript to calculate the total price of gift cards. when i use a button for submit, everything is peachy. when i use an image to submit, the form races to the top and shows the top line of the page. the text is enclosed within a div tag that has a set height with auto as the overflow command. i removed the height and overflow, thinking that the enclosure was causing this. nope! same thing happened. this is the submit code: <input type="image" src="images/buttons_contact_calculate.gif" onclick="calcard(this.form)"><input type="text" name="totalprice" size="8"><br><input type="image" src="images/buttons_contact_reset.gif" name="reset" /> the javascript code is this: function calcard(form) { $totalprice = 0; if(form.card_twentyfive.checked==true){ twentyfive = (25 * form.twentyfive_no.value); } else { var twentyfive = 0; } form.totalprice.value = twentyfive + fifty + seventyfive + onehundred + twohundred + ".00"; } As indicated in the last line, there are five if statements including the twentyfive statement shown here for an example. the css is this: .text_box { position: absolute; top: 280px; left: 0px; width: 100%; z-index: 15; } .text { position: relative; left: 0px; top: 0px; width: 473px; height: 406px; overflow: auto; padding: 0px 30px 0px 503px; font-size: 13px; font-family: "arial"; font-weight: normal; line-height: 150%; letter-spacing: 0px; text-align: justify; color: #FFFFFF; z-index: 5; } any ideas about what is going on? I have a web page that has a banner at the top. It is in a div. the main part of my page is also in a div. Using the Z-index parameters and the position parameters on each div, I have the main part of the page scroll underneath the banner. I have a link at the top of the page, <a href="#mondaymtgs">Meetings on Monday</a> Which points to a name anchor on the page. When the link is clicked, it goes to (or scrolls to) The named anchor: <a name="mondaymtgs">Meetings that are on Monday.</a> The problem is this, when it does scroll to the named anchor, It does it such that, the named anchor is at the top of the page, Underneath the banner. I suppose I could just keep moving the named anchor up a little at a time, each time when I move it up, testing the link to see if the page scrolls such that, the point I want I to scroll to appears just below the banner. I am going to have numerous links at the top of the page, pointing To various places on the page. I hate to have to do this for each link. I would rather just put the named anchor where I want it to page to, and have that line show just under the banner. Is there any way to do this? Thanks in advance. Laurence My page scrolls and it shouldn't! Any ideas...? or can I not see the wood for the trees? Link how do I make my header not scroll with my gallery? anything above the images, my name, email, number, link to bio all that stuff page in question is www.paulodourado.com HI Im making a site at the mo and im looking to keep the menu and a picture stay in the same position constantly. So when then user moves the scoll wheel only the text are will scroll. I dont want there to be any border or scroll bars around the text, so the only visable scroll bar will be the browsers... any ideas? So I have this table, and I'm trying to get the overflow to work, but it's not working. Everytime I put a bunch of words it just streches and goes out of the specific height I want it to be at. Can someone help me? Make it where it overflows? Ppllleeassee. Here's my code. <table id="maintable"> <tr> <td colspan="2" width="303px" height="155px" class="words" overflow="auto"> 1111 </td> <td colspan="1" width="150px" height="155px" class="words"> 555 </td> <td colspan="1" rowspan="2" width="150px" height="205px" class="words"> 888 </td> </tr> <tr> <td colspan="1" rowspan="4" width="150px" height="300px" class="words"> 222 </td> <td colspan="1" rowspan="2" width="150px" height="150px" class="words"> 333 </td> <td colspan="1" rowspan="2" width="150px" height="150px" class="words"> 666 </td> </tr> <tr> <td colspan="1" rowspan="2" width="150px" height="125px" class="words"> 9999 </td> </tr> <tr> <td colspan="2" rowspan="4" width="300px" height="150px" class="words"> 4444 </td> </tr> <tr> <td colspan="1" width="150px" height="125px" class="words"> 777 </td> </tr> </table> <style type="text/css"> table#maintable { background-color:#222222; border: 2px solid #FF0099; } table#maintable td { padding: 5px; border: 1px solid #FF0099; vertical-align: top; text-align: left; } .words { color: #FFFFFF; } </style> Hello, I have one problem with overflow in IE, the problem results from having height of my div determined in % I guess. If I change it to fixed size in px I have no problems Here is the code : Code:
<style type="text/css">
...
div.text {
font-size: relative;
width:85%;
height:57%;
overflow-y:scroll;
}
...
</style>
<div class="text"> .... </div>
I need the size of this div to be set in % and overflow to work, can I do that in any way ? (this woks nice in firefox, however not in IE6) Thank you!! Hello, I wan't to make a div filled with images in one single line, overflowing out of the visible content-part. I wan't to be able to move it left to right and back using jQuery (so that part should be covered). A sprite is not an option because of the images being links (Lightbox and stuff). CSS "overflow:hidden" and "display:in-line;" don't seem to work. Please help! A little out of my depth here, and my site is based on a DW template. I have a photo section with thumbnails, that is expanding. I have gone from 10 rows to 30, and in the process broken something. I have compared the code from my original 10 rows to the 30 and cannot find anything that would cause the issue, so am hoping for some help. http://www.uniquefinishing.co.uk/photopages/photos.html On the top horizontal menu, click on "Videos", then "photos". See the table has dropped? This is the only consistent replication of the issue I can find. If you now keep clicking on the same "photos" link on the top menu, it randomly drops and fixes itself occasionally. This happens randomly from any page to the "photos" page. Where should I be looking? Hi, i want to add a horizontal overflow to the div element that holds the UL. each LI is displayed along side each other using Float:left. however, when they reach the end of the page it starts a new line. how can i get it so it doesnt start a newline, but carrys on in a line and can be scroll-able? thankyou Code: bodywrapper {
width:930px;
margin:auto;
margin-top:20px;
background:url(../images/layout/main_body_bg.jpg) repeat;
}
/*Image Gallery*/
#gallery ul {
margin-left:-30px;
margin-bottom:0;
margin-top:-10px;
}
#gallery ul li {
display:block;
float:left;
height:100px;
width:100px;
padding-top:10px;
padding-right:10px;
}
.thumbnails {
outline:none;
border:none;
}
.thumbnails_link {
outline:none;
}
I'm making a game and this is my current code: <html> <head> <title></title> <style type="text/css"> </style> <form> <input type="button" value="abc" onclick="move()"> </form> <img name="img1"> <!--http://bluebutton.info/images/home-button.gif--> <script type="text/javascript"> function c() { document.images['img1'].src = "http://bluebutton.info/images/home-buton"> document.images['img1'].width = 150 document.images['img1'].height = 150 document.images['img1'].style.position ="absolute" } function move() { var obj='img1'; move('img1',-0.5,0); } </script> </head> <body> <body onload="c()"> <body onkeypress="move()" <body </body> </html> It tells me I have a stack overflow at line 23 which is: move('img1',-0.5,0); Any suggestions of how to fix this or just clean up the code? Hi Everyone, I have a div element on a page that has as a child a large node (content is "Ajax'd" into this child). The containing DIV has overflow : auto so that the user can scroll up and down the large content. The function of the containing DIV is simply to provide scrollability and the dimensions of that DIV shouldn't affect the dimensions of it's content. When I use an IFRAME to provide the scrollability, resizing the IFRAME is fine. The desired effect is to make this look like an IFRAME in effect, it is in effect supposed to look like a desktop app with a multiple document type pane. This is a crap idea I know, but it's outwith our hands. So we can't radically change the way that the produt looks at the moment. When I use the DIV, then resizing this must cause the browser to recalculate all of the childrens widths which takes ages. Does anyone have any suggestions apart from using an IFRAME for this ? What I want is to be able to resize the containing element without recalculating the widths of all its children. The document div with the scroll bars is held inside a Dojo ContentPane widget with resizable borders hence the noticeable redraw lag when the user changes the size of something. many thanks, Woody. I have a small problem with my site that I am having trouble fixing. When I add a
Quote: overflow: auto; , it goes under the nav box to the left, and adds a scroll bar. Here is a screenshot: ----- ----- Here is my CSS code: Code: #content {background:#92979c url(images/content-tail.gif) top repeat-x; padding:0 9px 0 10px; min-height: 100%; overflow: auto;}
Here is the HTML: Code: <html> <head> <title>JACKASS JUNIOR</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body id="page3"> <div id="main"> <!--header --> <div id="header"> <div class="row1"> <!--<br /><br /><br />--> </div> <div class="menu"> <ul> <li class="active"></li> </ul> </div> <div class="submenu"> <ul> <div style="margin: 1.2% auto;"> <div class="marquee"><marquee><b><font color="#454545">--- NEWS: JACKASS JUNIOR HAS BEEN LAUNCHED! PLEASE ENJOY OUR VIDEOS! ---</font></b></marquee></div></div> <li class="last"></li> </ul> </div> </div> <!--header end--> <div id="content"> <div class="container2"> <div class="col-1 col-pad padding1"> <div class="box1"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div class="indent"> <ul class="menu2"> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> <li><a href="#"><span><span>LINK</span></span></a></li> </ul> </div> </div> </div> </div> </div> </div> </div> <br /> </div> <div class="col-2 margin-extra"> <div class="box3"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div style="clear: right;"> <div class="indent"> <h3><span><span>CONTENT</span></span></h3> <div class="indent2"> <!--CONTENT--> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div> <!--footer --> <!--footer end--> </div> </body> </html> It's really messy- Once I get this problem fixed I will organize it. Thanks for any help It laggs. Meaning it isnt fluent. The site is working fine with all browsers except in IE8 ? In IE I only get a fluent scroll experience when I place the cursor ON TOP of the scroll bar.. now I know this cant be good, so tell me, do I need to add code for IE to recognize my scroll wishes? Have a look at the site here. thank you o btw, for the ones who have helped me in the past have a looksy here! Im growing in knowlegde thanks to you, very much appreciated, feel free to review it and help me improve my coding (because I know it sucks) When entering content into my table I've found that if I enter so much that the page needs to be extended, it will mis-align everything on the page, even the background image referenced in the <body> tag. It happens in both Firefox and IE8. It only pushes the content a few pixels to the left. If I remove content so the page doesn't have to be extended, everything is aligned correctly. Is there any reason this might be happening? The correct alignment The messed up allignment *update: I don't know what I did but the problem was fixed in IE8 but not firefox, also I have tried the "html { min-height: 100%; margin-bottom: 1px; }" trick along the one specific to firefox and neither worked. Hey All, I sliced a PNG and ended up with a table that overflows and screws up the whole page. Here's what it's supposed to look like: http://www.uark.edu/ua/oep/web2/index.php And here it is stretched out by the content area: http://www.uark.edu/ua/oep/web2/headlines.php?so=da Help? Thanks! J Darnielle Okay a simplified version of my problem is this: I have a small table of 2x2, with the right two cells merged. I have content in the right cell in the form of text. The cell has the following formatting: overflow: hidden; and the text has the following formatting: position: relative; left: -91px; vertical-align: top; text-align: justify; The left cells are 182px wide, so the text looks like it is centered with respect to the entire table, with the overflow into the left two cells being cut off. The problem now is, I only want the text covered by the top left cell to be cut, and I want the text in the bottom left cell to still be visible. I tried using the 'clip:' property, but you cannot specify a non-rectangular area so it's of no help to me. There is an image in the top left cell, and nothing in the bottom left cell, so the other way to fix my problem would be to find some way of having the overflow appear BEHIND the other elements, so that the image would cover the text, and the empty cell would not. |
|||||||