problem with floating list

jwlnewsome · #1 Jul 6th, 2006, 16:23

hello to all i have a problem with this list and its doing my head in.
the problem is the list menu works fine until imake it float left. then the list-style-type: square disappears can anybody explain this to a newbee in css, code below

css code

Code: Select all

 
#menutop ul{
list-style-type:square;
}  
#menutop li{
float:left; // remove this line and the squre appears
padding-right:15px;
} 
#menutop li a{
font-size:12px;
font-family:"Verdana";
font-weight:bold;
color:#666666;
text-decoration:none;}
#menutop li a:visited{
color:#666666;
}
#menutop li a:hover{
color:#60A3D0;
}

html code

Code: Select all

<body>
<div id="menutop">
<ul>
  <li><a href="#">john</a></li>
  <li><a href="#">newsome</a></li>
</ul>
</div>
</body>

ukgeoff · #2 Jul 6th, 2006, 16:31

Tried your code.

I see the marker in IE, Firefox and Opera.

spinal007 · #3 Jul 6th, 2006, 16:40

if not, make sure li have left margin (which is the space used for the squares)

jwlnewsome · #4 Jul 7th, 2006, 08:24

thanks for that ive tried the margin but an still only get the square to show up in ff not ie am i missing something or does css code not universal

thanks again
john

minute44 · #5 Jul 7th, 2006, 14:56

CSS is universal but IE can be a real bitch sometimes. Can we have a URL? or even some screenshots?

jwlnewsome · #6 Jul 7th, 2006, 15:23

http://www.testreg8.co.uk/testcss/
thats the url it dont show much just my name and the problem with ie

thanks
john

minute44 · #7 Jul 7th, 2006, 16:00

ooooherrr! wierd problem!

I honestly don't know what to suggest... I'll do some home work on it though and see what I can come up with.

jwlnewsome · #8 Jul 7th, 2006, 16:10

tell me about it seems that css is going mad in ie just lately ive got problems coming out of my ears.

thanks
john

spinal007 · #9 Jul 8th, 2006, 09:20

DAMN! I cannot make it work!!!!!!

I think I understand the look you want and I used a background image:
http://www.123cleaners.com

jwlnewsome · #10 Jul 10th, 2006, 08:50

thanks for all the help sorry ive taken so long to get back to you all but ive been away for the weekend.
thanks again
john

moojoo · #11 Jul 11th, 2006, 13:29

You need padding on the left of the li to show the bullet image. i.e. padding: 0 0 0 14px; or something. alternately you can use a background image on the li vs a standard bullet i.e.

background:url("foo.jpg") center left no-repeat;

moojoo · #12 Jul 11th, 2006, 13:30

Forgot to mention, display:inline; negates a lists style. So you will need to use a background image. or float them left in which case you will need a clear element to keep the content below it. Problem is if you go the float method you won't be able to center the ul with text-align:center; etc. I would search www.alistapart.com and find a method of implementation that is right for your needs. FF is a lot nicer to people than say safari. Safari from what I know is much more strict in its css parsing. e.g. color: FFF; will work in FF but safari requires color:#fff;. etc etc.. As for IE, well it is just a sloppy piece of cow poo.

Edit: As I read his code wriong he is using float:left so the padding may fix it. I need coffee.

Here is a snippet from the nav in one of my sites which uses a background image for a bullet. Bold shows the image placement:

/* side bar link and list styles */
#sidebar ul {
padding: 0;
margin: 0;
}

#sidebar li {
list-style-type: none;
border-bottom: 1px solid #FFF;
}

#sidebar li.sideheading {
padding: 12px 6px 12px 0;
background-color: #003E81;
color: #FFF;
font-weight: bold;
text-align: center;
}

#sidebar li a {
display: block;
color: #003E7E;
font-weight: bold;
padding: 6px 6px 6px 28px;
text-decoration: underline;
background: #EEECE1 url(../images/texas_bullet.gif) center left no-repeat;
}

#sidebar li#sidecurrent a {
color: #FFF;
background-color: #A81A18;
text-decoration: none;
}

#sidebar li a:hover {
color: #A81A18;
background-color: #E5E3D4;
text-decoration: underline;
}
/* end sidebar link and lists tyles */

minute44 · #13 Jul 11th, 2006, 13:33

Quote:

Originally Posted by moojoo

You need padding on the left of the li to show the bullet image. i.e. padding: 0 0 0 14px; or something. alternately you can use a background image on the li vs a standard bullet i.e.

background:url("foo.jpg") center left no-repeat;

I have a feeling that you're probably right here (as a designer, I walk in your freakin shadow) but this isn't normal behaviour is it? I mean, I've never experienced anything like this and I use CSS lists quite a lot.

Do you know something from a past experience or something?

moojoo · #14 Jul 11th, 2006, 13:54

I know nothing! heh

Quote:

Originally Posted by minute44

Do you know something from a past experience or something?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
floating divs problem in IE	r0ck80y	Web Page Design	4	May 19th, 2008 14:43
having problem floating elements	danny322	Web Page Design	1	Jan 14th, 2008 16:45
First image problem and inline list problem	konnor5092	Web Page Design	8	Dec 1st, 2007 09:08
Problems floating a list, as well as some other issues!	blizeH	Web Page Design	7	Oct 14th, 2006 20:13
Problem with a floating layer.	derdeb	Web Page Design	7	Jul 8th, 2005 18:22

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
problem with floating list