Log in

View Full Version : div losing class


jon.heitz
08-14-2008, 06:27 PM
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>
Medyman
08-15-2008, 12:40 PM
Firstly, simplify your CSS:


.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.


<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:


<!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>
boogyman
08-15-2008, 12:49 PM
<input id="search" type="text" value="search"></input>
is not a valid tag



<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



<input id="search" type="text" name="search" value="">
<input type="submit" name="submit" value="Search" onclick="return confirm('perform simple search')">
Medyman
08-15-2008, 01:31 PM
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"> (http://www.blooberry.com/indexdot/html/tagpages/i/inputimage.htm) tag which accomplishes what you want without sacrificing accessibility.