HTML - How To Prevent Div's Content From Scrolling In Safari/chrome, How To Prevent Div's Co
Hi,
Facing a strange issue. My html page contains a div element with fixed height and width and its overflow property set as hidden. as shown below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div style="height: 200px;width: 400px; border: 3px coral solid; overflow: hidden;"> <input type="text" value="AAAAAAA" /> I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit I am rahul working to counter special feature of safari Web tool kit 111 111 232 23 23 232 32 3 <input type="text" value="1111111" /> <input type="text" value="1111111" /> <input type="text" value="1111111" /> <input type="text" value="1111111" /> <input type="text" value="1111111" /> </div> </body> </html> Now if you open this html page in safari or chrome. As the content of the div is overflowing and div's overflow property is set as hidden so no scrollbar is displayed(as desired). Set focus on input type text, keep mouse pressed and drag the mouse. You will observe that div's content starts scrolling(which was not desired). Now open this page in ff/Ie and perform same operation content does not scrolls(desireable). How can I make sure that div's content does not scrolls in safari too. Code spinet will help. You can test this by copy pasting the html content in a test page and open in safari or chrome? Thanks, Regards Similar TutorialsCan anyone tell me if the following is possible, and if so, how do I do it? I want a list of bullet points, but if one of the bullet points has no text then I don't want the actual bullet graphic to be shown. Not the best explanation so I'll elaborate. I'm pulling the bullet data from a program using a keyword/macro so my code looks like this. HTML Code: <ul> <li>{{BulletPoint1}}</li> <li>{{BulletPoint2}}</li> <li>{{BulletPoint3}}</li> <li>{{BulletPoint4}}</li> <li>{{BulletPoint5}}</li> </ul> Works perfectly when all five bullet points are populated, but if for example, there are only 3 bullet points with text, I get the bottom two bullet graphics just hanging there with no text next to them so and the final code looks like this HTML Code: <ul> <li>This is bullet point 1</li> <li>Here's another bullet point</li> <li>Only 3 bullet points for this particular product</li> <li></li> <li></li> </ul> Can anyone help? Does anyone even know what I'm talking about? Hi everyone, I am a noob. I am creating a website with frames. Using PHP or javascript how can I prevent a user from navigating directly to the subpages on the website? I want them to navigate to index.htm first. thanks Hi to all, I am creating an event planner which means that I have a calendar like in html generated by server side script, with users created events stored in a database that are displayed with floating divs that can span across many days. Events can be added/edited at any time by many users, and I can not modify the way they add or modify it. Therefore I can have many events on any day and an event can last an indefinite number of days. The problem is that some of the event will overlap, is there any way in html /css to prevent the <div> with absolute position to overlap without any javascript ? Thanks a Million, Alex Hi, im in the middle of creating my website and need some help with stopping people from going to a page in my website manually. Basically, i've set up a contact form and once it's filled in, it sends you to a thankyou page. I want to stop people going to that page manually by typing in the url for it. I want them to only be able to access it by filling out the form and hitting 'send'. Firstly, is this possible, and if so, HOW?! Thanks in advance!! I'm swapping out an image through javascript, and when the user click the image it becomes outlined. Is there some way to prevent this from happening? Thanks for any help. Hello Everyone, I am putting together a web site that will allow folks to listen to some audio files (.mp3). I do not want them to have the ability to down load them. Do do this, I create an href to the file: <a href="birdcall001.mp3"> This seems to work fine in Microsoft's IE. Microsoft IE brings up the audio player and plays the file. However if I use the Firefox browser, a dialog box comes up and gives the user the choice to listen to the file or to download it. Is there a way to prevent Firefox from giving the user the option to download the file? New to this, but having a lot of fun! Thanks for any help! Steve Told you I was new at this. Additional testing shows: They can also download the file in IE by simply right clicking on the reference. So I guess the real question is "is there a way to allow users to listen to a .mp3 file, but prevent them from downloading the file" Thanks for any insight! Hi, How do I prevent framed html pages from coming up in a Google search? i'm using 6 iframes in a page my page has scrolling whlie i click a link on top most iframe the page has been slide down the scroll bar comes to middle plz help me here my url http://www.myspace.com/come_get_cole and heres the code HTML Code: <style>.profileInfo {display:none;}</style> <style>.friendSpace {display:none;}</style> <style>.latestBlogEntry {display:none;}</style> <style>.extendedNetwork {display:none;}</style> <style>a.text, table div font a, table div div {visibility:hidden;}</style> <style>.contactTable { display: none }</style> <style> .profileInfo td td {visibility:hidden;} .profileInfo td td.text {visibility:visible;} .profileInfo td.text a img {visibility:visible;} .profileInfo .ImgOnlineNow {visibility:transparent;} </style> <p> <center> <style>.a embed, object {filter:alpha(opacity=0.1); opacity:0.01;} td td td td embed, td td td object,td.text embed, td.text object {filter:none; opacity:none;} .interestsAndDetails {margin-top:-120px;}</style> <center> <center> </center> <style>body{background-color:FFFFFF; background-image:url(http://i41.tinypic.com/uvmt2.jpg);} div, li, p, .redtext, .redbtext, td, tr, table, .text{color: 000000; font-size: 11px; font-family: arial; font-weight: none; border: 0px; text-transform: none;} .blurbs{background-color:transparent; border:0px;} .btext, .lightbluetext8, .orangetext15, .whitetext12{color: 000000; font-size: 10px; font-family: arial; font-weight: none; border: 0px; text-transform: uppercase; } textarea {color: 000000; font-size: 7px; font-family: small fonts; font-weight: none; text-transform: uppercase; width: 175px; height: 30px;} table tr td div font{font-family: small fonts; font-size: 8px; color: 666666; padding:0px;text-transform:uppercase}</style> <style> .katamari Section Manager { http://abrax.us/SectionManager } table.profileInfo * {background-color:transparent;} table.profileInfo table, table.profileInfo {width:0px;} table.profileInfo td td.text br {line-height:0px;} span.nametext {font-family:Tahoma!important; font-size:20px!important;} table.profileInfo td td img {display:none;} table.profileInfo td.text img {display:inline;} table.profileInfo td td b {display:none;} table.profileInfo td td span.searchMonkey-mood {display:none;} table.profileInfo td td.text img.ImgOnlineNow {display:none;} </style> <style> .katamari Section Manager { http://abrax.us/SectionManager } .userProfileURL {display:none;} </style> <style> .katamari Section Manager { http://abrax.us/SectionManager } table.interestsAndDetails td.text {display:none;} table.interestsAndDetails span.lightbluetext8 {display:none;} .interestsAndDetails td {width:0px;} table.interestsAndDetails, table.interestsAndDetails td {border:0px;} table.interestsAndDetails table {background-image:url(null);} table.interestsAndDetails table {background-color:transparent;} table.interestsAndDetails td td {background-color:transparent;} </style> <style> .katamari Section Manager { http://abrax.us/SectionManager } table.userProfileDetail {display:none;} </style> <style> .katamari Section Manager { http://abrax.us/SectionManager } table.userProfileSchool {display:none;} </style> <style> .katamari Section Manager { http://abrax.us/SectionManager } table.userProfileCompany {display:none;} </style> <style> .katamari Section Manager { http://abrax.us/SectionManager } table.userProfileNetworking {display:none;} </style> <style> .katamari Section Manager { http://abrax.us/SectionManager } table.blurbs td.text {display:none;} table.blurbs td td span.orangetext15 {display:none;} </style> <style> .katamari Section Manager { http://abrax.us/SectionManager } .bodyContent tr {background-color:transparent;} .bodyContent table div br {line-height:0px;} </style> <style>.clearfix {margin-top: -100px;}</style> <p> <style>.a {MySpaceGens.com - hide your comments} .friendsComments {display:none;}</style> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="350" width="290" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="bgcolor" value="#000000" /> <param name="flashvars" value="userID=28942839&styleURL=http://static.twitter.com/flash/widgets/profile/velvetica.xml" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" height="350" width="290" align="middle" wmode="transparent" quality="high" bgcolor="#000000" flashvars="userID=28942839&styleURL=http://static.twitter.com/flash/widgets/profile/velvetica.xml" /> </object> How do I prevent framed html pages from coming up in a Google search? I made a site with Dreamweaver that has frames and within those frames I have different html pages that load into them. I came across an extension once which I believe prevented those pages from coming up in Google searches but cannot relocate it. These pages are just bare text and should not be accessed by themselves well my issue comes when you try to use ctrl-mouswheel to zoom in or out on my page. works fine in ie8 and ff3, but not in chrome and safari. there isnt really a need for this to work, except the fact that no professional website should have such a major error. http:www. fab-tennis .com click the book a lesson tab, its the easiest way to tell since its the longest page i have. sorry for the bright colors. when you zoom in or out, the iframe which is usually fits exactly between my header and footer, shrinks to a small box maybe 500px in height instead of having height:100% of the table cell that it is in. i would reccomend trying the zoom on ff then try it on chrome or safari to see what im talking about. HTML Code: <html> <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" bgcolor="#FFFF00" style="overflow-x: hidden; overflow-y: hidden;"> <link rel="stylesheet" type="text/css" href="css/basic.css" /> <!--[START HEADER]--> <div style="position:absolute; top:0px; left:0px; width:100%;"> <table align="center" class="Header" cellspacing="0" cellpadding="5" style="height:40px"> <tr align="center"> <td width="20%" class="headerLeft" id="1" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> home </td> <td width="20%" id="2" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> book a lesson </td> <td width="20%" id="3" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> biography </td> <td width="20%" id="4" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> qualifications </td> <td width="20%" class="headerRight" id="5" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> photos </td> </tr> </table> </div> <!--[END HEADER]--> <!--[START BODY]--> <table align="center" cellspacing="0" cellpadding="0" class="Body"><tr height="40px"><td></td></tr> <tr><td valign="middle" align="center"> <iframe name="iBody" id="iBody" marginheight="0px" marginwidth="0px" frameborder="0" scrolling="auto" allowtransparency="true" src="home.html" style="width:100%; height:100%; border:0px;"> BODY </iframe> </td></tr> <tr height="40px"><td></td></tr></table> <!--[END BODY]--> <!--[START FOOTER]--> <div style="position:absolute; bottom:0px; left:0px; width:100%"> <table align="center" class="Footer" cellspacing="0" cellpadding="5" style="height:40px"> <tr align="center"> <td width="20%" class="footerLeft" id="6" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> cancel lesson </td> <td width="20%" id="7" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> seven </td> <td width="20%" id="8" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> eight </td> <td width="20%" id="9" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> nine </td> <td width="20%" class="footerRight" id="10" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> ten </td> </tr> </table> </div> <!--[END FOOTER]--> <script type="text/javascript" src="javascript/basic.js"></script> </body> </html> Hello, I have a strange spacing issue that I am having trouble correcting. I have some weird spacing that shows up in Safari and Chrome. Doesn't show up in FF or IE. Look he http://www.digitalsomething.com Under the links in the header you'll see a white gap between the links and the search bar. The odd thing is if you look at the forums, the gap is gone: http://www.digitalsomething.com/forum Any ideas as to what is causing this? Greetings, If you access the following website http://www.chrisnieratko.com/ in IE / Firefox, you can view the site perfectly. However, with Chrome / Safari, you can't. You just see a bunch of code with ascii question marks. I know it's missing the doctype declaration, but is it the question marks that make it not visible for those browsers? (Chrome / Safari) When the site's pages are opened in notepad, textpad and notepad++, the question marks aren't there... so how do you eliminate them? Does anybody know of another editor that will view / edit these? Does anybody know if that's even the problem? How did they just appear out of nowhere? Most importantly; How would YOU fix this problem in the easiest way possible? (I'm guessing a certain type of text editor with a search function, then search / eliminate them and re-save the file?) Any help is MUCH appreciated! Thank you so much in advance for your time! Hi Guys, This is my first post on this forum. Basically, Ive agreed to turn someone website, into a joomla template, and then format articles and such until it looks exactly like the original site. This would give them the ability to add their own content without my help(I offered to redo the site, but they like their current one even though its quite bad). All was going well, and I sent out an email to check the progress of the site to the client, and he replied to me that the site was all distorted in Safari. Being a windows programmer, I was used to IE/firefox, Safari and the other browsers never really crossed my mind. Anyway, I downloaded safari, chrome and opera, and tested the sites out. Opera they were fine, but chrome and Safari, some things align WAYYY to the left, almost off screen. I'm guessing it may be a CSS issue, but Ive checked, rechecked, deleted, restored almost everything and its still messed up in those browsers! This is a paying client, so I need to get this sorted out as soon as possible. The pages in question are he http://www.longboardcapital.net/inde......7&Itemid=27 http://www.longboardcapital.net/inde......48&Itemid=2 Ive paused on content creation, as this is a big problem. Have any of you ever experienced the same or similar problem? can you all offer any suggestions? Thank you so much for your help, -Tim My site here is working in FF v3.5.9 but when I just recently loaded it in Safari and Chrome the page just doesn't work. I don't understand why because I developed it and tested it when using Safari and Chrome is built on Webkit too. http://www.meta.projectmio.com/sss.html It seems like a recent thing, but it still works in FireFox so I don't know what's going on? Any ideas? PROBLEM SOLVED Hi All, I am new to this forum and is expecting an answer for this question. I have implemented a facebook type search to the database which displays the familiar text saved in the database when I type some text in the database. My issue is after I have used the search box for a couple of time the text box starts displaying a similar dropdown from its history which hides my database search. Does anyone know how to disable it using html or css. See the attached Image if my question is not clear. http://www.htmlforums.com/attachment...1&d=1306715905 It works great in Firefox, IE, and even on my iPhone (Safari), but it's having problems in Chrome and on my friend's Mac (Safari). I have a form with 2 tables inside. The first table is aligned left at 47% of the width. The second table is aligned right at 47% of the width. It should look like this: But instead looks like this in Chrome and Safari...it appears that it's centering both tables instead of aligning them left and right to give 2 separate columns. Any ideas? Here is some of my stripped down code: ----------------------------------- <div id="FormLayer" style="position:absolute; width:680px; height:455px; z-index:3; left: 65px; top: 330px; border:0"> <form action="form.php" method="post" name="orderform" id="orderform"> <input type="hidden" name="recipients" value="email.com"> <input type="hidden" name="required" value="actor:Actor's Name, email:Your Email=confirm:The emails you entered did not match, show:Name of the Show, episode:Your Episode|date:Air Date, character: Character's Name, description: Description of Scenes"> <input type="hidden" name="good_url" value="success.htm"> <table width="47%" align="left" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="actor"><span class="style2"> Actor's Name:</span></label> </div> </td> </tr> <tr> <td><input name="actor" type="text" id="actor" size="40" maxlength="50"></td> </tr> <table width="47%" align="right" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="character"><span class="style2"> Character's Name:</span></label> </div> </td> </tr> <tr> <td><input name="character" type="text" id="character" size="40" maxlength="50"></td> </tr> </table> </form> I am working on a website and so far it is coming together the way I intended. Looks good on Chrome, and Safari. IE is not right yet but it looks as expected since I haven't done the IE style sheet yet. However, Firefox is producing a completely unexpected problem. http://nickbogatin.com I will post code but I don't even have an idea as to where the error is yet. Help would be appreciated. Nick there is my code. any reason why it looks good in chrome/safari but it looks bad in mozilla? in mozilla it has a bunch of lines going through it and the images are all seperated. any help would be much appreciated. Thanks, George 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> <title>share</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> body { background-color: #ffffff; background-image: url(../background-for-website.png); background-repeat: repeat-x; } #apDiv1 { z-index:1; } </style> </head> <body> <!-- Save for Web Slices (share.psd) --> <center> <table id="Table_01" width="792" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img id="share_01" src="images4/share_01.png" width="791" height="155" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="155" alt="" /></td> </tr> <tr> <td colspan="5"> <img id="share_02" src="images4/share_02.png" width="791" height="137" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="137" alt="" /></td> </tr> <tr> <td colspan="5"> <img id="share_03" src="images4/share_03.png" width="791" height="142" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="142" alt="" /></td> </tr> <tr> <td colspan="3" rowspan="2"> <img id="share_04" src="images4/share_04.png" width="544" height="70" alt="" /></td> <td> <div class="apDiv" id="apDiv"><a href="http://www.facebook.com/sharer.php?u=https://www.facebook.com/pages/itunes-cards-for-free/200510223345141" target="_blank"> <img id="share_05" src="images4/share_05.png" width="137" height="21" alt="" /> </a></div> </td> <td rowspan="4"> <img id="share_06" src="images4/share_06.png" width="110" height="257" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="21" alt="" /></td> </tr> <tr> <td rowspan="3"> <img id="share_07" src="images4/share_07.png" width="137" height="236" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="49" alt="" /></td> </tr> <tr> <td rowspan="2"> <img id="share_08" src="images4/share_08.png" width="319" height="187" alt="" /></td> <td><a href="../page 5/redeem.html"><img src="images4/button.png" onmouseover="this.src='images4/button-3.png'" onmouseout="this.src='images4/button.png'"/></a> </td> <td rowspan="2"> <img id="share_10" src="images4/share_10.png" width="75" height="187" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="30" alt="" /></td> </tr> <tr> <td> <img id="share_11" src="images4/share_11.png" width="150" height="157" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="157" alt="" /></td> </tr> </table> </center> <!-- End Save for Web Slices --> </body> </html> |