1 reply [Last post]
Last seen: 15 years 4 days ago
Timezone: GMT-2
Joined: 2005-08-13
Posts: 1
Points: 0

This is the 1st of two problems I am having.

I am inserting a form using z-index and absolute positioning to get the form over to the right and near the edge of my banner. It looks fine in IE 6, Mozilla 1.6 and Firefox 1.0. In Opera it is positioning about an inch towards the center and basically looks terrible. I want to get the form over to the right as in IE and the other browsers.

Here is the link: http://www.attinc.com/about.htm

Here is the CSS code affecting the form:

#container {
	border-top: 0;
	border-right: 1px solid #707070;
	border-bottom: 0;
	border-left: 1px solid #707070;
	margin: auto 14% auto 14%;
	color: #fff;

#head {
	margin: 0;
	background: #fff;
	background-image: url(images/banner2.jpg);
	height: 130px;

form {
	position: absolute;
	right: 136px;
	top: 40px;
	z-index: 2;
	display: inline;

Here is the HTML affecting the form and Header:

  <div id="container">
  <div align="center"> 
    <table border="0" cellspacing="0" cellpadding="0">
        <td id="head" colspan="6">
         <br> <div class="form">
      <form method="GET" action="search/search.php"> 
          <input type="text" name="zoom_query" size="15">
          <input type="submit" value="Search"> 

My 2nd problem is:

In all the browsers, except IE, the right border is not showing. Something in the id container...but I can't see it.

Any help would be greatly appreciated!

Chris..S's picture
Last seen: 7 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2 Problems - Opera Not positioning / border not showing

First, I would use a selector of #head form to target the search form rather than just form.

To understand what is going on you need to be conversant with how positioning contexts are formed and how position:absolute works.

If you are attempting to position your search form with respect to your #head div, then you should get #head to establish its own positioning content. Do that by assigning it position:relative;

The form is actually contained within the div, div.form. I don't think the extra markup is necessary (just form should be enough) but working with that.

- remove position:absolute, top and right values from form.
- add position:absolute; top and right values to .form.

If you do that there are still some problems, but that is the essence of the solution. I'll leave you to figure out the rest Tongue