Posts by autocrat

tizag
alistapart
cssplay

And Practice practice practice.
Avoid using Hacks, there are plenty of work arounds, and it will save you headaches when newer browsers come out.

Validate code as you go... otherwise you will cause yourself more problems.

Test for accessibility as you go, otherwise you will have to go back and revise 40% of what you've done.

Read up on things like Usability... and get at least the basics of Search engine optimisation underbelt as well.

Yes, I know, not exactly all CSS, but if you learn them singularly, youmay end up spending more time than is necessary.

What are you using for that email form?
If you are getting alerts, I'm going to guess it may be a Javascript form?

You may want to reconsider (or at elast test with JS disabled), as it could be a serious accessibility/usability issue.
Alternatively, it oculd be some securtiy setting on your browser or computer?

Glad to see I'm not the only one.

Hey, maybe, eventually, oneday... the net won't be filled with such pretty (useless) designs and sites?

Okay... not wanting to come across as critivcal... but does this have to be tables?

You have 3 content zones... and not more than 1 item per row?
That would be 3 divs... thats it!
Maybe 1 outer wrapper if you like... 4 divs... thats 8 lines (open/close) - compared to the Tables 14?

Still, ignoring that... what styling have you tried to apply to the table?
Have you tried...

<table style="width: 600px; margin: 0 auto;">

???
Or applied an outer div and done it to that (along with text-align: center;) ???

Give those a try.

Do not rely on IE to give you a 'true' image as to how the page will load.

For a better picture, test in multiple browsers (such as Mozilla Firefox, Opera etc.).
IE has far to many 'easy' bugs (meaning that it is a lot more forgiving of errors and mistakes), and will show you something different to more compliant browsers.

Chances are that the table is doing what it was tald... taking up a certain width... whilst the div is taking up a lesser space.

Compare the two sizes and adjsut as required.

Well, is the table a fixed width?
Or if percentile, how much of a gap is left?

Dare I say it... you could paste it all in here
(last resort).
I'll grab a copy and work it over.

You have little choice.
Vertical alignment isn't really something that can be easily done.

If the pages are 'tall' or 'long' (ie. they won't fit in the viewport and you have to scroll), then you could apply padding or margin to an outer container.

If the pages area fixed height (say 400px or someting), then it can be done... usually by trickery (suchas positioning it down by 50%, then pulling it up by 25%)... but this can get a little out of shape in some browsers (some don't like negative margins, others don't like applying padding/margins to the bottom if certain styles are applied etc.).

Can you supply a URL?
(If you don't want to list your real one, pop over to tinyurl.com and get a 'fake' one for the time being ;))

Not wanting to sound funny... but we could do with a little more detail.

Okay, so you want to vertically align it...
what size is it?
Is it a fixed height or will it vary?

Can you not supply a link to the IE version of it?
(By the way, do you mean "I have a whole website that I am required to change so it works in FF as wel las IE" ???)

ANd thats why so many Programmers have to use skills from other people!

Please, think logicially.
If you have a TEAM, then it needs to work as one.
Therefore everyone in volved has to have input and contribute.

Far to often I've seen professionals with amazing knowledge and prowess in their profession screw a project up by not listening to the input of others.

How many Designers are aware of Browser inconsistencies, the limitations of space and the various alterantions that a user can force onto a design?

Not many - thats why everyone needs the input.

Saying it's down to the 'coder' to make up for there lack of knowledge wastes time, as that person as t ospend a lot longer going over the variou problems the design has caused, and fix them.

Instead, with a little common sense and communicaiton, you can get a fantastic design (even complicated, convulated and highly attractive!), and still get it working in every damend browser, still have the text resize and have it work with assistive/alternative technologies without additional programming.

And Comprimise is the key.
Without comprimise, you get stubborn people ruining the end result.

Okay... you say that you want it to take on the same style as outside the list.
Please tell me you have styling for Paragraphs...????

If so, simply use a Paragraph inside the List (should still be Valid, Semantic etc.), and then, where you haveyou paragraph style, simply follow it with
, ol p

:)

There may be a solution, but I can almsot gaurentee that it will only work on a few browsers!

So what page are we meant to be looking at now????

As when I look at
http://galerija.myartsonline.com/
in IE6 or MFF it seems to be the same (works with window resize, link hover etc.).

???

Two methods I can think of.
You have the image property for Lists, and you have the background-image proprerty also.

li
{
list-style-image: url(yourimage.ext);
}

Or

li
{
list-style: none;
background-image : url(yourimage.ext);
}

Note, with the background-image method, you may need to apply a bit of padding to the list.

Well, best of luck.

If you are not the store owner, and not apprised them of the alterations and limitations of what you are implementing, you could be leaving them open to legal action as well as causing a loss of certain user-groups and potential clients.

Sorry... going to disagree on that one.

If you let designers design, with no input from developers or users, then you are running the risk of getting a website that will fail.

You need input from all angles, through every step, from conception of ideas through to final coding.

Otherwise you end up with a site that is like 95% of those out there... inaccessible, poor usability and killing conversions as soon as people look a the site.

Plan, research, conceive, test, refine, develop.
Then repeat several times over.

Well, thats done with script.
Tehre are multipel ways to do it... I'd say the more "reliable and safe" methods depending on your server (php/asp etc.).

You could do it with JS... but please be careful, as that requires JS to be enabled on the visitors computer, and is ignored by bots.

Further, it could be somewhat damaging to your Search Engine results (not to mention annoying a percentage of visitors, possibly causing higher bounce/abondonment rates etc.).

But in short, you supply multiple "content files".
Then a piece of script that will randomly pick one.
Plenty of examples/scripts aroudn for that (in most languages).

Well... I'd go with something similar to ...TommyBS...

You can put in an image and tell it to be 100% 100%... that would get the result you are after... sort of.
I suppose if oyu really want to have content on top of it, you could use relative positioning and z-index.

The problem is diagonal lines aren't really done with CSS.
So you have to find a way to make it "look" like it.
Css BG images won't likely work as you cannot tell them to take u pa certain dimension (it's tile or not, thats it as far as I know). (thus why I said an inline image).

