6 replies [Last post]
Wasabi
Offline
Regular
CA
Last seen: 17 years 47 weeks ago
CA
Joined: 2004-09-16
Posts: 18
Points: 0

Hi,

In the following code, I've been unsuccessful aligning the submit button flush with the top of the UA. Would some one correct the boggle?

<style type="text/css" media="screen">
body{
	margin: 0;
	padding: 0;
	background-color: #FFF;
	color: #333;
	font: 11px/1em Verdana, Arial, Helvetica, sans-serif;
	}
#container{
	width: 800px;
	margin: 0;
	padding: 0;
	border: 1px solid black;
}	
#header{
	background: url(i/logo_blk.gif) left top no-repeat;
	height: 38px;
	/*position: relative;
	height: 36px; */
	
	display: block !important;
	display: none;



}
	
ul#specialInt {
	list-style-type: none;
	margin:  0 0 0 30em;
	padding: 0;

	
}	

ul#specialInt li {

	
	border-right: 1px solid black;
	padding: 0 1em 0 1em;
	display: inline;
	margin: 0;
	float: left;

	


}
ul#specialInt li a:link, a:active{
	text-decoration: none;
	color: #C00;

}

ul#specialInt li a:hover, a:active {
	text-decoration: underline;
	color: #C00;
}
#searchForm{
	
	margin-left: 2em;
	padding: 0;
	display: inline;
	/* float: right;
	display: inline;
	border-left: 4px solid #FFF; */


}
#searchForm #submit{
	padding: 0; !important;	
	padding: 0;		
	
	margin: 0; !important;		
	margin-top: 0;			
	float: right;
	clear: both;
	
	}
</style>
</head>

<body>

<div id="container">
<div id="header">
<ul id="specialInt">
<li><a href="#">Contest</a></li>
<li><a href="#">Shows A-Z</a></li>
</ul>

<form id="searchForm">
<label for="Search" class="search">
search
<input id="search" type="text" name="search" class="banner" size="20" maxlength="30" />
<input id="submit" type="submit" value="GO" width="33" height="17" class="banner" />



</form>

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



"Complexity is good, complicated is bad."
—Paolo Soleri
Wasabi

Azmeen
Offline
newbie
Last seen: 17 years 47 weeks ago
Joined: 2004-09-16
Posts: 8
Points: 0

Button Alignment Woes

#searchForm #submit{
   padding: 0; !important;   
   padding: 0;      
   
   margin: 0; !important;      
   margin-top: 0;         
   /*float: right;  <--- comment this bit */
   clear: both;
   
   } 

Do the above and you should be fine Smile

Wasabi
Offline
Regular
CA
Last seen: 17 years 47 weeks ago
CA
Joined: 2004-09-16
Posts: 18
Points: 0

Button Alignment Woes

Hi,

The following also worked. Is it efficient?

#searchForm #submit{
	padding: 0; !important;	/* FOR COMPETENT BROWSERS */
	padding: 0;			/* IE PC */
	
	margin: .5em 0 0 1em; !important;		/* FOR COMPETENT BROWSERS */
	margin: .5em 0 0 1em;			/* IE PC */
	position: absolute;
	
	
	}

"Complexity is good, complicated is bad."
—Paolo Soleri
Wasabi

Azmeen
Offline
newbie
Last seen: 17 years 47 weeks ago
Joined: 2004-09-16
Posts: 8
Points: 0

Re: Button Alignment Woes

Wasabi wrote:
Hi,

The following also worked. Is it efficient?

#searchForm #submit{
	padding: 0; !important;	/* FOR COMPETENT BROWSERS */
	padding: 0;			/* IE PC */
	
	margin: .5em 0 0 1em; !important;		/* FOR COMPETENT BROWSERS */
	margin: .5em 0 0 1em;			/* IE PC */
	position: absolute;
	
	
	}

Personally, I won't use ems for sizing margins... because font sizing across browsers are very tricky (which is what em is, if I'm not mistaken).

Give it a try by increasing your font size (Ctrl + in Firefox) and see how it affects your layout.

Wasabi
Offline
Regular
CA
Last seen: 17 years 47 weeks ago
CA
Joined: 2004-09-16
Posts: 18
Points: 0

Button Alignment Woes

Hi,

What about the positioning?

C

"Complexity is good, complicated is bad."
—Paolo Soleri
Wasabi

Azmeen
Offline
newbie
Last seen: 17 years 47 weeks ago
Joined: 2004-09-16
Posts: 8
Points: 0

Button Alignment Woes

Hi,

I think I got you confused... sorry.

What I meant to say was that positioning using ems could make your layout act funny on different browsers/platforms/user prefs.

You know how some people like their default fonts bigger than "normal" right? They will change this setting in their browser configuration. From what I've read, this default size, is an em.

So my 1em font might be bigger than your 1em font.

Which is why I personally don't use ems for positioning anything other than texts.

Wasabi
Offline
Regular
CA
Last seen: 17 years 47 weeks ago
CA
Joined: 2004-09-16
Posts: 18
Points: 0

Button Alignment Woes

Hi,

I'm attempting a liquid layout, but may misinterpreted the concept.

http://www.maxdesign.com.au/presentation/liquid/

"Complexity is good, complicated is bad."
—Paolo Soleri
Wasabi