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:
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.