Bullet points not showing on website

Topic

New Reply

Hi,

I have designed a website: http://www.make-a-date.org/old

and l am baffled as to why the bullet points are not showing on index.html and speed_dating_tips.html pages.
They appear fine in browser preview mode in Dreamweaver but not when l ftp the files across.

Any help would be appreciated.

Justin.

Reply | Quote

Replies

Do you mean these that shown in the attachment, if not where should they be?

DaveA I am so far behind, I think I am First
Genealogy....confusing the dead and annoying the living

Reply | Quote

Dave,

The website l am referring to is: http://www.make-a-date.org/old
and not http://www.make-a-date.org.
The bullet points should be showing on the index.html page and speed dating tips page but are not.
see attachment.

Justin.

Reply | Quote

Yikes, I’m glad I’m not maintaining this site I haven’t seen 15 levels of DIV between LI and the text!! I was able to get the bullets to show by specifically re-defining LI to a bullet (I chose square). I uploaded the index.htm and .css file to my server and can see the bullets in IE. Normally you shouldn’t have to explicitly define the bullet type with LI but maybe because of all the extra fluff in between it gets lost. Also, with all your many styles embedded directly in the index.htm it greatly ssslllllooooowwwwssssss down my Dreamweaver MX program. It took such a long time to respond to any style edits I made I almost thought it was locked up. I’m sure it’s because of all the extraneous nesting you have to force alignments when you could just use a single DIV with the proper css definition.

Deb

Reply | Quote

Deb,

Yes it is very slow in loading up and is a pain to edit due to this.
Being self taught no-one has really teached me the proper way to code but l can see where l have go wrong and have learnt not to do this on the next site l design.
The next site that l code l will learn CSS in order to avoid this problem.
Would you be able to send me the revised index.html and CSS files so l can use them in order to update the site.
Also can you tell me (in simple steps) how l go about putting all the bullet points in the site by using the method you have mentioned?

Thanks for your help.
Justin.

Reply | Quote

To get the bullets to show you need to explicitly define the bullet style with the LI tag. The picture I showed you was how to do it in Dreamweaver where it creates the style for you instead of you manually adding it as I assume you did with all your other styles. The actual code is:

li { list-style-type: square; }

So every instance of

Thank you very much for taking the time to look at the code for me , it is much appreciated.
To place the other LI styles in the site l just inserted a bullet point by clicking on the bullet point styles at the bottom of the page obvioulsy l have been doing this wrong. But as l am self-taught no-one has taught me the correct way to do this before.
I will have a look at the CSS file and try and change it so the a circular bullet point is shown rather than a square bullet point.
I am not to sure how to change the speed dating tips page so that it uses the CSS.
Could you possibly remove the irrelavant code from the speed dating tips page so that it uses the CSS, not being upto much up on coding side l am not to sure what to delete and might make things worse by deleting some of the code.
It would be much appreciated if you could do this for me ,as this problem has been bugging me for a while.

Thanks once again for your help.

Regards
Justin

Reply | Quote

As to the LI style you said you pushed the LI button on Dreamweaver’s tool bar and that is OK, that’s fone way to add list items (UL then LI for each item). However…. you get more control over exactly how LI looks if you attach a custom style to this tag. I think it helps to use Dreamweaver in split screen mode so you see half of the page in graphical mode and also see the code (use the button to the right of “” to view a split window). As you push those buttons on Dreamweaver to add items, you’ll see the code that gets written. As a beginner, it’s much better to learn to manually code HTML than rely on an editor to do it for you.

If you want a circle bullet, just change the word ‘square’ to ‘circle’ in the CSS definition. The reason you HAVE to define a circle as oppose to it being the default I can’t say exactly other than Dreamweaver is so confused by so many layers of extra fluff that it forgets. It’s better to explicitly define it anyway just in case.

To edit the pages you have, just delete the blank lines, it’s just a text file and it won’t affect the way it’s viewed by the browser. *** This is why you need to learn HTML before trying to learn CSS, you’re way way ahead of yourself ***

