SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Thread: Forms

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Forms

    Hey,
    Can anyone help me figure out why this has happened to my form elements. There is nothing in any css on the site to do this to them. They are like this in all major browsers. The image is attached.

    Thanks

    Neil
    Attached Images Attached Images

  2. #2
    I'm not a kid WebDesignGold's Avatar
    Join Date
    Feb 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not able to see the attached image.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome back, WDG!

    Neil, we're going to have to wait until the attachment is approved. In the meantime, can you post the HTML/CSS code for the form?

  4. #4
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the for the simple form:

    <!--Ride Option Box-->
    <div class="center">

    <?php
    // do query to get id to pass to address bar
    $result = mysql_query("SELECT ride_id, ride_name FROM

    atm_rides ORDER BY ride_name asc") or die('Error, query failed');
    ?>

    <form method="get" action="detail_ride.php">

    <select name="ride_id">
    <optgroup label="::Select a Ride::">

    <?php
    // go through the database and while there are different rides add them to the list dynamically.
    while ($row = mysql_fetch_array($result)) {

    // $ride_id is the variable that the detail_ride.php page will look for and then use that id to display the right data.
    $ride_id=$row['ride_id'];

    echo '<option value="' . $ride_id . '">' . $row['ride_name'] . '</option>';

    }
    ?>

    </optgroup>
    </select>

    <input name="submit" type="submit" value="Go to Ride" />
    </form>

    </div>
    <!--End ride Option Box-->

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the HTML output of that PHP script instead?

  6. #6
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the HTML output:

    <form method="get" action="detail_ride.php">

    <select name="ride_id">
    <optgroup label="::Select a Ride::">

    <option value="55">4 Man Bob</option><option value="10">Air</option><option value="57">Alton Mouse</option><option value="32">Beastie, The</option><option value="21">Berry Bish Bash</option><option value="42">Blade, The</option><option value="36">Bouncing Bugs</option><option value="50">Cable Cars</option><option value="16">Charlie & The Chocolate Factory: The Ride</option><option value="53">Cine 360</option><option value="2">Congo River Rapids</option><option value="20">Corkscrew, The</option><option value="49">Dinosaurland</option><option value="28">Doodle Doo Derby</option><option value="5">Duel - The Haunted House Strikes Back</option><option value="59">Dung Heap, The</option><option value="33">Enterprise</option><option value="3">Flume, The</option><option value="37">Frog Hopper</option><option value="35">Gallopers Carousel</option><option value="60">Haunted Hollow, The</option><option value="34">Hex - The Legend of the Towers</option><option value="56">Mississippi Showboat</option><option value="22">Monorail</option><option value="1">Nemesis</option><option value="9">Oblivion</option><option value="58">Paddling Pool</option><option value="48">Peugeot 207 Driving School</option><option value="26">Ripsaw</option><option value="19">Rita - Queen of Speed</option><option value="27">Riverbank Eye-Spy Express</option><option value="17">Runaway Mine Train</option><option value="51">Rupert Bear Magic Show</option><option value="54">Sea lions</option><option value="29">Singing Barn</option><option value="23">Skyride</option><option value="7">Spinball Whizzer</option><option value="25">Splash Kart Challenge</option><option value="31">Squirrel Nutty Ride</option><option value="4">Submission</option><option value="24">Teacups</option><option value="52">The Ferris Wheel</option><option value="47">Thunderlooper</option><option value="30">Tractor Ride</option><option value="18">Ug Swinger</option>
    </optgroup>
    </select>

    <input name="submit" type="submit" value="Go to Ride" />
    </form>

    This problem is happening on all form elements throughout the site. The elements are there and work perfectly, It's just how they are displayed which is wrong. They also show up wrong in IE6, IE7, FF and Opera. The screenshot I gave above was from IE7.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which is still pending approval.

  8. #8
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way, is that the entire form?

  10. #10
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are 3 small forms oe for each of the dropdowns and the submit button at the side. The code i posted is just for one of them but the code isidentical really. As i said the problem is occuring to every form element on the site.

  11. #11
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone help with this?

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Neil, I got sidetracked by a client. Let me take another look at what needs to be done.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    There is nothing in any css on the site to do this to them
    Do you have a link to the site so we can see for ourselves?

    You say they look like that in all major browsers but as far as I know it is impossible to style selects like that in IE, firefox and opera on the PC so I'm a little confused.

  14. #14
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will post the entire of both stylesheets which are being used on the site:

    This one is the main css file:

    Code:
    /* Alton Towers Mania */
    /* www.atmania.com */
    /* Layout and Links CSS Document */
    
    /*
    p
    {
    position: relative;
    }
    */
    
    * /*This sets the font type and size and also resets all margins, paddings and borders to 0px for all elements. It also justifies any text.*/
    {
    font-family:							Arial, Verdana, Geneva, sans-serif;
    font-size: 								10pt;
    margin: 								0px;
    padding: 								0px;
    border: 								0px;
    text-align: 							justify;
    }
    
    #date
      {
      position:								block;
      height:								auto;
      width:								auto;
      margin-left:							+660px;
      margin-top:							-25px;
      margin-bottom:						10px;
      /*border: 							black solid 1px;*/
      }
      
    body /*This makes the background lightblue and tiles the dark to light blue blend image horizinatally accross the top of the site.*/
    {
    background: 							#2a97dc;
    background-image: 						url(../img/layout/sitebg.jpg);
    background-repeat: 						repeat-x;
    }
    
    #bigwrapper /*This is not currently used.*/
    {
    /*- - - - - - -*/
    }
    
      
    #container /*This sets the width of the site, centers the main division, gives it a black border and sets a vertically repeating main background image.*/
    {
    margin-right: 							auto;
    margin-left: 							auto;
    width: 									765px;
    border: 								1px solid black;
    overflow: 								auto;
    background: 							#ffffff url(../img/layout/mainbackground.jpg) repeat-y;
    }
    
    #container a:link, #container a:visited, #container a:active /*This sets the styles for all links in the container div to black with an underline.*/
    {
    color: 									#000000;
    text-decoration: 						underline;
    }
    
    #container a:hover /*This makes the links in the container div change to a blue colour when they are hovered over.*/
    {
    color: 									#00ccff;
    }
      
    #navigation /*This creates the navigation bar division which is 150px wide and floated to the left.*/
    {
    float: 									left;
    width: 									150px;
    height: 								100%;
    }
      
    #navigation a:link, #navigation a:visited, #navigation a:active /*This sets the styles for all links in the navigation div to lightblue with an underline.*/
    {
    color: 									#00ccff;
    text-decoration: 						none;
    }
    
    #navigation a:hover /*This makes the links in the navigation div change to have an underline when they are hovered over.*/
    {
    text-decoration: 						underline;
    }
    
    #navigation /*This justifies all text within the navigation div and sets it's colour to light blue.*/
    {
    text-align:								justify;
    color: 									#00ccff;
    }
    
    .navlink /*This aligns all text with this class to be left aligned*/
    {
    text-align: 							left;
    }
    
    .navigation_padding /*This adds 5px padding to the left and right when assigned this class.*/
    {
    padding-left: 							5px;
    padding-right: 							5px;
    }
    
    
      
    #content /*This sets the content division to be 165px from the left and 15px from the right. The background colour is white and the top and bottom margins are 0*/
    {
    margin-left: 							165px;
    margin-right: 							15px;
    background-color: 						#FFFFFF;
    margin-top: 							0px;
    margin-bottom: 							0px;
    }
    
    .center /*This sets anything with this class assigned to be centered.*/
    {
    text-align: 							center;
    margin-left: 							auto;
    margin-right: 							auto;
    }
    
    
    
    
    
    
    
    
    
    .infobox
    {
    margin-left: 							auto;
    margin-right: 							auto;
    width: 									90%;
    border: 								solid 1px #012349;
    background-color: 						#99CCFF;
    padding: 								5px;
    }
    
    .big_table_heading
    {
    font-size: 								large;
    text-align:								center;
    color: 									#00ccff;
    }
    
    
    
    .advertboxheader
    {
    width: 									50%;
    border: 								solid 1px #012349;
    background-repeat:						repeat-x;
    background-color:						#012349;
    background-image: 						url(../img/layout/barblend.jpg);
    padding: 								1px;
    margin-right: 							auto;
    margin-left: 							auto;
    }
    
    .advertboxcontent
    {
    width: 									50%;
    border: 								solid 1px #012349;
    background-color: 						#ffffff;
    padding:								1px;
    margin-right: 							auto;
    margin-left: 							auto;
    }
    
    .advertboxcontentinside
    {
    padding: 								5px;
    }
    
    .standard_table
    {
    border-collapse: 						collapse;
    border: 								solid 1px #012349;
    text-align: 							center;
    width: 									90%;
    }
    
    .standard_table th, tr
    {
    border-collapse: 						collapse;
    border: 								solid 1px #012349;
    text-align: 							center;
    }
    
    .standard_table td
    {
    padding:								5px;
    border:									solid 1px #000000;
    border-collapse:						collapse;
    text-align:								center;
    }
    
    .table_header
    {
    background-color:						#012349;
    background-image: 						url(../img/layout/barblend.jpg);
    background-repeat:						repeat-x;
    }
    
    .ride_heading
    {
    font-size: 								xx-large; 
    text-align:								center;
    color: 									#000000;
    }
    
    .left_smaller_heading
    {
    font-size: 								x-large; 
    text-align:								left;
    color: 									#000000;
    }
    
    .tab_surround
    {
    /*border: 								1px solid black;*/
    width:									99%;
    }
    
    .no_table
    {
    border: 								0px;
    }
    
    .no_table th, td, tr
    {
    border: 								0px;
    }
    
    ul
    {
    list-style-type: 						none;
    padding: 								0;
    margin: 								0;
    }
    
    
    li
    {
    background-image: 						url(../img/small_graphics/dottedarrow.gif);
    background-repeat: 						no-repeat;
    background-position: 					0 .3em;
    padding-left:							15px;
    }
    
    .strikethrough
    {
    text-decoration: 						line-through;
    }
    
    .center_list
    {
    width: 									60%;
    margin-left: 							200px;
    margin-right: 							auto;
    }
    
    .black_border
    {
    border:									solid 1px #000000;
    }
    
    .photo
    {
    margin-left:									5px;
    margin-bottom:									5px;
    }







    this one is used to style a tab control. I did not write this:

    Code:
    /*
    
    bright: rgb(234,242,255);
    normal: rgb(120,172,255);
    dark:	rgb(0,66,174);
    
    */
    
    
    
    
    .dynamic-tab-pane-control.tab-pane {
    	position:	relative;
    	width:		100%;
    }
    
    .dynamic-tab-pane-control .tab-row .tab {
    	font-family:	Verdana, Helvetica, Arial;
    	font-size:		12px;
    	cursor:			Default;
    	display:		inline;
    	margin:			1px -5px 1px 5px;
    	float:			left;
    	padding:		3px 6px 3px 6px;
    	background:		rgb(234,242,255);
    	border:			1px solid;
    	border-color:	rgb(120,172,255);
    	border-left:	0;
    	border-bottom:	0;
    	border-top:		0;
    	
    	cursor:			hand;
    	cursor:			pointer;
    	
    	z-index:		1;
    	position:		relative;
    	top:			0;
    }
    
    .dynamic-tab-pane-control .tab-row .tab.selected {
    	border:			1px solid rgb(120,172,255);
    	border-bottom:	0;
    	z-index:		3;
    	padding:		2px 6px 5px 6px;
    	margin:			1px -6px -2px 0px;
    	top:			-2px;
    	background:		white;
    }
    
    .dynamic-tab-pane-control .tab-row .tab a {
    	font-family:		Verdana, Helvetica, Arial;
    	font-size:			13px;
    	color:				rgb(0,66,174);
    	text-decoration:	none;
    	cursor:			hand;
    	cursor:			pointer;	
    }
    
    .dynamic-tab-pane-control .tab-row .hover a {
    	color:	rgb(0,66,174);
    }
    
    .dynamic-tab-pane-control .tab-row .tab.selected a {
    	font-weight:	bold;
    }
    
    .dynamic-tab-pane-control .tab-page {
    	clear:			none;
    	border:			1px solid rgb(120,172,255);
    	background:		White;
    	z-index:		2;
    	position:		relative;
    	top:			-2px;
    	color:			Black;
    	font-family:	Verdana, Helvetica, Arial;
    	font-size:		13px;
    	padding:		10px;
    }
    
    .dynamic-tab-pane-control .tab-row {
    	z-index:		1;
    	white-space:	nowrap;
    	background:		rgb(234,242,255);
    	height:			1.85em;
    	width:			100%;
    }

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The form elements are having their borders, margins and padding removed from here:

    Code:
    * /*This sets the font type and size and also resets all margins, paddings and borders to 0px for all elements. It also justifies any text.*/
    {
    font-family:                            Arial, Verdana, Geneva, sans-serif;
    font-size:                                 10pt;
    margin:                                 0px;
    padding:                                 0px;
    border:                                 0px;
    text-align:                             justify;
    }
    Is that what you meant ?

    If so you will need to use a reset css system instead of the universal selector.

  16. #16
    I'm not a kid WebDesignGold's Avatar
    Join Date
    Feb 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Welcome back, WDG!
    Thanks Dan

    rctneil, I hope you've solved the issue by now with the help provided by our CSS Guru Paul O'B.

  17. #17
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh, Cheers for that. Problem solved!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •