Jump to content

Less line spacing after <hr>


NumberTWO
 Share

Recommended Posts

I've this code here

<html><body><hr>  <td><p style="font-weight:bold"><font size="-2">News: <span style="color:red"><font size="-2">news</span></p></td></font><hr></body></html>
it has one blank line before showing the 'News' text line, and one more line after the text. How can I eliminate this line spacings?Tks
Link to comment
Share on other sites

I've this code hereit has one blank line before showing the 'News' text line, and one more line after the text.  How can I eliminate this line spacings?Tks

You could use some css
<style type="text/css">hr {margin: 0; padding: 0;}p {margin: 0; padding: 0;}td {margin: 0; padding: 0;}</style>

that will drop all padding and margin on all elements. if you don't want it to affect the rest of the page, you could assign a class or id like so

<hr class="something"><style type="text/css">.something {margin:0; padding: 0;}</style>

and following the same pattern

Link to comment
Share on other sites

You could use some css
<style type="text/css">hr {margin: 0; padding: 0;}p {margin: 0; padding: 0;}td {margin: 0; padding: 0;}</style>

that will drop all padding and margin on all elements. if you don't want it to affect the rest of the page, you could assign a class or id like so

<hr class="something"><style type="text/css">.something {margin:0; padding: 0;}</style>

and following the same pattern

Thanks for your reply fullphaser,If i want to use your second method, please can you tell me how do I refer to that class/id when i want to have a <hr>?**ohh..i think i figured that out . Thanks a lot.<hr class="something"><style type="text/css">.something {margin:0; padding: 0;}</style><hr> <--- What should I put, or how do I refer to that class?Sorry, i'm just a newbie learning html myself...
Link to comment
Share on other sites

Thanks for your reply fullphaser,If i want to use your second method, please can you tell me how do I refer to that class/id when i want to have a <hr>?**ohh..i think i figured that out .  Thanks a lot.<hr class="something"><style type="text/css">.something {margin:0; padding: 0;}</style><hr>  <---  What should I put, or how do I refer to that class?Sorry, i'm just a newbie learning html myself...

You should be able to refer to it in the same way, infact if you just want that bit of the site to all have no spacing in such in between than simply putting
<hr class="something" /> <td class="something"><p class="something" style="font-weight:bold"><font size="-2">News: <span style="color:red"><font size="-2">news</span></p></td></font><hr class="something" /></body></html>

that tells the browser that everytime that it reads that class="something" that it will have no spacing what so ever (padding is inside spacing margin is spacing on the outside) also you will see that I added a / to the end of the <hr> tag. This is simply for complaince with xhtml so your completed code should look something like this

<html><body><style type="text/css">.something {margin: 0;padding: 0;}</style><hr class="something" /> <td class="something"><p class="something" style="font-weight:bold"><font size="-2">News: <span style="color:red"><font size="-2">news</span></p></td></font><hr class="something" /></body></html>

Link to comment
Share on other sites

fullphaser,could you please take a look at this :

<html><body><style type="text/css">.nospacing {margin: 0;padding: 0;}</style><!-- Start Ticker script --><hr class="nospacing"><script LANGUAGE="JavaScript"><!-- Web Site:  http://www.qiksearch.com/javascripts.htm --><!-- Beginvar msgs = new Array(     "24 Apr : My BLOG Progress Log",     "24 Apr : A new dropdown list has been added in the sidebar showing some of my frequent visit forums."); // No comma after last ticker msgvar msg_url = new Array(     "http://yyhhcc.blogspot.com/2006/02/blog-progress-log.html",     "http://yyhhcc.blogspot.com/"); // No comma after last ticker urlvar barwidth=400 //Enter main bar width in px or %var setdelay=3000 //Enter delay between msgs, in mili-secondsvar mouseover_color='#D8D8D8' //Specify highlight colorvar mouseout_color='#FFFFFF' //Specify default color/////////////////////////////////////////////////////////////////////var count=0;var ns6=document.getElementById&&!document.allvar ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1if (ie4||ns6){document.write('<form name="news_bar"><input type="button" value="<" onclick="moveit(0)" class="scrollerstyle" style="width:22; height:22; border-right-width:0px;" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#000000;background:#FFFFFF; width:'+barwidth+'; height:22; border-width:3; border-color:#8b2; cursor:hand; font: small tahoma;color:red;font-size:75%" onmouseover="this.style.background=mouseover_color" onmouseout="this.style.background=mouseout_color"><input type="button" value=">" onclick="moveit(1)" class="scrollerstyle" style="width:22; height:22; border-left-width:0px;" name="next" title="Next News"></form>');}else{document.write('<form name="news_bar"><input type="button" value="Previous" onclick="moveit(0)">')if (navigator.userAgent.indexOf("Opera")!=-1)document.write('<input type="button" name="news_bar_but" onclick="goURL();" style="width:'+barwidth+'" border="0">')elsedocument.write('<input type="button" name="news_bar_but" onclick="goURL();" width="'+barwidth+'" border="0">')document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')}//  End --></script><hr><!-- End Ticker script --></body></html>

