PDA

View Full Version : Fixing positioning problem in IE 6 and 7


LauraFig
02-11-2011, 11:39 PM
I'm just about finished my first website. It seems to be working in Firefox, Chrome and Safari, but in IE 6 and 7 it's shifting the top menu down in a stair step pattern.

I'm also still getting bullets in all versions of IE on the left side-bar menu.

Here is the link:
www.laurafigdesign.com/lfgd_portfolio_print.html

Thanks in advance for any suggestions on how to fix either problem.

Laura

gentleone
02-12-2011, 12:06 AM
The bullets are there in IE because you have in your CSS the following:
list-style: none;
Which should be:
list-style-type: none;
Your main nav has also some CSS issues which might cause your IE 6 & 7 problem. I will post in a bit what you should change

gentleone
02-12-2011, 12:40 AM
Okay I changed a bit here and there and I deleted some unnecessary/double properties. I made some comments to explain things, but I didn't test it in IE, because I'm on a Mac and I didn't feel like to fire up my Virtual Machine to test Internet Explorer. I'll leave the testing up to you ;)


#NavMain2 {
height: 140px;
width: 100%;
margin: 0;
padding: 0;
}

#NavMain2 li {
margin: 0;
padding: 0;
list-style-type: none; /* list-style-type property is a li (list item) property, so it should be here and not on the ul */
float: left; /* we float the list items to the left and not the a tag where you had it before */
}

/* you only have to call one time for your image on the a tag and I made a shorthand version for the background-image and background-repeat properties. And your issue was because you did not set the a tag to display: block. */
#NavMain2 li a{
display: block;
margin:0;
padding:0;
height: 140px;
text-indent: -9999px;
background: url(../_images/main_images/main_nav_2_sprite.gif) no-repeat;
}

#NavMain2 li#LFGD a{
width: 290px;
background-position: 0 0;
}

#NavMain2 li#LFGD a:hover{
background-position: 0 -140px;
}

#NavMain2 li#portfolio a{
width: 242px;
background-position: -290px 0;
}

#NavMain2 li#portfolio a:hover{
background-position: -290px -280px;
}

#NavMain2 li#about a{
width: 135px;
background-position: -532px 0;
}

#NavMain2 li#about a:hover{
background-position: -532px -280px;
}

body#about #NavMain2 li#about a{
background-position: -532px -140px;
}

#NavMain2 li#contact a{
width: 154px;
background-position: -667px 0;
}

#NavMain2 li#contact a:hover{
background-position: -667px -280px;
}

body#contact #NavMain2 li#contact a{
background-position: -667px -140px;
}

#NavMain2 li#bits a{
width: 149px;
background-position: -821px 0;
}

#NavMain2 li#bits a:hover{
background-position: -821px -280px;
}

body#portfolio_print #NavMain2 li#portfolio a{
background-position: -290px -140px;
}

body#portfolio_display #NavMain2 li#portfolio a{
background-position: -290px -140px;
}
body#portfolio_logos #NavMain2 li#portfolio a{
background-position: -290px -140px;
}
body#portfolio_plaques #NavMain2 li#portfolio a{
background-position: -290px -140px;
}

body#bits_links #NavMain2 li#bits a{
background-position: -821px -140px;
}
body#bits_gallery #NavMain2 li#bits a{
background-position: -821px -140px;
}

LauraFig
02-12-2011, 01:31 PM
Thank you so much!! It all works on IE 6-8 and even on IE5 for Mac (I'm working on a Mac as well). I very much appreciate not only your solutions to my problems, but the explanations of what I was doing wrong.

When you're trying to learn something new, kind and patient help like yours is very much appreciated!

Laura

gentleone
02-12-2011, 02:13 PM
You're welcome, Laura.

When you're trying to learn something new, kind and patient help like yours is very much appreciated!
I believe it's all a matter of give & take. I've learned also from people that share their knowledge on their blogs/websites, so if I can do something back to the web design community then I'm more then pleased to do so.

Btw... I like your logo a lot ;)

Ricky55
02-12-2011, 02:34 PM
Don't even look at your site in IE 5 be that mac or pc nearly every site on web will be broken in that ridiculous browser.

I don't even support ie6 these days unless a client specifically asks for it.

LauraFig
02-15-2011, 11:53 AM
Gentleone-Thanks again for you help and kind words!

Ricky55-I appreciate your advice!

Laura