Page 1 of 1

<form> destroys my design, CSS doesn't help it

Posted: Wed May 20, 2009 5:19 am
by Sindarin
I have a perfect positioned design but as long as a form element is put into that the design messes up, I try to style the form using CSS but it's kinda useless. It seems like the form always puts a linebreak or something and it appears on the next line.

Code: Select all

<div align="left" id="searchbar">
<div id="searchbar-content"><a href="index.php?section=station">The Station</a> | <a href="index.php?section=programme">Programme</a> | <a href="index.php?section=djs">DJs</a> | <a href="index.php?section=downloads">Downloads</a> | <a href="index.php?section=contact">Contact</a><input type="text" id="search-field" value="Search..." /><img src="files/images/search-button.png" alt="Search" id="search-button" onclick="javascript&#058;document.searchform.submit();"/>
</div>
</div>

Code: Select all

 
 
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    cursor:default;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #FFFFFF;
    cursor:default;
}
#wrapper {
 
overflow:hidden;
 
margin-left: 10%;
margin-right: 10%;
margin-bottom: 12px;
margin-top: 12px;
 
min-width:987px;
max-width:987px;
min-height:300px;
width:800px;
height:auto;
background-color:#FFFFFF;
 
}
 
#header
{
 
overflow:hidden;
 
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
 
width:auto;
min-height:112px;
max-height:112px;
 
background-color:#FFFFFF;
 
}
 
#searchbar
{
 
overflow:hidden;
 
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
 
width:auto;
min-height:35px;
max-height:35px;
 
background-image:url(../../files/images/searchbar-background.png);
font-size:11px;
 
}
 
#searchbar a
{
 
color:#888888;
font-size:11px;
text-decoration:none;
 
}
 
#searchbar a:hover
{
 
color:#A7A7A7;
font-size:11px;
text-decoration:none;
 
}
 
#searchbar-content
{
 
position:relative;
left:12px;
top:3px;
overflow:hidden;
 
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
 
width:auto;
min-height:35px;
max-height:35px;
 
/*background-color:yellow*/
 
}
 
#search-field
{
position:relative;
left:277px;
top:0px;
color:#666666;
width:200px;
height:16px;
font-size:11px;
font-family:Verdana;
border-style:none;
padding-left:20px;
padding-right:2px;
padding-top:3px;
 
background-image:url(../../files/images/searchlabel.png);
background-repeat:no-repeat;
}
 
#search-button
{
position:relative;
left:277px;
top:6px;
color:#666666;
width:58px;
height:18px;
font-size:11px;
font-family:Verdana;
border: 1px solid #FFFFFF;
cursor:pointer;
}
 
#searchform
{
width:32px;
height:66px;
 
overflow:hidden;
}
 
#menubar
{
 
overflow:hidden;
 
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
 
width:auto;
min-height:41px;
max-height:41px;
 
background-image:url(../../files/images/menubar-background.png);
 
}
 
#logo
{
 
top:0px;
left:0px;
 
}
 
#top-adbanner
{
 
top:0px;
left:0px;
 
}
 
#content
{
 
overflow:hidden;
 
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
 
padding-left: 12px;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
 
min-width:987px;
max-width:987px;
height:auto;
 
 
background-image:url(../../files/images/wrapper-background.png);
background-repeat:repeat-x;
background-color:#9c1117;
}
 
 
#pre-footer
{
 
overflow:hidden;
 
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 16px;
 
max-width:958px;
height:35px;
min-height:35px;
 
background-image:url(../../files/images/pre-footer.png);
background-color:#9c1117;
background-repeat:no-repeat;
 
color:#888888;
font-size:10px;
}
 
#pre-footer-content
{
position:relative;
left:555px;
top:13px;
padding-right:32px;
}
 
#pre-footer a
{
 
color:#888888;
font-size:10px;
text-decoration:none;
 
}
 
#pre-footer a:hover
{
 
color:#A7A7A7;
font-size:10px;
text-decoration:none;
 
}
 
#footer
{
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
 
min-width:987px;
max-width:987px;
height:auto;
min-height:57px;
 
background-color:#444444;
}
 
 
a:link {
    text-decoration: none;
    color: #FF0000;
}
a:visited {
    text-decoration: none;
    color: #FF0000;
}
a:hover {
    text-decoration: underline;
    color: #FF0000;
 
}
a:active {
    text-decoration: none;
    color: #FF0000;
}
 
img{
border-style:none;
}
 
li{
text-indent:4px;
padding:2px;
}
 
table,td,tr{
padding:2px;
}

Re: <form> destroys my design, CSS doesn't help it

Posted: Wed May 20, 2009 12:09 pm
by kaszu
Where exactly you want that form element?
Form is a block element and it will 'break' layout if put before/after inline element. If you need the form before/after <a> then you need to set

Code: Select all

form {
    display: inline;
}
but i'm not sure if that won't break form behaviour. Anyway you can put all searchbar-content inside the form.

If that's not the problem, then try resetting style:

Code: Select all

form {
    margin: 0;
    padding: 0;
    border: 0;
}

Re: <form> destroys my design, CSS doesn't help it

Posted: Thu May 21, 2009 5:48 am
by Sindarin
Ah it works now! Thanks! display:inline did the trick, and I am already using a reset.css :D