|
CSS - Nested Accordion Problems In Ie
Hello, I have three accordions based on Accordion2 by stickmanlabs on my site. Each of the three accordions (web, motion & print) have nested accordions within that open when clicked to reveal different projects I have done. This works great in Firefox and Safari. In IE the first accordion (web) works properly, opening up to reveal the nested accordions closed up and waiting to be clicked on. However, when I click on either of the following accordions in IE, it opens to reveal that all of the nested accordions are already open at the same time. The nested accordions are open, but also inactive, I can't even click to close them up. I have played with this to no avail, and can't figure it out. I would really appreciate it if someone could tell me how I can get this working properly on IE, or why this might be happening?
Here is essentially what the code looks like for the three nested accordions: Code: <div id="vertical_container" >
<h1 class="accordion_toggle">Web</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">Motion</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">Print</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
<h3 class="vertical_accordion_toggle">Company A</h3>
<div class="vertical_accordion_content">
<p class="jobinfo"> Art Direction and Design</p>
</div>
</div>
</div>
</div>
I realize this might not be enough info, and I am happy to provide any additional CSS or javascript info. I guess I am hoping someone out there might be familiar with Accordion2. Another strange thing is that I have noticed is that none of the accordions work unless I leave a blank <div id="horizontal_container"></div> in there. Thanks in advance! Similar TutorialsOK i have a nested list: PHP Code: <div id="sideMenu"> <ul> <li><a href="">Menswear</a> <ul> <li><a href="">Shalwar</a></li> <li><a href="">Shalwar2</a></li> </ul> </li> <li><a href="">Womenswear</a></li> <li><a href="">Jewelry</a></li> </ul> </div> i am applying css to it! i want to set the background of the LI to be one colour but i want the background of the nested lists to be another. but what is happening (and its not really a bug) is that whne i apply the background colour to LI this colour also goes behind the nested lis? http://www.zahra-zahra.com/fullpage.html i am talking about the side menu (purple and light purple) is there a "fix"? Hi, I have used bottom-border: 1 on my links and the problem I am having is making sure that these borders are not displayed on images which have <a "somelink"> </a> wrapped around them. I have used #content a > img { border: 0; } and this seems to have solved the problem however when I have an image link nested into a table the border reappears and I have tried everything to get it to remove it. If anyone else knows why it reappears when nested in tables please let me know how I can fix it. Regards, Graham I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!! PHP Code: <style type="text/css"> /********** layout of the page ***********/ #top { background-color:yellow; clear:both; } /***************** Formatting top part of the page **************/ #tag { float:left; margin-left:8em; } #login { float:right; } #logo { margin-left:2em; float:left; clear:left; } #searchBox { float:right; clear:right; } #links2 { clear:right; background-color:yellow; } #links2 li{ font-size:0.8em; display:inline; float:right; text-decoration:none; list-style:none; padding:1em; } </style> </head> <body> <div id="top"> <div id="tag"> <p id="">Zahra Zahra Ltd</p> </div> <div id="login"> <p>Login/Register</p> </div> <div id="logo"> <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a> </div> <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <label>What are you shopping for?</label> <input type="text" name="search" value="search" size="14"/> <input type="submit" name="submit" value="Go" /> </form> </div> <div id="links2"> <ul> <li>Contact Us</li> <li>Testimonial</li> <li>Return Policy</li> <li>News</li> <li>FAQ</li> <li>about us</li> <li>Home</li> </ul> </div> </div> hey, have a look here. In IE6 the page extends waaaaaaay down underneath the content with a blank box 'til the footer. I'm just not really sure what i need to adjust height-wise to get rid of it. Here's what i'm using for the styles: Code:
/* ACCORDION STYLING */
#basic-accordian{
border:1px solid #EEE;
padding:5px;
width:450px;
margin-right:30px;
z-index:2;
float:right;
}
* html #basic-accordian {
margin-right:15px;
}
.accordion_headings{
padding:5px;
background:#002952;
color:#FFFFFF;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}
.accordion_headings:hover{
background:#C69A2C;
}
.accordion_child{
padding:15px;
background:#f5f5f5;
}
.header_highlight{
background:#C69A2C;
}
Thanks! I 'think' style sheets are the answer to my problem. Now I cannot webdesign and so everything is a mishmash but I saw this accordion image viewer made in AJAX for free and wanted to put it on my site, but I need to position it in an exact position on my webpage. How do I do this please? Accordion: http://www [dot] ajaxcrawler [dot] com/2008/01/image-menu-using-moo-tools [dot] html My webpage: http [colon] // lovelago.googlepages [dot] com/test7a.html CSS: http [colon] // lovelago.googlepages [dot] com/main.css Also, I only need a really trim version of this CSS, as it came with the webpage that had the accordion and has all of its 'own style' that I do not need. Thanks to anybody! note to admin: I'm not a spammer, thanks. I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Thanks for taking the time to read my question If I have <div class="main"> something here <div class="sub1"> something here that has more height than the above div</div> </div> Shouldn't the height of main be stretched to fit the height of sub1 where sub1 has a greater height than main. Does it have to be display: block; or float: left; ? Brad Hi everyone. I've come pretty close to solving this problem but certain problems keep showing themselves. Here's the mockup menu I'm trying to recreate. Current CSS: Code:
.interior #sidebar ul{
padding:20px 0 5px 0px;
list-style:none;
}
.interior #sidebar ul.outerUL {border-bottom:1px solid white;}
.interior #sidebar ul.middleUL{border-top:1px solid white; margin:0; padding:5px 0 0 0;}
.interior #sidebar ul.innerUL{padding:5px 0;}
.interior #sidebar ul li a {padding:5px 0 5px 0; margin:0;}
.interior #sidebar ul li.outerLI a{
border-top:1px solid white;
padding:0 0 0 20px;
color:#003371;
width:100%;
}
.interior #sidebar ul li.middleLI a{
padding-left:25px;
color:#3f699d;
}
.interior #sidebar ul li.innerLI a{
padding:2px 0 2px 30px;
color:#0f8b53;
}
.interior #sidebar a {text-decoration:none;}
Current HTML: Code:
<div id="sidebar">
<ul class="outerUL">
<li class="outerLI"><a href="#">Our Misssion</a></li>
<ul class="middleUL">
<li class="middleLI"><a href="#">Quality</a></li>
<ul class="innerUL">
<li class="innerLI"><a href="#">Dedication</a></li>
<li class="innerLI"><a href="#">Perseverance</a></li>
</ul>
<li class="middleLI"><a href="#">Choice</a></li>
<li class="middleLI"><a href="#">Value</a></li>
</ul>
<li class="outerLI"><a href="#">Parkland Timeline</a></li>
<li class="outerLI"><a href="#">Management Bios</a></li>
</ul>
</div>
I've tried multiple different ways of acheiving the desired look, but each one has a certain problem with it. This is the best I can get while still keeping each link the correct color and font size. I'd be all set (I can deal with the padding later) if I could get the white bar above each of the top-level links to extend across the whole sidebar div. well if i dont put any css firefox does this with nested link: Code:
link1
link2
sublink1
IE doesnt indent the sublink. so is there any hack available? PS>i tried using margin-left but by doing that firefox indents it even further so it looks bad? cheers I'm having some cross browser CSS issues (what a surprise.. ). Things render fine in IE7, but in FF (2.0.x) it seems that the style for <div id="shell"> just seems to stop. It looks <div class="content_shell"> is overflowing outside of its parent, but after using the 'Outline current element' tool in the web developer tool bar (very cool feature!) it looks like the parent div is being expanded but it's style is not. Basicly the white background and borders of "shell" don't continue and the content from "content_shell" just looks overflowed onto the page background. Very strange and again it's FF only. Here is the basic setup... html4strict Code: Original - html4strict Code <div id="shell"> <!-- a bunch of other content --> <div id="page_contents"> <div class="content_shell"> <div id="main_content" class="content_box"> Sample main content. </div> <div id="secondary_content" class="content_box"> Sample secondary content. </div> </div> </div> </div>
and here's the related css css Code: Original - css Code #shell { background-position: right top; background-color: #FFFFFF; border-right-style: solid; border-left-style: solid; border-right-width: 2px; border-left-width: 2px; border-right-color: #000000; border-left-color: #000000; width: 700px; height: auto; text-align: left; background-image: none; background-repeat: no-repeat; } #page_contents { width: 100%; height: auto; } .content_shell { width: 680px; height: auto; padding: 10px; font-size: 14px; } #main_content { width: 400px; height: auto; clear: right; float: left; } #secondary_content { width: 250px; height: auto; clear: right; float: left; margin-left: 10px; }
I'm sorry I can't post a link to the page, but it is still only on our intranet and deployed through SharePoint so it cannot be easily replicated on my own server. I am trying to figure out how to use the clear functionality nested within divs. I am already using floats to position 3 columns for the layout, but would like to use the clear functionality to help with form placement in the second column. The problem is, even though it is nested with a div dedicated to the center column, it still uses the right and left column to judge clears...thus its all pushed below the right and left column. Any ideas? I would be very grateful for any help offered. The following html and css are displaying very differently between IE7 and Firefox 2. The HTML is Strict verified and the CSS has also been verified. Please help me! I don't mind you telling me an idiot. Just please constructively explain how I'm an idiot and how I can stop being an idiot. Thanks. HTML Document Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head><title>
Kaua'i Historical Society Membership Maintenance
</title><link type="text/css" rel="stylesheet" href="Kauai.css" /></head>
<body>
<form method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzMjAyNDM1NzdkGAEFEGN0bDAwJExvZ2luVmlldzEPD2QCAmT6FXaep7s2kkgUAi6bmGTUd7hIOw==" />
</div>
<div id="Header">
<a href="(URL address blocked: See forum rules)" title="Kaua'i Historical Society">
<img src="images/mastheadBar.gif" style=" border-style:none;" alt="Kaua'i Historical Society" /></a></div>
<div id="Content">
<div class="containerparent">
Manage members
<div id="membercontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlCreateMember" title="Create Member Record" href="CreateMember.aspx"><img title="Create Member Record" src="images/businessman_add.png" alt="Create Member Record" style="border-width:0px;" /></a><br />
Create member</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlFindMember" title="Find Member Record" href="FindMember.aspx"><img title="Find Member Record" src="images/businessman_find.png" alt="Find Member Record" style="border-width:0px;" /></a><br />
Find member</div>
</div>
</div>
<p>
</p>
<div class="containerparent">
Manage pledge drives
<div id="pledgedrivecontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlCreateDrive" title="Create Pledge Drive" href="CreateDrive.aspx"><img title="Create Pledge Drive" src="images/businessman_add.png" alt="Create Pledge Drive" style="border-width:0px;" /></a><br />
Create pledge drive</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlFindDrive" title="Find Pledge Record" href="FindDrive.aspx"><img title="Find Pledge Record" src="images/businessman_find.png" alt="Find Pledge Record" style="border-width:0px;" /></a><br />
Find pledge record</div>
</div>
</div>
<p>
</p>
<div class="containerparent">
Manage pledge levels
<div id="pledgelevelcontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlCreateLevel" title="Create Pledge Level" href="CreateLevel.aspx"><img title="Create Pledge Level" src="images/businessman_add.png" alt="Create Pledge Level" style="border-width:0px;" /></a><br />
Create pledge level</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlFindLevel" title="Find Pledge Level" href="FindLevel.aspx"><img title="Find Pledge Level" src="images/businessman_find.png" alt="Find Pledge Level" style="border-width:0px;" /></a><br />
Find pledge level</div>
</div>
</div>
<p>
</p>
<div class="containerparent">
Manage letters
<div id="lettercontainer">
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlGenerateThankYou" title="Generate Thank You Letters" href="GenerateThankYou.aspx"><img title="Generate Thank You Letters" src="images/businessman_add.png" alt="Generate Thank You Letters" style="border-width:0px;" /></a><br />
Generate thank you letters</div>
<div class="box">
<a id="ctl00_ContentPlaceHolder1_hlGenerateReminder" title="Generate Reminder Letters" href="GenerateReminder.aspx"><img title="Generate Reminder Letters" src="images/businessman_find.png" alt="Generate Reminder Letters" style="border-width:0px;" /></a><br />
Generate reminder letters</div>
</div>
</div>
</div>
<div id="Menu">
Welcome
<span id="ctl00_LoginView1_lnUser">fred</span>.<br /><br /><span style="font-size:xx-small;">Admin enabled</span>
</div>
<div id="Search">
Search here</div>
</form>
</body>
</html>
CSS File Code: body
{
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #333333;
background-color: white;
}
h1
{
margin: 0px 0px 15px 0px;
padding: 0px;
font-size: 28px;
line-height: 28px;
font-weight: 900;
color: #cccccc;
}
p
{
font: 11px/20px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 16px 0px;
padding: 0px;
}
#Content > p
{
margin: 0px;
}
#Content > p + p
{
text-indent: 30px;
}
a
{
color: #09c;
font-size: 11px;
text-decoration: none;
font-weight: 600;
font-family: verdana, arial, helvetica, sans-serif;
}
a:link
{
color: #09c;
}
a:visited
{
color: #07a;
}
a:hover
{
background-color: #eeeeee;
}
#Header
{
margin: 50px 0px 10px 0px;
padding: 17px 0px 0px 20px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height: 73px; /* 14px + 17px + 2px = 33px */
border-style: solid;
border-color: black;
border-width: 1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height: 11px;
background-color: #eeeeee; /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. The incorrect IE5/Win value is above, while the correct value is below. See (URL address blocked: See forum rules)/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family: inherit;
height: 14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body > #Header
{
height: 14px;
}
#Content
{
position: absolute;
top: 100px;
left: 150px;
padding: 0px;
}
#Menu
{
position: absolute;
top: 100px;
left: 20px;
width: 100px;
padding: 10px;
background-color: #eeeeee;
border: 1px solid #000000;
line-height: 17px; /* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family: inherit;
font-size: medium;
}
#Search
{
position: absolute;
margin-left:8px;
top: 100px;
left: 500px;
width: 225px;
padding: 10px;
background-color: #eeeeee;
border: 1px solid #000000;
line-height: 17px; /* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family: inherit;
font-size: medium;
}
/* Again, "be nice to Opera 5". */
body > #Menu
{
width: 100px;
}
/* Again, "be nice to Opera 5". */
body > #Search
{
width: 100px;
}
#membercontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
}
#pledgedrivecontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
}
#pledgelevelcontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
}
#lettercontainer
{
margin-left: 15px;
margin-right: auto;
width: 18.75em;
text-align:center
}
#membercontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
#pledgedrivecontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
#pledgelevelcontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
#lettercontainer .box
{
/*border: 1px solid black;*/
background-color: #ffffff;
color: navy;
float: left;
line-height: 1.5;
margin: 0.5em;
text-align: center;
font-size: xx-small; /*height: 1.5em; width: 1.5em;*/
}
/*#membercontainer, #pledgedrivecontainer, #pledgelevelcontainer .box.selected {
background-color: orange;
}*/
.containerparent
{
font-size: medium;
font-weight: bold;
color: navy;
padding: 5px;
border-style: solid;
border-color: navy;
border-width: 1px;
width: 18.75em;
}
I am at my wits end! Some of my nested divs cause FF throw up scroll bars...and not all the time. If I hit refresh, they disappear. Everything validates: Both my css and xhtml. I have tried every allowed value for overflow to no avail. There are no floated images either to vlear; just text. Give it a look in FF and see: My Site My css I am trying to create a layout that uses Nested DIVs, and I may be trying to force it to do something it does not like. I will post the code below, but here is an image that displays the layout. Note that Div3 and Div1 are fine, and Div 2 is fine, and the top DIV that is inside of that, #4, is where it needs to be, but the rest of the items just fall in below it. I would really not wish to use tables, but I am trying to do something that can only be done with tables? Page Code: Code: <div id="content">
<div id="usercp">
<?php include("scripts/yourmother.php"); ?>
</div>
<br />
<div id="NewsOuter"><div id="NewsTitle"><a href="viewArticle.php?id=1">ArticleTitle</a></div>
<div id="NewsInner"><div id="NewsImage"><img src="http://tweedledee.dyc.edu/~tpx/test/tpx7c/images/site/notavail100.jpg"></div>
<div id="NewsShortDesc">ArticleShort</div></div>
<div id="NewsBottom"><div id="NewsIndexDate">ArticleDate</div>
<div id="NewsIndexUser">ArticleUser</div></div>
<div style="clear:both;"></div>
</div>
</div>
And here is the relevant CSS (not counting the Content (div 1) or UserCP (div 3) Code: #Content #NewsOuter {
display: block;
float: left;
height: 162px;
width: 602px;
}
#NewsTitle {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
#NewsTitle a {
display: block;
border:1px solid;
background: #FFFFFF;
color: #000000;
height:20px;
font-weight: bold;
text-align:left;
text-decoration: none;
padding: 1px 10px;
}
#NewsTitle a:hover {
color: #999999;
text-decoration: none;
}
#Content #NewsOuter #NewsInner {
width: 602px;
height: 100px;
}
#Content #NewsOuter #NewsInner #NewsImageIndex {
display: block;
float: left;
width: 100px;
height: 100px;
border: 1px solid black;
}
#Content #NewsOuter #NewsInner #NewsShortDesc {
width: 500px;
height: 100px;
font-family: Arial;
font-size: 10px;
font-style: none;
}
#Content #NewsOuter #NewsBottom {
width: 602px;
height: 20px;
}
#Content #NewsOuter #NewsBottom #NewsIndexDate {
display: block;
float: left;
width: 100px;
border: 1px solid;
border-color: #666666;
font-weight: bold;
font-family: Arial;
}
#Content #NewsOuter #NewsBottom #NewsIndexUser {
display: block;
float: right;
width: 500px;
border: 1px solid;
border-color: #000000;
Font-Family: Arial;
Font-Style: Italic;
Font-Size: 9px;
}
Also to note, the 3 items that appear below the image are not getting their formatting. Should I just use tables instead? I am Having a problem with IE6 and DIV's which use blocks to highlight links. The problem is I want to have different colour links. It seems to work OK in FF but not IE 6. Code:
.mainmenu a:link { color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #a62a2a; background-position: 180px 0; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:visited { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:active { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; background-color: #f7d4d4; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; display: block; }
.submenu a:link { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-color: #a62a2a; border-bottom-width: 1px;x; }
.submenu a:visted { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom: 1px solid #e8aaaa; }
.submenu a:active { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-width: 1px; border-bottom-color: #a62a2a; }
.submenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #f7d4d4; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; }
.menutop { color: white; font-size: 12px; font-weight: 600; text-decoration: none; background-color: #cc5252; text-align: left; text-indent: 3px; display: block; width: 180px; height: 24px; vertical-align: middle; }
Code:
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" bgcolor="#f7d4d4">
<div id="mainmenu" class="mainmenu">
<div id="menutop" class="menutop">Menu</div> <a href="#">Products</a>
<a href="support.html">Support</a>
<div id="submenu" class="submenu"><a href="#">Customer Login</a></div>
<div id="submenu" class="submenu"><a href="#">Phi Login</a></div>
<a href="#">Services</a>
<a href="#">Shop</a>
<a href="#">Contact Us</a>
<a href="#">Call Comparison</a>
</div>
</td>
</tr>
</table>
Hi All, I'm fairly new to CSS and have what is probably a basic question. I'm trying to format a class and having issue. Please look at my html and the css code below: Code: div class="node"> <div class="taxonomy"></div> <div class="content"> <p>Photo Gallery Body Here</p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <a href="/sites/default/files/imagecache/Full/IMG_0275_0.JPG" rel="lightbox[field_image][Pic 1<br /><br /><a href="/node/48" id="node_link_text" class="active">View Image Details</a> - <a href="/sites/default/files/IMG_0275_0.JPG" target="_blank" id="download_link_text">Download Original</a>]"><img src="/sites/default/files/imagecache/Thumbnail/IMG_0275_0.JPG" alt="Pic 1" title="Pic 1" width="125" height="125" /></a> </div> </div> </div> </div> </div> </div> </div> Code: .node .field .field-type-filefield .field-field-image .field-items .field-item .odd
{
border: 1px solid #fff;
width: 125px;
height: 125px;
margin-top: 35px;
margin-right: 28px;
float: left;
}
The only way I can format the "field-item odd" class but naming the css class .odd. However, this effects other parts of the site. How do I target this specific class properly? Thanks! So... I have two versions of this page, one that validates, and another that doesn't. Problem is that the invalid one looks correct! This is because I got the css working before i discovered the invalid code... The offending code involves a nested ul in my nav. The invalid, looking good version looks like this: Code: <ul> li / li / <ul> li / li / </ul> li / </ul> To make it valid, I have to wrap li tags around the nested ul. I've spent gobs of time trying to figure out how to get my styles to work with this new code, but I must be missing something very simple. Here are the urls: invalid & valid Here's the css: Code:
#nav {
width:180px;
background-image:url(/images/moraga_logo.png);
background-repeat:no-repeat;
float:left
}
#nav ul.l1 {
width:179px;
position:relative;
top:100px;
margin:0;
padding:0;
}
#nav ul.l2 {
width:179px;
margin:0;
padding:0;
}
#nav ul.l1 li {
list-style:none;
border-top:1px solid #FFFFFF;
height:21px;
font-family:geometric, lucida, verdana, sans-serif;
font-size:.8125em;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.125em;
text-align:right
}
#nav ul.l2 li {
text-transform:lowercase;
border:none;
font-size:.6875em;
}
#nav li.active a {
color:#A22B38;
text-decoration:none
}
#nav li.active a:hover {
color:#FFFFFF;
text-decoration:none
}
#nav a:link {
color:#000000;
text-decoration:none
}
#nav a:visited {
color:#000000;
text-decoration:none
}
#nav a:hover {
color:#FFFFFF
}
#nav a:active {
color:#000000;
text-decoration:none
}
Thank, in advance, for your generous help! -BBD hmmmm i want a nested list for a navigation menu, vertical on the left side all buttons aligned with 1px margin in between ok it almost works but i cant get rid of the extra list item that contains the nested list how does it not show itself I am not getting the right behaviour from my css in a nested list i made for a menu. here is the css for the menu Code:
#main_menu{
position: absolute; top: 252px; left:30px;
margin:0;
padding:0;
}
#menu_item_1{
list-style-type: none;
}
#menu_item_1 a{
color:#11352B;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
#menu_item_1 a:hover{
color:#007888;
text-decoration:underline;
font-weight:300;
vertical-align:text-top;
}
#menu_item_2{
list-style-type: none;
}
#menu_item_2 a{
color:#007888;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
and here is the xhtml section showing the menu Code: <ul id='main_menu'> <li id='menu_item_1'><a href='index.php'>Home</a></li> <li id='menu_item_1'><a href='about_us.php'>About Us</a></li> <li id='menu_item_1'><a href='customers.php'>Customers</a></li> <li id='menu_item_2'><a href='products.php'>Products</a></li> <ul> <li id='menu_item_1'><a href='atlas2000.php'>Atlas 2000</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Web Request</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Atlas Mailer</a></li> </ul> <li id='menu_item_1'><a href='service.php'>Service</a></li> <li id='menu_item_1'><a href='download.php'>Download</a></li> <li id='menu_item_1'><a href='support.php'>Support</a></li> <li id='menu_item_1'><a href='contact_us.php'>Contact Us</a></li> </ul> the main list works great but the sublist the color is wrong, it should behave like the main one does....I think I have not structured my css correctly, but can not figure it out. |
|||||||