15 replies [Last post]
namefake
Offline
newbie
Last seen: 16 years 16 weeks ago
Joined: 2005-08-15
Posts: 3
Points: 0

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;
}
-----------------------------

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 13 years 36 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

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 Smile

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.

I am Dan, Dan I am.

namefake
Offline
newbie
Last seen: 16 years 16 weeks ago
Joined: 2005-08-15
Posts: 3
Points: 0

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

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Firefox list issue?

could you possibly give us a link?

namefake
Offline
newbie
Last seen: 16 years 16 weeks ago
Joined: 2005-08-15
Posts: 3
Points: 0

Firefox list issue?

Sorry, meant to do that. It is at the following:

http://195.137.21.100/test/search.htm

Cheers

Neil

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

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 Smile

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 Laughing out loud :D

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 13 years 36 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

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 Smile

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 Laughing out loud :D

Hey, what are you trying to say? Tongue

I am Dan, Dan I am.

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Firefox list issue?

I think he was implying that you'd already answered the question and therefore no other replies were needed.

larmyia

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Firefox list issue?

Indeed. You'd answered the question, which I QFMFT. (another abbreviation for you IRCers Laughing out loud )

Verschwindende wrote:
  • CSS doesn't make pies

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Firefox list issue?

(qft — "quoted for truth", means something along the lines of "I second that statement!". Sometimes stated more emphatically as QFMFT.)

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Firefox list issue?

and here was he thinking it meant "Quick, Find My F***ing Towel", oh the horror :oops:

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Firefox list issue?

don't worry briski. it can mean that. context my dear Smile

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 13 years 36 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

Firefox list issue?

thepineapplehead wrote:
Indeed. You'd answered the question, which I QFMFT. (another abbreviation for you IRCers Laughing out loud )

OK i get ya Smile

I am Dan, Dan I am.