There is still a wide spacing between the <hr> and the ticker..could you pls point out the error here? thanks

Edited by Jonas
Link to comment
Share on other sites

fullphaser,could you please take a look at this :
<html><body><style type="text/css">.nospacing {margin: 0;padding: 0;}</style><!-- Start Ticker script --><hr class="nospacing"><script LANGUAGE="JavaScript"><!-- Web Site:  http://www.qiksearch.com/javascripts.htm --><!-- Beginvar msgs = new Array(     "24 Apr : My BLOG Progress Log",     "24 Apr : A new dropdown list has been added in the sidebar showing some of my frequent visit forums."); // No comma after last ticker msgvar msg_url = new Array(     "http://yyhhcc.blogspot.com/2006/02/blog-progress-log.html",     "http://yyhhcc.blogspot.com/"); // No comma after last ticker urlvar barwidth=400 //Enter main bar width in px or %var setdelay=3000 //Enter delay between msgs, in mili-secondsvar mouseover_color='#D8D8D8' //Specify highlight colorvar mouseout_color='#FFFFFF' //Specify default color/////////////////////////////////////////////////////////////////////var count=0;var ns6=document.getElementById&&!document.allvar ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1if (ie4||ns6){document.write('<form name="news_bar"><input type="button" value="<" onclick="moveit(0)" class="scrollerstyle" style="width:22; height:22; border-right-width:0px;" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#000000;background:#FFFFFF; width:'+barwidth+'; height:22; border-width:3; border-color:#8b2; cursor:hand; font: small tahoma;color:red;font-size:75%" onmouseover="this.style.background=mouseover_color" onmouseout="this.style.background=mouseout_color"><input type="button" value=">" onclick="moveit(1)" class="scrollerstyle" style="width:22; height:22; border-left-width:0px;" name="next" title="Next News"></form>');}else{document.write('<form name="news_bar"><input type="button" value="Previous" onclick="moveit(0)">')if (navigator.userAgent.indexOf("Opera")!=-1)document.write('<input type="button" name="news_bar_but" onclick="goURL();" style="width:'+barwidth+'" border="0">')elsedocument.write('<input type="button" name="news_bar_but" onclick="goURL();" width="'+barwidth+'" border="0">')document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')}//  End --></script><hr><!-- End Ticker script --></body></html>

There is still a wide spacing between the <hr> and the ticker..could you pls point out the error here?  thanks

Is this what you are looking for :)
<html><body><style type="text/css">.nospacing {margin: 0;padding: 0;}.scrollerstyle {margin: 0; padding: 0;}</style><!-- Start Ticker script --><hr class="nospacing"><script LANGUAGE="JavaScript"><!-- Web Site:  http://www.qiksearch.com/javascripts.htm --><!-- Beginvar msgs = new Array(    "24 Apr : My BLOG Progress Log",    "24 Apr : A new dropdown list has been added in the sidebar showing some of my frequent visit forums."); // No comma after last ticker msgvar msg_url = new Array(    "http://yyhhcc.blogspot.com/2006/02/blog-progress-log.html",    "http://yyhhcc.blogspot.com/"); // No comma after last ticker urlvar barwidth=400 //Enter main bar width in px or %var setdelay=3000 //Enter delay between msgs, in mili-secondsvar mouseover_color='#D8D8D8' //Specify highlight colorvar mouseout_color='#FFFFFF' //Specify default color/////////////////////////////////////////////////////////////////////var count=0;var ns6=document.getElementById&&!document.allvar ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1if (ie4||ns6){document.write('<form name="news_bar" style="padding: 0; margin: 0;"><input type="button" value="<" onclick="moveit(0)" class="scrollerstyle" style="width:22; height:22; border-right-width:0px;" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#000000;background:#FFFFFF; width:'+barwidth+'; height:22; border-width:3; border-color:#8b2; cursor:hand; font: small tahoma;color:red;font-size:75%" onmouseover="this.style.background=mouseover_color" onmouseout="this.style.background=mouseout_color"><input type="button" value=">" onclick="moveit(1)" class="scrollerstyle" style="width:22; height:22; border-left-width:0px;" name="next" title="Next News"></form>');}else{document.write('<form name="news_bar" style="padding: 0; margin: 0;"><input type="button" value="Previous" onclick="moveit(0)">')if (navigator.userAgent.indexOf("Opera")!=-1)document.write('<input type="button" name="news_bar_but" onclick="goURL();" style="width:'+barwidth+'" border="0">')elsedocument.write('<input type="button" name="news_bar_but" onclick="goURL();" width="'+barwidth+'" border="0">')document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')}//  End --></script><hr class="nospacing"><!-- End Ticker script --></body></html>

I added the nospacing class to the bottom <hr> tag this gets rid of the upward margin, I also added it to both <form> tags (which are inside the Javascript code) I also added the no spacing elements to the scrollertype (which is part of the input in IE) I haven't tested it in IE, so if Internet Explorer gives you trouble let me know, and I will see what I can do, but I think I got the results that you were looking for or atleast I hope I did :)

Edited by Jonas
Link to comment
Share on other sites

