Form boxes are coming up very different in chrome and safari.

Page 1 of 1

0 Replies - 508 Views - Last Post: 02 October 2012 - 01:07 PM

#1 sturpon711  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-September 12

Form boxes are coming up very different in chrome and safari.

Posted 02 October 2012 - 01:07 PM

It took some manipulating to get the username and password form boxes next to eachother. I have it looking good on chrome, but then when I went to safari and firefox, the boxes were at drastically different heights. In addition, I'm trying to place the image I pointed out in the image file but since it is larger than the column boxes it displaces the right one when I try to position it. I tried placing just in the container but its still displaces the image. I'm including a copy of how the username and password boxes look messed up in safari and firefox.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

* {
 margin:0px;
 padding:0px;
}

body {
 background-image: url(/img/bamboo.png);
 background-repeat:repeat-x;
 background-color:black;
 text-align:center;
}

#container {
 margin:0 auto;
 margin-top:0px;
 width:920px;
 height:740px;
 text-align:left;
 background-color:00000;
}

.twoCol {
height:44em;
margin:2%;
width:46%;
background-color:0000;
float:left;
}

#logo {
 margin:0px;
 float:left;
 }
 
#whatis {
 font-family: rockwell;
 text-align:left;
 font-size:1.4em;
 padding-top:2em;
 color:#cccccc;
}

#about {
 font-family: rockwell;
 letter-spacing:.1em;
 line-height:1.3em;
 text-align:left;
 font-size:1.1em;
 padding-top:.2em;
 color:#ffff99;
}

#equal {
 padding-top:1em;
 padding-left: 9em;
 }
 
form {
 padding-top:6em;
 float:left;
}
#formleft {
float:left;
padding-right:2em;
padding-left:.6em;
}

#formright {
float:right;
}

.label {
display:block;
margin-left:1em;
margin-bottom:-.3em;
font-size:.75em;
font-family: Avenir;
text-shadow: 1px 1px 3px white;
}

input {
font-family: Courier New;
font-size: 1em;
height:1.4em;
margin:2% 5% 5% 5%;
width:90%;
border-color:#555555;
-webkit-appearance: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 5px;
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

.inset {
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

button {
height:2em;
margin:0% 5% 5% 5%;
width:92%;
background-color:#00aeff;
font-size: 1.5em;
cursor: pointer;
-webkit-appearance: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border-color:#008aff;
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 12px rgba(0,0,0,.24);
text-shadow: 1px 1px 5px grey;
}

button:active {
position: relative;
top: 1px;
}

text{
font-family: Avenir;
font-size: 1.5em;
}

</style>
</head>

<body>
 <div id="container">
 	
	<div id="left" class="twoCol">
	<div id="logo"><img src="/img/logo.png" height= "150px" width="257px" alt="">
	<div id="whatis">
	  <p>What is Epic Swap?</p></div>
	<div id="about">
	  <p>Epic Swap is the opportunity to share<br> an  experience, make a friend and do<br> it all over again.</p></div>
	<div id="equal"><img src="/img/equal.png" height="56" width="100" alt=""></div>
	
	</div></div>
	
	<div id="right" class="twoCol">
	  <form class="rounded">
	  <div id="formleft"><label class="label">Username:</label>
	  <input type="text" /></div>
	  <div id="formright"><label class="label">Password:</label>
	  <input type="text" /></div>
	</div>
	</div>


 
 
 
 
 </div>
</body>
</html>

thank you for any help.

Attached image(s)

  • Attached Image
  • Attached Image


Is This A Good Question/Topic? 0
  • +
Page 1 of 1