Widget error

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I installed search on my site and i am having invalid html widget error and when i add it to my site my site connectivity image and text disappears and there is only logo and menu are there my search code is


<div id="I1317_html"><form method="get" id="searchform" action="http://itentertainment.tk/">
<fieldset class="search">
<input type="text" class="box" />
<button class="btn" title="Submit Search">Search</button>
</fieldset>
</form>

<style type="text/css">

}
ieldset.search {
border: none;
width: 243px;
margin: 0 auto;
background: #222;
}
.search input, .search button {
border: none;
float: left;
}
.search input.box {
color: #fff;
font-size: 1.2em;
width: 190px;
height: 30px;
padding: 8px 5px 0;
background: #616161 url(http://www.itentertainment.tk/resources/search_bg.gif) no-repeat;
margin-right: 5px;
}
.search input.box:focus {
background: #616161 url(http://www.itentertainment.tk/resources/search_bg.gif) no-repeat left -38px;
outline: none;
}
.search button.btn {
width: 38px;
height: 38px;
cursor: pointer;
text-indent: -9999px;
background: #fbc900 url(http://www.itentertainment.tk/resources/search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
background: #fbc900 url(http://www.itentertainment.tk/resources/search_bg.gif) no-repeat bottom right;

}
<div/


my site without search looks like
here the url http://imageshack.us/f/841/unledsed.png/

with search my site looks like
here the url http://imageshack.us/f/69/unledjbp.png/
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Safi,

The reason why you're getting this error is because the last line of your code should be:


</div>



What you currently have is causing your whole page to mess up.

Just remember this when you do HTML: Ending tags always start with a </ and are in the format of:


</TAG NAME HERE>



Now, of course, you would change "TAG NAME HERE" to the actual tag name.

I hope this helps.

Nathan
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes
Thanks nathan for helping one more question how to remove border around the search

and there is the error again of invalid


<form method="get" id="searchform" action="http://itentertainment.tk/">
<fieldset class="search">
<input type="text" class="box" />
<button class="btn" title="Submit Search">Search</button>
</fieldset>
</form>

<style type="text/css">

}
ieldset.search {
border: none;
width: 243px;
margin: 0 auto;
background: #222;
}
.search input, .search button {
border: none;
float: left;
}
.search input.box {
color: #fff;
font-size: 1.2em;
width: 190px;
height: 30px;
padding: 8px 5px 0;
background: #616161 url(http://www.itentertainment.tk/resources/search_bg.gif) no-repeat;
margin-right: 5px;
}
.search input.box:focus {
background: #616161 url(http://www.itentertainment.tk/resources/search_bg.gif) no-repeat left -38px;
outline: none;
}
.search button.btn {
width: 38px;
height: 38px;
cursor: pointer;
text-indent: -9999px;
background: #fbc900 url(http://www.itentertainment.tk/resources/search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
background: #fbc900 url(http://www.itentertainment.tk/resources/search_bg.gif) no-repeat bottom right;

}
</div>

i checked the code in tidy http://infohound.net/tidy
and found the following errors but cant fix it can anyone help me
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Safi,

There were a lot of HTML syntax errors in your code that you pasted above. I have fixed them for you in the following code, and this code removes the border as well:


<style type="text/css">
fieldset .search {
border: 0;
width: 243px;
margin: 0 auto;
background: #222;
}
.search input, .search button {
border: 0;
float: left;
}
.search input.box {
color: #fff;
font-size: 1.2em;
width: 190px;
height: 30px;
padding: 8px 5px 0;
background: #616161 url('http://www.itentertainment.tk/resources/search_bg.gif') no-repeat;
margin-right: 5px;
}
.search input .box:focus {
background: #616161 url('http://www.itentertainment.tk/resources/search_bg.gif') no-repeat left -38px;
outline: 0;
-moz-outline-style: none;
}
.search button .btn {
width: 38px;
height: 38px;
cursor: pointer;
text-indent: -9999px;
background: #fbc900 url('http://www.itentertainment.tk/resources/search_bg.gif') no-repeat top right;
}
.search button .btn:hover {
background: #fbc900 url('http://www.itentertainment.tk/resources/search_bg.gif') no-repeat bottom right;
}
</style>

<form method="get" id="searchform" action="http://itentertainment.tk/">
<fieldset class="search">
<input type="text" class="box" />
<button class="btn" title="Submit Search">Search</button>
</fieldset>
</form>



Please let me know if this works for you.

Nathan
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Thanks for the help, Nathan :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem, Brianna :)