Search code examples
javascripthtmlcssinternet-explorer-8marquee

Vertical scrollbar issue arround marquee with Internet Explorer 8

Please help me i am facing a very small vertical scrollbar problem in Internet Explorer 8 with marquee tag. here are details : Problem snapshot is attached in this post please zoom to see the issue :enter image description here

Html and css code is :

<div id="divMarq" style="font-family:tahoma,arial,helvetica; font-size:11px; color:red; MARGIN-TOP:0.5CM; font-weight:bold; clear:both; height:30;">
</div>

Javascript code is : 

function elcyMessage(data){
			execute = true;
			mesg = data[0];
			var val = data[1];
			var executionState = data[2];
			
			text = "<i><font size=2>"+mesg+"</font></i>";
			var createMarquee = "<MARQUEE DIRECTION=left BEHAVIOR=scroll SCROLLAMOUNT=10 SCROLLDELAY=200>" + text + "</MARQUEE>";
			if(executionState == "NoException"){
				if(val){
					if(document.getElementById("divMarq")!=null){
						DWRUtil.setValue("divMarq","");
					}
					if(document.getElementById("divMarq2")!=null){
						DWRUtil.setValue("divMarq2",createMarquee);
					}
				}else{
					if(document.getElementById("divMarq2")!=null){
						DWRUtil.setValue("divMarq2","");
					}
					if(document.getElementById("divMarq")!=null){
						DWRUtil.setValue("divMarq",createMarquee);
					}
				}	
			}else{
				if(document.getElementById("divMarq")!=null){
					DWRUtil.setValue("divMarq",createMarquee);
				}	
			}
		}

Also DocType Settings are:

<!DOCTYPE HTML>
<!--[if lt IE 8]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<![endif]-->

Thanks please help.

Solution

  • Try adding

    overflow: hidden;

    To the marquee div's css. So somethuing like

    <div id="divMarq" style="font-family:tahoma,arial,helvetica; font-size:11px; color:red; MARGIN-TOP:0.5CM; font-weight:bold; clear:both; height:30; overflow: hidden;">
</div>

    This is caused by the fixed height of the div being slightly less than the line height of the text.

    Alternatives I try to provide an alternative to css questions as you can do most things more than one way.

    You could also :

    • Increase the height of the div.
    • Remove the height entirely unless it is needed for the javascript so the div simply auto sizes to the content.