 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
von1945
Joined: 02 Oct 2009
Posts: 3
|
 Posted: Fri Oct 02, 2009 11:52 pm A few CSS issues (mostly IE caused) |
 |
|
|
With some help from a friend I managed to get together an actual drop down menu using CSS. however, as the friend is on vacation for awhile I have no help on fixing some errors. I'm a slightly CSS noob so all and any help is greatly welcomed ... in fact desperately needed. I'll go ahead and post the whole code just in case something else is messing it up in IE. Basically I want to achieve two things - A) I want it to drop down and work in IE and B) I've tried centering it but er it's not working.
I apologize if this is too big - if so I'll edit it to just show the menu part. www.kmea.net if you need a live view.
edit: if anything else looks wrong, please, feel free to correct any errors or mistake my stupidness made.
| Code: |
body {
background-image:url(sxtwoodgrain.png);
font-family:Arial,Helvetica,sans-serif;
font-size:10pt;
margin:0 auto;
padding:0;
}
#top_bar {
background-color:#2E2E2E;
border-bottom:1px solid #000000;
margin-left:auto;
margin-right:auto;
position:fixed;
top:0;
width:100%;
}
a:link {
color:#76B900;
font-weight:bold;
text-decoration:none;
}
a:visited {
color:#76B900;
font-weight:bold;
text-decoration:none;
}
a:active {
color:#76B900;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#88AA55;
font-weight:bold;
text-decoration:none;
}
#main {
margin-left:auto;
margin-right:auto;
width:900px;
}
p {
font-family:Arial,Helvetica,sans-serif;
font-size:0.95em;
text-align:justify;
}
h1 {
color:#88AA55;
font-family:Arial,Helvetica,san-serif;
font-size:12px;
text-transform:uppercase;
}
h2 {
color:#88AA55;
font-family:Arial,Helvetica,sans-serif;
font-size:16pt;
padding-bottom:0;
padding-top:0;
text-transform:uppercase;
}
#header {
background-image:url(menu12.png);
background-position:center center;
background-repeat:no-repeat;
height:50px;
padding:20px;
text-align:center;
width:800px;
}
#page {
background-color:#FFFFFF;
height:1300px;
padding:20px;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
background-color:#2E2E2E;
float:right;
font-size:0.95em;
font-weight:bold;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:0;
}
ul.dropdown {
background-color:#2E2E2E;
float:left;
font-size:0.95em;
font-weight:bold;
position:relative;
}
ul.dropdown li {
float:left;
font-size:0.95em;
font-weight:bold;
text-transform:uppercase;
}
ul.dropdown li.hover, ul.dropdown li:hover {
background-color:#2E2E2E;
color:#FFFFFF;
cursor:default;
font-size:0.95em;
font-weight:bold;
position:relative;
}
ul.dropdown ul {
background-color:#2E2E2E;
color:#FFFFFF;
float:left;
font-size:0.95em;
font-weight:bold;
left:0;
position:absolute;
top:100%;
visibility:hidden;
width:100%;
}
ul.dropdown ul li {
float:left;
}
ul.dropdown ul ul {
left:99%;
top:1px;
}
ul.dropdown li:hover > ul {
visibility:visible;
}
ul.dropdown li a {
display:block;
float:left;
font-size:0.95em;
font-weight:bold;
padding:5px 15px;
}
ul.dropdown li {
padding:0;
}
ul.dropdown li.dir {
padding:10px 20px 10px 15px;
}
ul.dropdown ul li.dir {
padding-right:0;
}
ul.dropdown li {
}
ul.dropdown ul a {
padding:0 0 7px;
width:150px;
}
ul.dropdown ul a:hover {
background-color:#88AA55;
color:#FFFFFF;
font-size:0.95em;
font-weight:bold;
}
ul.dropdown a.open {
background-color:#2E2E2E;
color:#FFFFFF !important;
font-size:0.95em;
font-weight:bold;
}
ul.dropdown ul a.open {
background-color:#88AA55;
color:#FFFFFF;
font-size:0.95em;
font-weight:bold;
}
ul.dropdown li:hover > a.dir {
background-color:#282828;
color:#FFFFFF;
font-size:0.95em;
font-weight:bold;
}
ul.dropdown ul li:hover > a.dir {
background-color:#76B900;
color:#FFFFFF;
font-size:0.95em;
font-weight:bold;
}
#logo {
float:left;
height:30%;
margin-left:auto;
margin-right:auto;
padding-right:20px;
width:154px;
}
#logo2 {
float:left;
height:30%;
margin-left:auto;
margin-right:auto;
width:154px;
}
#content {
background-color:#FFFFFF;
border:medium none;
float:left;
margin-left:10px;
margin-right:10px;
width:75%;
}
#copyright {
color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
} |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2311
|
| Posted: Sat Oct 03, 2009 5:47 am |
|
|
|
Here's your solution. Menu is centered, 37 errors corrected, css cleaned up, works in FF, IE7, IE8, Google Chrome, Opera and Safari (PC).
| Code: |
<!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 rel="icon" href="kmeafav.png" type="image/x-icon" />
<link rel="shortcut icon" href="kmeafav.png" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="TITLE" content="KMEA" />
<meta name="RATING" content="general" />
<meta name="KEYWORDS" content="Asset Management,Budgeting,Cost Control,Six Sigma,Contract Management,Data Management,Design Management,Engineering Management,Material Control,Planning,Scheduling,Procedure Development,Project Management,Proposal Evaluation,Quality Assurance,Specification Development,Subcontract Management,Task Supervision,Technical Studies,black belt, Energy,Planning,strategies,Cost,analysis,Billing,Management,Oversight,consumption,costs,Statements,Benchmarking performance,diagnostics,ENERGY,STAR,compliance,Performance,management,vulnerability,assessment,Design,strategies,mitigation,Audit,Benchmarking,Data,Resource,Efficiency,Management,Commissioning,Planning,Strategies" />
<meta name="ROBOTS" content="all" />
<meta name="AUTHOR" content="KMEA" />
<meta name="Description" content="Founded September 19, 1996, KMEA is a San Diego, California, based management services company that provides project management services, facilities management and energy services to commercial clients and government agencies." />
<link href="dropdown-menu.css" media="all" rel="stylesheet" type="text/css" />
<link href="default.css" media="all" rel="stylesheet" type="text/css" />
<title>KMEA</title>
</head>
<body>
<div id="top_bar">
<div id="outer">
<ul class="dropdown dropdown-horizontal">
<li><a href="./" class="dir">Home</a></li>
<li><a href="/business" class="dir">Business Management</a></li>
<li><a href="/facilities" class="dir">Facalities Management</a></li>
<li><a href="/energy" class="dir">Energy</a></li>
<li><a href="./" class="dir">Contract Vehicles</a></li>
<li><a href="/dhspact" class="dir">DHS PACTS</a>
<ul>
<li><a href="/contract">PACTS Contract</a></li>
<li><a href="/functional">Functional Areas</a></li>
<li><a href="/team">Team Capabilities</a></li>
<li><a href="/naics">Team NAICS Codes</a></li>
<li><a href="/corporate">KMEA PACTS Contact</a></li>
</ul>
</li>
<li><a href="/" class="dir">GSA</a>
<ul>
<li><a href="/">Contract Vehicles</a></li>
<li><a href="/">Services Offered</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</li>
<li><a href="/about" class="dir">About</a></li>
<li><a href="/contact" class="dir">Contact</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="header"></div>
<div id="page">
<div id="logo"><img src="http://s97912477.onlinehome.us/temp/logo2.png" alt="KMEA Logo" />
<h2>Certifications</h2>
<a href="/about">8(a)</a>
<h3>SDB</h3>
<h3>SDVOSB</h3>
<h3>California DVBE</h3>
<h3>California Small Business</h3>
<h3>ENERGY STAR® PARTNER</h3>
</div>
<div id="content"><div style="width : 100%; float: right;">
<h2>Experience on your Side</h2>
<p><img src="front1.png" alt="Image of windfarm and bridge" width="350" style="float:left; padding: 5px;"/>
KMEA is a Business Management Services company providing project management and technical services. </p>
<p>We have been in operation for more than 12 years providing our services to commercial clients and government agencies. During this time, we have grown both financially and professionally. We have done this by providing the client with service and personnel that consistently exceed their expectations. This has led to the highest client satisfaction as demonstrated by repeat business and referrals to new businesses. In June 2008 <b>KMEA achieved a score of 95 out of 100 in the Dunn and Bradstreet Open Ratings survey, D&B's measure of client satisfaction of all companies they survey.</b> KMEA's extraordinarily high score places it in the top quintile of all companies surveyed by D&B for client satisfaction in the US. </p>
<p>KMEA is pleased to announce that as of December 2008 we are an ENERGY STAR® PARTNER providing full service energy conservation and upgrade services to assist federal, state and municipal government agencies and commercial property owners to earn the ENERGY STAR® RATINGS. </p>
<h2>Why KMEA?</h2>
<p>
• In business more than 12 years<br/>
• Dunn & Bradstreet Open Ratings score for customer satisfaction 95 out of 100, top quintile<br/>
• Experience with Government Agencies, Utility Companies and Private Sector<br/>
• Experience throughout the United States</p>
<h2>KMEA news</h2>
<p>On <b>August 11, 2009</b>, KMEA was awarded a PACTS contract in Functional Category 4 (FC4) by the Department of Homeland Security (DHS). This contract covers Technical Services. Links on this page will take you to the PACTS contract, functional areas covered, team capabilities and information on our subcontractor. KMEA is an SDVOSB business that is also an 8(a) company. Our subcontractor and team member on PACTS is MACTEC, an industry-leading program infrastructure engineering, environmental engineering and construction services company.</p>
</div>
</div>
<div id="clearer"></div>
</div>
</div>
<div id="copyright">© KMEA 1996-2009 | Designed by 1945™</div>
</body>
</html> |
dropdown-menu.css
| Code: |
@charset "utf-8";
/* CSS Document */
#outer {
position:relative;
left:50%;
float:left;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
background-color:#222;
float:right;
font-size:0.95em;
font-weight:bold;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:0;
}
ul.dropdown {
background-color:#222;
float:left;
font-size:0.95em;
font-weight:bold;
position:relative;
left:-50%;
}
ul.dropdown li {
float:left;
font-size:0.95em;
font-weight:bold;
text-transform:uppercase;
}
ul.dropdown li.hover, ul.dropdown li:hover {
background:#222;
color:#fff;
cursor:default;
font-size:0.95em;
font-weight:bold;
position:relative;
}
ul.dropdown ul {
background-color:#222;
color:#fff;
float:left;
font-size:0.95em;
font-weight:bold;
left:0;
position:absolute;
top:100%;
visibility:hidden;
width:100%;
}
ul.dropdown ul li {
float:left;
}
ul.dropdown ul ul {
left:99%;
top:1px;
}
ul.dropdown li:hover > ul {
visibility:visible;
}
ul.dropdown li a {
display:block;
float:left;
font-size:0.95em;
font-weight:bold;
padding:5px 15px;
}
ul.dropdown li {
padding:0;
}
ul.dropdown li.dir {
padding:10px 20px 10px 15px;
}
ul.dropdown ul li.dir {
padding-right:0;
}
ul.dropdown li {
}
ul.dropdown ul a {
padding:0 0 7px;
width:150px;
}
ul.dropdown ul a:hover {
background-color:#8a5;
color:#fff;
font-size:0.95em;
font-weight:bold;
}
ul.dropdown a.open {
background-color:#222;
color:#fff !important;
font-size:0.95em;
font-weight:bold;
}
ul.dropdown ul a.open {
background-color:#8a5;
color:#fff;
font-size:0.95em;
font-weight:bold;
}
ul.dropdown li:hover > a.dir {
background-color:#222;
color:#fff;
font-size:0.95em;
font-weight:bold;
}
ul.dropdown ul li:hover > a.dir {
background-color:#76B900;
color:#fff;
font-size:0.95em;
font-weight:bold;
} |
default.css
| Code: |
@charset "utf-8";
/* CSS Document */
* {
padding:0;
margin:0;
border:0;
}
html {overflow-y:scroll;} /*keep scrollbar position present in FF*/
body {
background:url(sxtwoodgrain.png) fixed;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
line-height:1.5;
}
#top_bar {
background:#2E2E2E;
border-bottom:1px solid #000000;
width:100%;
position:fixed;
top:0;
left:0;
}
a:link {
color:#76B900;
font-weight:bold;
text-decoration:none;
}
a:visited {
color:#76B900;
font-weight:bold;
text-decoration:none;
}
a:active {
color:#76B900;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#88AA55;
font-weight:bold;
text-decoration:none;
}
a:focus {outline:none;}
#main {
margin: 0 auto;
width:900px;
padding-top:80px;
}
p {
font-size:0.95em;
text-align:justify;
margin-bottom:10px;
}
h3 {
color:#88AA55;
font-size:12px;
text-transform:uppercase;
}
h2 {
color:#88AA55;
font-size:16px;
text-transform:uppercase;
}
#header {
background:url(menu12.png) no-repeat center center;
height:50px;
padding:20px;
text-align:center;
width:800px;
}
#page {
background:#fff;
height:auto;
padding:20px;
}
#logo {
float:left;
height:30%;
margin:0 auto;
padding-right:20px;
width:154px;
}
#logo2 {
float:left;
height:30%;
margin:0 auto;
width:154px;
}
#content {
float:left;
margin:0 10px;
width:75%;
}
#copyright {
color:#fff;
font-size:10px;
text-align:center;
}
#clearer {
height:1px;
clear:both;
} |
|
|
von1945
Joined: 02 Oct 2009
Posts: 3
|
| Posted: Sat Oct 03, 2009 6:10 am |
|
|
|
many thanks for that my friend ... I'll check this later and update to thank you even more so because I'm pretty sure it'll work like a charm 
edit: thanks very very much - you helped me alot, now that I look and saw everything you helped with I want to slam my head against the desk. thanks again |
|
sticks464
Joined: 31 Dec 2006
Posts: 2311
|
| Posted: Sat Oct 03, 2009 8:06 am |
|
|
|
If you used my code as written everything will work properly as I have checked it in all browsers. I looked at the site and you are only using parts of what is posted.
The most important part of the code is the doctype. Without that IE will never display properly and some other browsers as well.
You must replace the stylesheets with the ones posted and do away with the embedded styles to make it work properly.
If there's any part of the code or css you do not understand I will explain it. |
|
leahmarie
Joined: 04 Aug 2009
Posts: 29
|
| Posted: Mon Oct 05, 2009 1:38 am |
|
|
|
| Neat trick on the codings to be able to match the appearance in those browsers especially IE. It's one of tough browsers to fix the appearance of the site in. With this suggestions and the solutions you gave to him, I got some points from it. |
|
von1945
Joined: 02 Oct 2009
Posts: 3
|
| Posted: Sat Oct 10, 2009 12:12 pm |
|
|
|
| sticks464 wrote: |
If you used my code as written everything will work properly as I have checked it in all browsers. I looked at the site and you are only using parts of what is posted.
The most important part of the code is the doctype. Without that IE will never display properly and some other browsers as well.
You must replace the stylesheets with the ones posted and do away with the embedded styles to make it work properly.
If there's any part of the code or css you do not understand I will explain it. |
I'm not quite sure what you're referring to - as everything was replaced with what you provided ... and I made sure and checked it in each browser and it works as it is suppose to work. Unless I'm missing something, somewhere. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
