• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 273
  • Last Modified:

Navigation is not visible using IE6 and IE7

Hello EE,

I have the following HTML Markup and CSS below that when viewed in IE6 and IE7 my navigation is hidden. Any ideas how to fix?

Thanks in advance!!!
HTML:

        <div id="header">
            <div id="logo">
                <a href="index.aspx"><img src="Images/logo_272x63.png" alt="Backpack for Microsoft Dynamics CRM &#153;" class="logo" /></a>
            </div>
            <div id="social-icons">
                <ul>
                    <li><a href="http://www.facebook.com/backpacksis" target="_blank"><img src="Images/fb.png" alt="Facebook" /></a></li>
                    <li><a href="http://www.youtube.com/watch?v=_fQuugJKrQk" target="_blank"><img src="Images/yt.png" alt="YouTube" /></a></li>
                </ul>
            </div>
            <div id="nav">
                <ul>
                    <li><a href="index.aspx">HOME</a></li>
                    <li><a href="AboutUs/index.aspx">ABOUT US</a></li>
                    <li><a href="Support/index.aspx">SUPPORT</a></li>
                    <li><a href="Contact/index.aspx">CONTACT</a></li>
                </ul>
            </div>
        </div>

Open in new window

CSS:

#header
{
    width: 960px;
    height: 80px;
}

#header a img
{
    border: none;
}

#header .logo
{
    padding-top: 15px;
    padding-left: 30px;
}

#header #social-icons
{
    float: right;
    margin-top: -65px;
    padding-right: 30px;
}

#header #social-icons ul
{
    list-style: none;
}

#header #social-icons ul li
{
    display: inline;
    padding-left: 10px;
}

#header #social-icons ul li a img
{
    border: none;
}

#header #nav
{
    float: right;
    padding-right: 30px;
}

#header #nav ul
{
    list-style: none;
    margin-top: -21px;
}

#header #nav ul li
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-left: 18px;
}

#header #nav ul li a:link
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#header #nav ul li a:hover
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #a2dbec;
    text-decoration: underline;
}

#header #nav ul li a:visited
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

Open in new window

0
asp_net2
Asked:
asp_net2
  • 16
  • 13
1 Solution
 
Gurvinder Pal SinghCommented:
replace line 51
list-style: none;

by

list-style-type: none;

also try increasing the height at line 6
0
 
LZ1Commented:
It's the #header #nav UL with the negative top margin.
margin-top:-21px;

Try using a reset CSS first and then apply your CSS to see if that works.
http://meyerweb.com/eric/tools/css/reset/

0
 
asp_net2Author Commented:
@ LZ1,

Do I need to include all those elements for the reset?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LZ1Commented:
Yes, otherwise it wouldn't be a full reset. The reset helps level the playing field between browsers by killing the browsers default settings for each element. Every browser is different(especially IE) and this kind of puts you starting at 0.
0
 
asp_net2Author Commented:
@ gurvinder372,

That did not work :(
0
 
asp_net2Author Commented:
@LZ1,

Ok, how do I implement that then with my current CSS file? Or do I need two CSS files?
0
 
LZ1Commented:
You can do it 1 of 2 ways actually.

1) Have a separate CSS file called reset.css(My favorite method)
2) Add all that CSS to the very top of your main CSS file

I generally keep them separated, simply because it's more semantic and a neater way of keeping your CSS.
0
 
asp_net2Author Commented:
Ok, I like option 1 better. Now by adding another CSS file (reset.css) will that interfere with my current (main) CSS file?
0
 
LZ1Commented:
It shouldn't. However, you depending on how far you are into the development cycle, you may get some unwanted results.  

When you include a CSS reset though, it should be the very first CSS file you call. Every other CSS file should be under that file.

See below:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Something</title>
		

		<link href="/css/reset.css" rel="stylesheet" type="text/css" />	
		<link href="/css/main.css" rel="stylesheet" type="text/css"  />	
		<link href="css/smoothness/jquery-ui-1.8.15.custom.css" type="text/css" rel="stylesheet" />	
		<link href="css/tipTip.css" rel="stylesheet" type="text/css" />	
	</head>

Open in new window

0
 
asp_net2Author Commented:
@ LZ1,

That did not resolve the navigation from displaying in IE6 and IE7. Navigation is still missing from those two browsers.
0
 
LZ1Commented:
Can you share a live URL?
0
 
