Results 1 to 4 of 4

Thread: div losing class

  1. #1
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default div losing class

    Hi everyone,

    Can someone help me with this?

    I have a container div that contains several other divs. The container div has class "search". However it seems that after a "clear:both", the last div falls outside the border of the container div described by the "search" class. The (simplified) html is below.

    Thanks for your help.

    - jon



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Search</title>

    <style type="text/css">

    .search {
    background-color:#DEE7EC;
    border-bottom-color:#8CACBB;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-top-color:#8CACBB;
    border-top-style:solid;
    border-top-width:1px;
    border-left-color:#8CACBB;
    border-left-style:solid;
    border-left-width:1px;
    border-bottom-width:1px;
    border-right-color:#8CACBB;
    border-right-style:solid;
    border-right-width:1px;
    color:Black;
    line-height:1.6em;
    margin-bottom:0pt;
    margin-left:0pt;
    margin-right:0pt;
    margin-top:0pt;
    padding-bottom:0px;
    padding-left:1px;
    padding-right:1px;
    padding-top:5px;
    }

    </style>

    </head>


    <body>

    top
    <div id="search">
    <!-- begin simple search -->
    <div id="simpleSearch" class='search'>
    <div style="float:right" onclick="alert('perform simple search');">
    <img src="xmag-22.png"/>
    </div>
    <div style="float:right">
    <input id="search" type="text" value="search"></input>
    </div>
    <div style="clear:both"></div>
    <div style="font-size:8pt; float:right">
    <div>Advanced search</div>
    </div>
    </div>
    </div>

    <div style="clear:both"></div>
    bottom

    </body>
    </html>

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Firstly, simplify your CSS:

    Code:
    .search {
    	border:1px solid #8CACBB;
    	background-color:#DEE7EC;
    	color:#000;
    	line-height:1.6em;
    	margin:0;
    	padding:5px 1px 0 1px;
    }
    Second, add clear:both to the container of the "Advanced Search" and add the clear:both div after it, not before.

    Code:
    <div style="font-size:8pt; float:right; clear:both;">
    	<div>Advanced search</div>
    </div>
    <div style="clear:both"></div>
    You did say this was a "simplified" version of your markup, so I won't make too much of a judgment. However, it seems to me that you're a bit "over-divifying" here. You could accomplish the same thing which much less markup. Like so:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Search</title>
    
    <style type="text/css">
    .search {
    	border:1px solid #8CACBB;
    	background-color:#DEE7EC;
    	color:#000;
    	line-height:1.6em;
    	margin:0;
    	padding:5px 1px 0 1px;
    	text-align:right;
    }
    .search a {
    	display:block;
    	font-size:8pt;
    }
    </style>
    </head>
    <body>
    
    top
    
    <!-- begin simple search -->
    <div id="simpleSearch" class='search'>
    	<input id="search" type="text" value="search">
    	<img src="xmag-22.png" onclick="alert('perform simple search');"/>
    	<a href="#">Advanced search</a>
    </div>
    
    bottom
    
    </body>
    </html>
    Last edited by Medyman; 08-15-2008 at 02:29 PM.

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    <input id="search" type="text" value="search"></input>
    is not a valid tag

    HTML Code:
    <input id="search" type="text" name="search" value="">
    and you shouldn't rely on javascript without a html code backup, because javascript can be disabled, causing your form to break entirely. Rather do some progressive enhancement where if javascript is enabled and present, you will allow it to run its course, however you are not requiring javascript to have the form work

    HTML Code:
    <input id="search" type="text" name="search" value="">
    <input type="submit" name="submit" value="Search" onclick="return confirm('perform simple search')">

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    To add to what boogyman just said:

    It seems like you want to use an image instead of the default OS button. In this case, you could use the <input type="image"> tag which accomplishes what you want without sacrificing accessibility.

Bookmarks

Posting Permissions

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