SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two dumb IE/Firefox problems

    Ok so I have got most of this site done, But now I have hit a wall with these two IE/ Firefox Display problems.
    The first is that Firefox is putting a line brake between the Head & footer part of the boxes on the pages, I have tryed removing the returns out of the code, what does alter it is if I but a border on the top and bottom of the central container, this will close the gap up but show the border width. This displays fine in IE.
    The other issue is with the form on the contact page. the spacing between the fields is appering diferent in Firefox and IE, they are wider apart in IE. this is a problem beacuse the image on the right uses some absolute positioning so it sits against the bottom of the main frame, and the difference in spacing alters the height of the frame.

    There is also an issue with loads of extra horizontal space being added in Firefox for some reason, but this hasn't effected the layout.

    Site CSS

    Thanks for any ideas people my have.

  2. #2
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #left-col .txt-box p {
    width: 360px;
    margin: 0px 0 5px 20px;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,782
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    There is also an issue with loads of extra horizontal space being added in Firefox for some reason, but this hasn't effected the layout
    You have placed a span at 100% width but because the parent is not position:relative then it is not contained within the parent.


    Code:
    h1.headreplace {
    height: 25px;
    overflow: hidden;
    margin-left: 40px;
    position:relative;
    }
    The other gaps are just the default margins of elements that need to be taken into account. You should st all margins and padding to zero by default as the first line of code before you do anything.
    Code:
    * {margin:0;padding:0}
    Then just define them as you go and as you need them.

    You should place that picture absolutely at the bottom of the parent container by giving the parent container a position:relative. Then it will always be at the bottom no matter what content is in the parent. (IE will be 1 px out dues to a rounding bugdepending if the image lands in an odd or even pixel.)

    Don't use breaks with the clearer class because you can't reduce the height of the break in ie. use divs instead.

    You have set the height of the p's in the paragraphs to 10px but ie will only render the line at the current font-size unless you use overflow:hidden. You don't need the height in there anyway and the browsers will more or less look the same.

    Here's a quick fix but I haven't been that careful

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>The Patient Connection - Using the Panel - Types of Projects</title>
    <link rel="stylesheet" href="patient-screen.css" type="text/css" media="screen"/>
    <!--<link rel="stylesheet"  href="patient-print.css" type="text/css" media="print" />-->
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="description" content="Site Description" />
    <meta name="keywords" content="Page Key words" />
    <style type="text/css" media="screen" >
    /* HTML Elements */
    * {margin:0;padding:0}
    body {
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     height: 100%;
     background: White;
     color: #000000;
     text-align: center; /*this will center ALL items on the page in IE but only text in Moz etc.*/
    }
    p, li{
     text-align: left;
     font: normal 10px/15px Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    h1 {
     text-align: left;
     font: normal bold 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
     color: #0072bc;
     padding: 0 0 0 0;
     margin: 10px 0 0 0;
    }
    .clear {
     clear: both;
     height: 1px;
     overflow: hidden;
    }
    .hilighted {
     font-weight: bold;
     color:#107ac0;
    }
    .b {
     color:#01477c;
    }
    form {
     margin: 0 0 0 0;
     padding: 0 0 0 0;
    }
    /*css layout elements*/
    #top { 
     background: #d8d1e1 url(http://www.designed4hits.com/dev/pat...frame-head.gif) no-repeat center;
     width:784px;
     height:21px;
     overflow: hidden;
     margin-right: auto;/*centres in compliant browsers*/
     margin-left: auto;/* " " */
     }
    /*'HTML' pages */
    #nav {
     width: 100%;
     background: #d8d1e1 url(http://www.designed4hits.com/dev/pat...d-nav-tile.gif) repeat-x bottom;
    }
    #nav #bar {
     width:784px;
     height:114px;
     background: url(http://www.designed4hits.com/dev/pat...s/bgnd-nav.gif) no-repeat 1px;
     overflow: hidden;
     margin-right: auto;/*centres in compliant browsers*/
     margin-left: auto;/* " " */
    }
    #main-cont { 
     background: url(http://www.designed4hits.com/dev/pat...-plaintile.gif) repeat-y 1px;
     width:784px;
     margin-right: auto;/*centres in compliant browsers*/
     margin-left: auto;/* " " */
     margin-bottom: 0;
     padding-bottom: 4px;
     text-align: left;
    }
    #left-col {
     float: left;
     width: 429px;
     height: auto;
     margin: 3px 0 3px 0;
    }
    #left-col ul { 
     list-style: disc outside;
     margin: 3px 0 3px 5px;
     padding: 0 0 0 10px;
    }
    #left-col ul li { 
     color: #b6a7ca;
     }
    #left-col ul li span {
     color: Black;
    }
    #left-col p {
     margin: 2px 0 10px 40px;
    }
    .box-head { 
     background: url(http://www.designed4hits.com/dev/pat...d-cube-top.gif) no-repeat bottom center;
     width: 409px;
     height: 15px;
     margin: 0 0 0 25px;
     overflow: hidden;
    }
    #left-col .txt-box { 
     background: url(http://www.designed4hits.com/dev/pat...-cube-cont.gif) repeat-y center;
     width: 409px;
     margin: 0 0 0 25px;
     position: relative;
    }
    #left-col .txt-box p {
     width: 360px;
     margin: 2px 0 5px 20px;
    }
    .txt-box h1 {
     margin: 2px 0 2px 20px;
    }
    #left-col .txt-box ul { 
     list-style: disc outside;
     margin: 3px 20px 3px 15px;
     padding: 0 0 0 12px;
    }
    #left-col .txt-box ul li {
     margin-top: 5px;
     margin-bottom: 3px;
    }
    .box-foot { 
     background: url(http://www.designed4hits.com/dev/pat...-cube-foot.gif) no-repeat top center;
     width: 409px;
     height: 23px;
     margin: 0 0 0 25px;
     overflow: hidden;
    }
    
    #left-col ul.subnav {
     display: block;
     padding: 0 0 0 0;
     margin: 5px 0 10px 35px;
     list-style: none;
    }
    #left-col ul.subnav li {
     float: left;
     margin-right: 10px;
    }
    #left-col ul.subnav li a {
     display: block;
     padding: 0 5px 0 5px;
     border: 1px solid #b6a7ca;
    }
    #left-col ul.subnav li a:link, #left-col ul.subnav li a:active, #left-col ul.subnav li a:visited {
     text-decoration: none;
    }
    #left-col ul.subnav li a:hover {
     background-color: #efecf3;
    }
    #main-cont{position:relative;}
    .right-pic {
     position: absolute;
     right: 19px;
    bottom:0px;
    }
    /* Single col page */
    #single-col {
     width:705px;
     margin-right: auto;/*centres in compliant browsers*/
     margin-left: auto;/* " " */
    }
    #single-col .faq-block { background: #efecf3 url(http://www.designed4hits.com/dev/pat...cs/faq-fil.gif) repeat-y left; }
    #single-col .faq-block h2 { 
     background: url(http://www.designed4hits.com/dev/pat...s/faq-head.gif) no-repeat top left;
     margin: 0 0 0 0;
     padding: 11px 0 5px 21px;
     color: #107ac0;
     font: bold 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
     display: block;
     }
    #single-col .faq-block span.faqcont { 
     border-top: 1px solid #b7a8cb;
     width: 655px;
     margin-left: 21px;
     padding-top: 4px;
     display: block;
    }
    #single-col .faq-block span.faqcont p {
     width: 654px;
    }
    #single-col .faq-block p.faqfoot { 
     background: url(http://www.designed4hits.com/dev/pat...s/faq-foot.gif) no-repeat bottom left;
     display: block;
     text-align: right;
     margin: 0 0 0 0;
     padding: 0 18px 19px 0 
    }
    p.faqfoot a:link, p.faqfoot a:active, p.faqfoot a:visited, 
    .txt-box p a:link, .txt-box p a:active, .txt-box p a:visited,
    #left-col p a:link, #left-col p a:active, #left-col p a:visited
     {
     color: #0072bc;
     font-weight: bold;
     text-decoration: none;
     border-bottom: 1px solid #A52A2A;
    }
    p.faqfoot a:hover, .txt-box p a:hover, #left-col p a:hover {
     color: #a091b4;
     font-weight: bold;
     text-decoration: none;
     border-bottom: 1px solid #0072bc;
     }
    /* head replace (suported by 'on page' CSS) */
    h1.headreplace {
     height: 25px;
     overflow: hidden;
     margin-left: 40px;
    position:relative;
    }
    #single-col h1.headreplace {
     margin-left: 0;
    }
    .txt-box h1.headreplace {
     margin-left: 20px;
    }
    h1.headreplace span {
     position: absolute;
     width: 100%;
     height: 100%;
    }
    /*'Flash home' page*/
    body#home {
     background: White url(http://www.designed4hits.com/dev/pat.../page-bgnd.gif) repeat-x fixed top;
    }
    body#home #main-cont { 
     background: url(http://www.designed4hits.com/dev/pat...frame-bgnd.gif) no-repeat 1px;
     width:784px;
     height:738px;
     overflow: hidden;
     margin-right: auto;/*centres in compliant browsers*/
     margin-left: auto;/* " " */
     text-align: center;
     padding-bottom: 0;
    }
    /*Contact Form*/
    .multiline-field {
     width: 200px;
     height: 98px;
     font: 11px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    #form-container {
     float: left;
     width: 380px;
    }
    #form-container form p  {
     clear: both;
     margin: 3px 0 2px 0;
     overflow:hidden
    }
    #form-container form p label {
      float: left;
      width: 34%;
      text-align: right;
      margin-top: 5px;
    }
    #form-container form p.wide label {
      width: 100%;
      text-align: left;
    }
    #form-container form p span.formw  {
      float: right;
      width: 65%;
      text-align: left;
    }
    .singleline-field {
     width: 200px;
     height: 12px;
     font: 11px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
       margin: 3px 0 2px 0;
     padding: 0 0 0 0;
     display: inline;
    }
    select.singleline-field {
     width: 206px;
     height: 20px;
    }
    /*footer*/
    #foot {
     background: url(http://www.designed4hits.com/dev/pat...frame-foot.gif) no-repeat 1px 0;/*bgnd-altfoot.gif*/
     width:784px;
     height: 30px;
     margin-right: auto;/*centres in compliant browsers*/
     margin-left: auto;/* " " */
     overflow: auto;
     }
    body#home #foot {
     height: 27px;
     background-image: url(http://www.designed4hits.com/dev/pat...frame-foot.gif);
    }
    #foot p {
     text-align: center;
     margin-top: 8px;
     color: #aab0b6;
     font: 10px verdana, arial, helvetica, sans-serif;
    }
    body#home #foot p {
     margin-top: 4px;
    }
    #foot p a:link, #foot p a:visited, #foot p a:active {
     color: Black;
     text-decoration: none;
    }
    #foot p a:hover {
     text-decoration: underline;
    }
     
    /* All code (C) Antony Ellam, Designed4hits 2005 */
    h1.head1 {
    	width: 95px;
     }
    h1.head1 span {
    	background: url(http://www.designed4hits.com/dev/pat...ad-contact.gif) no-repeat;
    }
    #left-col .txt-box p {
    width: 360px;
    margin: 0px 0 5px 20px;
    }
    </style>
    <script type="text/javascript" src="<A href="http://www.designed4hits.com/dev/patientconnection/js/ufo.js"></script">http://www.designed4hits.com/dev/patientconnection/js/ufo.js"></script>
    </head>
    <body>
    <div id="nav">
      <div id="top"></div>
      <!--/#top-->
      <div id="bar">
    	<script type="text/javascript">
      var FO = { movie:"flash/sub-nav.swf", width:"746", height:"114", xi:"true", ximovie:"flash/ufo.swf", majorversion:"8", build:"0" };
    	UFO.create(FO, "flashnav");
      </script>
    	<div id="flashnav">
    	  <!--/#flashnav Holder for NON Flash content-->
    	  This is replaced by the Flash content. Place your alternate content here and users without the Flash plugin or with Javascript turned off will see this. tags. </div>
    	<!--/#flashnav-->
      </div>
      <!--/#bar-->
    </div>
    <!--/#nav-->
    <div id="main-cont">
      <div id="left-col">
    	<h1 class="headreplace head1"><span></span>Contact us</h1>
    	<p>83 Victoria Street<br />
    	  Westminster<br />
    	  London<br />
    	  SW1H 0HW<br />
    	  UK </p>
    	<p>Tel: <strong>+44 20 3008 8190</strong>.</p>
    	<p><a href="<A href="mailto:info@thepatientconnections.com">info@thepatientconnections.com</a></p">mailto:info@thepatientconnections.com">info@thepatientconnections.com</a></p>
    	<p><a href="www.multimap.com/map/browse.cgi?lat=51.4974&amp;lon=-0.1348&amp;scale=10000&amp;icon=x" target="_blank">Location Map</a></p>
    	<p>We are happy to provide a quotation or simply to arrange a meeting.</p>
    	<div class="box-head"></div>
    	<div class="txt-box">
    	  <p>If you wish to be placed on our mailing lists please enter your details here and you will receive news of our developments from time to time.</p>
    	  <div id="form-container">
    		<form>
    		  <input type="hidden" name="_recipients" id="_recipients" value="info@thepatientconnections.com" />
    		  <input type="hidden" name="_redirect" id="_redirect" value="contact-thank.asp" />
    		  <input type="hidden" name="_subject" id="_subject" value="Web Enquiry" />
    		  <input type="hidden" name="_requiredFields" value="title,surname,email" />
    		  <input type="hidden" name="_envars" value="HTTP_REFERER,HTTP_USER_AGENT,REMOTE_ADDR" />
    		  <p>
    			<label for="title"><span class="darktxt">*</span>Title:</label>
    			<span class="formw">
    			<select class="singleline-field" id="title" name="title">
    			  <option selected="selected">Select</option>
    			  <option>Mr</option>
    			  <option>Miss</option>
    			  <option>Mrs</option>
    			  <option>Ms</option>
    			  <option>Sir</option>
    			  <option>Dr</option>
    			</select>
    			</span></p>
    		  <p>
    			<label for="first_name">First Name:</label>
    			<span class="formw">
    			<input type="text" class="singleline-field" id="first_name" />
    			</span></p>
    		  <p>
    			<label for="famlyname"><span class="darktxt">*</span>Family Name:</label>
    			<span class="formw">
    			<input type="text" name="famlyname" class="singleline-field" id="famlyname" />
    			</span></p>
    		  <p>
    			<label for="Company">Company:</label>
    			<span class="formw">
    			<input type="text" name="Company" class="singleline-field" id="Company" />
    			</span></p>
    		  <p>
    			<label for="country">Country:</label>
    			<span class="formw">
    			<select class="singleline-field" id="country" name="country" >
    			  <option value="US">United States</option>
    			  <option value="AL">Albania</option>
    			  <option value="DZ">Algeria</option>
    			  <option value="AD">Andorra</option>
    			  <option value="AO">Angola</option>
    			  <option value="AI">Anguilla</option>
    			  <option value="AQ">Antarctica</option>
    			  <option value="AG">Antigua And Barbuda</option>
    			  <option value="AR">Argentina</option>
    			  <option value="BN">Brunei</option>
    			  <option value="BG">Bulgaria</option>
    			  <option value="BF">Burkina Faso</option>
    			  <option value="BI">Burundi</option>
    			  <option value="KH">Cambodia</option>
    			  <option value="CM">Cameroon</option>
    			  <option value="CA">Canada</option>
    			  <option value="CV">Cape Verde</option>
    			  <option value="KY">Cayman Islands</option>
    			  <option value="CF">Central African Republic</option>
    			  <option value="TD">Chad</option>
    			  <option value="CL">Chile</option>
    			  <option value="CN">China</option>
    			  <option value="CX">Christmas Island</option>
    			  <option value="CC">Cocos (Keeling) Islands</option>
    			  <option value="CO">Colombia</option>
    			  <option value="KM">Comoros</option>
    			  <option value="CG">Congo</option>
    			  <option value="CD">Congo, Democractic Rep. of the</option>
    			  <option value="CK">Cook Islands</option>
    			  <option value="CR">Costa Rica</option>
    			  <option value="CI">Cote D'Ivoire (Ivory Coast)</option>
    			  <option value="HR">Croatia (Hrvatska)</option>
    			  <option value="CU">Cuba</option>
    			  <option value="CY">Cyprus</option>
    			  <option value="CZ">Czech Republic</option>
    			  <option value="DK">Denmark</option>
    			  <option value="DJ">Djibouti</option>
    			  <option value="DM">Dominica</option>
    			  <option value="DO">Dominican Republic</option>
    			  <option value="TP">East Timor</option>
    			  <option value="EC">Ecuador</option>
    			  <option value="EG">Egypt</option>
    			  <option value="SV">El Salvador</option>
    			  <option value="GQ">Equatorial Guinea</option>
    			  <option value="ER">Eritrea</option>
    			  <option value="EE">Estonia</option>
    			  <option value="ET">Ethiopia</option>
    			  <option value="FK">Falkland Islands (Islas Malvinas)</option>
    			  <option value="FO">Faroe Islands</option>
    			  <option value="FJ">Fiji Islands</option>
    			  <option value="FI">Finland</option>
    			  <option value="FR">France</option>
    			  <option value="GF">French Guiana</option>
    			  <option value="PF">French Polynesia</option>
    			  <option value="TF">French Southern Territories</option>
    			  <option value="GA">Gabon</option>
    			  <option value="GM">Gambia, The</option>
    			  <option value="GE">Georgia</option>
    			  <option value="DE">Germany</option>
    			  <option value="GH">Ghana</option>
    			  <option value="GI">Gibraltar</option>
    			  <option value="GR">Greece</option>
    			  <option value="GL">Greenland</option>
    			  <option value="GD">Grenada</option>
    			  <option value="GP">Guadeloupe</option>
    			  <option value="GU">Guam</option>
    			  <option value="GT">Guatemala</option>
    			  <option value="GN">Guinea</option>
    			  <option value="GW">Guinea-Bissau</option>
    			  <option value="GY">Guyana</option>
    			  <option value="HT">Haiti</option>
    			  <option value="HM">Heard and McDonald Islands</option>
    			  <option value="HN">Honduras</option>
    			  <option value="HK">Hong Kong S.A.R.</option>
    			  <option value="HU">Hungary</option>
    			  <option value="IS">Iceland</option>
    			  <option value="IN">India</option>
    			  <option value="ID">Indonesia</option>
    			  <option value="IR">Iran</option>
    			  <option value="IQ">Iraq</option>
    			  <option value="IE">Ireland</option>
    			  <option value="IL">Israel</option>
    			  <option value="IT">Italy</option>
    			  <option value="JM">Jamaica</option>
    			  <option value="JP">Japan</option>
    			  <option value="JO">Jordan</option>
    			  <option value="KZ">Kazakhstan</option>
    			  <option value="KE">Kenya</option>
    			  <option value="KI">Kiribati</option>
    			  <option value="KR">Korea</option>
    			  <option value="KP">Korea, North</option>
    			  <option value="KW">Kuwait</option>
    			  <option value="KG">Kyrgyzstan</option>
    			  <option value="LA">Laos</option>
    			  <option value="LV">Latvia</option>
    			  <option value="LB">Lebanon</option>
    			  <option value="LS">Lesotho</option>
    			  <option value="LR">Liberia</option>
    			  <option value="LY">Libya</option>
    			  <option value="LI">Liechtenstein</option>
    			  <option value="LT">Lithuania</option>
    			  <option value="LU">Luxembourg</option>
    			  <option value="MO">Macau S.A.R.</option>
    			  <option value="MK">Macedonia,Former Yugoslav Rep.</option>
    			  <option value="MG">Madagascar</option>
    			  <option value="MW">Malawi</option>
    			  <option value="MY">Malaysia</option>
    			  <option value="MV">Maldives</option>
    			  <option value="ML">Mali</option>
    			  <option value="MT">Malta</option>
    			  <option value="MH">Marshall Islands</option>
    			  <option value="MQ">Martinique</option>
    			  <option value="MR">Mauritania</option>
    			  <option value="MU">Mauritius</option>
    			  <option value="YT">Mayotte</option>
    			  <option value="MX">Mexico</option>
    			  <option value="FM">Micronesia</option>
    			  <option value="MD">Moldova</option>
    			  <option value="MC">Monaco</option>
    			  <option value="MN">Mongolia</option>
    			  <option value="MS">Montserrat</option>
    			  <option value="MA">Morocco</option>
    			  <option value="MZ">Mozambique</option>
    			  <option value="MM">Myanmar</option>
    			  <option value="NA">Namibia</option>
    			  <option value="NR">Nauru</option>
    			  <option value="NP">Nepal</option>
    			  <option value="AN">Netherlands Antilles</option>
    			  <option value="NL">Netherlands, The</option>
    			  <option value="NC">New Caledonia</option>
    			  <option value="NZ">New Zealand</option>
    			  <option value="NI">Nicaragua</option>
    			  <option value="NE">Niger</option>
    			  <option value="NG">Nigeria</option>
    			  <option value="NU">Niue</option>
    			  <option value="NF">Norfolk Island</option>
    			  <option value="MP">Northern Mariana Islands</option>
    			  <option value="NO">Norway</option>
    			  <option value="OM">Oman</option>
    			  <option value="PK">Pakistan</option>
    			  <option value="PW">Palau</option>
    			  <option value="PA">Panama</option>
    			  <option value="PG">Papua new Guinea</option>
    			  <option value="PY">Paraguay</option>
    			  <option value="PE">Peru</option>
    			  <option value="PH">Philippines</option>
    			  <option value="PN">Pitcairn Island</option>
    			  <option value="PL">Poland</option>
    			  <option value="PT">Portugal</option>
    			  <option value="PR">Puerto Rico</option>
    			  <option value="QA">Qatar</option>
    			  <option value="RE">Reunion</option>
    			  <option value="RO">Romania</option>
    			  <option value="RU">Russia</option>
    			  <option value="RW">Rwanda</option>
    			  <option value="SH">Saint Helena</option>
    			  <option value="KN">Saint Kitts And Nevis</option>
    			  <option value="LC">Saint Lucia</option>
    			  <option value="PM">Saint Pierre and Miquelon</option>
    			  <option value="VC">Saint Vincent &amp; The Grenadines</option>
    			  <option value="WS">Samoa</option>
    			  <option value="SM">San Marino</option>
    			  <option value="ST">Sao Tome and Principe</option>
    			  <option value="SA">Saudi Arabia</option>
    			  <option value="SN">Senegal</option>
    			  <option value="SC">Seychelles</option>
    			  <option value="SL">Sierra Leone</option>
    			  <option value="SG">Singapore</option>
    			  <option value="SK">Slovakia</option>
    			  <option value="SI">Slovenia</option>
    			  <option value="SB">Solomon Islands</option>
    			  <option value="SO">Somalia</option>
    			  <option value="ZA">South Africa</option>
    			  <option value="GS">South Georgia/Sth Sandwich Is</option>
    			  <option value="ES">Spain</option>
    			  <option value="LK">Sri Lanka</option>
    			  <option value="SD">Sudan</option>
    			  <option value="SR">Suriname</option>
    			  <option value="SJ">Svalbard And Jan Mayen Islands</option>
    			  <option value="SZ">Swaziland</option>
    			  <option value="SE">Sweden</option>
    			  <option value="CH">Switzerland</option>
    			  <option value="SY">Syria</option>
    			  <option value="TW">Taiwan</option>
    			  <option value="TJ">Tajikistan</option>
    			  <option value="TZ">Tanzania</option>
    			  <option value="TH">Thailand</option>
    			  <option value="TG">Togo</option>
    			  <option value="TK">Tokelau</option>
    			  <option value="TO">Tonga</option>
    			  <option value="TT">Trinidad And Tobago</option>
    			  <option value="TN">Tunisia</option>
    			  <option value="TR">Turkey</option>
    			  <option value="TM">Turkmenistan</option>
    			  <option value="TC">Turks And Caicos Islands</option>
    			  <option value="TV">Tuvalu</option>
    			  <option value="UG">Uganda</option>
    			  <option value="UA">Ukraine</option>
    			  <option value="AE">United Arab Emirates</option>
    			  <option value="UK" selected="selected">United Kingdom</option>
    			  <option value="US">United States</option>
    			  <option value="UM">United States Minor Outlying Is</option>
    			  <option value="UY">Uruguay</option>
    			  <option value="UZ">Uzbekistan</option>
    			  <option value="VU">Vanuatu</option>
    			  <option value="VA">Vatican City State (Holy See)</option>
    			  <option value="VE">Venezuela</option>
    			  <option value="VN">Vietnam</option>
    			  <option value="VG">Virgin Islands (British)</option>
    			  <option value="VI">Virgin Islands (US)</option>
    			  <option value="WF">Wallis And Futuna Islands</option>
    			  <option value="YE">Yemen</option>
    			  <option value="YU">Yugoslavia</option>
    			  <option  value="ZM">Zambia</option>
    			  <option value="ZW">Zimbabwe</option>
    			</select>
    			</span></p>
    		  <p>
    			<label for="email"><span class="darktxt">*</span> E-mail:</label>
    			<span class="formw">
    			<input type="text" name="email" class="singleline-field" id="email" />
    			</span></p>
    		  <p class="wide">
    			<label for="company-description"><span class="darktxt">*</span>Can you please Select the best suitable description of the type of company you work for:-</label>
    		  </p>
    		  <p><span class="formw">
    			<select class="singleline-field" id="company-description" name="company-description" >
    			  <option value="A">Pharmaceutical company</option>
    			  <option value="B">Market research agency</option>
    			  <option value="C">Public relations / advertising agency</option>
    			  <option value="E">Government department</option>
    			  <option value="F">Non-governmental organisation</option>
    			  <option value="h">Other</option>
    			</select>
    			</span></p>
    		  <p><span class="formw"><br />
    			<input type="submit" id="Submit" value="Submit" />
    			<input type="reset" id="Submit2" value="Reset" />
    			</span></p>
    		</form>
    	  </div>
    	  <!--/form-container-->
    	  <div class="clear"></div>
    	</div>
    	<!--/#txt-box-->
    	<div class="box-foot"></div>
      </div>
      <!--/#left-col-->
      <div class="clear"></div>
    <img src="http://www.designed4hits.com/dev/pat...c-nurse-pc.jpg" alt="The Patient Connection - Contact us" width="333" height="387" class="right-pic" />
    </div>
    <div id="foot">
      <p><a href="terms.html">Terms &amp; Conditions</a> | <a href="privacy.html">Privacy Policy</a> | <a href="#">Site Map</a> | <a href="#">Links</a></p>
    </div>
    <!--/#main-cont-->
    </body>
    </html>
    Hope it helps anyway

  4. #4
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the above help But I still havent managed to fix the Firefox problems.
    (The hoz scroll problem has been solved, but not the other two)
    Paul, I couldn't really see the changes you had made in the full page example (and some of it got truncated within the post).

    The site has moved to Here and here is the css

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,782
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    The picture on the contact form cabn be fixed by absolutely placing it at the bottom and is therefore not dependent on the pages neeeing the exact same size in all browers.

    Change all your right-pic styles into tyhis one style.
    Code:
    .right-pic {
     right: 19px;
     position: absolute;
     bottom:0;
    }
    Get rid of the other right-pic style that says topxpx.

    The gaps in the form are mostly margin-related and you need to control the margins as mentioned in my above post. You should also tremove the 10px height from the p tag as it can't possibly be only 10px high.

    Margin on static elements do not apply against floats so you would be better floating the label and let the input be static.

  6. #6
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh! I see now.
    Will give it a go when I get back in work on Monday, thanks


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
  •