Fmdpa Posted June 8, 2010 Share Posted June 8, 2010 I have some inputs placed in a div (text box, and a couple buttons), and for some reason, the buttons are not clickable, and the text-boxes are not able to be written in. I've played around with z-indexs, but to no avail. Link to comment Share on other sites More sharing options...
Synook Posted June 8, 2010 Share Posted June 8, 2010 Do you have any code? Link to comment Share on other sites More sharing options...
Fmdpa Posted June 8, 2010 Author Share Posted June 8, 2010 In a simplified form, here it is: <html>.....<body><div> <!--the div containing everything in the body--> <div> <!--the div that is causing issues--> <input type="text" size="20"> <!--does not accept text, or even show the text cursor onmouseover--> <br/> <input type="button" value="submit"> <!--completely ignores the button too.--> </div></div></body></html> Link to comment Share on other sites More sharing options...
Fmdpa Posted June 8, 2010 Author Share Posted June 8, 2010 The form works without the div, but it looks so good with the div and formatting that I can't part with it! Link to comment Share on other sites More sharing options...
Synook Posted June 8, 2010 Share Posted June 8, 2010 What about the rest of your page? And the CSS? Of course the simplified form is not going to cause any problems... Link to comment Share on other sites More sharing options...
Fmdpa Posted June 8, 2010 Author Share Posted June 8, 2010 Just a minute... Link to comment Share on other sites More sharing options...
Fmdpa Posted June 8, 2010 Author Share Posted June 8, 2010 I figured it out! I've found that just narrowing it down, by deleting parts of the document and/or the stylesheet works really well for diagnosing the issue. But while I am at it, I might as well ask a question about a stylesheet related issue. I have by background set for a certain file: body {background: #000 url('bg.jpg') no-repeat center top;} But when I change it to something else... body {background: #000 url('new.jpg') no-repeat center top;} ...it keeps the same image for the background. I've cleared the browser cache, restarted the browser, everything I can think of! But the image still remains unchanged, or, in most situations it doesn't display any image at all, even though the paths are correct...etc. But when I embed the stylesheet in the document, I can change the background-image just fine! Link to comment Share on other sites More sharing options...
Synook Posted June 8, 2010 Share Posted June 8, 2010 Are you sure there isn't another rule that is overriding it? Use a debugging application (Firebug / Webkit inspector) to check what rules are actually being applied to an element. Link to comment Share on other sites More sharing options...
Fmdpa Posted June 8, 2010 Author Share Posted June 8, 2010 Here's the stylesheet: ::selection { background: #7f7f7f; color: #dfdfdf; } ::-moz-selection { background: #7f7f7f; color: #dfdfdf; } /*this is the body and the body div formatting*/ body {background:#000;} .menu {width:960px;height:2000px; margin: 0 auto; overflow:hidden; background:#000 url('SRC/new.jpg') no-repeat center top;} /*end (btw, this works just fine when embedded into the <head> section of the webpage:<style type="text/css">...</style>, but when linked:<link rel="stylesheet" type="text/css" href="styles/style.css">...the background doesn't display correctly.)*/ /*here's the rest of the stylesheet...*/ ul.tabs {position:relative; top:244px; left:-40px; z-index:3; display:inline;} ul.tabs,li {display:inline;} #a{ position:relative; left:0px; } #b{ position:relative; left:-20px; } #c{ position:relative; left:-30px; } #d{ position:relative; left:-50px; } #e{ position:relative; left:-60px; } #f{ position:relative; left:-75px; } .tab { width:150px; height:75px; border:none; } .thumb { width:100px; height:100px; opacity:0.5; filter:alpha(opacity=50); position:relative; border:5px solid #515151; } img.thumb:hover { border-color:#414141; } p { font-family:Calibri; font-size:15px; color:#fff; } hr { text-align:center; width:500px; } a:link,a:visited { text-decoration:none; color:#757575 } a:hover,a:active { text-decoration:none; color:#cbcbcb } Link to comment Share on other sites More sharing options...
Fmdpa Posted June 8, 2010 Author Share Posted June 8, 2010 Aha! Thanks to a debugger, I found out that when I did <link rel="stylesheet" href="styles/style.css">, and in the stylesheet was a reference to the bg image ('emp3.jpg') it was reading it as http://localhost/styles/emp3.jpg. The reason emp3.jpg was displaying was because, unknown to me, there was an emp3.jpg in that folder, but not a new.jpg. Isn't it funny how I resolve my issues as I post them? Thanks for the suggestion about the debugger. I was using one, but just not the right way. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.