|
CSS - Help Making Css Dropdown Work In Ie
Hello,
I put together this CSS drop down menu with some help from internet tutorials. I understand the basic code, but drop downs alway confuse me and never seem to work correctly in various browsers. It works great on Firefox on my mac, but once I get it onto a PC IE it goes all wacky. Any help to fix this would be appreciated. Thanks! here is the code Code: #nav {
display: block;
position: relative;
margin: 0;
width: 750px;
padding: 0;
height: 22px;
background: #000000;
float: left;
}
#nav li ul, #nav li ul {
display: block;
margin: 0;
padding: 0;
float: left;
}
#nav a {
text-decoration: none;
margin:0;
}
#nav li { /*float the main list items*/
margin: 0px;
float: left;
display: block;
border-right: 1px solid #c7dedf;
text-align: center;
background: #000000;
padding: 0;
}
#nav li ul {
display: none;
margin-left:0;
}
#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
left: 0;
height: 20px;
margin-left: 0;
padding: .3em 0em 0 0em;
text-align: center;
width: 100%;
float: left;
}
#nav li.on ul {
}
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background: #808080;
}
#nav li a {
color: #ffffff;
align: center;
font-weight: bold;
font-family: verdana, Arial, san-serif;
font-size: 12px;
display: block;
margin:0;
padding: 4px 8px 3px 8px;
}
#nav li.on a {
color: #ffffff;
}
#nav li.on ul a, #nav li.off ul a {
border: 0;
float: left; /*ie doesn't inherit the float*/
padding: 0;
}
#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
background: #808080;
}
#nav li.on ul {
display: block;
background: #808080;
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
background: #808080;
}
#nav li.off a:hover, #nav li.on a:hover {
color: #000000;
background: #808080;
}
#nav li.off ul a, #nav li.on ul a {
display: block;
background: #808080;
color: #ffffff;
font-family: arial, verdana, sans-serif;
font-size: 12px;
font-weight: normal;
width: 99px;
padding: 0px 8px 3px 8px
}
Similar TutorialsHi guys, I have been following the little tutorial at http://www.phoenity.com/newtedge/horizontal_nav/ It works just fine in Firefox, but not in IE. Do you know what changes would be needed to make it work in IE? I have a test up on my site, which is a copy of the code from Phoenity. I just copied his, but here is what I have: HTML Code: <ul class="nav"> <li><strong>Browsers</strong> <ul> <li><a href="http://mozilla.org/">Mozilla</a></li> <li><a href="http://mozilla.org/products/firefox/">Firefox</a></li> <li>..</li> <li..</li> </ul> CSS Code:
/*Nav bar styles*/
ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. Hey all i want to create a simple horizontal navigation for my page spanning the container div (735px) i want to use a UL and float them to the left: Navigation Code: <div id="container"> <ul> <li>home</li> <li>nav2</li> <li>nav3</li> <li>nav4<li> <li>nav5<li> </ul> </div> CSS Code:
#container{width:735px}
ul {width:100%; height:35px; }
li{width:149px; float:left}
The problem im having / i dont know how to do are the following: 1. Within each li i want to put a link but i want it to be the whole block of 149 x 35 clickable for the link not just the words e.g HOME 2. how do i get the text of the nav to be positioned in the middle vertically. i tried: vertical-align or what ever it was but that didnt waork. For one of my nav items it drops down a line but the others stay at the top. id like them in the middle of the block?? thanks i have this site here and am looking for a solution to my css for resizing the window i need the .swf to appear underneath the main content box. any ideas?! i need to it to behave exactly like the .jpg on this page here anyone!? Hi, I have attached 2 files code. I want the page to look like the second one.with both navigation boxes on the left on top of each other. But the 1st one I am trying to look the same with out putting the <divs> with in a <div> and it does not work, what am i doing technically wrong here? wrong one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:75%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 30px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#nav { width: 30%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 30%; padding: 0px; margin-top: 210px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
Right one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:70%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#exp { width: 35%; padding: 0px; margin-top: 1px; float: left;
}
div#nav { width: 100%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 100%; padding: 0px; margin-top: 5px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62; vertical-align:text-top;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id=exp>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
Sometimes CSS makes me want to tear my hair out. I'm trying to make a custom form input that is a combination of a regular select drop down and a multiple select. I have the javascript all sorted out and my input works like a charm. I can't figure out any way to make it display like a <select> does though. I thought I could simply do this: <ul style="display: inline"> According to w3schools, this will tell the element to display without a line break before or afterward. Much to my despair, it's not that simple. Here's an example: Code: <div> This is some text <select name="test"> <option value="">Click to expand</option> <option value="1">One</option> <option value="2">Two</option> </select> <input type="submit" value="Submit" /> </div> <hr /> <div> This is some text <ul name="test" style="display: inline;"> <li>Click to expand</li> <ul style="display: none;"> <li value="1">One</li> <li value="2">Two</li> </ul> </ul> <input type="submit" value="Submit" /> </div> Notice how the regular old html input sits nicely inline with the text before it and the submit button after it? Notice how the ul doesn't, despite the fact it's set to display inline? Anybody have any suggestions? Ok, firstly, here is the link: www.mstrgaming.com/stars Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it. Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't. I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know . Thanks! Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well How can I make the <th> on the right hand side align everything inside it to the right? I already have a class which applies to all my <th> [html] <thead> <tr> <th scope="col" class="twentyfive">STATUS</th> <th scope="col" class="twentyfive">VIEW</th> <th scope="col" class="twentyfive">DOWNLOAD</th> <th scope="col" class="twentyfive">TOTAL</th> </tr> </thead>[/html] Do I need to add something like this? [css] table.main thead tr th.twentyfive { /*border: 1px solid #fff;*/ width: 25%; } table.main thead tr th.twentyfive.right { /*border: 1px solid #fff;*/ width: 25%; float: right; }[/css] Hi, I am editing a dynamically driven site and I don't have access to edit the HTML code, just the CSS. I have a <div> with content in it within a <td> tag. When the div stretches past the width of the <td> tag it makes the table cell wider. Is there any way in CSS to have it not stretch the width of the cell? The <div> has an id="mylinks" on it, however the <td> or the <table> doesn't have any id or class on them. I'm pully my hair out trying to figure out a fix, any help would be greatly appreciated, Thanks in advance http://m2-klan.com/nuked.html How would I go about making this page all Css/div? My friend has been saying something that I can make that from all Css with less graphics, how would I go about doing that? I am a newbie at Css and I would like to know how to do that, instead of tables. Can someone point me to a tutorial that shows how you can use css borders, shadows, or whatever to make div's look 3D, or sunken in or something. Basically I want this div to look like a button, but only when the mouse is over it, and when it's depressed I want it to look like its sunken in. I know how to do all of this except the lighting and stuff, it looks kinda funny. So is there a tutorial that shows you the best way to make stuff look 3D? Thanks Hi, How common it is these days to make a web pages using only css and not using tables? And what are the pros and cons of that? Thanks i thought i had finally gotten my design to where i wanted it, but then i tried it in internet explorer. he http://beta.bikerevolution.org/xindex.php any ideas on how to fix this would be great. I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: http://i78. photobucket.com/albums/j108/l8org8or/HELP.jpg (take out the spaces before "photobucket") I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. I was just wondering if there was a standard that most people use. Or do you just use each as the circumstances require? I was wondering if there was anyway to make a div appear at the bottom of the monitor. In other words, on my laptop, I have a site that I need to scroll down for. It goes as far down as a copyright notice. The copyright notice has a black border on top, right, and left, but not the bottom. That's fine because when it gets to that item, it stops scrolling and lines up with the bottom of the monitor. However, at home, I have a 21" monitor, and the bottom element is just floating there because everything easily fits within the screen. I wanted to see if I could get that bottom element to line up at the bottom of the viewable area somehow. Is this possible? Thanks. Hi ya My goal is to get this page: portfolio.modernmusicians.com/portfolio.html to have the layout like this: portfolio.modernmusicians.com/port_goal.gif Notice how "description" is squared up in the image. I'm not sure if I should make nested div's or use margins or padding or what. Any guidance would be greatly appreciated. Thanks. I have a major problem with my site rendering in FF, there is a space between the header and nav bar that I don't see in IE and can't find a fix!! I have gone over and over the CSS and XHTML and just can't see what would be doing this. Anyone know how to fix it?? Click Here for My Website CSS code - Code: body {
background-color:#0071E1;
background-image: url(images/head.png);
background-repeat: repeat;
margin-top: 25;
margin-bottom: 25;
margin-right: 0px;
margin-left: 0px;
}
/* LAYOUT */
#catbg {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg1 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 20px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
width: 98%;
}
#catbg2 {
color: #009900;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg3 {
color: #990000;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg4 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
/* Surrounding div */
#wrap {
width: 961px;
margin: 0 auto;
padding: 0;
top: auto;
}
/* Surrounding the nav and main content */
#wrapper {
width:925px;
align:center;
background-color:#FFFFFF;
background-image: url(images/newbkZ2.png);
background-repeat: repeat;
vertical-align: top;
border-top: #005FAC;
border-right: thin inset #005FAC;
border-bottom: #005FAC;
border-left: thin outset #005FAC;
height: auto;
padding: 0px;
margin: 0 auto;
}
/* Header surround */
#shad-l {
padding-left: 18px;
background: url(images/shadow-l.png) 0 0 no-repeat;
}
#shad-r {
padding-right: 18px;
background: url(images/shadow-r.png) 100% 0 no-repeat;
}
#header{
position:relative;
height:215px;
overflow:hidden;
background: #FFFFFF url(images/newbkZ2.png) repeat;
top: auto;
width: 925px;
margin: 0 auto;
}
#head-r{height:215px; background:url(./images/head-l.png) 0 0 no-repeat; position:relative}
#head-l{height:215px; background:url(./images/head-r.png) 100% 0 no-repeat; position:relative}
#logo {
display: block;
width: 900px;
height: 215px;
cursor: pointer;
padding-left: 30px;
padding-top: 10px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
position: relative;
background-position: center;
top: auto;
padding-right: 0px;
padding-bottom: 0px;
}
/* Navbar */
#nav {
margin: 0 auto;
width:925px;
height:38px;
font-family:Arial;
font-size:14px;
color:#ffffff;
background-image: url(images/navbg3.jpg);
background-repeat: repeat;
border-right-width: thin;
border-left-width: thin;
border-right-style: inset;
border-left-style: outset;
border-right-color: #005FAC;
border-left-color: #005FAC;
line-height: 1.8em;
font-weight: bold;
}
#navlist li
{
display: inline;
background-repeat: no-repeat;
padding-left: 10px;
}
#navlist a
{
font-weight: bold;
text-transform: none;
text-decoration: none;
font-size: 16px;
line-height:38px;
}
#navlist a:link, #navlist a:visited
{
padding-left: 25px;
color: #FFFFFF;
background: url(images/blue.png) no-repeat 0;}
#navlist a:hover
{
color: #FFFF00;
background-repeat: no-repeat;
background-position: 0;
background-image: url(images/green.png);
padding-left: 25px;
}
/* Main content Area */
#box1 {
margin:10px;
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px;
font-weight: bold;
float: left;
clear: left;
}
#box2 {
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
#box3 {
text-align:center;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
/* Height Gap */
.hg {
margin:0 auto;
height:5px;
}
#footer{
background: url(images/footer-bg.png) repeat-x 100%;
text-align:center;
margin: 0 auto;
font-size:12px;
font-family:Tahoma;
color:#FFFFFF;
position: relative;
height: 130px;
width: 925px;
font-weight: bold;
line-height: 1.2em;
}
/* LINK STYLES */
/* Linkpage links */
a.weblink {
font-family:Arial;
font-size:16px;
text-decoration:none;
color:#0066CC;
font-weight: bold;
}
a.weblink:hover {
font-family:Arial;
font-size:16px;
text-decoration:underline overline;
color:#990000;
font-weight: bold;
}
/* Footer links */
a.footerlink {
font-family:Tahoma;
font-size:11px;
color:#FFFFFF;
text-decoration:none;
}
a.footerlink:hover {
font-family:Tahoma;
font-size:11px;
color:#FFFF00;
text-decoration:none;
}
/* All other links */
a {
font-family:Tahoma;
font-size:11px;
color:#0066CC;
text-decoration:none;
}
a:hover {
text-decoration:overline;
color: #990000;
}
#left {
float: left;
margin: 0;
padding: 20px 20px 0 30px;
width: 300px;
}
#right {
float: right;
margin: 0;
padding: 20px 30px 20px 20px;
width: 400px;
}
/* No image should have a border when linked */
.a img {
border: 0;
}
#bodyarea {
padding: 10px;
margin: 0;
background: #FFFFFF url(images/bodyarea-bg.gif) repeat-x;
font-family: Tahoma;
font-size: 9px;
color: #0066CC;
font-weight: bold;
text-align: right;
}
/* text classes */
.smalltext {
font-size: 10px;
font-family: verdana, sans-serif;
}
.middletext {
line-height: 14px;
}
.normaltext {
font-size: 12px;
}
.largetext {
font-size: 16px;
}
/* lightbox */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images2/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images2/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #0066CC;
background-image: url(images/head.png);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}
Hi everyone. I have a div with text and directly after that I have an image. Since a DIV is a block level element, it causes the image to wrap to the next line. Is there some way I can prevent it from doing so? Thanks for any help or suggestions. |
|||||||