Deb

Deb

Reply | Quote

Thank you very much for taking the time to look at the code for me , it is much appreciated.
To place the other LI styles in the site l just inserted a bullet point by clicking on the bullet point styles at the bottom of the page obvioulsy l have been doing this wrong. But as l am self-taught no-one has taught me the correct way to do this before.
I will have a look at the CSS file and try and change it so the a circular bullet point is shown rather than a square bullet point.
I am not to sure how to change the speed dating tips page so that it uses the CSS.
Could you possibly remove the irrelavant code from the speed dating tips page so that it uses the CSS, not being upto much up on coding side l am not to sure what to delete and might make things worse by deleting some of the code.
It would be much appreciated if you could do this for me ,as this problem has been bugging me for a while.

Thanks once again for your help.

Regards
Justin

Reply | Quote

Deb,

I noticed that you have changed the speed dating tips page also, l assume this site will be ok and will show the bullet points when ftp it across to the server?
Also l noticed that on some pages there is a lot some empty space at the bottom of the page (such as the index page and dinner dates page), is there any simple way to remove this unwanted space or would it involve a complete redesign of the website?

Justin.

Reply | Quote

In the speed_date.html file you have blank lines from lines 4-934, just delete them like you would a Word file or anything else. I didn’t want to do it all for you since this is just cleaning up, it’s not coding HTML. Then your embedded styles are lines 963-1037 so just delete those lines and add the tag like I did in index.html to point to makeadate.css (which I already included in the last post. The whole point of using an exteral .css file is so you don’t have to keep repeating the same definition in each file. This just sets you up for making more errors.

I deleted the styles in index.html and added them to this .css file. I attach two versions of this speed_date.html file one original, the other edited. Please look at both and start trying to learn raw HTML else you’re really limiting yourself in my opinion and won’t be able to fix/tweak the pages as needed (no editor can do exactly what you need in every instance).

View the code in ‘code’ mode by clicking the button that has ” ” on it and go at it. Since you asked this question I’m tempted to think you’ve never looked at the code itself so you’re not sure how to edit it directly. (But then again, you added the styles directly inside the HTML page so they got there somehow.) To remove the embedded CSS just delete them from the page and add the tags as I mentioned before to point the page to the makeadate.css file. I already did this in the index.html page so just look at that one. I also added some comments for you in the sections that I removed – look toward the top of the code. See line 56 in index.html

Deb

Reply | Quote

Thanks for your advice and help, l fully understand l need to learn HTML more.
If you see my previous post you will see that l get an error why l preview the updated index.html file which you kindly amended for me.
Do you have any ideas as to what is causing this?
Sorry, I am a little confused over the speed dating tips page you sent me as it has new bullet points in it.
Does this mean it would now display properly when it is ftp’d across to the server?
If this is not the case shall l assume l have to delete line 4-934 and lines 963-1037 in this file and then put the bullet
points in as you mentioned using CSS?

Justin.

Reply | Quote

When I had your files I didn’t get any JavaScript error so can’t help there. I’d suggest comparing line by line a working version and your current non-working version. Open them both in DW in code mode, and view both files simultaneously (go to Windows button on tool bar and select Tile Horizontally or Vertically).

The 2nd .zip file I sent already has the edits made and views fine in the browser. You shouldn’t always trust the preview mode in Dreamweaver (I assume you’re referring to view it in page design view and not from F12). Just directly open/view the file in your browser and see what it looks like if you’re not sure (don’t do this in DW, just open it directly in your browser like any other web page. If it looks fine locally (when viewed directly in the browser not F12 in DW) then that’s how it’ll look on your web site (assuming you also upload any dependent files like .css or images). F12 (function key 12) means ‘view in default browser’ same as File/Preview in Browser.

Have you compared your original index file with the copy I sent you? You’ll see all I did was remove 100’s of empty lines (purely for cosmetic reasons) and moved your styles to a separate file, makeadate.css. I commented what I did so please read those commens and compare the files side by side.

Deb

Reply | Quote

I forgot to add the .zip file with your edited files (I just deleted the embedded styles – see the code for yourself – read the comments I added)

Deb

Reply | Quote

Two things to add to/confirm the excellent advice that Deb/jujuraf has given you – if you’re going to be spending any serious time on website maintenance or design:

• learn basic HTML. It will save you masses of time in the long run. Two good tools for checking code that you write yourself are:
  • a basic Text Editor that supports color-coding – TextPad is one of many
  • a HTML code validator – HTML Tidy – freeware available from W3C – is one[/list]
  • download a 3rd party webpage and its CSS file (which will be cross-referenced in the Source Page view of the webpage). Put the CSS file into a Text Editor (or Notepad – if you don’t have one) and see what effect minor changes will have in your browser. [The color-coding in a Text Editor will highlight punctuation errors. Notepad will not.][/list]HTH

Reply | Quote

I appear to be getting a “Syntax Error” message when l preview the attached index.html file in IE browser within
Dreamweaver.
Any assistance as to what is causing this error message would be appreciated.
I have looked at the code as to what is causing this but cannot work out why this is.
see attachment for the error message and the index.html file.

Regards
Justin

Reply | Quote

The popup script at the very beginning of the file looks as if it hasn’t been entered correctly. JavaScript usually begins with “function” or “var”. This one begins with “; }”. The semi-colon indicates the end of a statement and therefore never belongs at the beginning of script. Likewise, the curly bracket would normally be the other way around. (As posted, the script does not have fully matching pairs of brackets.) Finally, the end of the script is commented out with “–>”, but the “<!–" at the beginning is missing. Attempting to correct all this – as it stands – still does not cause IE to stop reporting errors. (The page seems to load OK in Firefox with the popup blocked.) It looks to me as if you have incorrectly edited this out of a much longer script, and I can only suggest that you "re-extract" it. HTH

Reply | Quote

The pop up script is not needed, as l put it in order to test something.
I know the coding is a bit of a mess,as this i something l need to work on.
What if l were to delete this script would it resolve the problem?
I was sent this amended script by Deb (jujuraf) on Woodys lounge and have not changed it myself.
I know it works on Firefox and not in IE.

Reply | Quote

It works OK for me without the Script.

(I see that there are still some comments [for example, in the Head section] by jujuraf – about other aspects – that still need to be cleared up. No doubt you are planning to get to these. I definitely recommend that you carry the advice that she is suggesting through before the site “goes public” any further.)

HTH

Reply | Quote

I noticed that there are some blank lines at the end of some of the pages , could you possibly give me some pointers as to how l could go about deleting these.
I don’t know any other way than to learn HTML and re-design the site which is going to take a while, but if that is the only that l will have to do it that way.

Reply | Quote

Perhaps you don’t already know that

means “start of paragraph”, means “end of paragraph” and & nbsp; means “non-breaking space” (viz. blank space). Hopefully, you can use that information to figure out where in your code you have unneeded completely blank paragraphs. (Please note that – in “non-breaking space” the “&” and the “n” have to be joined together. Because of the Lounge Software, I had to put a space between, otherwise it would simply show in the post as a blank space.)

In principle, similar things apply where you have

and and no actual content between the two tags.

In the middle of a page, however, tags with no content between can be a way of adding blank space.

The “dictionary” of HTML, CSS and all the rest is at W3C (the World Wide Web Consortium) – see the link I gave above. If you don’t understand what a tag (or part of a tag) is for, that is the place to look it up. All other sites simply give a watered down version of what is at W3C.

HTH

Reply | Quote

I knew some of that already. I think the next step is to look at the site you mentioned and find out where the l have uneeded paragraphs and delete them from the page accordingly.
Thanks for the advice.

Reply | Quote

I’m sure you some simple text editor like Notepad or TextPad, Just open the .html file directly in one of those, it’s just a simple text file. Also you can just edit it the HTML directly in DW as I’ve said before. Have you even looked at the code in DW? Just delete the blank lines at the end if you want.

Please take everyone’s advice here and stop what you’re doing, spend one entire day learning the basics of DW and HTML, take a deep breath and learn the basics else you’ll continue to go in circles and accomplish nothing.

Deb

Reply | Quote

Regarding your last comment l think l will start to learn the basics of DW and HTML , as otherwise the next site l do will have the same sort of problems.

Justin.

Reply | Quote

Deb,

I noticed that you have changed the speed dating tips page also, l assume this site will be ok and will show the bullet points when ftp it across to the server?
Also l noticed that on some pages there is a lot some empty space at the bottom of the page (such as the index page and dinner dates page), is there any simple way to remove this unwanted space or would it involve a complete redesign of the website?

Justin.

Reply | Quote

To get the bullets to show you need to explicitly define the bullet style with the LI tag. The picture I showed you was how to do it in Dreamweaver where it creates the style for you instead of you manually adding it as I assume you did with all your other styles. The actual code is:

li { list-style-type: square; }

So every instance of

I think it’s great you have the motivation and interest to be self-taught (most of us are) but the reason your site is difficult to maintain is not due to CSS it’s just the way it’s layed out and you don’t need CSS to do that (or to fix it). You also chose a difficult layout for your first web site with newspaper-like columns. It might be easier to manually draw out what you want on graph paper and then use tables for the layout in DW (some people prefer layers to tables but as a beginner, and for better cross-browser compatability, I’d suggest starting with tables and rows/cols). You just need a table with three columns to duplicate your 3 major zones. Start with something simpler first.

Again I’d suggest using the tools you already have to learn the basics before trying something more complex. Dreamweaver has tons of tutorials and there are 1000’s of beginner web sites to pick this stuff up.

Deb

Reply | Quote

Thank you very much for your comments.
I will bear these comments in mind when desigining my next site.
In future l will draw out the design on paper then use CSS to design the site.
Do you know of any websites and / or books which are mighe be useful in learning CSS.

Regards
Justin.

Reply | Quote

For learning CSS, I already mentioned there are 1000’s of site and books out there (just do a search for ‘beginner CSS’) but since you have Dreamwaver just hit F1, type ‘CSS’ and read everything they have. But again, I think you’re trying to jump ahead to step 5 without really finishing steps 1-4 in the road to learning web page design. You need to learn how to hand code HTML and what it looks like and how to do simple table layouts. This has nothing to do with CSS. Otherwise, you’ll always get stuck on easy things and even with an editor as good as Dreamweaver is, there are plenty of times you just have to look/edit the code manually.

So I recommend using the resources you already have (free) and read the DW tutorials and help files and then move on to the 1000’s of web resources. There are cheap classes at http://www.eclecticacademy.com[/url%5D and http://www.lvsonline.com/schedule.shtml%5B/url%5D plus basic tutorials at http://www.westciv.com/style_master/house/index.html%5B/url%5D. But again, don’t bother with CSS if you don’t yet feel comfortable with plain old HTML coding and using tables to design the layout.

Deb

Reply | Quote

Thank you very much for your comments.
I will bear these comments in mind when desigining my next site.
In future l will draw out the design on paper then use CSS to design the site.
Do you know of any websites and / or books which are mighe be useful in learning CSS.

Regards
Justin.

Reply | Quote

I have taken your advice and am trying to learn HTML but l am really having some problems with my web page being displayed in other browers (Firefox and Netscape).
It works fine in IE.
I simply cannot work out what the problems are, any assistance would be appreciated to help resolve the following issues l am having:

1. Style sheet does not display links correctly when they are highlighed (i.e they do not turn red and underlined).

2. The wording “Forthcoming Events” does not display above the wording “Venues: Bournemouth”

3. Bullet points are not shown in Index page and speed dating tips page.

4. There is some text missing in the speed dating tips page beneath the wording “When greeting your date have a good strong handshake”.

5. There is some text missing in the Dinner dates page

6. Field Names are missing on the booking form.

I have tried and tried to look into these issues but simply cannot work out what the probem is.

website: http://www.make-a-date.org/old

Justin.

Reply | Quote

I haven’t looked at your code yet, but the proper way to link a CSS file is by using the Link tag (not script):

See http://www.w3.org/TR/REC-html40/present/styles.html%5B/url%5D for more details…

Also, FYI, you can make Hyperlinks in the lounge by using [ url ] http://YourUrl.com [/ url ] (without the spaces in the tags)
See Help 19 for more details.

Reply | Quote

Thanks for that.
Website appears to work fine in Firefox and IE but not in Netscape l am a little confused by this.
Any assistance would be appreciated.

Justin.

Reply | Quote

I really can’t see what the problem is at ll. For your comments 1,2,3 it looks fine to me in IE and Mozilla Firefox, Mozilla Firebird and Netscape 7. In both Mozilla browsers and Netsape, the bullets show as diamond shaped not circles but that’s the only difference. (see the attached Word file which has pictures of what I see in IE)

For missing text, item 4, I did a search of the HTML code and the reason you don’t see the text is because it’s not there. Did you do the same? Did you find the text in the HTML but not when it’s viewed in the browser? I’m talking about the /old pages.

Item (5) I’d have to guess is the same as (4) since you didn’t say what text was missing. Did you search the HTML code? The only way it’d be in the code but not show up is that some style is making it invisible (like white text on white background or it’s hidden by another element (a picture).

For (6) on the Booking page do you mean ‘field names’ as being the descriptive text before the form item (like Full Name:). This descriptive text shows up fine for me and when I look at the HTML the inputbox is named “Name” which has to match the JavaScipt used.

You still need to backup a few steps and get the basic HTML working (mystery missing text), forget about JavaScript and CSS for now, add those later. Just make the text and layout like you want (forget about text styles for now too since CSS will change it as you like). Use a simple table structure with three columns, add the left side navigation links, add a few images and the middle text.

Deb

Reply | Quote

Many thanks for your help and advice.

Regards
Justin

Reply | Quote

Deb,

Yes it is very slow in loading up and is a pain to edit due to this.
Being self taught no-one has really teached me the proper way to code but l can see where l have go wrong and have learnt not to do this on the next site l design.
The next site that l code l will learn CSS in order to avoid this problem.
Would you be able to send me the revised index.html and CSS files so l can use them in order to update the site.
Also can you tell me (in simple steps) how l go about putting all the bullet points in the site by using the method you have mentioned?

Thanks for your help.
Justin.

Reply | Quote

Yikes, I’m glad I’m not maintaining this site I haven’t seen 15 levels of DIV between LI and the text!! I was able to get the bullets to show by specifically re-defining LI to a bullet (I chose square). I uploaded the index.htm and .css file to my server and can see the bullets in IE. Normally you shouldn’t have to explicitly define the bullet type with LI but maybe because of all the extra fluff in between it gets lost. Also, with all your many styles embedded directly in the index.htm it greatly ssslllllooooowwwwssssss down my Dreamweaver MX program. It took such a long time to respond to any style edits I made I almost thought it was locked up. I’m sure it’s because of all the extraneous nesting you have to force alignments when you could just use a single DIV with the proper css definition.

Deb

Reply | Quote

Dave,

The website l am referring to is: http://www.make-a-date.org/old
and not http://www.make-a-date.org.
The bullet points should be showing on the index.html page and speed dating tips page but are not.
see attachment.

Justin.

Reply | Quote

Do you mean these that shown in the attachment, if not where should they be?

DaveA I am so far behind, I think I am First
Genealogy....confusing the dead and annoying the living

Reply | Quote