I designed a website using Dreamviewer. The styles I applied to the webpage are not available on Firefox and IE, webpage is displayed in plain HTML format. But all styles are well displayed in Chrome.What is the reason for that and how can fix that problem?
This is my stylesheet
* { padding:0; margin:0; border:0; }
p { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#202020; line-height:180%;}
h1, h2, h3, h4 { color:#00486A; font-family:Arial, Helvetica, sans-serif;}
h1 { padding: 5px 5px 10px 0; font-size:24px;}
#wrapper { margin:5px auto; width:1000px; background-color:#E6E6FF;} /*opacity:0.8; filter:alpha(opacity=80)}*/
body { background:url(../img/backgrounds/sparkling_design-HD.jpg); background-repeat:repeat; }
#logo { float:left; margin:10px 5px 10px 20px; opacity:1; ;}
#logo img { opacity:1;}
#loginform { float:right; padding: 20px 30px 10px 10px; margin: 10px 10px; }
#loginform a { float:right; clear:both; }
#loginform a:link { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform a:visited { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform a:active { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform a:hover { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999; text-decoration:none; text-decoration:underline;}
#loginform a:focus { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; text-decoration:none; }
#loginform label { float:left; width:70px; line-height: 100%; font-family:Arial, Helvetica, sans-serif; color:#666; font-size:12px; padding-top:5px;}
#loginform input { -webkit-border-radius:5px; border-radius:5px; width:150px; line-height:180%; height:20px; margin-bottom:10px; padding-right:5px; border:1px solid #999; padding-left: 8px;}
#loginform input[type=submit] { float:right; text-align:center; width:75px; background-color:#82BDFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding-left:8px; border: 1px #999999 solid; line-height:10px;}
#loginform input[type=submit]:hover { background-color:#0060FF; color:#FFF; }
#topnav { clear:both; padding:10px 5px 10px 5px; margin:5px 5px 5px 20px; border-top:1px #B7B1FE solid; border-bottom:1px #B7B1FE solid;}
#topnav ul li { display:inline; list-style-type:none; padding-left:20px; }
#topnav ul li a:link { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#topnav ul li a:active { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#topnav ul li a:visited { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#topnav ul li a:hover { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#7C96FC; font-weight:bold; }
#topnav ul li a:focus { font-family:'Noto Serif',Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#00324A; font-weight:bold; }
#banner { clear:both; margin:5px 20px; width:960px;}
#banner img { padding: 10px 0 10px 15px; }
#content { float:left; width:700px; padding:10px 20px 10px 10px; margin:5px 5px 10px 10px; text-align:justify;}
#rightpane { float:right; width:220px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:180%; color:#202020; margin-right: 20px; background-color:#D9DDFF; margin-bottom:20px; border:1px #0080C0 solid; border-radius:5px;}
#searchbox { padding:10px 5px 10px 20px; margin-top:5px; }
#search input[type=text] { border-radius:5px; -webkit-border-radius:5px; height: 20px; width:150px; border:1px #0080C0 solid; margin-right: 5px; }
#search input[type=submit] { border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; height:25px; width:30px; border:1px #0080C0 solid; background-color:#82BDFF; line-height:5px;}
#search input[type=submit]:hover { background-color:#0060FF; color:#FFF; }
#searchbox h3 { margin-left:0; }
/*---------------------Signup page------------ */
#form-content { border: 1px solid #666; float:left; width:690px; padding:10px 20px 10px 10px; margin:5px 15px 10px 20px; }
#form-add-account input[type=text], #form-add-account input[type=password] { width: 200px; height:20px; border-radius:5px; border: 1px #0080C0 solid;}
#form-add-account label { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;}
#form-add-account table { padding-top: 5px; }
/*---------------------------------------------*/
#latest-posts { padding:10px 5px 10px 10px; margin:20px 0; }
#latest-posts ul { list-style-type:none; padding-right:5px; padding-left:10px; line-height: 180%;}
#latest-posts ul li a:link { text-decoration:none; color:#202020;}
#latest-posts ul li a:active { text-decoration:none; color:#202020;}
#latest-posts ul li a:visited { text-decoration:none; color:#202020;}
#latest-posts ul li a:hover { text-decoration:none; color:#7C96FC; text-decoration:blink;}
#latest-posts ul li a:focus { text-decoration:none; color:#202020;}
#recommendations { padding:10px 5px 10px 10px; margin:20px 0; }
#recommendations ul { list-style-type:none; padding-right:5px; padding-left:10px;}
#recommendations ul li a:link { text-decoration:none; color:#202020;}
#recommendations ul li a:active { text-decoration:none; color:#202020;}
#recommendations ul li a:visited { text-decoration:none; color:#202020;}
#recommendations ul li a:hover { text-decoration:none; color:#7C96FC; text-decoration:blink;}
#recommendations ul li a:focus { text-decoration:none; color:#202020;}
#footer { clear:both; width:980px; margin:10px auto; border-top:2px #CCCCCC dotted; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666;}
#footer p { font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666; }
#footer h4 { font-size:11px; padding-bottom:4px; }
#social-media { float:left; width:230px; margin:10px 0px 10px 30px;}
#social-media ul { list-style-type:none; line-height:180%;}
#social-media ul li a:link { text-decoration:none; color:#666;}
#social-media ul li a:active { text-decoration:none; color:#666;}
#social-media ul li a:visited { text-decoration:none; color:#666;}
#social-media ul li a:hover { text-decoration:none; color:#7C96FC; text-decoration:blink;}
#social-media ul li a:focus { text-decoration:none; color:#666;}
#contacts { float:left;width:230px; margin:10px 0px 10px 120px; }
#notice { width:230px; float:right; margin-top:10px; }
#footer-bottom { clear:both; text-align:center; padding:10px 10px 20px 10px; border-top:2px #CCCCCC dotted; }
I don't see any advanced or complex CSS code, so all modern browsers should support it. Anyway, here is a checklist:
Checklist
Did you checked different browser versions (you can switch inside Internet Explorer between older versions)? Check: http://msdn.microsoft.com/en-us/library/gg699485(v=vs.85).aspx
Did you try a more simplified CSS?
Did you clean up your browser cache?
Did you try "Browser Sniffing"? Check: http://en.wikipedia.org/wiki/Browser_sniffing
Did you try it on another computer?
If you testing online you might want to check your .htaccess.
Related
I've been working on a website and after testing it in all browsers it looks fine except in IE, the contact div and nav shift around the page. Can someone advise me of any code that can correct this?
http://jsfiddle.net/ykntfnnx/
Thanks in advance
Here is the HTML and CSS that have the issue in IE
<div id="menu">
<ul>
<li>Home</li>
<li class="divider"></li>
<li><span>About Us</span></li>
<li class="divider"></li>
<li><span><span>Work</span></span></li>
<li class="divider"></li>
<li><span><span><span>Services</span></span></span></li>
<li class="divider"></li>
<li><span><span><span><span>Contact</span></span></span></span></li>
</ul>
<div id="contact">
<h3>020 8810 5000<br />
07703 193 868 info#spema.co.uk</h3>
</div>
</div>
CSS
#menu{
float:right;
padding:50px 25px 0 50px;
margin:0px;
height:15px;
}
#menu ul{
display:block;
list-style:none;
margin:0px;
}
#menu ul li{
display:inline;
padding:0px;
margin:0px;
}
#menu ul li.divider{
float:left;
width:1px;
height:15px;
background:url(images/menu_divider.gif) no-repeat center;
padding:0 12px 0 12px;
}
#menu ul li a{
display:block;
padding:0px;
margin:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #FC0;
font-size:18px;
line-height:12px;
}
#menu ul li a:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#menu ul li a span {
display:block;
padding:0px;
margin:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #F0F;
font-size:18px;
line-height:12px;
}
#menu ul li a span:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#menu ul li a span span {
display:block;
padding:0px;
margin:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #6CF;
font-size:18px;
line-height:12px;
}
#menu ul li a span span:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#menu ul li a span span span{
display:block;
padding:0px;
margin:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #6C6;
font-size:18px;
line-height:12px;
}
#menu ul li a span span span:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#menu ul li a span span span span {
display:block;
padding:0px;
margin-left:0px;
float:left;
font-family: 'aleobold', Arial, sans-serif;
text-decoration:none;
color: #039;
font-size:18px;
line-height:12px;
}
#menu ul li a span span span span:hover{
color: #68696C;
font-family: 'aleobold', Arial, sans-serif;
}
#contact{
float:right;
height: 150px;
width: 225px;
}
body
{
background:url(images/triangle_background.jpg) repeat;
background-size: cover;
background-attachment:fixed;
font-family: 'aleoregular', Arial, sans-serif;
padding:0;
font-size:16px;
margin:0px auto auto auto;
color:#68696C;
}
h3{
color:#F7911D;
font-size:23px;
font-family: 'aleobold', Arial, sans-serif;
text-align: right;
clear:both;
}
Try adding a width to your #menu declaration
#menu{
float:right;
padding:50px 25px 0 50px;
margin:0px;
height:15px;
width:440px;
}
http://jsfiddle.net/ykntfnnx/2/
IE seems to act a bit funny with floats unless a width of the div is supplied
I have an application based on the following css.The page is designed to display employee database and their task records.I need the header always at the bottom of the page even the content is less/more in number.I cant fix it.Once when I fix for less content it gets displayed above the content when more contents are added.I need help to fix this...
* { padding:0; margin:0; outline:0; }
body {
background:#f9ebae;
font-family: Verdana, sans-serif;
font-size:11px;
line-height:14px;
color:#5e5e5e;
margin:0;
padding:0;
height:100%;
}
input, textarea, select { font-family: Verdana, sans-serif; font-size:13px; }
textarea { overflow:hidden; }
.field { border:solid 1px #d3cfc7; background:#fff; padding:5px; }
.small-field { border:solid 1px #d3cfc7; background:#fff; padding:3px 1px; font-size:11px; }
.checkbox { width:13px; height:13px; vertical-align:top; position:relative; top:2px; }
.button { background:#eee url(images/button.gif) repeat-x 0 0; border:solid 1px #b1a874; color:#7f7f7f; font-size:11px; padding:2px 6px 2px 6px; cursor:pointer; line-height:14px !important; }
.button:hover { color:#333; border-color:#857b42; }
.field:focus { color:#000; border-color:#857b42;}
a img { border:0; }
a { color:#ba4c32; text-decoration: underline; cursor:pointer; }
a:hover { color:#8d341f; text-decoration: none;}
.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }
.rights, .alignright { float:right; display:inline; }
.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }
.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center !important; }
h1{ font-size:22px; font-family:Georgia, "Times New Roman", Times, serif; line-height:24px; color:#fff; font-weight: normal;}
h1 a{ color:#fff; text-decoration: none; }
h11{ font-size:32px; font-family:"Times New Roman", Times, serif; line-height:30px; color:#fff; font-weight: normal;}
h11 a{ color:#fff; text-decoration: none; }
h2 { font-size:15px; font-weight: normal; }
h2 a{ text-decoration: none; }
h22 { font-size:20px; font-family:"Times New Roman", Times, serif; font-weight: normal; }
h22 a{ text-decoration: none; }
h3 { font-size:12px; color:#3333FF; line-height:14px; font-weight: normal; }
h3 a{ text-decoration: none; }
.shell { ; margin:0; auto; }
#header { height:89px; background:url(images/header.gif); white-space:nowrap; }
#header h1{ float:left; display:inline; padding-top:12px; }
#top-navigation { float:right; white-space:nowrap; color:#fff; padding-top:15px; }
#top-navigation a{ color:#fff; }
#top-navigation span{ color:#dca598; }
#top { height:53px;}
#navigation { height:36px;}
#navigation ul{ list-style-type: none;}
#navigation ul li{ float:left; display:inline; margin-right:2px;}
#navigation ul li a,
#navigation ul li a span { float:left; height:36px; background:url(images/tab.gif) no-repeat 0 0; padding:0 0 0 15px;}
#navigation ul li a span { background-position:right 0; padding:0 15px 0 0;}
#navigation ul li a { line-height:36px; color:#907525; text-decoration: none; }
#navigation ul li a.active,
#navigation ul li a:hover { background-position:0 bottom;}
#navigation ul li a.active span,
#navigation ul li a:hover span{ background-position:right bottom; }
#navigation ul li a.active { font-size:12px; font-weight: bold; color:#887e42; }
#wrapper {
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#wrapper1 {
min-height:200%;
position:relative;
}
#container { padding:20px 0; padding-bottom:44px;}
#container10 { padding:20px 0; padding-bottom:44px; min-height:100%;}
.small-nav { color:#978b48; padding-bottom:20px; }
.small-nav a{ color:#6f6636; }
#main { overflow:auto; padding-bottom: 44px; }
#content { float:left; width:98%; padding:0 0 44px 2px; }
#contents { float:left; width:auto; padding:0 0 0 300px; }
#sidebar { float:right; width:225px; }
.table {}
.table th{ background:#fffdfa url(images/th.gif) repeat-x 0 0; color:#818181; text-align: left; padding:7px 10px; border-bottom:solid 1px #d2d1cb;}
.table td{ background:#fbfcfc; border-bottom:solid 1px #e0e0e0; padding:8px 10px; }
.table tr.odd td{ background:#f8f8f8; }
.table tr:hover td{ background:#fff9e1; }
.table a.ico{ }
.box { background:#fbfcfc; height:auto; width:auto; padding:1px; margin-bottom:20px; }
.box-head { background:#ba4c32; height:32px; color:#fff; padding: 0 10px; line-height:32px; white-space:nowrap; border-bottom:solid 1px #fff; }
.box-head .rights{ padding:10px 0 10px 1px; line-height:13px;}
.box-head .rights label,
.box-head .rights input { float:left; }
.box-head .rights label { padding:4px 0 0 0;}
.box-head .rights input { margin-left:5px;}
.box-head .right{ padding:5px 0 10px 1px; line-height:13px; }
.box-head .right label,
.box-head .right input { float:left; }
.box-head .right label { padding:4px 0 0 0;}
.box-head .right input { margin-left:5px;}
.pagging { height:20px; padding:8px 0px; line-height:19px; color:#949494; }
.pagging a{ background:url(images/pagging.gif) repeat-x 0 0; height:20px; float:left; padding:0 8px; border:solid 1px #d5d5d5; text-decoration: none; color:#949494; margin-left:5px; }
.pagging a:hover { border-color:#8c3521; background:#ba4c32; color:#fff; }
.pagging span{ float:left; margin-left:5px; padding-top:2px; }
a.ico { color:#9d9c9a; font-size:10px; text-decoration: none; padding:0 0 0 14px; background-repeat:no-repeat; background-position:0 0; }
a.ico:hover { color:#333;}
a.del { background-image:url(images/delete.gif); margin-left:10px;}
a.edit { background-image:url(images/ed.gif); margin-left:10px;}
a.status { background-image:url(images/i.gif); margin-left:10px;}
.form { padding:15px 10px 5px 10px; }
.form label{ display:block; font-weight: bold; font-size:13px; padding-bottom:4px; }
.form label span{ color:#999; font-weight: normal;}
.form .field { display:block; }
.form .inline-field .field { display:inline;}
.form .req { font-size:13px; float:right; white-space:nowrap; color:#999; }
.form p{ padding-bottom:15px; }
.size1 { width:716px; }
.size2 { width:80px; }
.size3 { width:120px; }
textarea.size1 { height:180px; }
.buttons { text-align: right; padding:10px; background:#eee; border-top:solid 1px #e0e0e0; }
.buttons .button{ margin-left:3px;}
.box-content { padding:10px; }
.sort { border-top:solid 1px #e0e0e0; padding-top:10px; margin-top:15px; }
.sort label{ display:block; font-weight: bold;}
.sort .field{ display:block; margin-top:5px; }
.sort select.field{ width:203px; }
.box-content p { padding-top:10px; }
.select-all{}
.select-all label{ text-decoration: underline; padding-left:4px; }
.add-button,
.add-button span { float:left; height:26px; background:url(images/add-button.gif) no-repeat 0 0; padding:0 0 0 28px; }
.add-button span { background-position:right 0; padding:0 10px 0 0; }
.add-button { font-weight: bold; font-size:12px; color:#747474; text-decoration: none; line-height:26px; }
.add-button:hover { color:#333;}
#footer { height:44px; margin-top: -44px; background:url(images/footer.gif); line-height:44px; width:100%; color:#fff; position:relative; bottom:0; left:0; clear:both; }
#footer a{ color:#fff;}
#footer, #push {
height: 4em;
}
#footer, #push {
clear: both;
}
.msg { position:relative; padding-right:35px; margin-bottom:10px; }
.msg p{ padding:9px 10px 9px 40px; font-size:12px; background-repeat:no-repeat; background-position:10px 5px;}
.msg a.close{ font-size:0; line-height:0; position:absolute; top:0; right:0; width:34px; height:34px; background:url(images/close.gif); text-indent: -4000px;}
.msg-ok p{ background-color:#fffac2; border:solid 1px #dbd6a2; color:#5e5c40; background-image:url(images/ok.gif); }
.msg-error p{ background-color:#f3c598; border:solid 1px #e8b084; color:#ba4c32; background-image:url(images/msg-error.gif); }
/*** CSS3 ***/
.box { -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0 0 6px #978f6c; -webkit-box-shadow: 0 0 6px #978f6c;}
.box-head { -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; }
.field, .button { -moz-border-radius:4px; -webkit-border-radius:4px; }
.small-field, .button, .pagging a { -moz-border-radius:3px; -webkit-border-radius:3px; }
.msg p { -moz-border-radius:6px; -webkit-border-radius:6px; }
.button { -moz-box-shadow: 0 0 2px #978f6c; -webkit-box-shadow: 0 0 2px #978f6c;}
.rrshow{
display:none;
}
<!--Print query css-->
#media print
{
.print-hidden {
display: none;
}
a {
display: none;
}
}
Try this to position it at the bottom
position:absolute;
bottom:0;
I am having some trouble with the above and could really use some help!
One of the pages where the menu exists is:
https://googledrive.com/host/0By60ZMFepOvCYWNKSzlxOVJSYTA
and the CSS:
/* Global properties ======================================================== */
html, body {width:100%; padding:0; margin:0;}
sup {
vertical-align: top;
font-size:60%;
}
body {
color:#6D266A;
background-color: #FFF3CC;
font-family: "Futura-Book";
src: url('Futura-Book.eot');
src: url('Futura-Book.eot?#iefix') format('embedded-opentype'),
url('Futura-Book.woff') format('woff'),
url('Futura-Book.ttf') format('truetype'),
url('Futura-Book.svg#futura-bookbook') format('svg');
}
.ic {border:0;float:right;background:#FFF3CC;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.mob {width:100%;}
/***********************************************************************/
a {text-decoration:none; cursor:pointer;text-decoration:none; }
a:hover {text-decoration:none;}
.button {background:url(../images/button.png) 0 0 no-repeat; color:#000; font-size:24px; line-height:30px; display:inline-block; padding: 2px 0 5px 43px;}
.button:hover {color:#579700;}
.link {color:#D2A973; text-decoration:none; }
.link:hover {text-decoration:underline;}
.link-2 {font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#D2A973; font-size:20px; line-height:25px; text-decoration:none; }
.link-2:hover {text-decoration:underline;}
.valentines{font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#D2A973; font-size:20px; line-height:25px; text-decoration:none; }
.clr-1 { color:#D2A973;}
.text-1 {font-weight:normal; color:#000; font-size:60px; line-height:72px;}
.text-1 strong {font-weight:normal; margin-top:-32px; display:block;}
.text-2 {font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#6D266A; font-size:21px; line-height:35px;}
.text-3 {font-weight:normal; color:#6D266A; font-size:50px; line-height:60px;}
.text-3 span {color:#D2A973;}
.text-4 {font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#6D266A; font-size:30px; line-height:36px; letter-spacing:-1px;}
.text-5 {font-weight:normal; color:#D2A973; font-size:50px; line-height:60px;}
.text-5 span {vertical-align: text-top; font-size:50%;}
h2 { font-size:31px; line-height:40px; color:#000; font-weight:normal; }
ul {margin:0; padding:0;list-style-image:none;}
ul.list-1 li {padding:0px 0 0px 25px; line-height:25px; background:url(../images/marker.png) 0 5px no-repeat;}
ul.list-1 li a {color:#6D266A;}
ul.list-1 li a:hover {color:#457c00;}
/******************************************************************/
.clear {clear:both; line-height:0; font-size:0; width:100%;}
.wrapper {width:100%; overflow:hidden; position:relative}
.wrap {overflow:hidden; position:relative}
.extra-wrap {overflow:hidden;}
.fleft {float:left;}
.fright {float:right;}
.img-indent {float:left; margin:4px 18px 0px 0;}
.line-height {line-height:18px;}
.last {margin-right:0px !important; padding-right:0px !important;}
.top {padding-top:37px;}
.top-1 {margin-top:30px;}
.top-2 {margin-top:10px;}
.top-3 {margin-top:12px;}
.top-4 {margin-top:14px;}
.top-5 {margin-top:8px !important;}
.top-6 {margin-top:13px;}
.top-7 {margin-top:34px;}
.left-1 { margin-left:13px;}
.right-1 {margin-right:40px;}
.bot-0 {padding-bottom:0 !important; margin-bottom:0 !important;}
.pad-1 {margin-top:44px; margin-bottom:33px;}
.p1 {padding-bottom:25px;}
.p2 {padding-bottom:13px;}
.p3 {padding-bottom:10px;}
.p4 {padding-bottom:20px;}
.p4 span {font-weight:bold;}
.p5 {padding-bottom:12px;}
/*********************************header*************************************/
header{ width:100%; background:url(../images/header-bg.jpg) 0 0 repeat;}
header>div+div {width:100%; background:url(../images/header-bg-shadow.png) 0 bottom repeat-x; padding-bottom:17px;}
header>div+div>div {width:960px; margin:0 auto; }
h1 {display:inline-block; z-index:1111; margin:16px 0px 0 10px; position:relative; float:left;}
nav {display:inline-block; z-index:1111; position:relative; float:right;}
ul.menu {margin:28px 10px 0px 0px; display:inline-block;}
ul.menu li {float:left; line-height:30px; margin:0px 0px 0px 48px;}
ul.menu li:hover, ul.menu li.current {}
ul.menu li a {font-size:20px; line-height:30px; color:#FFF3CC; display:inline-block; }
ul.menu li a:hover , ul.menu li.current a { color:#D2A973; }
/*********************************content*************************************/
#content {width:100%;padding:0px 0px 48px 0; background:#FFF3CC;}
#mob-content {width:100%;padding:0px 0px 48px 0; background:#FFF3CC;}
.img-border {border:#fff 8px solid; padding-bottom: 10px;}
.box-1 {overflow:hidden; padding:40px 0 34px;}
.box-1 img {float:left; margin-top:-3px;}
.box-1 h2 {margin-bottom:8px;}
.box-2 {background: url(../images/line-1.gif) 0 0 repeat-x #6D266B;}
.box-2>div {background: url(../images/line-1.gif) 0 bottom repeat-x; padding:15px 0 36px 0; text-align:center;}
.box-2>div p.text-4 {margin-top:-7px;}
.box-3 {overflow:hidden; padding:12px 0 0 0;}
.box-3>div { width:180px; float:left; margin-right:25px;}
.box-3>div a.link-2 {display:inline-block; margin:15px 0 6px 0;}
.box-4 {}
.date {overflow:hidden;}
.date strong {display:inline-block; background:url(../images/date.png) 0 0 no-repeat; width:51px; height:53px; float:left; margin-right:5px;font-weight:normal; color:#000; font-size:40px; line-height:48px; text-align:center;}
.date span {font-family: 'Futura-Book', sans-serif; font-weight:300; font-style:italic; color:#000; font-size:20px; line-height:24px; display:inline-block; overflow:hidden; margin-top:21px;}
.box-5 {overflow:hidden; padding-top:8px;}
.box-5 img {margin:4px 10px 0 0;}
.box-6 {overflow:hidden; margin-top:13px;}
.box-6>div { width:290px; float:left; margin-right:35px;}
.box-6 a.link-2 {display:inline-block; margin-bottom:3px;}
.box-7 {overflow:hidden; margin-top:10px;}
.box-7>div { width:290px; float:left; margin-right:35px;}
.box-7 a.link-2 {display:inline-block; margin-bottom:3px;}
/****************************footer************************/
footer {width:950px; overflow:hidden; margin:0 auto; padding:0px 0px 20px 0; }
footer p {float:left; text-align:center; width:580px;}
.soc-icons {overflow:hidden; float:right; margin:8px 73px 0 0;}
.soc-icons span {display:inline-block; float:left; color:#000; font-size:20px; line-height:27px; margin-right:17px;}
.soc-icons a {display:inline-block; float:left; margin-right:19px;}
.soc-icons a:hover img {opacity:0.7;}
/**********************form**********************/
.map {width:550px; height:450px;}
#form { margin: 12px 0 0px 0px; width:300px; }
#form input {border:#fff 1px solid; background:#fff;font: 13px Arial, Helvetica, sans-serif;color:#b6b6b6; font-style:italic; padding:5px 9px 6px 18px;outline: medium none;width: 300px; float:left;}
#form textarea {border:#fff 1px solid; background:#fff;font: 13px Arial, Helvetica, sans-serif;color:#b6b6b6; font-style:italic; height: 268px;outline: medium none;overflow: auto;padding: 6px 0px 0px 18px;width: 281px;resize:none;margin:0px 0 0 0;float:left;}
#form label {position:relative;overflow:hidden;display: block;min-height:35px;}
.btns {text-align:left; padding-top:15px;}
I need to add a drop menu with 3 links under the Treatments link on the main menu and cannot seem to get it to play ball.
Any help would be greatly appreciated!
Sam
if I understand you correctly, the following should work:
HTML:
<body>
<ul>
<li><a>level1</a>
<ul>
<li><a>level2</a></li>
</ul>
</li>
<li><a>level1</a></li>
</ul>
</body>
CSS:
ul {
position:relative;
list-style:none;
}
ul li a {
display:inline-block;
float:left;
width:100px;
height:50px;
background:#eaeaea;
text-align:center;
vertical-align:middle;
line-height:50px;
}
ul ul {
display:none;
position:absolute;
}
ul li:hover > ul {
display:block;
top:50px;
}
ul ul li a {
background:#a7a7a7;
}
Here is working jsfiddle: http://jsfiddle.net/a9NVN/32/
You can format the sub-menus css however you'd like, independently of the parent element.
Hope I've answered your question!
so I've having problems with a 3-layer css dropdown menu. Levels 1 and 2 work just fine, but three is not showing up properly, I would like level three to branch to the right. Level three is the Anti-Matter and Deuterium tabs that should come from the "Fuel" link.
I have a jsfiddle with my problem. For those of you who cannot get it to work my code is below.
http://jsfiddle.net/IanLueninghoener/fD9eF/
Thanks everyone!
Here's my html:
<div id="nav">
<ul>
<li id="firstNavItem"><a href="index.html">Home</li>
<li>Warp
<ul>
<li>How it works</li>
<li>Warp Engine</li>
<li>Warp Factors</li>
<li>Fuel
<ul>
<li>Anti-Matter</li>
<li>Deuterium</li>
</ul>
</li>
</ul>
</li>
<li><a href="Fact-or-Fiction.html">Fact or Fiction</li>
<li>Star Trek
<ul>
<li>Enterprise</li>
<li>Voyager</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
CSS:
/* Reset */
* {
margin:0px;
padding:0px;
}
.clearFix {
clear: both;
}
/* Container */
#container {
width: 960px;
margin: 50px auto;
}
/* Red */
/* Navigation First Level */
#nav{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size:15px;
}
#nav ul{
background:#000000;
height:35px;
list-style:none;
border: 3px solid #000000;
-webkit-border-radius: 6px;
}
#nav li{
float:left;
padding:0px;
}
#nav li a{
background:#000000;
display:block;
text-align:center;
text-decoration:none;
color:#fff;
line-height:35px;
padding:0px 25px;
-webkit-border-radius: 6px;
}
#nav li a:hover{
text-decoration:none;
background: #4873b1;
color:#FFFFFF;
-webkit-border-radius: 3px;
}
/* Navigation Second Level */
#nav li ul{
position:absolute;
background:#000000;
display:none;
height:auto;
width:210px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
margin-left:-3px;
}
#nav li:hover ul{
display:block;
}
#nav li li:hover {
font-weight: 800;
}
#nav li li {
display:block;
float:none;
width:210px;
}
#nav li ul a{
text-align:left;
display:block;
height:35px;
padding:0px 10px 0px 25px;
}
/* Red */
/* Navigation First Level */
#nav_red{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size:15px;
}
#nav_red ul{
background:#cfcfcf;
height:40px;
list-style:none;
}
#nav_red li{
float:left;
padding:0px;
}
#nav_red li a{
background:#cfcfcf;
display:block;
text-align:center;
text-decoration:none;
color:#333;
line-height:40px;
padding:0px 25px;
}
#nav_red li a:hover{
text-decoration:none;
background: #915fa6;
color:#FFFFFF;
}
/* Navigation Second Level */
#nav_red li ul{
position:absolute;
background:#000000;
display:none;
height:auto;
width:210px;
}
#nav_red li:hover ul{
display:block;
}
#nav_red li li:hover {
font-weight: 800;
}
#nav_red li li {
display:block;
float:none;
width:210px;
}
#nav_red li ul a{
text-align:left;
display:block;
height:40px;
padding:0px 10px 0px 25px;
}
/* Slim */
/* Navigation First Level */
#nav_slim{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size:14px;
}
#nav_slim ul{
background:#84b41f;
height:25px;
list-style:none;
border: 3px solid #84b41f;
-webkit-border-radius: 4px;
}
#nav_slim li{
float:left;
padding:0px;
}
#nav_slim li a{
background:#84b41f;
display:block;
text-align:center;
text-decoration:none;
color:#333;
line-height:25px;
padding:0px 25px;
-webkit-border-radius: 4px;
}
#nav_slim li a:hover{
text-decoration:none;
background: #315907;
color:#FFFFFF;
-webkit-border-radius: 2px;
}
/* Navigation Second Level */
#nav_slim li ul{
position:absolute;
background:#84b41f;
display:none;
height:auto;
width:210px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
margin-left:-3px;
}
#nav_slim li:hover ul{
display:block;
}
#nav_slim li li:hover {
font-weight: 800;
}
#nav_slim li li {
display:block;
float:none;
width:210px;
}
#nav_slim li ul a{
text-align:left;
display:block;
height:25px;
padding:0px 10px 0px 25px;
}
Three steps and you have your 3 levels dropdown.
First, when hovering your 1st level, you only want to show the 2nd one. So instead of having #nav li:hover ul, you should have #nav li:hover > ul.
Second, if you want to be able to have your 3rd level at right of its parent, you will need to set its position to relative so add position:relative; in your class #nav li li
Finally, to show you 3rd level at right of its parent, you will have to add a new style:
#nav li li ul{
position:absolute;
top:0;
left:100%;
}
Here is your updated jsfiddle having a good looking 3 levels dropdown.
I am learning to create a website and using a pre-created HTML template so i would like to know how to get the drop down menu with the existing menu style cause the existing menu style the color and everything is very suitable to the whole site but it doesnot really allow me to get any drop down menus
so i am guessing i need to use javascript and some css magic.
So here is the code in the html file until the menu code
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript" src="js/stuHover.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
});
// ]]>
</script>
<style type="text/css">
.gallery { width:890px; height:326px; margin:0 auto; }
#slider { margin:0; padding:0; list-style:none; }
#slider ul,
#slider li { margin:0; padding:0; list-style:none; }
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
#slider li { width:890px; height:326px; overflow:hidden; }
p#controls { margin:0; padding:0; position:relative; } #prevBtn { display:block; margin:0; overflow:hidden; width:32px; height:66px; position:absolute; left:-41px; top:-200px; }
#nextBtn { display:block; margin:0; overflow:hidden; width:32px; height:66px; position:absolute; left: 906px; top:-200px; }
#prevBtn a { display:block; width:32px; height:66px; background:url(images/l_arrow.gif) no-repeat 0 0; }
#nextBtn a { display:block; width:32px; height:66px; background:url(images/r_arrow.gif) no-repeat 0 0; }
</style>
</head>
<body>
<div class="main">
<div class="blok_header">
<div class="header">
<div class="logo"><img src="images/logo.gif" width="309" height="109" border="0" alt="logo" /></div>
<div class="simple_text">Email | Client Login</div>
<div class="search">
<form id="form1" name="form1" method="post" action="">
<label>
<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
<input name="b" type="image" src="images/search.gif" class="button" />
</label>
</form>
</div>
<div class="clr"></div>
<div class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact us</li>
</ul>
</div>
this is the css code
#charset "utf-8";
body { margin:0; padding:0; width:100%; background: #fff;}
html { padding:0; margin:0;}
a { text-decoration:none;}
a:hover { text-decoration:underline;}
/* main */
.main { padding:0; margin:0 auto;}
.main h2 { font: bold 17px Arial, Helvetica, sans-serif; color:#ffffff; margin:5px 0; padding:10px 5px; border-bottom:1px solid #296c78;}
/********** header **********/
.blok_header { margin:0; padding:0; background:url(images/header_bg.gif) top repeat-x;}
.header { width:1000px; margin:0 auto; padding:0;}
.header img.twitter { float:right; margin:2px; padding:0;}
/* logo */
.logo { padding:0; margin:0; width:309px; float:left;}
/* simple_text */
.simple_text { text-align:right; font: normal 14px Arial, Helvetica, sans-serif; color:#737a7f; width:550px; float:right; padding:2px; margin:0;}
.simple_text a { font: normal 11px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none;}
.simple_text a:hover { text-decoration:underline;}
/* search */
.search { padding:10px 0 0 0; margin:5px 0; width:220px; float:right;}
.search span { display:block; float:left;}
.search form { display:block; float:left; padding:5px 0;}
.search form .keywords { float:left; background: url(images/search_bg.gif) left top no-repeat; border:0; height:14px; width:180px; padding:5px 5px; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#a1a1a1;}
.search form .button { float:left; margin:0; padding:0;}
/* menu */
.menu { padding:3px 0 0 0; margin:0; width:450px; float:left; height:65px;}
.menu ul { padding:0; margin:0; list-style:none; float:left; border:0;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu li:hover ul { display: block; position: absolute; }
.menu li:hover li { float: none;font-size: 11px; }
.menu li:hover a { background: #617F8A; }
.menu li:hover li a:hover { background: #95A9B1; }
.menu ul li a { text-transform:uppercase; float:left; margin:0; padding:25px 15px; color:#fff; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background: url(images/hover.gif) repeat-x right;}
.menu ul li a.active {background:url(images/hover.gif) repeat-x right;}
/* sub-menus*/
/*header_text*/
.header_text { height:326px; margin:0; padding:0; background:url(images/slider_bg.gif) top center repeat-x;}
.header_text_resize { width:982px; margin:0 auto; padding:0; }
.header_text .div { float:right; width:890px; padding:10px 0; margin:0;}
.header_text img.screen { float:left; margin:9px 0 0 0;}
.header_text .div .left1 { float:right; width:600px; padding:0; margin:0;}
.header_text .div .left1 img { float:left; padding:0 20px 0 10px; margin:0;}
.header_text .div .left1 h2 { border:0; font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:10px; margin:0; text-transform:uppercase;}
.header_text .div .left1 h2 span {
color:#01355d;
}
.header_text p { font: normal 11px Arial, Helvetica, sans-serif; color:#fff; padding:10px; margin:0;}
.header_text p span { font: bold 18px Arial, Helvetica, sans-serif; color:#fff;}
/* header_text2 */
.header_text2 {height:144px; margin:0; padding:0; background:url(images/slider_bg2.gif) top center repeat-x;}
.header_text_resize2 { width:982px; margin:0 auto; padding:0; }
.header_text2 h2 { width:300px; float:left; font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:50px 0 0 0; margin:0; text-transform:uppercase; border:0;}
.header_text2 p { width:600px; float:left; font: normal 11px Arial, Helvetica, sans-serif; color:#fff; padding:53px 0 0 0; margin:0;}
.header_text2 p span { font: bold 18px Arial, Helvetica, sans-serif; color:#fff;}
/********** body **********/
.body_resize { margin:0; padding:0;}
.body { width:1000px; margin:0 auto; padding:0;}
.body h2 { border:0; font: normal 24px Arial, Helvetica, sans-serif; color:#0b4f7d; margin:0 0 10px 0; padding:15px 5px; border-bottom:1px solid #d3d6d8;}
.body img { float:left; padding:0; margin:10px;}
.body img.floated { float:right; padding:0; margin:10px;}
.body p { font:normal 11px Arial, Helvetica, sans-serif; color:#5d5d5d; line-height:1.8em; padding:5px; margin:0;}
.body p span { font: bold 11px Arial, Helvetica, sans-serif; color:#3f3f3f;}
.body em { font: italic 11px Arial, Helvetica, sans-serif; color:#525252;}
.body a { text-decoration:underline; color:#7daf0e; line-height:1.8em;}
.body_small { width:300px; float:left; margin:0; padding:20px;}
.body_small p.test { height:143px; background:url(images/test.gif) top no-repeat; width:239px; padding:10px 15px; margin:10px 0;}
.body_small p.borded { border:1px solid #c3c7ca;}
.body_big { width:620px; float:left; margin:0; padding:20px;}
/* Navigation */
ul.Navigation { padding:0; margin:0 40px 0 0; list-style:none; border:0;}
ul.Navigation li { margin:0; padding:3px 10px; border:0; line-height:0px;}
ul.Navigation li a { display:block; padding:5px 0 5px 25px; border-bottom:1px dashed #c4c4c4; background:url(images/sub_ul_li.gif) 10px center no-repeat; color:#737373; font:normal 11px Tahoma, Geneva, sans-serif; text-decoration:none; line-height:1.6em;}
ul.Navigation li a:hover { text-decoration:underline;}
ul.Navigation li a.active { text-decoration:underline;}
/*buttonss*/
.buttonss { width:150px; float:right; margin:10px; padding:5px;}
.buttonss a { border:1px solid #d6d6d6; background:#96148f; font: normal 11px Tahoma, Geneva, sans-serif; color:#fff; padding:1px 4px; margin:2px 1px; text-decoration:none;}
.buttonss a:hover {text-decoration:none; color:#fff; background:#5e1496;}
/* END_bloga*/
/* FBG */
.FBG_top {background:#1d2226 url(images/FGB_bg.gif) top repeat-x; margin:0; padding:0;}
.FBG { margin:0 auto; padding:0; width:1000px;}
.FBG_resize { width:290px; float:left; margin:15px 0; padding:20px;}
.FBG_resize2 { border-right:1px dashed #33393e; border-left:1px dashed #33393e; width:290px; float:left; margin:15px 0; padding:20px;}
.FBG h2 { border:0; font: normal 24px Arial, Helvetica, sans-serif; color:#fff; padding:15px 5px; margin:0;}
.FBG p { font: normal 11px Arial, Helvetica, sans-serif; color:#fefdfe; padding:5px; margin:0; line-height:1.8em;}
.FBG img { float:left; margin:0; padding:5px 10px;}
/********** footer **********/
.footer { margin:0; padding:0; height:76px; background:#14181b; border-top:1px solid #2b3136;}
.footer_resize { margin:0 auto; padding:0; width:1000px;}
.footer ul { margin:0; padding:30px 10px 10px 10px; list-style:none; float:left;}
.footer img { display:inline; margin:5px 10px; padding:0;}
.footer ul li { margin:0; padding:0 10px; float:left;}
.footer p { margin:0; padding:30px 20px 10px 20px; float:right; color:#373d42; font:normal 11px Arial, Helvetica, sans-serif; line-height:1.8em;}
.footer a { color:#46820d; font:normal 11px Tahoma, Geneva, sans-serif; text-decoration:none; line-height:1.8em;}
.footer a:hover { text-decoration:underline;}
/********** contact form **********/
.form { float:left; width:560px; margin-top:40px; margin-left:10px;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#F00;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { float:left; margin:0; width:100px; padding:5px 0; font:normal 13px Arial, Helvetica, sans-serif; color:#6e6e6e; text-transform:capitalize;}
#contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:430px; border:1px solid #c5c5c5; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
#contactform textarea { width:430px; border:1px solid #c5c5c5; margin:10px 0; padding:2px; background:#fff; height:250px;}
#contactform li.buttons input { padding:3px 0; margin:0 0 0 100px; border:0; color:#FFF;}
p.response { text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}
p.clr, .clr { clear:both; padding:0; margin:0;}
li.bg, .bg { clear:both; border-bottom:1px dashed #c7c7c7; padding:10px 0 0 0; margin:0 0 10px 0; background:none; list-style:none;}
li.line, .line { border-top:1px solid #c7c7c7; padding:0; margin:20px 0; background:none; list-style:none;}
is there an easy way to get the submenus?
I would using something like SuckerFish: http://www.htmldog.com/articles/suckerfish/dropdowns/
It is probably easier if you put the SuckerFish code on your site, get it working, then adjust accordingly for your template.