I suppose it could be done.... 3 or 4 spans... a different image in each (triangle), and then nest them, positioning the image partling off... could work (but is that much extra markup worth the result?)

Well, for a "quick fix"...
right after you middle div...
add a non breaking space...

<div id="middle">&nbsp;

Of course, it would help if you had a Doc Type, had a 0 (zero) for padding rather than an O (Capital letter o) etc. etc.

Pelase...
http://validator.w3.org
Use it to check as you build, saves lots of annoying little confusions.

Any chance of you being a little more specific as to which sections (putting Here1 and Here2 would have been very helpful).

Never used DW in my life... but I can have a guess for you.

If the ARticle is held in a DB, then you should beable to "fetch it"...
If you have cvreated the article so it has split content fields "a blurb/intro field" and "a main body field", then you can simply put a call into the blurb field.

Alternatively, you may have to call in the article and then set a limit on the number of characters returned etc.

Alternatively, yes, you could type it by hand (the only option I know of if the site is not DB based?).

Oh, and try not to copy those forms, as they are kind of "poor" examples of accessibility.

It would probably be worht making a few "practice forms" and getting the functionality working... then comming back and enquiring about improving the styling/accessibility of the form afterwards.

Okay... making a form is not reliant upon server side scripting... making the form do something often is.

On the upside, if all you are wanting is something for emails, then the chances are your host has some basic scripts/cgi/perl etc. that you can use, and that are fairly simple to implement.

One of hte more common ones is cgiemail.
It may be worth giving your hosts a quick call and asking what they have available, and what it can do.

Okay... not exactly a match... but a damn site cleaner/leaner/accessible...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>PC Components Canada</title>
<link rel="stylesheet" type="text/css" href="http://www.pccomponentscanada.com/css/stylesheet.css" />
<style type="text/css">
.style1 {
	left: 0%;
	top: 15px;
}

.itemdisplayblock
{float: left; margin: 0 auto; border: 1px solid red; text-align: center;}

