I created one webpage with HTML and when I am viewing in a maximized size its working correctly, but when reduced the size of the browser the header portion is not reducing its size but its creating vertical scroll bars in the header portion. I am pasting my code here, please have a look at it and help me please..

     h1{text-align:"center";color:"black"; font-face:"Monotype Corsiva" size= "7"}
     h2{text-align:"center";color:"black";font-face:"monotype corsiva" }
<script type="text/javascript">
var sndEl="audio.mp3"  //Set to name and path of your sound file
var music_on="music_on1s_o.gif"		//Set to image to display while music is on
var music_off="music_off1s_o.gif"	             //Set to image to display while music is off
var active_img="active_img1_o.gif"
var da=document.all
var preload=[music_on, music_off, active_img]
var preloading=new Array();
for (var i_tem = 0; i_tem < preload.length; i_tem++){
preloading[i_tem]=new Image();

function textReveal(el, state){
var text=da? da.text : document.getElementById('text')
text.style.visibility=state=='on'? 'visible' : ''
el.src=state=='on'? active_img : el.lowsrc

function toggleSound(el){
var text=da? da.text : document.getElementById('text')
if (da&&da.sound&&da.sound.src!==''){
else if (document.getElementById('snd')){
else if (da&&da.sound&&da.sound.src==''){
else {

<body bgcolor="white">
<IMG BORDER="0" width="160" height="140" ALIGN="left" SRC="Logo.gif">
<IMG BORDER="0" width="160" height="140" ALIGN="right" SRC="rushi.gif">
<h1>గుంటూరు తిరుపతి</h1><h1>శ్రీ వెంకటేశ్వర స్వామి వారి దేవాలయం</h1>  
	a{background-color:"red" ;text-decoration:none;padding:"1mm 5mm";border-center:"1px solid white"}</style>
<body bgcolor="black"><center>   
          <li><A HREF="HOME.HTML" target="f2" STYLE="display:inline"> HOME</A></li>
	<li><A HREF ="EVENTS.HTML" target="f2" STYLE="display:inline"> EVENTS</A></li>
        <li><A  HREF="HISTORY.HTML" target="f2" STYLE="display:inline">HISTORY</A></li>
        <li><A  HREF="SPECIAL_PUJAS.HTML" target="f2" STYLE="display:inline"> SPECIAL PUJAS</A></li>
	<li><A HREF="PHOTO_GALLERY.HTML" target="f2" STYLE="display:inline"> PHOTO GALLERY</A></li>
	<li><A HREF="MEMBERS.HTML" target="f2" STYLE="display:inline"> MEMBERS</A></li>
	<li><A HREF="CONTACT_US.HTML" target="f2" STYLE="display:inline"> CONTACT US</A></li>
<script type="text/javascript">
if (document.getElementById&&!document.getElementById('sound')){
document.write('<div id="sndC" style="width:0;height:0;position:absolute;top:-100px:left:-100px;visibility:hidden;">')
document.write('<embed id="snd" style="width:0;height:0;position:absolute;top:-1000px:left:-1000px;visibility:hidden;" src="'+sndEl+'" autostart="true" hidden="true" loop="true">')
if ((da&&da.sound)||document.getElementById)
document.write('<img style="cursor:pointer;" lowsrc="'+music_on+'" src="'+music_on+'" onmouseout="textReveal(this, \'off\')" onmouseover="textReveal(this, \'on\');" onclick="toggleSound(this);"><span id="text"><\/span>')


It's quite difficult to see what is actually going on in your code. You need to be really careful with using formatting (such as where you have opened the "style" tag) inside your html, this should really be in an external document or in your <head>.

Do you mean vertical scrollbars? So does the header section have to much height.

Another thing to point out: you seem to have your <head> and <body> tags in this order:


This really does not make sense? Have you created this with a visual editor (Dreamweaver/frontpage) or have you hand coded it?

Hope this points some things out.

Please wrap your code in code tags:

[code=html] Put code here [/code]

You have html (deprecated html at that) in the styles.

You have something that can't change size in the header. On mouseover also can cause size troubles.

You defined things in pixels. Those can't change size.

i think it would be best if you use a specific size that would be compatible to any window size for your header. try using not more than 800 x 600.