PDA

Click to See Complete Forum and Search --> : A few CSS Problems in IEMAC and IE

martinsandhu
09-20-2005, 07:58 AM
Hi guys got a problem with some CSS i can't figure out.

I've made an enquiry form and the select drop down menu option is not aligned with the rest of the text boxes even though i have given it the same distance from the left hand side. This only occurs in IE and not in Safri and FF.

The second problem is that in IEMAC the send button is in a diffrent position to where it is in IE and FF it goes slightly off the blue section.

Finally the mailing list text box is perfectly aligned in IE with the text above and on top of it however in FF and Safri it isn't at all and i can't work out why.

Any ideas? Code follows
martinsandhu
09-20-2005, 07:59 AM
FORM CSS

/*
Created Sep 20th 2005 by Martin Sandhu for
Rocket Science Soloutions
*/


/*field labels*/



#nameSection {
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 10px;
top: 200px;
height: 24px;
width: 272px;
position: absolute;

}
#emailSection{
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 10px;
top: 220px;
height: 24px;
width: 272px;
position: absolute;
}

#numberSection{
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 10px;
top: 240px;
height: 24px;
width: 272px;
position: absolute;
}

#companySection{
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 10px;
top: 260px;
height: 24px;
width: 272px;
position: absolute;
}

#natureSection{
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 10px;
top: 280px;
height: 24px;
width: 272px;
position: absolute;
}

#otherSection{
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 10px;
top: 300px;
height: 24px;
width: 272px;
position: absolute;
}

#submitSection{
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 10px;
top: 350px;
position: absolute;
}



/*input fields*/

#nameInput {
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 150px;
top: 200px;
width: 272px;
height: 24px;
position: absolute;
}

#emailInput {
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 150px;
top: 220px;
width: 272px;
position: absolute;
height: 24px;
}

#contactInput {
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 150px;
top: 240px;
width: 272px;
height: 24px;
position: absolute;
}

#companyInput {
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 150px;
top: 260px;
width: 272px;
height: 24px;
position: absolute;
}

#enquiryInput {
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 150px;
top: 282px;
width: 272px;
height: 24px;
position: absolute;
}
#FurtherInput {
font: 10pt/1.5em Helvetica, Arial, Geneva, Verdana, sans-serif;

margin: 4px;
left: 150px;
top: 304px;
width: 272px;
height: 24px;
position: absolute;
}
martinsandhu
09-20-2005, 08:01 AM
MAILING LIST CSS

#utilities {
width: 45%;
text-align: right;
margin: 0;
position: absolute;
top: 15px;
right: 15px;
white-space: nowrap;
}
#topLevelNav {
clear: both;
background: #d0e1e6;
padding-top: 0.3em;
padding-bottom: 0.4em;
margin-top: 30px;
}
#logoAndStrapline {
width: 45%;
font-size: 1.2em;
color: #00476b;
margin: 15px;
white-space: nowrap;
}
#secondLevelNav {
background: #b1ccd5;
padding-top: 0;
padding-bottom: 0;
width: 100%;

}
#mainContentContainer {
color: #FFFFFF;
width: 100%;
overflow: hidden;
background: #6399ab url(../images/squares_bottom.gif) repeat-x bottom;
}
#forwardBack {
color: #6399ab;
margin: 15px;
clear: both;
}
#illustration {
float: left;
margin: 15px;
}
#quote {
margin: 15px;
float: right;
font-size: 1.8em;
font-weight: bold;
color: #6399ab;
width: 30%;
text-align: right;
}
#lastUpdated {
clear: both;
margin: 15px;
color: #6399ab;
}
#utilities ul, #topLevelNav ul, #secondLevelNav ul{
list-style: none;
margin: 0px;
padding: 0px;
}
#utilities ul li {
display: inline;
margin-left: 15px;
}
#topLevelNav ul li {
display: inline;
margin-right: 15px;
margin-left: 15px;
padding: 0;
}
#secondLevelNav ul li {
display: inline;
margin-right: 10px;
}
#utilities a {
font-size: 1.2em;
text-decoration: none;
}
#utilities p {
margin: 5px 50px 0 0;
padding: 0px;
color: #6399ab;

}
#utilities form {
margin: 10px 30px 0 0;
padding: 0px;
}
#logoAndStrapline p {
margin: 0px;
padding: 0px;
}
#topLevelNav a {
text-decoration: none;
font-size: 1.4em;
color: #00476b;
}
#secondLevelNav a {
text-decoration: none;
font-size: 1.1em;
color: #00476b;
}