asp_net2Author Commented:
Wish I could, but it's still in development and I can't get a public IP :(
0
 
LZ1Commented:
Can you possibly share the rendered HTML(source) of the page along with the full CSS?
0
 
asp_net2Author Commented:

HTML SOURCE:


<!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><link href="css/reset.css" rel="stylesheet" type="text/css" /><link href="css/main.css" rel="stylesheet" type="text/css" /><title>
</title></head>
<body>
    <form method="post" action="index.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTQ5OTMzNjJkZDxss+va/adZs1K5Js6TgQxJdghJoo5xzQqXASR6w/ME" />
</div>

    <div id="wrapper">
        <div id="header">

            <div id="logo">
                <a href="index.aspx"><img src="Images/logo_272x63.png" alt="" /></a>
            </div>
            <div id="social-icons">
                <ul>
                    <li><a href="http://www.facebook.com" target="_blank"><img src="Images/fb.png" alt="Facebook" /></a></li>
                    <li><a href="http://www.youtube.com" target="_blank"><img src="Images/yt.png" alt="YouTube" /></a></li>
                </ul>
            </div>

            <div id="nav">
                <ul>
                    <li><a href="index.aspx">HOME</a></li>
                    <li><a href="AboutUs/index.aspx">ABOUT US</a></li>
                    <li><a href="Support/index.aspx">SUPPORT</a></li>
                    <li><a href="Contact/index.aspx">CONTACT</a></li>
                </ul>

            </div>
        </div>
        <div id="content">
            <div id="web">
            </div>
            <div id="services">
                <div id="sis">
                    <h1>Backpack | <b>SIS</b></h1>

                    <ul>
                        <li><img src="Images/sis-1.png" class="image" alt="Managing student information efficiently." /><b>Managing student information efficiently.</b></li>
                        <li class="desc">Backpack manages all student and school information in one central place, so administration is easy.</li>
                        <li><img src="Images/sis-2.png" class="image" alt="Powerful reporting functionality." /><b>Powerful reporting functionality.</b></li>
                        <li class="desc">Performance charts for grades, attendance, class, and school performance can easily be generated, and compared to other classes and schools.</li>
                        <li><img src="Images/sis-3.png" class="image" alt="Affordable solution." /><b>Affordable solution.</b></li>

                        <li class="desc">While can be installed on site, it is also vailable as a hosted service, reducing the cost of up front investments. In either case, there are no upfront investments.</li>
                    </ul>
                    <a href="Services/sis.aspx" class="btn">Learn More</a>
                </div>
                <div id="community">
                    <h1>Backpack | <b>Community</b></h1>
                    <ul>

                        <li><img src="Images/community-1.png" class="image" alt="Our social network brings familes together." /><b>Our social network brings familes together.</b></li>
                        <li class="desc">Students, parents, and teachers all log into the same network, making communication easy, and increasing engagement.</li>
                        <li><img src="Images/community-2.png" class="image" alt="Built with security and safety in mind." /><b>Built with security and safety in mind.</b></li>
                        <li class="desc">Backpack is “fenced off”, so only approved parties have access. Everything is encrypted and kept secure.</li>
                        <li><img src="Images/community-3.png" class="image" alt="Better transparency and accountability." /><b>Better transparency and accountability.</b></li>
                        <li class="desc">Parents can view all of their child’s information and receive email updates about their performance, so there’s no need to send notes home.</li>

                    </ul>
                    <a href="Services/community.aspx" class="btn">Learn More</a>
                </div>
            </div>
        </div>
        <div id="footer">
            <blockquote>is going to change the way K-12 School Districts think about student information systems. It's addictively easy to use. It has a low monthly cost which ensures schools only pay for what they use. And, it's available immediately!</blockquote>

            <p><b>Anthony Salcito</b>, General Manager for Education, U.S. Public Sector, Microsoft Corp.</p>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window

CSS:

* {margin:0; padding:0;}

body 
{
    background-color: #f7f1e1;
    background-image: url("../images/body_bg.png");
    background-repeat: repeat-x;
    text-align: center;                                                /* IE6 needs this to center the layout in the browser window */
}

#wrapper
{
    width: 960px;
    height: 700px;
    margin-left: auto;                                                 /* centers layout in browser */
    margin-right: auto;                                                /* centers layout in browser */
    text-align: left;                                                  /* resets the centering hack for IE6 on the body tag */
}

#header
{
    width: 960px;
    height: 80px;
}

#header a img
{
    border: none;
}

#header .logo
{
    padding-top: 15px;
    padding-left: 30px;
}

#header #social-icons
{
    float: right;
    margin-top: -65px;
    padding-right: 30px;
}

#header #social-icons ul
{
    list-style: none;
}

#header #social-icons ul li
{
    display: inline;
    padding-left: 10px;
}

#header #social-icons ul li a img
{
    border: none;
}

#header #nav
{
    float: right;
    padding-right: 30px;
}

#header #nav ul
{
    list-style: none;
    margin-top: -21px;
}

#header #nav ul li
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-left: 18px;
}

