HTML Help

thesun · Joined: 07 Sep 2008 Posts: 16

Hi, I'm hoping this is an easy fix: I've got a nice page that displays the way I want it to in Firefox. (www dot onsenjapan dot net, then click on the "Onsen Basics" link). The various items in the list of dos and don'ts each have a white disc that separates the list items.

This disappears in IE. My stylesheet for those is:

#basicsborder ul {
width : 625px;
margin-left : 40px;
padding-left : 10px;
list-style-type:disc;
}

And I think before I used "list-style: disc" and that didn't work either.

Anyone know what I'm doing wrong? (I've also tried putting that in the "li" section too...no dice, er, discs.)

Any help would be fantastic!

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

Might help to correct these HTML Errors first so both browsers will try to parse your page the same.

Firefox is the only browser that is the closest to meeting CSS2.1/HTML 4.01/XHTML 1.0 Standards.

IE has a problem with dimensions and your container may be too small to allow your discs to show in IE.

thesun · Joined: 07 Sep 2008 Posts: 16

It's valid and the problem's still there. Should I make the container wider and see if the discs appear? It seems strange that they wouldn't.

Thanks for any and all help...

:-)

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

I'm just guessing about the container width being the problem only because I've had it be once before. Might try to change it and see what happens as it will be awhile before I get to taking a more detailed look at it.

thesun · Joined: 07 Sep 2008 Posts: 16

Hmmm...I played around with a bunch of things and nothing seemed to help. According to another site, setting the list-style-position to "inside" should have done it, but that's still not working either.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

As stated before, IE has a different way of calculating dimensions. Might have to use conditional statements if that is the problem.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

All browsers have build in defaults for margins and padding (IE's is 25px). The first thing is to defeat these defaults.
Code: * {
margin:0;
padding:0;
}
This may really throw your page out of whack and widths, margins and padding will have to be set for containers and content.
************************************************************
As far as your menu without doing the above step;
Your div container is 680px wide. Anything inside this div inherits the default margin.
Your ul is 625px wide with 40px left margin and 10px padding.
added together
625px+25px+40px+20px=710px
This will work if you reduce the ul width to 580px but the style types are still not going to show...so do it like this
Code: #basicsborder ul {
width : 595px;
padding-left:20px;
margin-left:40px;
list-style:disc;
list-style-position:inside;
text-align:left;
}
Now you have
595px+25px+20px+40px=680px
When you add padding to a container or object it increases the size. The ul must be increased with padding to bring the style type disc into view.
If you use the first step and defeat the defaults, the width of the ul could be increased by 25px.

Sure hope this makes sense, I had to re-read it twice to convince myself