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!!!
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 ™" 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>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;
}
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/
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/
ASKER
@ LZ1,
Do I need to include all those elements for the reset?
Do I need to include all those elements for the reset?
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.
ASKER
@ gurvinder372,
That did not work :(
That did not work :(
ASKER
@LZ1,
Ok, how do I implement that then with my current CSS file? Or do I need two CSS files?
Ok, how do I implement that then with my current CSS file? Or do I need two CSS files?
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.
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.
ASKER
Ok, I like option 1 better. Now by adding another CSS file (reset.css) will that interfere with my current (main) CSS file?
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:
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>ASKER
@ LZ1,
That did not resolve the navigation from displaying in IE6 and IE7. Navigation is still missing from those two browsers.
That did not resolve the navigation from displaying in IE6 and IE7. Navigation is still missing from those two browsers.
Can you share a live URL?
ASKER
Wish I could, but it's still in development and I can't get a public IP :(
Can you possibly share the rendered HTML(source) of the page along with the full CSS?
ASKER
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>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;
}
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>ASKER
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.
- 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.
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
ASKER
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.
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.
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:
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>ASKER
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.
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.
ASKER
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.
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;
}
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.
ASKER
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?
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.
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.
BTW, a reset is a good practice anyways. Trust me, it helps a lot more than you may think initially.
ASKER
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.
How can I prevent that happening with Chrome and Safari? I know how to fix with IE6 and IE7.
ASKER
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi LZ1,
Ok, I removed the margin for IE6 and IE7 but it still disappears.
Ok, I removed the margin for IE6 and IE7 but it still disappears.
ASKER
Your solution never helped with IE6 and IE7.
list-style: none;
by
list-style-type: none;
also try increasing the height at line 6