ul + new web design = no bullets?

[Linda Thomas]

Basically we've upgraded the look of our web site and we are currently running the old one while we upgrade to the newer one. So we have 2 development servers (1 - old one, 2 - newer one). So all updates done on 1 have to be done on 2 as well.

We have run into problems with bullets on development 2 side. A page with <ul><li>message</li></ul> that works on development 1 wont' show a bullet on development 2. If we remove the <ul> tag we will get a bullet for the <li> but it isn't indented to the right.

I'm pretty sure something is set up wrong in the css or header/footer files but I dont' want to mess with anything. I was hoping to use a tab like ascii or unicode to tab over but that isn't working. Other than using tables and columns or lots of non-breaking spaces, is there a way to tab over using Dreamweaver?

Thanks for listening!

[ August 17, 2005: Message edited by: Linda Thomas ]
[ August 17, 2005: Message edited by: Bear Bibeault ]

[Bear Bibeault]

As this has not a thing to do with JSP, moved to the HTML/Javascript forum.

[Bear Bibeault]

I think it's a big mistake (huge, gargantuan) to try to band-aid a solution rather than discovering the underlying cause. You invariably just end up just adding more problems that you will have to deal with later.

My advice is to dig into the CSS and find out what's boofing up the formatting.

[Linda Thomas]

Thanks for the reply. Unfortunately our supervisor had a hard time getting the headers and footers to work properly and I'm not sure if the css page came from the company who designed our home page (we out sourced the main page and are creating the subpages ourselves).

I've worked here for 2 and a half years and I am always the one who wants to find the solution and solve the problem rather than bandaiding it, but I have also found that this can cause more stress and is not always appreciated by my coworkers when they have to redo pages the 'right' way when the pages were already working (even if the code was ugly).

The motto here from the student workers is do whatever it takes to get it done and working and our boss allows and encourages this behaviour because we meet deadlines this way.

The updating of the old site to the new is over a week behind schedule and it looks like its release to go live will be a week behind as well so all I have time for now is a bandaid.

Plus I wasn't part of the group who did the updating since I was and still am working on finishing up a project. I just got sent an update and it has to be updated on both the old and new sites. So I'm not familiar with the pages as well as they are and they are having the same problem and haven't found a solution yet. They are bandaiding it.
[ August 18, 2005: Message edited by: Linda Thomas ]

[Yuriy Zilbergleyt]

You have access to all the CSS code, right? Just do a text search through them for "ul", "li", "list-style-type", and "text-decoration".

-Yuriy

[Linda Thomas]

I do and I'm looking through them now. There are many alterations to the <ul> but if I don't specify a class in my code shouldn't the <ul> behave normally? I would think that none of the <ul>'s they've put in the css should take effect unless you define the class of the <ul>.

Is there a way for me to create a default <ul> at the top of the page, then set class to that? Except that I dont' know what the default actions of the <ul> are.

Like I'm seeing stuff such as:
div, h1, h2, h3, p, ul, li, form {
margin: 0;
padding: 0;
}

The format on the page should overwrite the css. I'll have to experiment, I wonder if there is a body <ul> set somewhere but I can't find it.
[ August 18, 2005: Message edited by: Linda Thomas ]

[Yuriy Zilbergleyt]

If the CSS has "ul { text-decoration:none}", it will effect every ul. If the css says "#listDiv ul { text-decoration:none }", it will effect every ul that is a child of an element with the id #listDiv.

If an element has a class, that simply takes priority over the tagname, and the id property takes the priority over the class. But for style properties that the tagname and the class don't conflict over, the properties from both are used. So if you have

ul {
  text-decoration: none;
  background-color: red;
}
 
.myList {
  background-color: blue;
}

a <ul class="myList"> will end up having no text-decoration and a blue background.

As I understand, the order in which the CSS blocks are loaded affects the priority in which similar blocks (two class definitions for example) are treated. If you have CSS code in the page itself, then in order for it to override any similar code from a linked .css file is for the page CSS to come after the linked CSS. So in the following case, the linked CSS will override the page CSS.

<style type="text/css">
ul {list-style: circle}
</style>
<LINK rel="stylesheet" type="text/css" href="mycss.css"/>

The following page explains different list-specific properties:
http://en.selfhtml.org/css/eigenschaften/listen.htm#list_style_type

I'm guessing you're looking for "list-style :disc". And yes, if you specify the page's CSS code after the external CSS are linked, and use CSS classes, that should override everything else. Except maybe definitions like #div ul{}.

-Yuriy
[ August 18, 2005: Message edited by: Yuriy Zilbergleyt ]

[Linda Thomas]

Ok, now I've put this at the top of my page

<STYLE TYPE="text/css">
<!--
ul, li{
margin: 15px;
padding: 10px;
}
-->
</STYLE>

And the bullets are now displaying correctly. BUT, lol, because it is a jsp page with includes and all its totally messed up the page's alignment.

The links to the css files is in the header. So I think I need to name this class and insert it above the header include? Am I understanding correctly? The headers also include the body tags which is where they have defined the ul and li's and where its causing the problem (so at least I found the problem, lol).

[Linda Thomas]

The best I can get is

<STYLE TYPE="text/css">
<!--
.reginfo ul{
margin: 15px;
padding: 10px;
}
.reginfo li{
margin: 15px;
padding: 10px;
}
-->
</STYLE>

Which produces a bullet but its aligned to the left as if it isn't encased in a <ul> but it spaces a line above and below it. So the <ul> is working but I must not be setting the alignment right.

Maybe the li should take the numbers in the ul and add to them rather than being exactly the same? Like if I align the ul over 15 px, the li is aligned over 15 px which puts it at the same spot as the ul. So the li would have to be 30px to put it 15 px to the right of the ul?

[Linda Thomas]

Thanks for the help understanding css. I have finally found the solution to my problems.

<STYLE TYPE="text/css">
<!--
.reginfo ul{
margin: 15px;
padding: 10px;
}
.reginfo li{
margin: 10px;/* Sets margin all around the bullet */
padding: 10px;/* Sets padding all around the bullet */
margin-left: 50px;/* Sets tab from left side of page */
padding-left: 10px;/* Sets spacing between the bullet and the text */
}
-->
</STYLE>
[ August 18, 2005: Message edited by: Linda Thomas ]