I'm basically looking for 2 things:
1. Help with the border issue in IE7.
2. Can I include the conditional css in the html in the actual CSS file?
3. Any suggestions how I could improve the whole design.
Here is the HTML for the page:
<link href="/css/mainsite3.css" rel="stylesheet" type="text/css" />
<!-- IE6 Special Instructions -->
<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/
.menu, .menu ul { /* float.clear */
zoom: 1;
}
.menu li.adxmhover {
z-index: 10000;
}
.menu .adxmhoverUL { /* li:hover>ul selector */
visibility: visible;
}
.menu .adxmhoverUL { /* submenu goes to the right */
left: 100%;
}
/* - - - ADxMenu: DESIGN styles - - - */
.menu ul a { /* fix clickability-area problem */
zoom: 1;
}
.menu li { /* fix white gap problem */
float: left;
width: 100%;
}
.menu li { /* prevent double-line between items */
margin-top: -1px;
}
.menu a:hover, .menu .adxmhoverA { /* li:hover>a selector */
color: #fc3;
}
.menu .adxmhoverUL { /* inset submenus, to show off overlapping */
top: 5px;
left: 90%;
}
/*]]>*/
</style>
<script type="text/javascript" src="/includes/navigation/ADxMenu.js"></script>
<![endif]-->
</head>
<body>
<div id="Container">
<!-- open Header --><div id="Banner">
<img src="/images/nav/dct_header_logo.png" alt="Daves Computer Tips" />
<!-- Open Banner Search -->
<div id="Bannersearch">
<?php
include("/includes/adsense/banner_search.php");
?>
<!-- Close Search --></div>
<!-- close Banner --></div>
<!-- Open Contentbox --><div id="Contentbox">
<img src="/images/nav/dct_top_box.png" alt="content box top" />
<p>Navigation</p>
<h1>Free Computer Tips, Tricks, and News!</h1>
<!-- Close Contentbox --></div>
<!-- Open Nav --><div id="Nav1">
<?php
include("/includes/navigation/left_navigation.php");
?>
<!-- Clear Float for background --><div class="clear"></div>
<!-- Close Nav --></div>
<!-- Open Content1 --><div id="Content1">
<!-- Open ad slot --><div align="center">
<!-- Close ad slot --></div>
<div id="Announce">Your online source for Microsoft Windows Vista & XP information!</div>
<p>Daves Computer Tips website text text text text </p>
<p>Subscribe to our <strong>FREE</strong> text text text text text text text text !</p>
<!-- open subscribe form --><div id="Blueboxright">
<?php
include("/includes/subscribeform.php");
?>
<!-- close subscribe box --></div>
<p>Looking for software for a specific task? text text text text text text .</p>
<p>If you are looking for instruction text text text text text text .</p>
<p>If you have specific computer hardware or software related questions please text text text text .</p>
<!-- Open ad slot -->
<div align="center">
</div>
<div align="center">
</div>
<!-- Close ad slot -->
<!-- Clear Float for background --><div class="clear"></div>
<!-- Close Content1--></div>
<!-- Open Footer --><div id="Footer">
<img src="/images/nav/dct_footer.png" alt="Daves Computer Tips footer" />
<?php
include("/includes/navigation/footer.php");
?>
<!-- Close Footer --></div>
<!-- open copyright --><div id="Copyright">
<?php
include("/includes/navigation/copyright.php");
?>
<!-- close copyright --></div>
<!-- close Container --></div>
</body>
</html>
Here is the CSS for the page:
/* CSS Document */
* {margin:0; padding:0}
body {
padding: 10px 0 10px 0;
background: #bccefc;
font-family:Arial, Helvetica, sans-serif;
}
#Container {
margin:auto;
min-width:760px;
max-width:1200px;
padding: 10px;
background: #ffffff;
border-top: outset #cccccc 3px;
border-right: outset #bccefc 3px;
border-bottom: outset #bccefc 3px;
border-left: outset #cccccc 3px;
}
#Banner {
background-image: url(/images/nav/dct_header_bg.png);
background-repeat: no-repeat;
background-position:right top;
width: 100%;
height: 110px;
}
#Contentbox {
background-image: url(/images/nav/dct_top_box_bg.png);
background-repeat: no-repeat;
background-position: right top;
height: 40px;
width: 100%;
}
#Contentbox h1 {
color: #ffffff;
font-style:italic;
font-size: 32px;
margin-left: 150px;
text-align: center;
margin-top: -40px;
}
#Contentbox p {
color: #ffffff;
font-size: 24px;
font-weight: bold;
margin-left: 7px;
margin-top: -32px;
}
#Nav1 {
position:relative;
width:150px;
height: 100%;
z-index:1;
background-color: #12a2ea;
float: left;
border-left: solid #12a2ea 2px;
}
#Adsensenav {
margin:1px 0 0 1px;
height: 242px;
width: 141px;
background-color: #12a2ea;
padding-left: 7px;
}
#Content1 {
padding: 10px;
z-index:2;
float: none;
font-size: 16px;
margin: 0 0px 0 150px;
border-left: solid #12a2ea 3px;
border-right: solid #12a2ea 3px;
height: 100%;
clear: right;
}
#Content1 p {
margin: 15px 0 15px 0;
}
#Content1 a {
color:#3131ff;
text-decoration:none;
}
#Content1 a:hover {
text-decoration:underline;
}
#Content1 a:visited {
color:#3131ff;
}
#Announce {
text-align: center;
font-weight: bold;
padding-right: 10px;
border-top: double #666666 3px;
border-bottom: double #666666 3px;
}
#Footer {
margin:auto;
clear:both;
font-size:12px;
height: 30px;
margin-top: -10px;
background: url(/images/nav/dct_footer_bg.png) no-repeat right;
}
#Footer p {
color: #fff;
text-align: center;
margin: 5px 0 0 0;
}
#Footer a {
color:#ffffff;
text-decoration:none;
}
#Footer a:hover {
text-decoration:underline;
}
#Footer a:visited {
color:#ffffff;
}
#Copyright {
margin:auto;
font-size:10px;
padding-top:10px;
text-align: center;
color: #666666;
}
#Blueboxright {
float:right;
margin-left:10px;
width:280px;
height: 195px;
z-index:2;
display: block;
border-right-color: #666666;
border-bottom-color: #666666;
border-style: outset;
border-width: 3px;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
background-color: #bfcfff;
}
.clear {
clear: both;
}
.imgleft {
display: block;
float: left;
padding-right: 15px;
clear: none;
}
.imgright {
display: block;
float: right;
padding-left: 15px;
clear: none;
}
/* Begin Fly Out Menu */
.menu {
width: 150px;/* VERY IMPORTANT! Set this to appropriate value, either here on down in the design section */
}
.menu, .menu ul { /* remove all list stylings */
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5; /* thus we need to apply explicit z-index here... */
}
.menu li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present) see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0; /* while hidden, always keep them at the top left corner, */
top: 0; /* to avoid scrollbars as much as possible */
}
.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
left: 100%; /* and move them to the right of the item */
}
/* -- float.clear -- force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
min-height: 0;
}
/* -- float.clear.END -- */
/* sticky submenu: it should not disappear when your mouse moves a bit outside the submenu
YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
if you do it, make sure you 110% know what you do */
.menu ul {
background-image: url(../images/nav/empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px; /*background: #f00;*/ /* uncomment this if you want to see the "safe" area.
you can also use to adjust the safe area to your requirement */
}
/* - - - ADxMenu: DESIGN styles - - - */
.menu, .menu ul li {
background: #12a2ea;
font-family: Arial, Helvetica, sans-serif;
}
.menu {
width: 150px;
}
.menu ul {
width: 150px;
}
.menu a {
text-decoration: none;
color: #fff;
padding: .3em .5em;
display: block;
}
.menu a:hover, .menu li:hover>a {
color: #fff;
background-color: #bccefc;
}
.menu li { /* create borders around each item */
border: 1px solid #fff;
}
.menu>li + li, .menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;
}
.menu li:hover>ul { /* inset submenus, to show off overlapping */
top: 5px;
left: 90%;
}
/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
color: #fff;
}
/* End Fly Out Menu */
2011