Tue, 2005-08-16 16:33
Hi there
Sorry if I've chosen the wrong forum, please advise if this is the case.
I am using a 2 column with header and footer layout, and using an unordered list for my navigation items.
Everything appears fine in IE, but the navigation items are indented far too much (or being pushed in further) when viewed in Firefox (browser I actually use).
Can anyone tell me why it does this and more importantly how to fix it. Code below.
Thanks
Neil
The html and css are as follows (apologies if it's not the done thing to put it all in this thread like this):
-----------------------------
HTML-
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Search</title>
<link rel="stylesheet" type="text/css" href="es.css">
<script language="javascript" src="scripts/es.js">
</script>
</head>
<body>
<div id="outer">
<div id="nav">
<ul>
<li><a href="one.htm">Nav Item 1</a></li>
<li><a href="two.php">Nav Item 2</a></li>
</ul>
<ul>
<li><a href="three.php">Nav Item 3</a></li>
<li><a href="four.php">Nav Item 4</a></li>
</ul>
</div>
<div id="clearheader">
</div>
<div id="mainbit">
<br>
<p>Main Content
</p>
</div>
<div id="clearfooter">
</div>
</div>
<div id="footer">
</div>
<div id="header">
</div>
</body>
</html>
CSS-
html, body {
height: 100%
}
body {
padding: 0;
margin: 0;
background: #CCCCCC;
}
#outer {
height: 100%;
min-height: 100%;
margin-left: 160px;
border-left: 1px solid #FFFFFF;
margin-bottom: -52px;
background: #EEEEEE;
padding-left: 10px;
padding-right: 10px;
}
html>body #outer { /*for mozilla as IE treats height as min-height anyway*/
height: auto;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
border-bottom: 1px solid #FFFFFF;
overflow: hidden;
text-align: right;
background: #EF6B00;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
#nav {
position: relative;/*ie needs this to show float */
width: 160px;
float: left;
margin-left: -159px;/*must be 1px less than width otherwise won't push footer down */
padding-top: 112px;/*needed to make room for header*/
}
ul {
margin-left: 25px;
}
th {
text-align: left;
padding-left: 5px;
vertical-align: top;
}
td {
padding-left: 5px;
vertical-align: top;
}
#nav p {
padding-left: 3px;
padding-right: 2px
}
#footer {
width: 100%;
clear: both;
height: 50px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #0038A8;
background: #0038A8;
text-align: center;
position: relative;
}
* html #footer { /*only ie gets this style*/
\height:54px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearheader { /*needed to make room for header*/
height: 72px;
}
#clearfooter { /*needed to make room for footer*/
clear: both;
height: 40px;
}
div, p { /*clear top margin for mozilla*/
margin-top: 0
}
* html #mainbit { /* combat IE's 3 pixel jog */
height: 1%;
margin-bottom: 12px}
a {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #0038A8;
text-decoration: none;
}
a:hover {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #EF6B00;
text-decoration: none;
}
.linkOnOrange:hover {
color: #000000;
}
#sepwindow {
padding-left: 20px;
padding-top: 1px;
}
HR {
color: #BBBBBB;
}
.sitetable {
border-bottom: #BBBBBB 2px solid;
border-top: #BBBBBB 2px solid;
}
-----------------------------
Tue, 2005-08-16 17:15
#1
Firefox list issue?
I'm not 100% sure but afaik <ul> is indented in IE using margin-left and in FF padding-left. Furthermore, you're using
ul {
margin-left: 25px;
}
which I think may be adding to the problem. try adding this
ul, ol {
margin-left: 0;
padding-left: 0;
}
and I think it should even it all out. if that doesn't work let us know...
larmyia
Tue, 2005-08-16 17:22
#2
Firefox list issue?
Hi there.
First of all, you will need a full doctype declaration for your html.
It should read something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
For a full list of valid doctypes, visit w3.org.
As for the unordered list problem, IE and Firefox use different methods to set the automatic indenting for list items. To reset it for both be sure to set the margin AND padding to 0 for the <ul> element. From there, use one or the other (to my recollection) to set the left margin and it should work out fine in both. Correct me someone if i am mistaken 
I would also set the scope for the <ul> margins etc. using a class such as in my example below.
Example:
ul.nav {
margin: 0;
padding: 0;
margin-left: 25px;
}
...
<ul class="nav">
...
</ul>
Hope that helps.
Dan.
Wed, 2005-08-17 14:58
#3
Firefox list issue?
Hey folks
Cheers for the suggestions, but there is still a difference on the indent to the bullets between IE and FF.
The best way to illustrate this is to set padding, margin and the margin-left for <ul> all to 0. With IE you see no bullet as it is off the left of the screen (expected), but with FF you can see half the bullet.
Basically FF always seems to be further right than IE. It's as if you need to set a different margin-left value for each browser!
Any ideas?
Cheers
Neil
Wed, 2005-08-17 15:50
#4
Firefox list issue?
could you possibly give us a link?
Wed, 2005-08-17 16:42
#5
Firefox list issue?
Wed, 2005-08-17 17:27
#6
Firefox list issue?
not sure if it'll have anything to do with the probs, but you're not using a valid doctype. can I ask why you are writting with HTML 4.0? It should be at least HTML 4.01 or preferably XHTML 1.0
this link may help explain doctype to you and help you find what you need. although I don't see any need not to be using XHTML 1.0 strict.
http://www.alistapart.com/articles/doctype
there are also lots of great articles on this subject in the "How To" section of this forum.
if this doesn't fix the prob, then please let us know.
larmyia
Wed, 2005-08-17 19:04
#7
Firefox list issue?
Fruitcake wrote:
Hi there.
First of all, you will need a full doctype declaration for your html.
It should read something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
For a full list of valid doctypes, visit w3.org.
As for the unordered list problem, IE and Firefox use different methods to set the automatic indenting for list items. To reset it for both be sure to set the margin AND padding to 0 for the <ul> element. From there, use one or the other (to my recollection) to set the left margin and it should work out fine in both. Correct me someone if i am mistaken
I would also set the scope for the <ul> margins etc. using a class such as in my example below.
Example:
ul.nav {
margin: 0;
padding: 0;
margin-left: 25px;
}
...
<ul class="nav">
...
</ul>
Hope that helps.
Dan.
My, what an easy reply that was 
:D
Wed, 2005-08-17 19:25
#8
Firefox list issue?
list-style: none on the ul for FF (removing padding lets the bullets default to their position outside the ul box)
Try adding display:inline to the nav as you may find that in IE the negative margin is actually greater than you think which means it is abutting the left edge(double margin bug)
The reason the ul or rather the #nav in FF is off from the edge is the padding-left 10px on the #outer remove that and if needed pad out the div#mainbit p.
Hugo.
Thu, 2005-08-18 03:28
#9
Firefox list issue?
thepineapplehead wrote:
Fruitcake wrote:Hi there.
First of all, you will need a full doctype declaration for your html.
It should read something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
For a full list of valid doctypes, visit w3.org.
As for the unordered list problem, IE and Firefox use different methods to set the automatic indenting for list items. To reset it for both be sure to set the margin AND padding to 0 for the <ul> element. From there, use one or the other (to my recollection) to set the left margin and it should work out fine in both. Correct me someone if i am mistaken
I would also set the scope for the <ul> margins etc. using a class such as in my example below.
Example:
ul.nav {
margin: 0;
padding: 0;
margin-left: 25px;
}
...
<ul class="nav">
...
</ul>
Hope that helps.
Dan.
My, what an easy reply that was :D
Hey, what are you trying to say? 
Thu, 2005-08-18 06:29
#10
Firefox list issue?
I think he was implying that you'd already answered the question and therefore no other replies were needed.
larmyia
Thu, 2005-08-18 08:36
#11
Firefox list issue?
Indeed. You'd answered the question, which I QFMFT. (another abbreviation for you IRCers )
Thu, 2005-08-18 17:00
#12
Firefox list issue?
(qft â "quoted for truth", means something along the lines of "I second that statement!". Sometimes stated more emphatically as QFMFT.)
Fri, 2005-08-19 07:48
#13
Firefox list issue?
and here was he thinking it meant "Quick, Find My F***ing Towel", oh the horror :oops:
Fri, 2005-08-19 08:19
#14
Firefox list issue?
don't worry briski. it can mean that. context my dear
Tue, 2005-08-23 02:18
#15
Firefox list issue?
thepineapplehead wrote:
Indeed. You'd answered the question, which I QFMFT. (another abbreviation for you IRCers
OK i get ya