Hi, my website displays fine in mozilla firefox and internet explorer 7 but in ie6 the navigation menu is show in blocks vertically when it should be shown horizontally so there is obviously a compatibility issue. Could anyone help me fix this ? the website address is marksmanproductions.net

the html code:

<div id="navigation">
<ul id="nav">
<li id="current" class="first"><a accesskey="1" href="index.html">Home</a></li>
<li class="menuparent"><a accesskey="2" href="">Services</a>
<ul>
<li><a href="showreels.html">Showreels</a></li>
<li><a href="corporate.html">Corporate</a></li>

<li><a href="webads.html">Web Ads</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="musicvideo.html">Music Video</a></li>
<li><a href="performancevideo.html">Performance Video</a></li>
</ul>
</li>
<li class="menuparent"><a accesskey="3" href="targettingyou.html">Targetting you</a>
</li>
<li class="menuparent"><a accesskey="4" href="projects.html">Projects</a>
</li>
<li class="menuparent"><a accesskey="5" href="contact.html">Contact</a>

</li>
</ul>
</div>

css code

#navigation
{
font-size:11px;
width: 800px;
height: 40px;
}

/* styles for all UL's in the list */
#nav, #nav ul
{
width: 80px; 
margin: 0;
padding: 0;
}

/* float the menu left with overall width X.  Note: this style declaration must go here (after the above #nav, #nav ul) */	
#nav
{
float: left;
width: 780px;
height: 40px;
margin-left: 10px;
margin-right: 10px;
background-image: url(images/nav.gif);
}

#nav ul
{
}

/* styles for all LI's in the list */
#nav li
{
background-repeat:no-repeat;
position: relative;
list-style: none;
float: left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #482D15;
margin-top: 1px;
}

/* styles for all UL's/LI's in the list below the top level - can overwride here if you want second level to be wider*/
#nav li ul, #nav li li
{
width:140px;
background-color: #482D15;
}

#nav li a
{
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 5px;
margin-top: 2px;
}

#nav li li a
{
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 5px;
}

/* Fix IE. Hide from IE Mac \*/
* html #nav li { float: left; height: 1%; }
* html #nav li a { height: 1%; }
/* End */

#nav ul
{
position: absolute;
margin-left:-1px; /* Lines the secondondary nav up */
display: none;
}

#nav ul ul
{
}

#nav li a
{
padding-top: 13px;
padding-bottom: 10px;
padding-right: 52px;
padding-left: 52px;
}

#nav li ul li a
{
padding: 3px 8px;
border-bottom: 0;
}

#nav #current
{
}
#nav	   li.first	  {
border-left-style: none;
}