You did, you really did fullphraser!! Many Thanks..Now i've a question,... how do i know this piece of code is working in most the browser ie. as these are the browsers which browse my blog frequently..:43.00% MSIE 6.0 32.00% Firefox 1.5.0 6.00% Firefox 1.0.7 6.00% Safari 1.2 3.00% Firefox 1.0.6 3.00% Mozilla 5.0 2.00% Opera 8.51 1.00% Firefox 1.0.8 1.00% Firefox 1.5 1.00% Netscape 8.0.3 Is there a website that provides validation? Or you can tell me on the spot? :)

Link to comment
Share on other sites

You did, you really did fullphraser!! Many Thanks..Now i've a question,... how do i know this piece of code is working in most the browser ie.   as these are the browsers which browse my blog frequently..:43.00% MSIE 6.0 32.00% Firefox 1.5.0 6.00% Firefox 1.0.7 6.00% Safari 1.2 3.00% Firefox 1.0.6 3.00% Mozilla 5.0 2.00% Opera 8.51 1.00% Firefox 1.0.8 1.00% Firefox 1.5 1.00% Netscape 8.0.3 Is there a website that provides validation? Or you can tell me on the spot? :)

There is no universal way. Find the latest version of the targeted browser(s), install them and see the page there for yourself. The markup itself could be validated in W3C's validator, but that doesn't ensure compatability in all browsers. It only ensures that you typed the code accordingly to W3C's specifications.
Link to comment
Share on other sites

Hi again,I'm using blogger for my blog. And after implementing a 'ticker' box I realised that something is not right with the box.If the code includes this : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">The ticker box's width becomes dynamically expand according to the text length..Without that codes, it will be displayed as a fixed length which is what I wanted.Do you know what that piece of codes are doing??Here is the codes that has dynamic ticker box width :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head></head><body><style type="text/css">.nospacing {margin: 0;padding: 0;}.scrollerstyle {margin: 0; padding: 0;}</style><!-- Start Ticker script --><hr class="nospacing"><script LANGUAGE="JavaScript"><!-- Web Site:  http://www.qiksearch.com/javascripts.htm --><!-- Beginvar msgs = new Array(   "24 Apr : My BLOG Progress Log",   "24 Apr : A new dropdown list has been added in the sidebar showing some of my frequent visit forums."); // No comma after last ticker msgvar msg_url = new Array(   "http://yyhhcc.blogspot.com/2006/02/blog-progress-log.html",   "http://yyhhcc.blogspot.com/"); // No comma after last ticker urlvar barwidth=500 //Enter main bar width in px or %var setdelay=1000 //Enter delay between msgs, in mili-secondsvar mouseover_color='#D8D8D8' //Specify highlight colorvar mouseout_color='#FFFFFF' //Specify default color/////////////////////////////////////////////////////////////////////var count=0;var ns6=document.getElementById&&!document.allvar ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1if (ie4||ns6){document.write('<form name="news_bar" style="padding: 0; margin: 0;"><input type="button" value="<" onclick="moveit(0)" class="scrollerstyle" style="width:22; height:22; border-right-width:0px;" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#000000;background:#FFFFFF; width:'+barwidth+'; height:22; border-width:3; border-color:#8b2; cursor:hand; font: small tahoma;color:red;font-size:75%" onmouseover="this.style.background=mouseover_color" onmouseout="this.style.background=mouseout_color"><input type="button" value=">" onclick="moveit(1)" class="scrollerstyle" style="width:22; height:22; border-left-width:0px;" name="next" title="Next News"></form>');}else{document.write('<form name="news_bar" style="padding: 0; margin: 0;"><input type="button" value="Previous" onclick="moveit(0)">')if (navigator.userAgent.indexOf("Opera")!=-1)document.write('<input type="button" name="news_bar_but" onclick="goURL();" style="width:'+barwidth+'" border="0">')elsedocument.write('<input type="button" name="news_bar_but" onclick="goURL();" width="'+barwidth+'" border="0">')document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')}function init_news_bar(){document.news_bar.news_bar_but.value=msgs[count];}//moveit function by Dynamicdrive.comfunction moveit(how){if (how==1){ //cycle fowardif (count<msgs.length-1)    count++else    count=0}else{ //cycle backwardif (count==0)count=msgs.length-1elsecount--}document.news_bar.news_bar_but.value=msgs[count];}setInterval("moveit(1)",setdelay)function goURL(){ location.href=msg_url[count];}init_news_bar();//  End --></script><hr class="nospacing"><!-- End Ticker script --></body></html>

Your help is much appreciated.

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
That is your document type definition. It tells the browser what rules to apply when the browser renders the page. In this case, you are telling the browser to behave according to the XHTML 1.0 Strict doctype. You can specify different doctypes there and the browser will (should) display the page differently, according to whatever set of rules you tell it to follow.You may want to point the W3C validator to your website and see if it flags anything as wrong for XHTML 1.0 Strict.http://validator.w3.org/
Link to comment
Share on other sites

You probably don't have that many. There are probably a few errors up top that are causing other things to get flagged, but just start at the top of the list and work your way down. Most things should be pretty easy to fix (i.e. replace an attribute with some CSS or something).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...