Solved

Navigation is not visible using IE6 and IE7

Posted on 2011-09-08
30
263 Views
Last Modified: 2012-05-12
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
Comment
Question by:asp_net2
  • 16
  • 13
30 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36502805
replace line 51
list-style: none;

by

list-style-type: none;

also try increasing the height at line 6
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36502823
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36502944
@ LZ1,

Do I need to include all those elements for the reset?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36502965
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36502976
@ gurvinder372,

That did not work :(
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36502982
@LZ1,

Ok, how do I implement that then with my current CSS file? Or do I need two CSS files?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36503001
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36503009
Ok, I like option 1 better. Now by adding another CSS file (reset.css) will that interfere with my current (main) CSS file?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36503019
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36503145
@ LZ1,

That did not resolve the navigation from displaying in IE6 and IE7. Navigation is still missing from those two browsers.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36503155
Can you share a live URL?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36503167
Wish I could, but it's still in development and I can't get a public IP :(
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36503179
Can you possibly share the rendered HTML(source) of the page along with the full CSS?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36503395

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
 
LVL 30

Expert Comment

by:LZ1
ID: 36503482
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 4

Author Comment

by:asp_net2
ID: 36503661
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
 
LVL 30

Expert Comment

by:LZ1
ID: 36504097
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36505361
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
 
LVL 30

Expert Comment

by:LZ1
ID: 36505423
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36505618
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36505642
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
 
LVL 30

Expert Comment

by:LZ1
ID: 36509855
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36510054
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
 
LVL 30

Expert Comment

by:LZ1
ID: 36510413
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
 
LVL 30

Expert Comment

by:LZ1
ID: 36510421
BTW, a reset is a good practice anyways. Trust me, it helps a lot more than you may think initially.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36510432
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36510439
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
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 36510486
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
 
LVL 4

Author Comment

by:asp_net2
ID: 36582634
Hi LZ1,

Ok, I removed the margin for IE6 and IE7 but it still disappears.
0
 
LVL 4

Author Closing Comment

by:asp_net2
ID: 37057039
Your solution never helped with IE6 and IE7.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now