.itemouter
{float: left; margin: 0 2px; padding: 3px; #display: inline; border-top: 5px double #ffffff; height: 135px;}
.itemouter:active, .itemouter:hover, .itemouter:focus
{border-top: 5px double #000000;}


.itemimage, .itemlogo
{border:none;}

.itemlogo
{float: left; clear: left;}
</style>
</head>

<body>

<div>
	<img src="http://www.pccomponentscanada.com/images/pccclogo.jpg" alt="PC Components Canada" width="150" height="150" /></div>
<div>
	<span class="InlineBlockContainer">
	<img src="http://www.pccomponentscanada.com/images/desktopsbold.jpg" alt="Desktops" id="DesktopLogo" onclick="javascript:document.getElementById('DesktopLogo').setAttribute('src','http://www.pccomponentscanada.com/images/desktopsbold.jpg');document.getElementById('NotebookLogo').setAttribute('src','http://www.pccomponentscanada.com/images/notebooks.jpg');Desktops.style.visibility='visible';Notebooks.style.visibility='hidden';" width="100" height="25" /></span>
	<span class="InlineBlockContainer">
	<img src="http://www.pccomponentscanada.com/images/notebooks.jpg" alt="Desktops" id="NotebookLogo" onclick="javascript:document.getElementById('DesktopLogo').setAttribute('src','http://www.pccomponentscanada.com/images/desktops.jpg');document.getElementById('NotebookLogo').setAttribute('src','http://www.pccomponentscanada.com/images/notebooksbold.jpg');Desktops.style.visibility='hidden';Notebooks.style.visibility='visible';" width="100" height="25" /></span>
</div>

<hr />

<div id="itemdisplayblock">

<a class="itemouter" href="#" title="blah">
	<img class="itemimage" src="http://www.pccomponentscanada.com/images/products/systems/desktops/thumbs/spark.jpg" alt="Spark" width="80" height="80" />
	<img class="itemlogo" src="http://www.pccomponentscanada.com/images/products/systems/desktops/logos/thumbs/spark.jpg" alt="Spark" width="82" height="34" />
</a>

<a class="itemouter" href="#" title="blah">
	<img class="itemimage" src="http://www.pccomponentscanada.com/images/products/systems/desktops/thumbs/origin.jpg" alt="Origin" width="80" height="80" />
	<img class="itemlogo" src="http://www.pccomponentscanada.com/images/products/systems/desktops/logos/thumbs/origin.jpg" alt="Origin" width="83" height="34" />
</a>

<a class="itemouter" href="#" title="blah">
	<img class="itemimage" src="http://www.pccomponentscanada.com/images/products/systems/desktops/thumbs/proplaya.jpg" alt="Pro Playa" width="80" height="80" />
	<img class="itemlogo" src="http://www.pccomponentscanada.com/images/products/systems/desktops/logos/thumbs/proplaya.jpg" alt="Pro Playa" width="154" height="47" />
</a>

<a class="itemouter" href="#" title="blah">
	<img class="itemimage" src="http://www.pccomponentscanada.com/images/products/systems/desktops/thumbs/omnificent.jpg" alt="Omnificent" width="80" height="80" />
	<img class="itemlogo" src="http://www.pccomponentscanada.com/images/products/systems/desktops/logos/thumbs/omnificent.jpg" alt="Omnificent" width="182" height="31" />
</a>

<a class="itemouter" href="#" title="blah">
	<img class="itemimage" src="http://www.pccomponentscanada.com/images/products/systems/desktops/thumbs/opus.jpg" alt="Opus" width="80" height="80" …

Okay... we're obviously at different ends of the "user" spectrum.

Yes... I can see your point about getting people to "upgrade"... but if they are upgrading, it's because they have the old stuff.... right?

More importantly,. there are some pretty big accessibility issues with that site.
No tabbing/keyboard navigation (you code isn't using links).
The popup I get on click is also a big no-no, as you cannot tab to anythign to close it or go back.

Sorry, but you really might want to rethink.
What you are wanting to achieve should be doable, using more "standard" approaches that every one can use.
(You may also find that you get alot more SEO Milage for other methods!).

Will go and have a play and see what alternative I can kick up.
Sure I've done simialr before, so I'll hunt through my notes.

IS there not a page for us to quickly look at?
Would help us if we could "see" it in different browsers.

Further, in most cases, what works in "most vbrowsers2 should work in others with a few tweaks.
Some times it's a browser misinterpreting... but more often it boils down to either a minor oversite or misconception of browser behaviours to certain css renderings in a browser.

I'm looking at hte CSS... and suffering confusion.
Why are you definign the visibility... by default it's visible.
You are setting an auto margin ... and 100% width???
inline-block is generally only used by IE(6) that I know off (and then often only to handle some of thebugs or to equate to some of the table styles supportted by other browsers).
I'm also not understanding the reason for tha absolute positioning.

(Again, being able to see it would help a great deal!)

As to not supporting "legacy"... You do realise how many people you may be missing out? Can you (or the end client) affort to miss out on that percentage of potential clients/customers/end users?

It doesn't help with the tables in there.

Still, try applying one of the standard IE fixes to the parent container and/or the items (the image wraps)...

position: relative;
zoom: 1;
display: block (or display:inline if floated).

Did you try removing all the styles and building up a bit at a time?

Fair enough.

www.soldiers-league.com
have a look at that one

Hmm... pause and think a moment.
Are you selecting a List Item... or a Link?

You should maybe be assigning the "selected" class to the <a> instead of the <li>?

Give that a go, and see how you fair.

You should be able to resize the text using CSS.

h1
{
font-size: 1em;
font-weight: normal;
}

That should resize the contents of any h1 (nopte, in some DocTypes there should only be 1), to the desired size.

Please note: I have set it to being 1em.
By default, that should equate to roughly 16px. This is done so that the text will Resize in compliant browsers and in IE6 (as setting it to px will result in IE6 not resizing the text!).
Of course, if you have altered font-sizes, you may want to adjust it to your own tastes (simple trial and error should do).

To effect all of them... try combining the identifiers...

h1,h2,h3,h4,h5,h6
{
font-size: 1em;
font-weight: normal;
}

That should all of them to the same... then you can go and alter each from there if you wish.
Please be aware that Header tags are sometimes used as visual identifiers, and thus more important (lower numbers after the 'h'), should be more visually obvious.

If this is not working, then it is possible that you have somethign 'overiding' your styling.
This could be a similar set of styles appearing lower in the css file (if external), or embedded styling overiding the external styling, or inline overiding the embedded/external... etc.
Altenratively, it could be more "specific" styling 'overiding'... such as

#contents h1

or

.maintitletext

or

h1.maintitletext

etc.

So, push …

Thats basic CSS Tab menus.
Plenty of examples on line, and a few different ways of doing it.
Basically, you use css background images (either for the curved ends, to to put a curve on the corners).

As for the "transparent background" images... that should be answered too...
:D

Any chance of you informing others how this was solved if possible... that way others may benefit as well :D

Chances are it is Width.
Is there a wrapper around those images?
If so, does it have a width set?
Does it have any Margins/Padding set?
Is it (or the contents) floated?

I know it's frustrating when starting with CSS... but you need to learn all the bugs, and figure how to handle them.
This could be the FLoat Drop problem, it could be the 3px job, it could be the doubled margin bug.
Or it could simply be that you cannot count (or the css style sheet), and where compliant browsers will "wrap", IE simply drops.

So, the only thing I can recommend is commenting out all the styles.
Then going through and uncommenting them one at a time.
That way you should beable to locate what area is causing hte conflict... and once you know what and how, you can then figure a way to fix it.

It's down to how hte Browsers tend to repond - DocTypes tend to act as "how to read this" instructions to the Browser.
You'll find things like Quirks mode and the Box model in IE are different than Strict mode and the Box Model (look it up).

There is also "personal preference" too... I know some folks that refuse to move from html 4.01... saying it does everything it needs to, and XHTML is simply a pointless extra step.

Okay... I hope this helps a little...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oracle Studios</title>

<style type="text/css">
html,body
{
margin: 0;
padding: 0;
font-size: 100%;
font-family: arial, sans-serif;
}

body
{
font-size: 62.5%;
}

.clear
{clear:both; font-size: 1px; line-height: 1px; margin-top: -1px; padding: 0;}
#pagewrapper
{}

#title
{
margin-left: 20%;
height:192px;
background-image: url(http://www.kishouvision.com/oraclestudios/banner.jpg);
background-repeat: no-repeat;
}

#nav
{
margin-left: 20%;
}
#nav ul
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#nav ul li
{
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
float: left;
}
#nav ul li a
{
color: #FFF;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
height: 2em;
width: 110px;
background: #888877;
font-size: 1.3em;
}
#nav ul li a:active, #nav ul li a:hover, #nav ul li a:focus
{
color: #ffffdd;
text-decoration: none;
background: #999988;
}

#content
{
border: 1px solid black;
margin-left: 20%;
background: #fff;
font-size: 1.3em;
line-height: 1.3em;
}

#content p
{
margin: 0.6em 0;
padding: 0;

}
</style>
</head>



<body>

<div id="pagewrapper">

    <div id="title">
    </div>

    <div id="nav">
        <ul>
            <li><a href="#" class="home">Home</a></li>
            <li><a href="#" class="news">News</a></li>
            <li><a href="#" class="media">Media</a></li>
            <li><a href="#" class="games">Games</a></li>
            <li><a href="#" class="forums">Forums</a></li>
            <li><a href="#" class="help">Help</a></li>
        </ul>
    <div class="clear">&nbsp;</div>
    </div>



    <div id="content">
        <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla diam
sem, aliquet a, luctus quis, vestibulum et, nisl. Ut ultrices nulla eu
lacus. Pellentesque vitae leo. Pellentesque hendrerit, turpis in
consequat placerat, lectus nisi placerat erat, nec congue …

Okay... is there a reason for that behaviour?

If you want fluid/flexible designs, there are other methods to achieve it than that.

Have you tried making 3 seperate content divs?
first one for the banner.
second one for the nav.
third one for the content.

they will automatically stack beneath each other.
Then you can apply a left margin to each to get the gap on the left.
(do not assign width to the 3 container divs! They wil lautomatically take up full widht, so the margin will just move in the left edge - if you try to apply a width, it may result in them pushing off and out of the right hand side in some browsers!).

Of course, I may be misunderstanding your design ideas... in which case I can only suggest that you alter the location of the navigation div - try puttin it inside the content div at the top, that way it will be positioned where you expect it to be (as it's inside the content div), and the text should automatically fall beneath it.

Hope that helps.

If you can, post the URL or use a "tinyurl"... I'll have a look and see what can be easily done to fix things.

Well, if you send a link to the site, I'll pop in and have a look.
sometimes it's possible to "re-organise" a little to avoid the problem anyway.

Well, you may want to rethink your design.
It's not hte menu at fault if "everything moves".

As I said, try looking at a list apart... they have several references to CSS based (JS enhanced for IE) menus.
Or the SuperFish with JQuery for a more accessibile option.

Oh.. .and a quick check in Google...

http://www.codeguru.com/forum/archive/index.php/t-15117.html
(sorry folks...)

See if that helps.

erm... possibly the wrong forum... maybe the Programming/Scripting forums would get more answers?

Still, in an effort to assist...
If you are dealing with "calendar values"... then you could look up VB finctions for calendar/date/day/month etc.
Alternatively, as you know the likely input, you could do a bunch of If/ElseIf checks, and manually pass though a list of possible string values, and then set them as numerical/integer values instead.

If it's jsut general text to number, you may encounter problems, as different people may input "text values" differently.

Alternatively, if you are simply taking inputs/values that are in "string" form, and want to handle them as "integers" (i.e. they user is inputting the number 3, but the input is set as text instead of integer), then there may be something like Cast or StrToInt for VB ?

MAybe a little late to the party... but are you wanting some form of "opaqueness" in the image (such as a drop shadow that can be partially seen through)?

If not, save the png with index transparency, as it's Alpha transparency that IE struggles with.

Alpha image filter should be able to be used in CSS files as well as in the main document as well, which means if it's part of the "design" (rather than the content), then you can slap that in.

You may find that you have issues with stacking/rendering due to "haslayout" problems (IE sucks due to that).

If it helps, try applying one of the following to either the item that is failing, or it's parent;
zoom: 1;
display: block;
position: relative;

Alternatively, check if you are applying height/width, as sometimes (as with floats), this can result in a change of behaviour.

Not being funny... but if you look at it in IE6 and then in a more compliant browser, the answer is staring you in the face.

Look at the Width of the left content in IE6... then look at how it has "wrapped" in the other browsers.
I'm going to guess you have the common Float Drop problem.

So I can only suggest that you go through the CSS file and comment out things like Padding and Margins and then see what happens when you reload.

You may find that a few pixels difference is what is causing the problem.

Okay... can you be a little more specific about the "stretch the full height".

By definition, an element (such as a div etc.) will either automatically expand to contain the content... or remain a set size if you apply a Height to it (barring IE, which treats height as min-height!).

You may be thinking of things lie having "columns" that appear to reach to the bottom of the page etc.?

INote the use of the word "appear".
It's very important... alot of the CSS styling for things like columns is a bit of "smoke and mirros"... things are not as they seem.
So I can only recommend that you go look up things like Faux Columns and Skidoo layouts.

See if those are the sort of thign you are after.

Where is the JavaScript for IE6?

No offence, but almost every writeup I've seen for CSS based behavioural menus clearly mke mention that it will not work in IE.

Try looking up Sucker Fish, Son of Sucker Fish, Super Sucker Fish etc.

Those provide you with a simple setup and the required JS.

Alternatively, you could look at the hover.htc JS fix if you prefer.

I personally recommend the SuperFish and JQuery approach, as it is much more accessible.

Additionally, you may want to avoid using "display: none;" as it means that it may not be visible to some screen readers etc. instead, positioning out of "page View" is the preferred method... so you would use position: absolute; left: -9999px; etc.

Most of the online demo examples (such as sucker fish) also mention this.

So I cannot recommend strongly enough that you go and take a look at A List Apart.

Please, more information!

Still, for guessing...

Initial Call...

{
background-image: url(images/mypicture.jpg);
}

Is the initial CSS to use.
Please note that the URL can be handled in 2 different ways.
1)Explicit - you use the FULL path to the file... such as from the root directory... images/products/bigimages/happyimage.jpg
2)Relative - the image is in a folder/directory or sub-folder/directory of the CSS file if it is external.

Thus, if you have inline or embedded CSS, then the URL should be Explicit.
If external CSS files are being used, then you can use either Explicit or Relative.

For positioning of the image...

{
background-image: url(path_to_image/file_name.ext); 
background-position: H V;
}

The position values can be;
1) Exact - measurements in PX etc.
2) Relative - em/% etc.
3) Text - left/right/center/top/bottom etc.