#utilities input {
font-size: 0.9em;

}
#utilities #mailingListSubmit {
font-family: Helvetica, Arial, Geneva, Verdana, sans-serif;
color: #FFFFFF;
background: #b1ccd5;
font-weight: bold;
border: 2px solid #b1ccd5;
border-top: 4px solid #b1ccd5;
}
martinsandhu
09-20-2005, 08:02 AM
RELAVENT HTML CODE

</head>

<body id="" class="pageContact">
<script type="text/javascript"
src="../../includes/udm-resources/udm-dom.js"></script>
<!-- auto-sizing menus extension -->
<script type="text/javascript"
src="../../includes/udm-resources/udm-x-autosizing.js"></script>

<div id="rssContainer">

<div id="logoAndStrapline">
<p><a href="../../index.php"><img src="../../images/logo.gif" alt="Rocket Science Solutions"width="196" height="36" border="0" title="Rocket Science Solutions" /></a></p>
<p>Communications expertise for professional services </p>
</div>

<div id="utilities">
<ul>
<li><a href="mailto:info@rocketss.com">Email Us</a> </li>
<li><a href="../../index.php">Home</a></li>
<li><a href="../../links/index.php">Links</a></li>
<li><a href="../../accessibility/index.php">Accessibility</a></li>
</ul>
<form action="#" method="get">
<input name="email" type="text" size="30" />
<input type="submit" name="Submit" value="Join" id="mailingListSubmit" />
</form>
<p>Enter your email to join our mailing list</p>
</div>



<div id="topLevelNav">
<ul>
<li><a href="../../about/index.php" id="navAbout">About</a></li>
<li><a href="../../interact/index.php" id="navInteract">Interact</a></li>
<li><a href="../index.php" id="navContact">Contact</a></li>
</ul>
</div>

<div id="secondLevelNav">



<ul id="udm" class="udm">
<li><a href="../map/index.php">map &amp; directions</a>
</li>
<li><a href="index.php">enquiry form</a> </li>
<li><a href="../../interact/mailing-list/index.php">mailing list</a>
</li>
</ul>

<div class="clear">&nbsp;</div>
</div>




<div id="mainContentContainer">

<div id="squares">
<div id="squareRow1">
<!-- InstanceBeginEditable name="More-square1" -->
<h2>Expertise:</h2>
<p><a href="../../about/what/event-management.php">Let Rocket Science manage your event.</a></p>
<p><a href="../../about/what/event-management.php">More &raquo; </a></p>
<!-- InstanceEndEditable --></div>
<div id="squareRow2">
<?php include('../../includes/news.php'); ?>
</div>
</div>


<!-- InstanceBeginEditable name="main-content" -->
<h1>Enquiry form </h1>


<div id="form">
<form action="../../call_back/post.asp" method="post" name="contactForm" id="contactForm">

<div id="nameSection" align="left">
<span style="margin-left:4px;">Name </span>

</div>

<div id="emailSection" align="left">
<span style="margin-left:4px;">Email </span>

</div>

<div id="numberSection" align="left">
<span style="margin-left:4px;">Contact Number</span>

</div>

<div id="companySection" align="left">
<span style="margin-left:4px;">Company/Organisation</span>

</div>

<div id="natureSection" align="left">
<span style="margin-left:4px;">Nature</span>

</div>

<div id="otherSection" align="left">
<span style="margin-left:4px;">Further Information</span>

</div>

<div id="nameInput">
<input type="text" name="name" size="30"/>
</div>

<div id="emailInput">
<input type="text" name="email" size="30"/>
</div>

<div id="contactInput">
<input type="text" name="telephone" maxlength="11" size="30"/>
</div>

<div id="companyInput">
<input type="text" name="company" size="30"/>
</div>


<div id="enquiryInput">
<select name="enquiry">
<option>Please Select</option>
<option>Creative</option>
<option>Marketing</option>
<option>New Media</option>
<option>Event Management</option>
</select>
</div>

<div id="FurtherInput">
<textarea name="other" cols="30" rows="3" id="other"></textarea>
</div>

<div id="submitSection">
<input name="submit" type="submit" value="Send" id="submit" />
</div>

</form>
</div>
martinsandhu
09-20-2005, 04:31 PM
sorry forgot the link to the page

http://www.rocketss.com/contact/enquiry-form/index.php