3 Replies - 438 Views - Last Post: 19 February 2020 - 02:48 PM

#1 ajetrumpet   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 09-November 19

correct syntax for <br> tag in different browsers

Posted 16 February 2020 - 04:59 AM

hey guys,

I searched for this here but didn't find what I needed. I currently have the following output:

https://drive.google...iew?usp=sharing

and the code that is making it is:
<ul>
<li>CEO</li>
	<ul>
	<li>Executive Director of Sales</li>
		<ul>
			<li>Regional Sales Manager (Midwest Region)</li>
    			<ul>
    				<li>District Sales Manager (Midwest Region)</li>
    					<ul>
    						<li>Sales Rep (Midwest Region)</li>
    					</ul>
				</ul>
		</ul>
		<ul>
			<li>Regional Sales Manager (Eastern Region)</li>
				<ul>
					<li>District Sales Manager (Eastern Region)</li>
				</ul>
		</ul>
	</ul>

</ul>
I need the vertical spacing between each next LI tags to be a little higher, but less than a paragraph element. I have tried many incarnations of it. some work and some don't. first of all, am I doing this right? 2nd, can I have the additional spacing I want *without* nesting ''p'' tags in each tag? I have looked here: My linkhttps://www.w3schools.com/css/tryit.asp?filename=trycss_line-height , but ufortunately that page's code doesn't work for me either.

So how can I get this done? external CSS link? inline CSS? I also don't know if when I write this solution out, either *br* or *br/* will work. what is up with that as well?

thanks!

- Adam

This post has been edited by ajetrumpet: 16 February 2020 - 05:00 AM


Is This A Good Question/Topic? 0
  • +

Replies To: correct syntax for <br> tag in different browsers

#2 Ornstein   User is offline

  • D.I.C Head

Reputation: 57
  • View blog
  • Posts: 103
  • Joined: 13-May 15

Re: correct syntax for <br> tag in different browsers

Posted 17 February 2020 - 03:36 AM

The first thing you might want to address is your nested ul tags; they should be inside li tags e.g:

<ul>
    <li>
        <ul>
            <li>Test</li>
        </ul>
    </li>
</ul>


Another thing to consider: ul and li elements have a margin/padding by default and their margin/padding can be changed using CSS. Most likely, you'll want to put something like padding on your li elements (or the ul inside the li elements) to create the space you want. Using p and br is almost certainly the wrong solution here.

This post has been edited by Ornstein: 17 February 2020 - 03:37 AM

Was This Post Helpful? 1
  • +
  • -

#3 ajetrumpet   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 09-November 19

Re: correct syntax for <br> tag in different browsers

Posted 17 February 2020 - 03:40 AM

View PostOrnstein, on 17 February 2020 - 04:36 AM, said:

Using p and br is almost certainly the wrong solution here.
well I'm not an HTML/CSS expert, Ornstein. and YES, I'm using '''p''' and '''br''' at the moment. I have some unique needs which require some unusual CSS and HTML tag use that you won't find on other websites, generally. I will try what you suggested regarding the nesting and get back to you. thanks so much! =)
Was This Post Helpful? 0
  • +
  • -

#4 Pogaca   User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 163
  • Joined: 24-August 13

Re: correct syntax for <br> tag in different browsers

Posted 19 February 2020 - 02:48 PM

How about this:

<!DOCTYPE html>
<html>
<head>
<style>
#first > li {
	padding:2px!important;
}
#second > li{
padding:4px!important;
}
#third > li {
padding:6px!important;
}
#forth> li {
padding:8px!important;
}
#no1 > li {
padding:10px!important;
}
#no2 > li {
padding:12px!important;
}
</style>
</head>
<body>
<ul>
<li>CEO</li>
	<ul id="first">
	<li>Executive Director of Sales</li>
		<ul id="second">
			<li>Regional Sales Manager (Midwest Region)</li>
    			<ul id="third">
    				<li>District Sales Manager (Midwest Region)</li>
    					<ul id="forth">
    						<li>Sales Rep (Midwest Region)</li>
    					</ul>
				</ul>
		</ul>
		<ul id= "no1">
			<li>Regional Sales Manager (Eastern Region)</li>
				<ul id="no2">
					<li>District Sales Manager (Eastern Region)</li>
				</ul>
		</ul>
	</ul>

</ul>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1