tiling of the image...

{
background-repeat: repeat_value;
}

The Repeat Value can be;
1) repeat-x - for Horizontal (L to R) tiling/repeating.
2) repeat-y - for Vertical (T to B) tiling/repeating.
3) no-repeat - for no tiling/repeating.

You can also try "fixing" the position... though that can get a little confusing.

Does any of that help?

Okay... 2 questions for you...
1) What are you attempting to do?
2) Why are you using "fixed" ?

If you want something "locked" into position, try using "position: absolute;".

Please be warned... position: absolute will make itself "positioned" in realtion to the last positioned item.
So if the item/container element that the ul is in is not positioned (either absolute or relative, then the chances are your UL will position itself in relation to the body of the page!

Please supply more information (and if possible, a link to a demo/example page) so people trying to help can give better advice and not resort to guessing ;)

I'm confused...
When you say "dropdown list" ... do you mean a Form Select that acts as a jump menu... or a "list" of links with CSS/JS to make them appear/disappear?

I'm not sure how SE's react to the Form Select (I would guess they cannot seem then as "real links" (I may be wrong though).
As for JS/CSS based menus - so long as the Links are there, and the CSS/JS adds the behaviour, you are fine.
It is when you have a JS menu that Includes the links or creates the lins that you get stuffed.

I would also strongly recommend following the advice of ...Njegos... - if you have pages and pages of almost identical content - you will not do you or your site any good.
SE's such as google want unique, distinct content, not minor variants, and may not index all your site, or even ban it.

Please try Validating your code...
(this will require the inclusion of DocType and CharSet!)

Quite often this sort of thing occurs due to tags/elements not being closed properly... esp. in very compliant browsers such as MFF.

It may also be due to quirks/non-standard mode being implemented by defautl, or the difference of code (you code in strict, it reads it as transitional // you code it as xhtml, it reads it as html).

Onceyou ahve that done, you may find the issue has disappeared :D
(Hint: When workig through Validation errors, start at the top of the file and work down, as some reported errors are acaused by previous ones above!).

Okay...

Have you tried using z-index: nnn;
(nnn being some numeric value).

It would also help if the Navigation was not "in the document flow"... meaning it should be seperate to everything else, jsut in case certain browsers don't want to play properly.