<ul> <li> problem with breaks

A

AD

Hello!

I have problem with <ul> / <li> list values.

I would like to have no breaks both on Firefox and Internet Explorer.

I don`t know how to do that.

I tried:

<ul style="padding-left:15px;"> or <ul style="padding-left:0px;">

and above code works in Firefox, but unfortunatly only in Firefox.

I would like to have it working both on Firefox and IE.

Can you help me how to do that?

Thank you
Marcin
 
J

Jonathan N. Little

AD said:
Hello!

I have problem with <ul> / <li> list values.

I would like to have no breaks both on Firefox and Internet Explorer.

I don`t know how to do that.
Click to expand...

Breaks? Most times "breaks" refers to line break which has nothing to do
with padding but whether the display of an element is inline or block. A
URL would give a clue...

I tried:

<ul style="padding-left:15px;"> or <ul style="padding-left:0px;">

and above code works in Firefox, but unfortunatly only in Firefox.

I would like to have it working both on Firefox and IE.
Click to expand...

Explicitly set values for both margins and padding if you want
constancy. IE use margin to indent the list and FireFox uses padding. See:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">


<title>margin or padding</title>

<style type="text/css">
ul {background-color: #ddd; border: 1px solid red; width: 15em; }
</style>
</head>
<body>
<ul>
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
<li>Fum</li>
</ul>
</body>
</html>
 
H

Harlan Messinger

AD said:
Hello!

I have problem with <ul> / <li> list values.

I would like to have no breaks both on Firefox and Internet Explorer.
Click to expand...

What do you mean by "breaks"?
I don`t know how to do that.

I tried:

<ul style="padding-left:15px;"> or <ul style="padding-left:0px;">

and above code works in Firefox, but unfortunatly only in Firefox.
Click to expand...

What do you mean by "works"? All you're doing is specifying the left
padding on the list, which has nothing to do with "breaks".
 
B

Bergamot

AD said:
I have problem with <ul> / <li> list values.

I would like to have no breaks both on Firefox and Internet Explorer.
Click to expand...

I'll assume English is not your native language and something is being
lost in the translation. The word "breaks" doesn't have a lot to do with
lists, except perhaps where a new line occurs.
<ul style="padding-left:15px;"> or <ul style="padding-left:0px;">

and above code works in Firefox, but unfortunatly only in Firefox.
Click to expand...

As Mr Little said, the left margin and padding properties are used
differently by different browsers. You do need to set both properties if
you want consistent results.

If your desire is to get rid of the default left indents, try this:

ul {
margin-left: 0;
padding-left: 20px;
}

You may need to adjust the padding value a little, but that should be
close. If you want some other effect, then drawing a picture would help.
 
H

Harlan Messinger

Blinky said:
What a refreshing change of metasyntacticals.
Click to expand...
Not entirely. "Fee fie foe foo" goes back at least to the Colossal Caves
adventure game thirty years ago.
 
H

Harlan Messinger

Blinky said:
As metasyntacticals?
Click to expand...

At least in the sense that someone substituted "foo" for "fum". So even
if in a different way, someone tied in the original giant-speak with the
metasyntactical.
 
B

Blinky the Shark

Harlan said:
Not entirely. "Fee fie foe foo" goes back at least to the Colossal Caves
adventure game thirty years ago.
Click to expand...

As metasyntacticals?

I mean, "fee, fie, fo, fum" goes back at least 200 years in a fairy tale.
But not as metasyntactical variables.
 
G

GTalbot

Hello!

I have problem with <ul> / <li> list values.

I would like to have no breaks both on Firefox and Internet Explorer.
Click to expand...

Like everyone else has asked you or told you: breaks could mean line
breaks... but we're not sure.
Did you want to create an horizontal list of links for navigation
purposes?
I don`t know how to do that.

I tried:

<ul style="padding-left:15px;"> or <ul style="padding-left:0px;">

and above code works in Firefox, but unfortunatly only in Firefox.

I would like to have it working both on Firefox and IE.
Click to expand...

When you post webpage requirements like that, you always need to be
much more specific. "IE" could mean IE 6 and/or IE 7 and "Firefox"
could mean Firefox 1.5, Firefox 2 or Firefox 3... We don't know... and
there are great differences between IE 6 and IE 7.
Can you help me how to do that?

Thank you
Marcin
Click to expand...

Yes. Read carefully this webpage:

Consistent List Indentation
http://developer.mozilla.org/en/docs/Consistent_List_Indentation

"(...)if you want consistent rendering of lists between Gecko,
Internet Explorer, and Opera, you need to set both the left margin and
left padding of the <ul> element. (...)"

Regards, Gérard
 
B

Blinky the Shark

Harlan said:
At least in the sense that someone substituted "foo" for "fum". So even if
in a different way, someone tied in the original giant-speak with the
metasyntactical.
Click to expand...

I didn't catch what you were saying. I see now what you meant. But I'd
just call that parody. I think they also misspelled "fo".
 
J

Jonathan N. Little

Blinky said:
Yeah, I Googled, too. I coud've swarn I came up with hits including "fo"
back in the nursery rhyme.

Guess not, Ralph.
Click to expand...

Was a 'playful' reference to the fellow with the hyper-vigorous legume
that encounters another fellow with a hyperactive pituitary and
disturbing culinary preferences...
 
S

shergar1983

Joined
Apr 13, 2008
Messages
1
Reaction score
0
What is it with you people, this chap is just asking a simple question? Why do you feel the need to shoot his question down rather than just help?

Time and time again I see postings like these either mocking people's technical know-how just becuase it is less than their own, or beacuse the poster's English isn't 'good enough'.

I've spent several years away from web design due to my job requiring php and javascript programming rather than markup, so getting back on the bike after years of change and new browser additions can be tricky and cause frustrations with seemingly simple things and so I understand the guy's pain.

Personally though when I see 'silly questions' or questions without suffiecent examples to answer on PHP forums I just ask for clarity, but always remember how it is when starting something new.

In answer to the original post, to control line spacing between <li> tags you need to specifiy this as a margin. You can use either margin-top or margin-bottom depending on where the first space should appear. So simple add:


li {
margin-bottom:15px;
}

to between the <style> tags on you page, or if you want to use on other pages add it is which ever .css file is appropriate. The 15px setting is just an example, this can be whatever you need, or 0px if this is what you need. You don't actually need to touch the padding attribute for what you're trying to fix.

Let us know if it works okay.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
I need help fixing my website 2
ul li styling 13
<ul> <li> links and spacing 3
Need help with code on website (noob) 2
Help with my responsive home page 2
CSS menu problems with IE 7 2
Is it possible an iframe can overlapp another? 3

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 457

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top