#header #nav ul li a:link
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#header #nav ul li a:hover
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #a2dbec;
    text-decoration: underline;
}

#header #nav ul li a:visited
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#content
{
    width: 960px;
    min-height: 550px;
    height: auto;
    /*height: 550px;*/
    margin-top: 25px;
    padding-bottom: 20px;
    overflow: hidden;
    background-color: #fff;
    -moz-border-radius: 3em 3em 3em 3em;
    border-radius: 3em 3em 3em 3em;
    
    -webkit-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	box-shadow: 0 3px 2px rgba(0,0,0,.2);

}

#content #web
{
    width: 960px;
    height: 200px;
    background-color: #f7f1e1;
    overflow: hidden;
    -moz-border-radius: 3em 3em 0em 0em;
    border-radius: 3em 3em 0em 0em;
}

#content #services
{
    padding-top: 20px;
    padding-bottom: 20px;
}

#content #services #sis
{
    float: left;
    width: 410px;
    padding-left: 30px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #sis ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #sis .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#content #services #community
{
    float: right;
    width: 410px;
    padding-right: 30px;
}

#content #services #community h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #community h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #community ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #community ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #community ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #community ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #community .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#footer
{
    clear: both;
    padding-top: 10px;
}

#footer p
{
    text-align: right;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    color: #c2a863;
    padding-right: 60px;
    padding-top: 10px;
    padding-bottom: 20px;
}

#footer blockquote 
{
    width: 960px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    color: #c2a863;
    margin: 0px;
    padding-top: 20px;
    quotes: "\201C" "\201D";
    text-align: center;
}
 
#footer blockquote:before 
{ 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: open-quote; 
    font-weight: bold; 
}
 
#footer blockquote:after 
 { 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: close-quote; 
    font-weight: bold; 
}

#content #services .btn 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
	color: #fff;
	border: solid 1px #9a1b22;
	background: #e72833;
	background: -webkit-gradient(linear, left top, left bottom, from(#ef6b73), to(#e72833));
	background: -moz-linear-gradient(top,  #ef6b73,  #e72833);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e72833', endColorstr='#ef6b73');
	padding: 8px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-decoration: none;
	margin-left: 170px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

#content #services .btn:hover 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
	background: #9a1b22;
	background: -webkit-gradient(linear, left top, left bottom, from(#e72833), to(#ef6b73));
	background: -moz-linear-gradient(top,  #e72833,  #ef6b73);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9a1b22', endColorstr='#bc545a');
	padding: 8px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-decoration: none;
    -webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

/*#content #services .btn:active 
{
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}*/

.sisreadmore
{
    margin-left: 150px;
}

.commreadmore
{
    margin-left: 150px;
}

Open in new window

0
 
LZ1Commented:
Again on line 76 it looks like your negative top-margin is the culprit, even with the reset in place. I've placed all the CSS on-page just so we can test with 1 uniform file.
<!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>

<link href="css/reset.css" rel="stylesheet" type="text/css" />

<style>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Start the main.css file */


body 
{
    background-color: #f7f1e1;
    background-image: url("../images/body_bg.png");
    background-repeat: repeat-x;
    text-align: center;                                                /* IE6 needs this to center the layout in the browser window */
}

#wrapper
{
    width: 960px;
    height: 700px;
    margin-left: auto;                                                 /* centers layout in browser */
    margin-right: auto;                                                /* centers layout in browser */
    text-align: left;                                                  /* resets the centering hack for IE6 on the body tag */
}

#header
{
    width: 960px;
    height: 80px;
}

#header a img
{
    border: none;
}

#header .logo
{
    padding-top: 15px;
    padding-left: 30px;
}

#header #social-icons
{
    float: right;
    margin-top: -65px;
    padding-right: 30px;
}

#header #social-icons ul
{
    list-style: none;
}

#header #social-icons ul li
{
    display: inline;
    padding-left: 10px;
}

#header #social-icons ul li a img
{
    border: none;
}

#header #nav
{
    float: right;
    padding-right: 30px;
}

#header #nav ul
{
    list-style: none;
    /*margin-top: -21px; Let's try just commenting out this line */
}

#header #nav ul li
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-left: 18px;
}

#header #nav ul li a:link
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#header #nav ul li a:hover
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #a2dbec;
    text-decoration: underline;
}

#header #nav ul li a:visited
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#content
{
    width: 960px;
    min-height: 550px;
    height: auto;
    /*height: 550px;*/
    margin-top: 25px;
    padding-bottom: 20px;
    overflow: hidden;
    background-color: #fff;
    -moz-border-radius: 3em 3em 3em 3em;
    border-radius: 3em 3em 3em 3em;
    
    -webkit-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	box-shadow: 0 3px 2px rgba(0,0,0,.2);

}

#content #web
{
    width: 960px;
    height: 200px;
    background-color: #f7f1e1;
    overflow: hidden;
    -moz-border-radius: 3em 3em 0em 0em;
    border-radius: 3em 3em 0em 0em;
}

#content #services
{
    padding-top: 20px;
    padding-bottom: 20px;
}

#content #services #sis
{
    float: left;
    width: 410px;
    padding-left: 30px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #sis ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #sis .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#content #services #community
{
    float: right;
    width: 410px;
    padding-right: 30px;
}

#content #services #community h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #community h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #community ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #community ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #community ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #community ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #community .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#footer
{
    clear: both;
    padding-top: 10px;
}

#footer p
{
    text-align: right;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    color: #c2a863;
    padding-right: 60px;
    padding-top: 10px;
    padding-bottom: 20px;
}

#footer blockquote 
{
    width: 960px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    color: #c2a863;
    margin: 0px;
    padding-top: 20px;
    quotes: "\201C" "\201D";
    text-align: center;
}
 
#footer blockquote:before 
{ 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: open-quote; 
    font-weight: bold; 
}
 
#footer blockquote:after 
 { 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: close-quote; 
    font-weight: bold; 
}

#content #services .btn 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
	color: #fff;
	border: solid 1px #9a1b22;
	background: #e72833;
	background: -webkit-gradient(linear, left top, left bottom, from(#ef6b73), to(#e72833));
	background: -moz-linear-gradient(top,  #ef6b73,  #e72833);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e72833', endColorstr='#ef6b73');
	padding: 8px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-decoration: none;
	margin-left: 170px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

#content #services .btn:hover 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
	background: #9a1b22;
	background: -webkit-gradient(linear, left top, left bottom, from(#e72833), to(#ef6b73));
	background: -moz-linear-gradient(top,  #e72833,  #ef6b73);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9a1b22', endColorstr='#bc545a');
	padding: 8px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-decoration: none;
    -webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

/*#content #services .btn:active 
{
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}*/

.sisreadmore
{
    margin-left: 150px;
}

.commreadmore
{
    margin-left: 150px;
}
</style>


</head>
<body>
    <form method="post" action="index.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTQ5OTMzNjJkZDxss+va/adZs1K5Js6TgQxJdghJoo5xzQqXASR6w/ME" />
</div>

    <div id="wrapper">
        <div id="header">

            <div id="logo">
                <a href="index.aspx"><img src="Images/logo_272x63.png" alt="" /></a>
            </div>
            <div id="social-icons">
                <ul>
                    <li><a href="http://www.facebook.com" target="_blank"><img src="Images/fb.png" alt="Facebook" /></a></li>
                    <li><a href="http://www.youtube.com" target="_blank"><img src="Images/yt.png" alt="YouTube" /></a></li>
                </ul>
            </div>

            <div id="nav">
                <ul>
                    <li><a href="index.aspx">HOME</a></li>
                    <li><a href="AboutUs/index.aspx">ABOUT US</a></li>
                    <li><a href="Support/index.aspx">SUPPORT</a></li>
                    <li><a href="Contact/index.aspx">CONTACT</a></li>
                </ul>

            </div>
        </div>
        <div id="content">
            <div id="web">
            </div>
            <div id="services">
                <div id="sis">
                    <h1>Backpack | <b>SIS</b></h1>

                    <ul>
                        <li><img src="Images/sis-1.png" class="image" alt="Managing student information efficiently." /><b>Managing student information efficiently.</b></li>
                        <li class="desc">Backpack manages all student and school information in one central place, so administration is easy.</li>
                        <li><img src="Images/sis-2.png" class="image" alt="Powerful reporting functionality." /><b>Powerful reporting functionality.</b></li>
                        <li class="desc">Performance charts for grades, attendance, class, and school performance can easily be generated, and compared to other classes and schools.</li>
                        <li><img src="Images/sis-3.png" class="image" alt="Affordable solution." /><b>Affordable solution.</b></li>

                        <li class="desc">While can be installed on site, it is also vailable as a hosted service, reducing the cost of up front investments. In either case, there are no upfront investments.</li>
                    </ul>
                    <a href="Services/sis.aspx" class="btn">Learn More</a>
                </div>
                <div id="community">
                    <h1>Backpack | <b>Community</b></h1>
                    <ul>

                        <li><img src="Images/community-1.png" class="image" alt="Our social network brings familes together." /><b>Our social network brings familes together.</b></li>
                        <li class="desc">Students, parents, and teachers all log into the same network, making communication easy, and increasing engagement.</li>
                        <li><img src="Images/community-2.png" class="image" alt="Built with security and safety in mind." /><b>Built with security and safety in mind.</b></li>
                        <li class="desc">Backpack is “fenced off”, so only approved parties have access. Everything is encrypted and kept secure.</li>
                        <li><img src="Images/community-3.png" class="image" alt="Better transparency and accountability." /><b>Better transparency and accountability.</b></li>
                        <li class="desc">Parents can view all of their child’s information and receive email updates about their performance, so there’s no need to send notes home.</li>

                    </ul>
                    <a href="Services/community.aspx" class="btn">Learn More</a>
                </div>
            </div>
        </div>
        <div id="footer">
            <blockquote>is going to change the way K-12 School Districts think about student information systems. It's addictively easy to use. It has a low monthly cost which ensures schools only pay for what they use. And, it's available immediately!</blockquote>

            <p><b>Anthony Salcito</b>, General Manager for Education, U.S. Public Sector, Microsoft Corp.</p>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
asp_net2Author Commented:
Ok, so that worked but with a few other things that got changed. Please see below.

- Navigation in IE6 & IE7 is no longer directly aligned with social icons. It appears that the navigation for IE & IE7 shifted to the left a little bit but is fine with IE8 & IE9.

- Navigation for all IE and FF versions was pushed down. I would like to leave the alignment alone but just make visible for IE6 and IE7 if possible.
0
 
LZ1Commented:
Unfortunately I can't see your images, so it's really hard to try to line anything up. The best thing you could do, would be to try to get it live somehow or at least the graphics and then we can use absolute URL's in our CSS
0
 
asp_net2Author Commented:
Ok, perhaps this will show you what I mean. Sorry, I wish I was able to post this site live for you. I'm unable to though until everything has been approved :(

You will notice on the image labeled yourchange-IE6&IE7 that the navigation is pushed to the left and it's not for the image IE8 and IE9.

 IE8, IE9, and FF3.4 IE6 and IE7
0
 
LZ1Commented:
Let's try this: Can you zip up a demo file with the CSS and images and post it here? Again, without seeing it live with the relative images, it's going to be very difficult to diagnose.

But I think I see what you mean.  Try this and let me know:
<!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>

<link href="css/reset.css" rel="stylesheet" type="text/css" />

<style>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Start the main.css file */


body 
{
    background-color: #f7f1e1;
    background-image: url("../images/body_bg.png");
    background-repeat: repeat-x;
    text-align: center;                                                /* IE6 needs this to center the layout in the browser window */
}

#wrapper
{
    width: 960px;
    height: 700px;
    margin-left: auto;                                                 /* centers layout in browser */
    margin-right: auto;                                                /* centers layout in browser */
    text-align: left;                                                  /* resets the centering hack for IE6 on the body tag */
}

#header
{
    width: 960px;
    height: 80px;
}

#header a img
{
    border: none;
}

#header .logo
{
    padding-top: 15px;
    padding-left: 30px;
}

#header #social-icons
{
    float: right;
    margin-top: -65px;
    padding-right: 30px;
}

#header #social-icons ul
{
    list-style: none;
}

#header #social-icons ul li
{
    display: inline;
    padding-left: 10px;
}

#header #social-icons ul li a img
{
    border: none;
}

#header #nav
{
    /*float: right;*/
    padding-right: 30px;
}

#header #nav ul
{
    list-style: none;
    /*margin-top: -21px; Let's try just commenting out this line */
    float:right;
}

#header #nav ul li
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-left: 18px;
}

#header #nav ul li a:link
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#header #nav ul li a:hover
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #a2dbec;
    text-decoration: underline;
}

#header #nav ul li a:visited
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#content
{
    width: 960px;
    min-height: 550px;
    height: auto;
    /*height: 550px;*/
    margin-top: 25px;
    padding-bottom: 20px;
    overflow: hidden;
    background-color: #fff;
    -moz-border-radius: 3em 3em 3em 3em;
    border-radius: 3em 3em 3em 3em;
    
    -webkit-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	box-shadow: 0 3px 2px rgba(0,0,0,.2);

}

#content #web
{
    width: 960px;
    height: 200px;
    background-color: #f7f1e1;
    overflow: hidden;
    -moz-border-radius: 3em 3em 0em 0em;
    border-radius: 3em 3em 0em 0em;
}

#content #services
{
    padding-top: 20px;
    padding-bottom: 20px;
}

#content #services #sis
{
    float: left;
    width: 410px;
    padding-left: 30px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #sis ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #sis .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#content #services #community
{
    float: right;
    width: 410px;
    padding-right: 30px;
}

#content #services #community h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #community h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #community ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #community ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #community ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #community ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #community .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#footer
{
    clear: both;
    padding-top: 10px;
}

#footer p
{
    text-align: right;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    color: #c2a863;
    padding-right: 60px;
    padding-top: 10px;
    padding-bottom: 20px;
}

#footer blockquote 
{
    width: 960px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    color: #c2a863;
    margin: 0px;
    padding-top: 20px;
    quotes: "\201C" "\201D";
    text-align: center;
}
 
#footer blockquote:before 
{ 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: open-quote; 
    font-weight: bold; 
}
 
#footer blockquote:after 
 { 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: close-quote; 
    font-weight: bold; 
}

#content #services .btn 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
	color: #fff;
	border: solid 1px #9a1b22;
	background: #e72833;
	background: -webkit-gradient(linear, left top, left bottom, from(#ef6b73), to(#e72833));
	background: -moz-linear-gradient(top,  #ef6b73,  #e72833);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e72833', endColorstr='#ef6b73');
	padding: 8px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-decoration: none;
	margin-left: 170px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

#content #services .btn:hover 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
	background: #9a1b22;
	background: -webkit-gradient(linear, left top, left bottom, from(#e72833), to(#ef6b73));
	background: -moz-linear-gradient(top,  #e72833,  #ef6b73);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9a1b22', endColorstr='#bc545a');
	padding: 8px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-decoration: none;
    -webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

/*#content #services .btn:active 
{
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}*/

.sisreadmore
{
    margin-left: 150px;
}

.commreadmore
{
    margin-left: 150px;
}
</style>


</head>
<body>
    <form method="post" action="index.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTQ5OTMzNjJkZDxss+va/adZs1K5Js6TgQxJdghJoo5xzQqXASR6w/ME" />
</div>

    <div id="wrapper">
        <div id="header">

            <div id="logo">
                <a href="index.aspx"><img src="Images/logo_272x63.png" alt="" /></a>
            </div>
            <div id="social-icons">
                <ul>
                    <li><a href="http://www.facebook.com" target="_blank"><img src="Images/fb.png" alt="Facebook" /></a></li>
                    <li><a href="http://www.youtube.com" target="_blank"><img src="Images/yt.png" alt="YouTube" /></a></li>
                </ul>
            </div>

            <div id="nav">
                <ul>
                    <li><a href="index.aspx">HOME</a></li>
                    <li><a href="AboutUs/index.aspx">ABOUT US</a></li>
                    <li><a href="Support/index.aspx">SUPPORT</a></li>
                    <li><a href="Contact/index.aspx">CONTACT</a></li>
                </ul>

            </div>
        </div>
        <div id="content">
            <div id="web">
            </div>
            <div id="services">
                <div id="sis">
                    <h1>Backpack | <b>SIS</b></h1>

                    <ul>
                        <li><img src="Images/sis-1.png" class="image" alt="Managing student information efficiently." /><b>Managing student information efficiently.</b></li>
                        <li class="desc">Backpack manages all student and school information in one central place, so administration is easy.</li>
                        <li><img src="Images/sis-2.png" class="image" alt="Powerful reporting functionality." /><b>Powerful reporting functionality.</b></li>
                        <li class="desc">Performance charts for grades, attendance, class, and school performance can easily be generated, and compared to other classes and schools.</li>
                        <li><img src="Images/sis-3.png" class="image" alt="Affordable solution." /><b>Affordable solution.</b></li>

                        <li class="desc">While can be installed on site, it is also vailable as a hosted service, reducing the cost of up front investments. In either case, there are no upfront investments.</li>
                    </ul>
                    <a href="Services/sis.aspx" class="btn">Learn More</a>
                </div>
                <div id="community">
                    <h1>Backpack | <b>Community</b></h1>
                    <ul>

                        <li><img src="Images/community-1.png" class="image" alt="Our social network brings familes together." /><b>Our social network brings familes together.</b></li>
                        <li class="desc">Students, parents, and teachers all log into the same network, making communication easy, and increasing engagement.</li>
                        <li><img src="Images/community-2.png" class="image" alt="Built with security and safety in mind." /><b>Built with security and safety in mind.</b></li>
                        <li class="desc">Backpack is “fenced off”, so only approved parties have access. Everything is encrypted and kept secure.</li>
                        <li><img src="Images/community-3.png" class="image" alt="Better transparency and accountability." /><b>Better transparency and accountability.</b></li>
                        <li class="desc">Parents can view all of their child’s information and receive email updates about their performance, so there’s no need to send notes home.</li>

                    </ul>
                    <a href="Services/community.aspx" class="btn">Learn More</a>
                </div>
            </div>
        </div>
        <div id="footer">
            <blockquote>is going to change the way K-12 School Districts think about student information systems. It's addictively easy to use. It has a low monthly cost which ensures schools only pay for what they use. And, it's available immediately!</blockquote>

            <p><b>Anthony Salcito</b>, General Manager for Education, U.S. Public Sector, Microsoft Corp.</p>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
asp_net2Author Commented:
Ok, that seemed to work fine.

But going back to what I was saying earlier. Every since I made changes using your suggestion my navigation got pushed down. Please see the following image and compare to what I sent you just a little bit ago. myway_IE6&IE7 myway_IE8&IE9
0
 
asp_net2Author Commented:
I'm not permitted to zip everything up. I did though already provide you with all my CSS. But I'm going to resend that to you.

PLEASE NOTE: The CSS that I'm posting is what I was originally using before. I need this CSS for the navigation to work in IE6 & IE7 the same way as IE8 & IE9.
* {margin:0; padding:0;}

body 
{
    background-color: #f7f1e1;
    background-image: url("../images/body_bg.png");
    background-repeat: repeat-x;
    text-align: center;                                                /* IE6 needs this to center the layout in the browser window */
}

#wrapper
{
    width: 960px;
    height: 700px;
    margin-left: auto;                                                 /* centers layout in browser */
    margin-right: auto;                                                /* centers layout in browser */
    text-align: left;                                                  /* resets the centering hack for IE6 on the body tag */
}

#header
{
    width: 960px;
    height: 80px;
}

#header a img
{
    border: none;
}

#header .logo
{
    padding-top: 15px;
    padding-left: 30px;
}

#header #social-icons
{
    float: right;
    margin-top: -65px;
    padding-right: 30px;
}

#header #social-icons ul
{
    list-style: none;
}

#header #social-icons ul li
{
    display: inline;
    padding-left: 10px;
}

#header #social-icons ul li a img
{
    border: none;
}

#header #nav
{
    float: right;
    padding-right: 30px;
}

#header #nav ul
{
    list-style: none;
    margin-top: -21px;
}

#header #nav ul li
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding-left: 18px;
}

#header #nav ul li a:link
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#header #nav ul li a:hover
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #a2dbec;
    text-decoration: underline;
}

#header #nav ul li a:visited
{
    display: inline;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#content
{
    width: 960px;
    min-height: 550px;
    height: auto;
    /*height: 550px;*/
    margin-top: 25px;
    padding-bottom: 20px;
    overflow: hidden;
    background-color: #fff;
    -moz-border-radius: 3em 3em 3em 3em;
    border-radius: 3em 3em 3em 3em;
    
    -webkit-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	box-shadow: 0 3px 2px rgba(0,0,0,.2);

}

#content #web
{
    width: 960px;
    height: 200px;
    background-color: #f7f1e1;
    overflow: hidden;
    -moz-border-radius: 3em 3em 0em 0em;
    border-radius: 3em 3em 0em 0em;
}

#content #services
{
    padding-top: 20px;
    padding-bottom: 20px;
}

#content #services #sis
{
    float: left;
    width: 410px;
    padding-left: 30px;
}

#content #services #sis h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #sis h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #sis ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #sis ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #sis ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #sis ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #sis .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#content #services #community
{
    float: right;
    width: 410px;
    padding-right: 30px;
}

#content #services #community h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

#content #services #community h1 b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #53a4bb;
    text-align: center;
}

#content #services #community ul
{
    list-style: none;
    padding-top: 20px;
}

#content #services #community ul li
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    line-height: 1.2em;
}

#content #services #community ul li b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
}

#content #services #community ul li .image
{
    float: left;
    margin-right: 10px;
}

#content #services #community .desc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    padding-bottom: 20px;
    line-height: 1.2em;
}

#footer
{
    clear: both;
    padding-top: 10px;
}

#footer p
{
    text-align: right;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    color: #c2a863;
    padding-right: 60px;
    padding-top: 10px;
    padding-bottom: 20px;
}

#footer blockquote 
{
    width: 960px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    color: #c2a863;
    margin: 0px;
    padding-top: 20px;
    quotes: "\201C" "\201D";
    text-align: center;
}
 
#footer blockquote:before 
{ 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: open-quote; 
    font-weight: bold; 
}
 
#footer blockquote:after 
 { 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: close-quote; 
    font-weight: bold; 
}

#content #services .btn 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
	color: #fff;
	border: solid 1px #9a1b22;
	background: #e72833;
	background: -webkit-gradient(linear, left top, left bottom, from(#ef6b73), to(#e72833));
	background: -moz-linear-gradient(top,  #ef6b73,  #e72833);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e72833', endColorstr='#ef6b73');
	padding: 8px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-decoration: none;
	margin-left: 170px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

#content #services .btn:hover 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
	background: #9a1b22;
	background: -webkit-gradient(linear, left top, left bottom, from(#e72833), to(#ef6b73));
	background: -moz-linear-gradient(top,  #e72833,  #ef6b73);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9a1b22', endColorstr='#bc545a');
	padding: 8px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-decoration: none;
    -webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.2);
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

/*#content #services .btn:active 
{
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}*/

.sisreadmore
{
    margin-left: 150px;
}

.commreadmore
{
    margin-left: 150px;
}

Open in new window

0
 
LZ1Commented:
Again, it's the #header #nav ul that has the negative margin. In all of my browser tests, once I remove this negative top margin I can then see the menu clearly.
0
 
asp_net2Author Commented:
Ok, what do you recommend? I would hate to use a reset.css for just that. Should I use IE Conditional Comments based on IE6 and IE7?
0
 
LZ1Commented:
That would be my next recommendation. Unfortunately it's not easy to do when we don't have a live site or live code. Not your fault though, I understand client requirements.  

However, when I tested the code above in IE, FF, Safari and Chrome they none of them showed the top menu until I killed the ul negative top-margin.
0
 
LZ1Commented:
BTW, a reset is a good practice anyways. Trust me, it helps a lot more than you may think initially.
0
 
asp_net2Author Commented:
Oh wow, even Safari and Chrome.  I have not tested against those :( I better take a look at them as well.

How can I prevent that happening with Chrome and Safari? I know how to fix with IE6 and IE7.
0
 
asp_net2Author Commented:
Ok, so I should add that reset.css in there then? Is there a better reset.css to use elsewhere or is that one ok to use?
0
 
LZ1Commented:
That is the reset that most people go by in my experience. There is also the Yahoo Reset.

Safari, Chrome and FF are all considered "modern browsers" and usually if your coding validates is neat and orderly you shouldn't have too much of a problem.  It's always IE that you have to worry about the other 99% of the time.

In my experience I generally develop for the modern browsers first, validate and then develop for IE.  In many cases if you keep your code to a high standard and avoid hacks, you can avoid designing separately for IE all together. In other cases though, it's impossible.  
0
 
asp_net2Author Commented:
Hi LZ1,

Ok, I removed the margin for IE6 and IE7 but it still disappears.
0
 
asp_net2Author Commented:
Your solution never helped with IE6 and IE7.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 16
  • 13
Tackle projects and never again get stuck behind a technical roadblock.
Join Now