controling the height of a <br>

[photoxprt1868]

Hello,

Is there a way with CSS to control the height of a <br> tag? I have two div tags separated by a <br> tag and they spacing when I preview it through the browser is too much.

Thank you

 

[Foamcow]

Instead of using <br> tag to space out the divs, why not use margins and/or padding?

Use CSS to manipulate the elements you already have rather than adding more elements that you don't need.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[shu745]

I would try to use CSS to solve this situation but there's always the old-school style using a spacer.gif's height attribute to control the vertical spacing like:

<div>blah blah</div>
<img src="images/spacer.gif" width="1" height="10" />
<div>blah blah</div>

Again I would use CSS as the spacer.gif way is out dated.

Hope this helps,
Shu

 

[ChrisHunt]

You don't need a <br> between two <div>s - they're block elements, so you get a line break anyway. <div>s don't usually have any margin applied to them by default, so I don't know why you're getting them spaced apart, are there <p> elements inside them?

Post some code and we'll see what needs doing.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[photoxprt1868]

here's some code

The spacing problem occurs between the rows of the table inside the first div tabs, and also between the end of one DIV tab, and the begening of the other one. Where I now have the <br>

<td class="welcomeTD">
		<div id="welcome" >
			<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
				<div class="xboxcontent">
					<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><h1>Welcome [name]</h1></td>
  </tr>
  <tr>
    <td><img src="images/arrowBlue.gif" width="10" height="9"><a href="#"> log out </a></td>
  </tr>
</table>

					
  		  </div>
			<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
		</div>
		<br>
			<div id="leftMenu" >
				<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
					<div class="xboxcontent">		
					</div>
				<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
	  		</div>
	</td>

 

[ChrisHunt]

Can you post your CSS, or a URL for the page concerned would be even better. My guess is that there's some margin somewhere that's pushing the <div>s apart.

You should be able to remove the <br>, and give the <div>s values of margin-top and/or margin-bottom that will give you the desired spacing.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[photoxprt1868]

Here's the CSS. What actually driving me insane is the spacing inside the table in the first div tag. I changed xboxcontent to welcomeContent

#welcome h1, #welcome h2, #welcome p, #welcome td { letter-spacing:1px;}
#welcome h1 {
	font-size:10px;
	color:#FFFFFF;
	font-weight: bold;
}
#welcome table{ height:25px;}

#welcome h2 {font-size:2em;color:#06a; border:0;}
#welcome p {padding-bottom:0.5em;}
#welcome h2 {padding-top:0.5em;}
#welcome {background: transparent; margin:20px 0;}
#welcome a {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 9px;
}
#welcome td {padding-left:5px;}
#welcome tr { height:10px;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#41619a; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.welcomeContent {
display:block;  
background:#41619a; 
border:0 solid #08c; 
border-width:0 1px;
height:25px;
}
.welcomeTD{
	width: 130px;
	vertical-align: top;	
}


#leftMenu .xtop, #leftMenu .xbottom {display:block; background:transparent; font-size:1px;}
#leftMenu .xb1, #leftMenu .xb2, #leftMenu .xb3, #leftMenu .xb4 {display:block; overflow:hidden;}
#leftMenu .xb1, #leftMenu .xb2, #leftMenu .xb3 {height:1px;}
#leftMenu .xb2, #leftMenu .xb3, #leftMenu .xb4 {background:#b1dd50; border-left:1px solid #b1dd50; border-right:1px solid #b1dd50;}
#leftMenu .xb1 {margin:0 5px; background:#b1dd50;}
#leftMenu .xb2 {margin:0 3px; border-width:0 2px;}
#leftMenu .xb3 {margin:0 2px;}
#leftMenu .xb4 {height:2px; margin:0 1px;}

#leftMenu .menuContent {display:block;  background:#b1dd50; border:0 solid #b1dd50; border-width:0 1px;}

#leftMenu a {
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	color:white;
	text-decoration:none;
	background-color:#b1dd50;
	vertical-align:1px;
	padding:1px 10px 1px 5px;
	font-weight: bold;
}

#leftMenu a:hover {
		color:#006699;
}

#leftMenu ul {
  margin:0px 0px 5px 0px;
		padding:0px;
		background-color:#b1dd50;
		position:inherit;
  /*position:absolute;
		width:760px;
		left:0px;
		top:73px;
		border-top:1px solid #91979f;*/
		/*border-bottom:1px solid #adadad;
		border-bottom:1px solid #9297a0;*/
  list-style-type:none;
  
}

#leftMenu li {
	padding:0px 0px 0px 0px !important;
	padding /**/:0px 5px 0px 5px;
	border-bottom:1px solid #FFFFFF;
	border-bottom-style: dotted;
}