#nav #current .currentitem
{
background:#E4E4E4;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.over ul ul, #nav li.over ul ul ul
{ 
display: none;
}

#nav li:focus ul, #nav li li:focus ul, #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.over ul, #nav li li.over ul, #nav li li li.over ul
{
display: block;
}

#nav li.menuparent
{
/* Can add drop down arrow/image here by uncommenting line below */
/* background: transparent url("/images/arrow-down.gif") right center no-repeat; */
}
#nav li li.menuparent
{ 
background: transparent url("/images/arrow.gif") right center no-repeat; 
}

#nav li.menuparent:hover, #nav li.over
{
}

#nav li li.menuparent:hover, #nav li li.over
{
background: #E4E4E4 !important;
background-image:none;
}

#nav li a:hover
{
color: #000000;
}

#nav li ul li a:hover, #nav #current .currentitem:hover
{
color: #FFFFFF;
border-bottom: 0;
background-color: #874F14;
}

Hi,

 

First of all I would suggest you not to use css in your HTML page itself you can call it from outside your HTML page.

for your navigation you can download the navigation menu from my site and you can implement it in your site.

 

Asif

http://www.mohdasif.net

Thanks Asif, the css needed to be different for most pages so rather than link to the file i decided to place it in the page itself saved me alot of messing about.... I have taken a look at your navigation menu and it looks great but i would prefer a pure css navigation with no javascript involved, just like i have above but obviously working in all browsers. Im not sure if this is even possible in ie6 since its css support is very bad, ive heard similar things about the javascript ones too in ie6. thanks for the help but its just not the thing im after.

gfxpixeldesigns - A good starting point would be to ensure you are declaring what type of HTML document you are writing if you have not done so already. I have found that by using STRICT html on my websites, it fixes 99% of browser compatability issues.

 

Try adding this at the top of your document and see what effect it has:

 

<!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"> 

 

 

Cant guarantee it will work for you, but it solved alot of problems for me. let me know if it works

Edited March 26, 201016 yr by Sam G
added [code] tags

gfxpixeldesigns - A good starting point would be to ensure you are declaring what type of HTML document you are writing if you have not done so already. I have found that by using STRICT html on my websites, it fixes 99% of browser compatability issues.

 

Try adding this at the top of your document and see what effect it has:

 

<!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"> 

 

 

Cant guarantee it will work for you, but it solved alot of problems for me. let me know if it works

 

Thanks but that didnt work either.

whats the specific code you add for internet explorer

something like?

< if internet explorer >

and then the css below ?

Edited March 26, 201016 yr by Sam G
added [code] tags

Im not quite sure how to request a different CSS file depending on browser. However what I could probably suggest is to determine the browser type (such as I.E.), then use javascript and getElementByID to change the relivant CSS properties.

 

This woulld probably look messy through and might look ugly when your page loads, until javascript can correct.

 

navigator.appname determines browser type

so

 

window.onload = init;

function init(){
if (navigator.appName == "Microsoft Internet Explorer"){
getElementByID("someclass").style = value;
getElementByID("someotherclass").style = value;
}
}

 

If you can find another way to do it I would suggest that first.... as this method is lengthy only really trying to cover up a more serious problem. You could also have yet more problems with other browsers such as safari.

 

I'm not amazing at javascript but see what other people suggest

Edited March 26, 201016 yr by Sam G
added [code] tags

<!--[if IE 6]>
<link rel="stylesheet" href="IE6stylesheet.css" />
<![endif]-->

 

<!--[if lt IE 6]>
<link rel="stylesheet" href="IE6-and lower-stylesheet.css" /> <![endif]-->

 

<!--[if gt IE 7]>
<link rel="stylesheet" href="IE7-and above-stylesheet.css" /> <![endif]-->

 

Note the IF part in the first line - lt means lower than, gt means greater than.

<!--[if IE 6]>
<link rel="stylesheet" href="IE6stylesheet.css" />
<![endif]-->

 

<!--[if lt IE 6]>
<link rel="stylesheet" href="IE6-and lower-stylesheet.css" /> <![endif]-->

 

<!--[if gt IE 7]>
<link rel="stylesheet" href="IE7-and above-stylesheet.css" /> <![endif]-->

 

Note the IF part in the first line - lt means lower than, gt means greater than.

Just a small correction

<!--[if gt IE 7]>
<link rel="stylesheet" href="IE7-and above-stylesheet.css" /> <![endif]-->

would only target IE8 and above.

To target IE7 and above use either

<!--[if gt IE 6]>
<link rel="stylesheet" href="IE7-and above-stylesheet.css" /> <![endif]-->

or

<!--[if gte IE 7]>
<link rel="stylesheet" href="IE7-and above-stylesheet.css" /> <![endif]-->

So inside conditional comments you can use:

lt = less than

lte = less than or equal to

gt = greater than

gte = greater than or equal to

or just target a specific version as bumfluff said

code]<!--[if IE 6]>

<link rel="stylesheet" href="IE6stylesheet.css" />

<![endif]-->[/code]

Just a small correction

<!--[if gt IE 7]>
<link rel="stylesheet" href="IE7-and above-stylesheet.css" /> <![endif]-->

would only target IE8 and above.

To target IE7 and above use either

<!--[if gt IE 6]>
<link rel="stylesheet" href="IE7-and above-stylesheet.css" /> <![endif]-->

or

<!--[if gte IE 7]>
<link rel="stylesheet" href="IE7-and above-stylesheet.css" /> <![endif]-->

So inside conditional comments you can use:

lt = less than

lte = less than or equal to

gt = greater than

gte = greater than or equal to

or just target a specific version as bumfluff said

code]<!--[if IE 6]>

<link rel="stylesheet" href="IE6stylesheet.css" />

<![endif]-->[/code]

 

Thanks sounds like this is what i need, ive seen things like this on pages before so hopefully this will fix the display problem if i can do it correctly.

 

So just to check i would like to target internet explorer 6 (since this has the display problem) and leave firefox and ie 7 as they are now so to do this i would insert

<!--[if IE 6]>
<link rel="stylesheet" href="IE6-stylesheet.css" /> <![endif]-->

 

Is this correct ? also where about do i insert this, im guessing just below my current css before the <body> ?

Thanks sounds like this is what i need, ive seen things like this on pages before so hopefully this will fix the display problem if i can do it correctly.

 

So just to check i would like to target internet explorer 6 (since this has the display problem) and leave firefox and ie 7 as they are now so to do this i would insert

<!--[if IE 6]>
<link rel="stylesheet" href="IE6-stylesheet.css" /> <![endif]-->

 

Is this correct ? also where about do i insert this, im guessing just below my current css before the <body> ?

Yeah, that's correct.

Place it below other links to css files and make sure you put it inside the <head></head> tags of your page.

Thanks again.

 

I think i must be doing something wrong because on previewing there doesnt seem to be any change.

Ive put all my css into a seperate css file and named it stylesheet.css and linked the page to this ive then created another css file IE6-stylesheet.css and added the code above. So now my code looks like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Keywords" content="video, production, film, showreel, corporate, advertising, music, london, experience, crew, freelance, camera, editing" />
<meta name="Description" content="Marksman productions is a video production company based in London, specialising in showreel editing, corporate video, music videos and video web ads. Marksman can cover all filming and editing requirements and also offers a unique work experience program." />
<meta name="author" content="GfxPixelDesigns" />
<meta name="copyright" content="GfxPixelDesigns" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marksman Productions</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="IE6-stylesheet.css" /> 
<![endif]-->
</head>

 

