Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with opera 7.51

    I have a search form that is put in a div that is positioned relatively within a <td>.

    Each of the form elements (a textbox and a buttom) are positioned absolutely within the div.

    It is my understanding that the top/left attributes given to the div should be relative to the position of the next block-level element (the <td>) and the absolutely positioned elements should be relative to the position of the div in this case. This works fine. The problem is in the space that the form would be in if it were not repositioned with css.

    Because the form elements are positioned absolutely, they should not leave excess space where they would appear if they were not repositioned. However, it would seem that since the div is positioned relatively, it is leaving the space. This problem doesn't seem to occur in any other browsers I have tested (NS7, IE6, Mac: IE 5.2, Mac NS 7, Mac Firefox, Mac Safari).

    Here is the HTML that is used for this area...

    Code:
    <td colspan="2" class="logoCell">
    	<span class="content">
    		<img alt="WSWise Web Consulting" src="images/logo.gif" class="logo" />
    	</span>
    	<div class="searchForm" class="searchForm">
    		<form action="search.php" method="get">
    		<input type="text" class="searchField" />
    		<input type="button" onClick="alert('Search')" value="Search" class="searchButton" />
    		</form>
    	</div>
    </td>
    Here are any relevant css classes...

    Code:
    td.logoCell{
    	width: 750px;
    	height: 120px;
    	margin: 0px;
    	padding: 0px;
    	border-width: 0px 0px 1px 0px;
    	border-color: #a0a0a0;
    	border-style: solid;
    }
    
    div.searchForm{
    	position: relative;
    	top: -30px;
    	left: 570px;
    	height: 0px;
    	padding: 0px;
    	margin: 0px;
    }
    
    input.searchField{
    	position: absolute;
    	top: 8px;
    	left: 5px;
    	background-color: #d4ddea;
    	font-family: verdana, helvetica, arial, sans-serif;
    	font-size: 8pt;
    	font-weight: bold;
    	color: #7589a7;
    	width: 100px;
    	border: 1px #7589a7 solid;
    }
    
    input.searchButton{
    	position: absolute;
    	top: 8px;
    	left: 110px;
    	background-color: #d4ddea;
    	font-family: verdana, helvetica, arial, sans-serif;
    	font-size: 8pt;
    	font-weight: bold;
    	color: #7589a7;
    	width: 60px;
    	border: 1px #7589a7 solid;
    }
    
    img.logo{
    	width: 750px;
    	height: 120px;
    	border: 0px;
    	padding: 0px;
    	margin: 0px;
    }
    Thank you in advance for any help

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't look at your code too closely yet, but perhaps your problem lies in your misunderstanding of the positioning schemes.

    For a while, I thought it was the nearest parent element of any kind. But actually it's like this:

    Absolute
    The element is taken out of the flow and positioned based on the top, right, bottom and/or left properties with respect to the *nearest positioned element*. Positioned meaning having its position property set to "relative" or "absolute".

    And for the sake of continuity...

    Relative
    The element is rendered in the normal flow and then offset according to the top, right, bottom and/or left properties.

    If this is unrelated to your problem, post again and if somebody else hasn't checked it out, I will try.

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So then the first "position: absolute;" item is positioned relative to the screen?? You say nearest positioned element, but what if there is no other positioned element?
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #4
    New Coder
    Join Date
    Sep 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a div that is positioned relatively (but defined with a height/width/etc. of 0px. Inside of that is the search form in which every element is positioned absolutely. So the form elements should be taken out of the flow and positioned relative to the div. The div itself is given a height of 0px... so it should disappear also since there is nothing in the flow within it to force it beyond that.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •