8 Replies - 1404 Views - Last Post: 11 January 2016 - 07:32 AM

#1 Shinoj_52   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 29-October 15

Bullet Points not visible in <ul> Tag.

Posted 21 December 2015 - 09:32 PM

Hello All

I have not been able to get bullet points on the Web Page. I have been using unorganized list tag.

I have been using the below Code

<ul style="position:relative;text-align:justify;width:450px;">
 	<li>Water proof</li><br>
 	<li>Dust proof</li><br>
  	<li>Fire proof</li><br>
 	<li>Maintenance free</li><br>
        <li>Easily remove from the appliances</li><br>
	<li>Reasonable Price</li><br>
	<li>Customized size Jackets can be manufactured according to the size of your appliances</li><br>
	<li>These are Silicon coated multilayered fabric material with appropriate thickness and thermal conductivity value and can work for temperature up to 250°c.
	</li>
</ul>


And in the style section, I have been using
ul 
{
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
    
}





I have tried removing list-style-type and tried to give it circle, i have tried using ol instead of ul, still i get the same problem.Also I have tried modifying display style but to no avail.

Only thing i can think of is right now, I have put the whole segment inside a Border, whether that is causing a problem


<div id="main_cont" style="position:relative;top:-200px;width:550px;border: 5px double black;box-shadow: 20px 10px 5px #888888;left:500px;padding-left:10px;">



This post has been edited by Atli: 21 December 2015 - 09:42 PM
Reason for edit:: Fixed code tags.


Is This A Good Question/Topic? 0
  • +

Replies To: Bullet Points not visible in <ul> Tag.

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Bullet Points not visible in <ul> Tag.

Posted 21 December 2015 - 09:52 PM

I see nothing really wrong in there.
My best guess would be that there is a conflicting style, defined for another part of the page, being applied to this section and messing up your styles for it.

The way to debug such things is to use a web browser's development tools to examine what styles, exactly, are being applied to the element, and in that way find out which CSS rules are messing it up.



I could also point out a few minor improvements you can make, although they won't fix your problem:

  • Putting <br> tags behind the closing </li> tags is not allowed. Browsers will probably render it, but it's still considered a syntax error.
    Use margins/paddings on the <li> tags if you want to create spaces between them.

  • Putting CSS inline on elements - using <elem style="..."> - is generally discouraged. Use <style> blocks or external style sheets.

  • There is a space between the number and unit for your bottom-margin style.

  • <ul> is a block element by default. You shouldn't have to specify that in the CSS.

  • You could merge all your margin-X: styles into a single margin: style.

Was This Post Helpful? 2
  • +
  • -

#3 velimark   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 21-October 15

Re: Bullet Points not visible in <ul> Tag.

Posted 30 December 2015 - 03:17 AM

I didn't found any error in the code. For this I tried to execute the code in online HTML executor but there also I didn't found any error.
As it is already stated that you have incorrectly used the BR tag, I will suggest you to remove them and retry the code again.

if the code is still not working, there will definitely be any other external CSS code which is conflicting with your inline CSS code.
Was This Post Helpful? 0
  • +
  • -

#4 Shinoj_52   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 29-October 15

Re: Bullet Points not visible in <ul> Tag.

Posted 11 January 2016 - 02:05 AM

View Postvelimark, on 30 December 2015 - 03:17 AM, said:

I didn't found any error in the code. For this I tried to execute the code in online HTML executor but there also I didn't found any error.
As it is already stated that you have incorrectly used the BR tag, I will suggest you to remove them and retry the code again.

if the code is still not working, there will definitely be any other external CSS code which is conflicting with your inline CSS code.



If i remove <br> then how would i include line breaks between the lines? Everything is coming on a single line.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6551
  • View blog
  • Posts: 26,559
  • Joined: 12-December 12

Re: Bullet Points not visible in <ul> Tag.

Posted 11 January 2016 - 03:00 AM

li-items are block-level by default, you must have some CSS that changes this if they all sit on the same line.

To adjust spacing between each li-item you could use margins or padding.
Was This Post Helpful? 1
  • +
  • -

#6 Shinoj_52   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 29-October 15

Re: Bullet Points not visible in <ul> Tag.

Posted 11 January 2016 - 03:46 AM

Yes, Indeed i had put it in inline. Now i have corrected it.. But the problem of bullet points remain after i removed <br>. And it doesnt have any css attached to it.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6551
  • View blog
  • Posts: 26,559
  • Joined: 12-December 12

Re: Bullet Points not visible in <ul> Tag.

Posted 11 January 2016 - 04:01 AM

Inspect the element(s) in your browser. In most cases you can just right-click and choose Inspect Element. Your can selectively disable and enable CSS properties, etc.. You are looking to find what property (or properties) are causing the bullets not to be visible, or whether some other element is sitting on top of the bullets.
Was This Post Helpful? 1
  • +
  • -

#8 Shinoj_52   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 42
  • Joined: 29-October 15

Re: Bullet Points not visible in <ul> Tag.

Posted 11 January 2016 - 07:14 AM

Indeed, the list-style-type was getting suppressed by a display inline. I did it by inspect element as you suggested. Thanks for your help.. :smile2:
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6551
  • View blog
  • Posts: 26,559
  • Joined: 12-December 12

Re: Bullet Points not visible in <ul> Tag.

Posted 11 January 2016 - 07:32 AM

Glad to help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1