something i think worth mentioning is when i add the <!--[if IE 6]> dreamweaver greys the code out.

 

Is there anything obvious to you guys thats wrong in there ? and could you possibly point me in the right direction

Just a small correction

<!--[if gt IE 7]>
 <link rel="stylesheet" href="IE7-and above-stylesheet.css" /> <![endif]-->

would only target IE8 and above.

 

Good catch, sorry 'bout that

Are the IE versions that you're testing with on different computers? I've found that if you have several versions on one computer, they'll often use the user agent of the highest version installed.

Well i have ie7 installed and ie6 is basically a folder on my desktop (not installed to the registry or file system) so i dont know. I would think its using the ie6 user agent.

But im not sure if ive added the code correctly since dreamweaver seems to be acting as if its not there. it grays it out and in the css panel the IE6-stylesheet.css isnt there i just have stylesheet.css

Should it be there ?

Oh and the browsers im testing with are all on the same computer

Well i have ie7 installed and ie6 is basically a folder on my desktop (not installed to the registry or file system) so i dont know. I would think its using the ie6 user agent.

But im not sure if ive added the code correctly since dreamweaver seems to be acting as if its not there. it grays it out and in the css panel the IE6-stylesheet.css isnt there i just have stylesheet.css

Should it be there ?

 

The greying out is normal in dreamweaver.

 

Try changing this

 

<!--[if IE 6]>
<link rel="stylesheet" href="IE6-stylesheet.css" /> 
<![endif]-->

 

to this

 

<!--[if  IE 6 ]>
<link rel="stylesheet" type="text/css" href="IE6-stylesheet.css" />
<![endif]-->

 

Also download the multiple ie installer http://tredosoft.com/Multiple_IE

 

Hope this helps

 

Pat

Well i have ie7 installed and ie6 is basically a folder on my desktop (not installed to the registry or file system) so i dont know. I would think its using the ie6 user agent.

But im not sure if ive added the code correctly since dreamweaver seems to be acting as if its not there. it grays it out and in the css panel the IE6-stylesheet.css isnt there i just have stylesheet.css

Should it be there ?

Ah, this sounds like your IE6 is a standalone version.

They normally can't read conditional comments (mine can't anyway).

Try appending your IE6 specific css to the end of your normal style sheet using a IE6 css hack.

Basically, before each css declaration, use * html

Example

* html #mydiv { css rule}

This will only be read by IE6 and will also work with standalone versions.

Hope that make sense.

The greying out is normal in dreamweaver.

 

Try changing this

 

<!--[if IE 6]>
<link rel="stylesheet" href="IE6-stylesheet.css" /> 
<![endif]-->

 

to this

 

<!--[if  IE 6 ]>
<link rel="stylesheet" type="text/css" href="IE6-stylesheet.css" />
<![endif]-->

 

Also download the multiple ie installer http://tredosoft.com/Multiple_IE

 

Hope this helps

 

Pat

 

Tried changing the code but it didnt make a difference, also installed the multiple ie installer which is very handy. Thanks im sure it will be useful.

 

Ah, this sounds like your IE6 is a standalone version.

They normally can't read conditional comments (mine can't anyway).

Try appending your IE6 specific css to the end of your normal style sheet using a IE6 css hack.

Basically, before each css declaration, use * html

Example

* html #mydiv { css rule}

This will only be read by IE6 and will also work with standalone versions.

Hope that make sense.

 

Will this ie6 hack work while i have my page linking to two seperate css files (ie6 and another for other browsers), i just tried it but didnt seem to change anything when previewing.

 

 

 

@all ive also tried removing the background image from the navbar in the IE6 css file but upon previewing its still there so im thinking ie6 is still using the original css file and not the ie6 css file ? Any suggestions on what to do next this is so confusing to me.

Will this ie6 hack work while i have my page linking to two seperate css files (ie6 and another for other browsers), i just tried it but didnt seem to change anything when previewing.

 

I'd just use one method - either the hacks or the seperate stylesheet.

 

 

@all ive also tried removing the background image from the navbar in the IE6 css file but upon previewing its still there so im thinking ie6 is still using the original css file and not the ie6 css file ? Any suggestions on what to do next this is so confusing to me.

 

Have you cleared the browser cache between retries?

Cheers ive put the code into the seperate stylesheet and removed the IE6 stylesheet link and the ie6 hack is working, so ive managed to get it to display correctly. The only problem is the css drop down menu doesnt work in ie6 but i sort of expected this since ie6 doesnt handle css very well. Now my next question is whether there is another method for the css dropdown menu in ie6 maybe i can specify the page to use the css dropdown menu in firefox and ie7 and above but using the ie6 hack is there anyway i can get ie6 to use javascript as an alternative ?

IE6 can't handle the hover pseudo class on anything but <a> elements.

There is a work around using your much loved conditional comments on cssplay.

Can't remember the exact URL at the moment. It uses tables for IE6 only on the dropdown.

I'll have a look for the URL for you

Here's an example but take note of the copyright notice.

Dropdown Menu