Form dynamics broken in Firefox
I am currently in the process of creating a simple CMS designed specifically for the needs of my customer. The overall design uses a mysql database to store the page data in a table, and then those pages are accessed and displayed using AJAX. I have come to the part where I need to add the 开发者_高级运维page editing features, And as part of that I need a form that has a list of all the current pages in the site, so the user can select the page to edit (as well as other functions) The way it currently works the browser make a request for the "admin" or edit page and then the PHP then constructs the form according to the required parameters, stores it as a string of html, and returns it via "echo." (once again, using AJAX)
The First test put all the rows in the "page" table into an HTML select box. The second attempt was to list all the rows in a div with overflow:auto.
In both cases things worked without flaw in IE, but Firefox does not allow the select box to open, or the div to scroll.
any Ideas?
Thanks
EDIT:
Heres the code. I did some further testing to try and remove anything that could be causing the problem. I copied the code generated by the php and saved it as an html document. It continued to exhibit the same behavior in firefox. I removed all the javascript so it was just HTML. the only thing that caused it to work properly was when I copied the html file onto my desktop (so it was no longer on my xampp webserver.) this caused the form to work again.
EDIT: again: It seems to be related to my CSS document, but I cant figure out what in my CSS would be causing the form to break. ideas?
Heres the HTML and the CSS below that:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>On Semiconductor Corporate IP Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/headerCSS.css">
</head>
<body>
<div id="header">
<div id="header_top_layer"> <!-- SET WITH HERE -->
<div id="logo"></div>
<div id="title_wrapper">
<div id="page_title">
<div id="large_text">Corporate R&D</div>
<div id="small_text">Intellectual Property</div>
</div>
</div>
</div>
</div>
<div class="clear_float"></div>
<div class="clear_float"></div>
<div id="main_container">
<div id="background">
<div id="container"> <!-- SET WITH HERE -->
<div id="sidebar">
</div>
<div id="main">
<div id="content">
<form action="" method="post">
<input name="lastname" type="text"><br>
<select id="selectBox">
<option value="1">Home</option>
<option value="2">Foundation IP</option>
<option value="3">Memories</option>
<option value="4">Analog IP</option>
<option value="5">System IP</option>
<option value="6">Search</option>
<option value="7">Login</option>
<option value="8">Admin</option>
</select><br>
<input value="Submit" type="submit">
</form>
</div>
</div>
</div>
</div>
<div id="bottom_bookend">
<div id="bbColor"></div>
<img src="Images/bottomDiagonal.png" id="bbImage">
</div>
</div>
And the CSS in a pastebin because it was rather long:
http://pastebin.com/7hBiWz85
I too believe you should turn your focus out of database and anything else and concentrate in html only.
You already know browsers do have differences, I remeber my self having the same problem with select boxes in firefox and after trying different things I solved it. For example (if I am not wrong there are two different syntax for selected)..
As for div I have found that the most reliable divs that work well every where are those defined as absolute position, and luckily I discovered that building pages with absolute position was much more easier, simplier and cleaner for me!
Turns out it was a layering problem and I'm just a moron.
In my CSS I made the container with the form in it have a z-index of -2. This caused another div to be on top of the form preventing the user from clicking on the form elements.
Thank you to whoever looked at this question.
加载中,请稍侯......
精彩评论