|
CSS - Css Menu Displayed Improperly
This problem is only partial to IE and not any other browser (eg. Firefox).
What happens is when you click on a menu button to access the submenu, it will not display the submenu directly under the menu button pressed. Also, some submenus have submenus of their own. I have a little triangle that indicates this. The triangles are seen properly in IE, but are seen as question marks (?) in Firefox. I am not sure why though. If anyone could help me figure these problems out I would greatly appreciate it. Thanks. Here is the link: http://www.fired-up.ca Thanks once again. Similar TutorialsHello, I have what I hope is an easy question. I am trying to make a horizontal navigation menu based on code I have found on the net. I got 99% of it working EXCEPT: When sub menu text is displayed it "pushes" the main menu text to the right. my example is located he www(dot)katieandconrad(dot)com I have validated both my HTML and CSS, the errors that are displayed have nothing to do with this issue. However, I will be fixing the HTML error tonight. There's nothing I can do with the CSS errors. Thank you very much for your help. Regards, CB I'm a CSS newbie, so forgive me if I'm going about this the wrong way entirely. I'm trying to build a website with a menu that changes the source of an iFrame. So I have: Code: <html> <body> <div>**MENU**</div> <div><iframe id="contentFrame" src="home.htm"></iframe></div> </body> </html> Clicking a menu item, say "Contact Us", changes the src of the iFrame using: Code: <a href="javascript:document.getElementById('contentFrame').src='ContactUs.htm'">Contact Us</a>
The menu is pure CSS, with each item underlining as it's rolled over, and some submenus that show up when hovering. What I'm looking to do is have the selected menu item have a different text color. So when you click "Contact Us", that item will change color and stay that other color while navigating the ContactUs.htm page in the iFrame. Is that even remotely do-able? I saw some examples where you use body classes and id's to match the id of the menu item to the body class of the related page. However, I think that would require loading completely separate pages (with the same menu, header, and footer code). I want to avoid the entire page flickering when changing content. I don't seem to be able to access the body class value of the page being loaded in the iFrame. Is that possible to do? Thanks for any guidance you all could offer. As usual, my designs work best in Firefox, but this time it's to an annoying degree, because the menu on this page shows on the left underneath the shrimp logo, but in both IE 6 and IE 7 it's between the two header divs. Oh, and in IE 6 the header background colour doesn't show up. I know the PNG doesn't work, too, but I can fix that with Javascript later on, it's not too crucial. Would anyone please help me with this? Here's the code: style.css Code: body {
background-image: url('images/background.png');
background-color: #FFFFFF;
font-family: Gill Sans MT, sans-serif;
font-size: 16px;
}
h1 {
font-size: 110%;
}
h3 {
font-size: 105%;
margin-left: 4px;
margin-top: -1px;
margin-bottom: -8px;
}
#container {
padding: 5px;
background-color: #CAD1F4;
background-position: top left;
background-repeat: no-repeat;
background-attachment: scroll;
margin: auto auto auto auto;
max-width: 1024px;
min-width: 800px;
border: 1px dashed #000000;
}
#header_left {
background-image: url('images/header_bg.png');
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: #B5BFF2;
float: left;
width: 630px;
height: 180px;
clear: right;
}
#header_right {
float: right;
padding-top: 20px;
padding-bottom: 20px;
width: 160px;
height: 140px;
}
#navigation {
float: left;
clear: left;
width: 130px;
border: 4px double #000000;
margin-top: 3px;
}
#li_home {
list-style-image: url('images/home_icon.gif');
}
#li_about {
list-style-image: url('images/about_icon.gif');
}
#li_cast {
list-style-image: url('images/cast_icon.gif');
}
#li_blog {
list-style-image: url('images/blog_icon.gif');
}
#li_gigs {
list-style-image: url('images/gigs_icon.gif');
}
#li_photo {
list-style-image: url('images/photo_icon.gif');
}
#li_contact {
list-style-image: url('images/contact_icon.gif');
}
#li_feedback {
list-style-image: url('images/feedback_icon.gif');
}
#main {
float: right;
width: 83.75%;
}
#footer {
padding: 20px;
clear: both;
}
#footer p {
text-align: center;
font-size: 70%;
}
#footer a:link, a:visited, a:active {
color: #000000;
text-decoration: underline;
}
.noborderimg {
border: 0px;
}
index.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>SHRIMPS - Sheffield University Improv Society</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="http://www.makepovertyhistory.org/whiteband_small_right.js"> </script>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header_left"><img src="images/logo_color.png" class="noborderimg" alt="Shrimpage the Shrimp!" /><img src="images/shrimps_header.png" alt="SHRIMPS - Sheffield University Improv Society" /></div>
<div id="header_right"><a href="http://www.shef.ac.uk"><img src="images/sheffield_uni_button_160x40.png" class="noborderimg" alt="The University of Sheffield" /></a><br /><a href="http://www.sheffieldunion.co.uk"><img src="images/sheffield_union_button_160x40.png" class="noborderimg" alt="Sheffield Union" /></a></div>
<div id="navigation">
<h3>Navigation</h3>
<ul>
<li id="li_home">Home</li>
<li id="li_about">About Us</li>
<li id="li_cast">Cast</li>
<li id="li_blog">Blog</li>
<li id="li_gigs">Gigs</li>
<li id="li_photos">Photos</li>
<li id="li_contact">Contact</li>
<li id="li_feedback">Feedback</li>
</ul>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer"><p>This interweb site was designed by resident geek <a href="http://www.danielhough.co.uk">Daniel Hough</a>, and the "Shrimpage the Shrimp" logo (top left) was created by the very talented <a href="http://katebert.deviantart.com">Kate Wiles</a>.</p></div>
</div>
</body>
</html>
Thanks, I'd appreciate any help at all. If you go here company.com layout It looks correct in IE or Firefox But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up. Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration. body { background: #e3edc2; color: #333; font: .8em, arial, helvetica, sans-serif; margin: auto; padding:0px; } I use CSS with all of my web sites, but am completely stuck as to why the styles are not being applied to pages in my new site. My CSS page is called "spine.css" and I created a test page (testcss.php) in the same directory to try to solve the problem. The test page contains the following code: Code: <html>
<head>
<title>test css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="spine.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>text</p>
<p class="green_heading">text</p>
<p class="blue_text">more text</p>
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td class="blue"> </td>
</tr>
<tr>
<td class="green"> </td>
</tr>
<tr>
<td class="blue"> </td>
</tr>
</table>
<p class="blue_text"> </p>
</body>
</html>
Am I just missing something in my link or...? I tried changing the link to the CSS page to an absolute link, but that did not make a difference (i.e., nothing was rendered). Also, my CSS page is residing in the appropriate place on the remote server... the styles just aren't being applied to my site pages. Any assistance is very much appreciated... thanks. HI, I have a web page which uses css and java script. This page worked fine when I deployed it in Jboss and opened it in IE, but when I deployed the same application in Websphere , I am not able to open the page in IE, but I am able to view it partially in Firefox and Opera. Thanks, Jyotsna Hi, I have background image in my css file, I think it is supposed to help my 3 column layout but I'm not sure it does anything useful. http://www.soulcode.net/webdev/susa/index.php I can't tell if the image is displaying or not... I've tried playing with the background colors... I'm pretty darn sure that the path is resolving okay (i'm down in a test folder...) It is in my wrap div Code: #wrapper {
/* background-image:url(images/3399CC-780bg.gif) top left repeat-y;*/
background-image:url(../images/lightgreybg.gif) top left repeat-y;
width:780px;
min-height:100%;
margin: auto;
position:relative;
}
* html #wrapper {height:100%}
I would appreciate a quick glance from another set of eyes. Also, is there some interaction between this image and any background colors in divs (I realize that it is covered by those). SORRY. I DIDN'T SYNC MY CSS CHANGES. Forgive me if this is a newbie question (i'm quite new to CSS) I've got an image I want to make as a background via background-image:url(images/pi.jpg), now if I add this as an inline statement or in the <head> section it works fine but If i try to add it to an external style sheet, the image isn't displayed I've got a very basic layout; div #leftcontent div #rightcontent div #centercontent div #banner I want to add the image so it just displays in the centercontent part. any ideas why this wont work? On my site which im using to practice css, the picture isnt being displayed on the main page. Why is this? http://www.trowbridge-wiltshire.co.uk/newtrowbridge Cheers Hello, I have a problem that hopefully someone has seen before and found a solution. I have some text being displayed. When the text includes a image, in IE, it will repeat the last line of the text twice. so if I have this html Code: <div id="dorm_room_article_text"> <strong>HI</strong><br /> <br /> <br /> <img alt="image" src="some_image" width="525" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> I love this game! </div> and this as the css Code: #dorm_room_article_text {
float: left;
clear: both;
width: 100%;
font-size: 95%;
margin: 0 0 20px;
}
it will display: I love this game! I love this game! at the end, only in IE. I assume it has something to do with floats and displays but can't figure it out. Any ideas? Thanks. Hi, I have the definition of the <body> tag in my external CSS file as follows: body { background:URL("fundo5.gif"); scrollbar-arrow-color: yellow; scrollbar-base-color: black; scrollbar-dark-shadow-color: yellow; scrollbar-track-color: green; scrollbar-face-color: blue; scrollbar-shadow-color: white; scrollbar-highlight-color: silver; scrollbar-3d-light-color: black; } However, this settings do get displayed on IE 6.0 Do I have to set any other properties so that I can change the colors of the scrollbar? thanks in advance Daniel I have a site I am creating in Joomla - I'm not getting help from them, so maybe it's just a css problem that I can't figure out. Here's the css because I'm not allowed to post the url /* COMMON STYLE --------------------------------------------------------- */ html, body, form, fieldset {art margin: 0; padding: 0; background-color: #B8E700; background-image: none; text-align: center; } body { font-family: Arial, Helvetica, sans-serif; line-height: 150%; text-align: center; } body.contentpane { width: auto; /* Printable Page */ margin: 1em 2em; line-height: 1.3em; margin: 0px 0px 0px 0px; font-size: 12px; } body.fs1 { font-size: 10px; } body.fs2{ font-size: 11px; } body.fs3{ font-size: 12px; } body.fs4{ font-size: 13px; } body.fs5{ font-size: 14px; } body.fs6{ font-size: 15px; } /* Normal link */ a { color: #006699; text-decoration: underline; } a:hover, a:active, a:focus { color: #333333; text-decoration: underline; } /* Heading */ h1 { font-size: 180%; } h2 { font-size: 150%; } h3 { font-size: 125%; } h4 { font-size: 100%; text-transform: uppercase; } ul { list-style: none; } ul li { padding-left: 30px; background: url(../images/bullet.gif) no-repeat 18px 8px; line-height: 180%; } ol li { margin-left: 35px; line-height: 180%; } th { padding: 5px; font-weight: bold; text-align: left; } img { border: none; } /* Note Style */ p.stickynote { padding: 10px 0px 10px 40px; border: 1px solid #CACACC; background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF; } p.download { padding: 10px 0px 10px 40px; border: 1px solid #CACACC; background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF; } .blocknumber { clear: both; padding: 5px 15px 10px; position: relative; } /* Check list */ ul.checklist { list-style: none; } ul.checklist li { margin-left: 15px; padding: 0 0 5px 20px; background: url(../images/checklist-bg.gif) no-repeat 0 3px; } /* Small checklist */ ul.small-checklist { list-style: none; } ul.small-checklist li { margin-left: 15px; padding: 0 0 5px 20px; background: url(../images/icon_list.gif) no-repeat 0 3px; } /* Check list */ ul.stars { list-style: none; } ul.stars li { margin-left: 15px; padding: 0px 0 5px 20px; background: url(../images/star-bg.gif) no-repeat 0 3px; } /* Bignumber */ .bignumber { float: left; margin-right: 8px; padding: 6px 7px; display: block; background: url(../images/ol-bg.gif) no-repeat top left; color: #7BA566; font: bold 20px/normal Arial, sans-serif; } /* Talking box. Thinking box. */ div.bubble1, div.bubble2, div.bubble3, div.bubble4 { margin: 15px 0; } div.bubble1 span.author, div.bubble2 span.author, div.bubble3 span.author, div.bubble4 span.author { padding-left: 15px; margin-left: 15px; background: url(../images/author.gif) no-repeat center left; font-weight: bold; } div.bubble1 div { margin: 0; width: 100%; background: url(../images/bub1-br.gif) no-repeat bottom right; } div.bubble1 div div { background: url(../images/bub1-bl.gif) no-repeat bottom left; } div.bubble1 div div div { background: url(../images/bub1-tr.gif) no-repeat top right; } div.bubble1 div div div div { background: url(../images/bub1-tl.gif) no-repeat top left; } div.bubble1 div div div div div { margin: 0; padding: 15px 15px 30px 15px; width: auto; } div.bubble2 div { margin: 0; width: 100%; background: url(../images/bub2-br.gif) no-repeat bottom right; } div.bubble2 div div { background: url(../images/bub2-bl.gif) no-repeat bottom left; } div.bubble2 div div div { background: url(../images/bub2-tr.gif) no-repeat top right; } div.bubble2 div div div div { background: url(../images/bub2-tl.gif) no-repeat top left; } div.bubble2 div div div div div { margin: 0; padding: 15px 15px 35px 15px; width: auto; } div.bubble3 div { margin: 0; width: 100%; background: url(../images/bub3-br.gif) no-repeat bottom right; } div.bubble3 div div { background: url(../images/bub3-bl.gif) no-repeat bottom left; } div.bubble3 div div div { background: url(../images/bub3-tr.gif) no-repeat top right; } div.bubble3 div div div div { background: url(../images/bub3-tl.gif) no-repeat top left; } div.bubble3 div div div div div { margin: 0; padding: 15px 15px 50px 15px; width: auto; } div.bubble4 div { margin: 0; width: 100%; background: url(../images/bub4-br.gif) no-repeat bottom right; } div.bubble4 div div { background: url(../images/bub4-bl.gif) no-repeat bottom left; } div.bubble4 div div div { background: url(../images/bub4-tr.gif) no-repeat top right; } div.bubble4 div div div div { background: url(../images/bub4-tl.gif) no-repeat top left; } div.bubble4 div div div div div { margin: 0; padding: 15px 15px 55px 15px; width: auto; } /* Legend */ .legend-title { margin: 0; padding: 0 3px; float: left; display: block; background: #B8E700; font-weight: bold; top: -10px; left: 7px; } .legend { margin: 20px 0; padding: 0 10px; border: 1px solid #CACACC; background: #FFFFFF; position: relative; } /* JOOMLA STYLE --------------------------------------------------------- */ .article_separator { clear: both; display: block; height: 20px; } .column_separator { padding: 0 25px; } /* content tables */ td.sectiontableheader { padding: 4px; border-right: 1px solid #fff; } tr.sectiontableentry0 td, tr.sectiontableentry1 td, tr.sectiontableentry2 td { padding: 4px; } td.sectiontableentry0, td.sectiontableentry1, td.sectiontableentry2 { padding: 3px; } table.contentpane { border: none; width: 100%; } table.contentpaneopen { border: none; border-collapse: collapse; border-spacing: 0; } table.contenttoc { margin: 0 0 10px 10px; padding: 0; width: 35%; float: right; } table.contenttoc a { text-decoration: none; } table.contenttoc td { padding: 1px 5px 1px 25px; background: url(../images/bullet-list.gif) no-repeat 5% 50%; } table.contenttoc th { padding: 0 0 3PX; border-bottom: 1px solid #CCCCCC; text-indent: 5px; } table.poll { padding: 0; width: 100%; border-collapse: collapse; } table.pollstableborder { padding: 0; width: 100%; border: none; text-align: left; } table.pollstableborder img { vertical-align: baseline; } table.pollstableborder td { padding: 4px!important; border-collapse: collapse; border-spacing: 0; } table.pollstableborder tr.sectiontableentry1 td { background: #ECECEC; } table.searchintro { padding: 10px 0; width: 100%; } table.searchintro td { padding: 5px!important; } table.adminform { } .adminform .inputbox { } .blog_more { padding: 10px 0; } .blog_more strong { margin: 0 0 5px; display: block; font-size: 125%; } .blog_more ul { margin: 0; padding: 0; } .blog_more ul li { margin: 0; padding: 0 0 0 17px; background: url(../images/bullet.gif) no-repeat 6px 8px; } .category { font-weight: bold; } h1.componentheading, .componentheading { padding: 5px 0 15px; margin: 0 0 10px; } .componentheading { font-size: 200%; font-weight: bold; } .contentdescription { padding-bottom: 30px; } h2.contentheading, .contentheading { padding: 5px 0 8px; margin: 0; font-weight: normal; } table.blog .contentheading { font-size: 150%; } .contentheading { font-size: 200%; } a.contentpagetitle, a.contentpagetitle:hover, a.contentpagetitle:active, a.contentpagetitle:focus { text-decoration: none !important; } a.readon { float: left; margin-top: 10px; padding: 1px 5px 1px 14px; border: 1px solid #B8E700; display: block; background: url(../images/arrow.png) no-repeat 5px 48%; color: #006699; font-weight: bold; text-decoration: none; text-transform: uppercase; } a.readon:hover, a.readon:active, a.readon:focus { border: 1px solid #ECECEC; background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF; } table.contentpaneopen td, table.contentpane td { } table.contentpaneopen, table.contentpane, table.blog { width: 100%; } .moduletable { padding: 0; } ul.pagination { margin: 15px auto; padding: 10px 0; } ul.pagination li { margin: 0; padding: 0; display: inline; background: none; } ul.pagination li span{ padding: 2px 5px; } ul.pagination a { padding: 2px 5px; border: 1px solid #B8E700; } ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus { border: 1px solid #ECECEC; background: #FFFFFF; } .pagenavbar { padding-left: 14px; } .pagenavcounter { padding: 8px 14px 0 14px; } .sectiontableheader { padding: 8px 5px; background: #444444; color: #FFFFFF; } .sectiontableheader a { color: #FFFFFF; } tr.sectiontableentry1 td { padding: 8px 5px; background: url(../images/hdot2.gif) repeat-x bottom; } tr.sectiontableentry2 td { padding: 8px 5px; background: url(../images/hdot2.gif) repeat-x bottom #ECECEC; } tr.sectiontableentry1:hover td, tr.sectiontableentry2:hover td { background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC; } .smalldark { text-align: left; } div.syndicate div { text-align: center; } .pollstableborder tr.sectiontableentry1 td, .pollstableborder tr.sectiontableentry2 td { background: none; } /* META --------------------------------------------------------- */ .article-tools { border-top: 1px solid #DDDDDD; width: 100%; float: left; clear: both; margin-bottom: 15px; display: block; background: #ECECEC; } .article-meta { padding: 5px; width: 80%; float: left; } .createby { padding: 3px 3px 3px 20px; background: url(../images/icon-user.gif) no-repeat 0 2px; } .createdate { padding: 3px 3px 3px 20px; background: url(../images/icon-date.gif) no-repeat 0 2px; } .modifydate { width: 100%; float: left; } div.buttonheading { float: right; width: 15%; } .buttonheading img { margin: 7px 5px 0 0; border: 0; float: right; } /* MAIN LAYOUT DIVS --------------------------------------------------------- */ #ja-wrapper { width: 100%; margin: 0; } #ja-container2 { padding: 20px 0; background: url(../images/c-bg2.gif) no-repeat 18% 0; } #ja-mainbody-fr #ja-col1 { width: 20%; } #ja-mainbody-fr #ja-contentwrap { width: 80%; } #ja-mainbody, #ja-mainbody-fl { float: left; width: 80%; } #ja-mainbody #ja-contentwrap { float: right; width: 75%; } #ja-mainbody-fl #ja-contentwrap { float: left; width: 100%; } #ja-mainbody-f, #ja-mainbody-fr { float: none; width: 100%; } #ja-mainbody-fr #ja-contentwrap { width: 74.8%; float: right; } #ja-mainbody-fr #ja-col1 { width: 20%; float: left; } #ja-mainbody-fr #ja-contentwrap { width: 80%; } #ja-content { padding: 60px 20px 0 40px; } #ja-contentwrap { min-height: 300px; height: auto; } * html #ja-contentwrap { height: 300px; } #ja-mainbody-fl #ja-content { padding-left: 0; } #ja-mainbody-f #ja-content { padding: 0; } /* Full */ #ja-containerwrap-f #ja-containerwrap2 { background: none; } #ja-containerwrap-f #ja-container, #ja-containerwrap-f #ja-container2 { background: none; } /* Full left */ #ja-containerwrap-fl #ja-containerwrap2, #ja-containerwrap-fl #ja-container, #ja-containerwrap-fl #ja-container2 { background: none; } /* HEADER --------------------------------------------------------- */ #ja-headerwrap { color: #76C900; line-height: normal; height: 80px; } #ja-header { position: fixed; height: 80px; color: #76C900; } .ja-headermask { width: 602px; display: block; color: #76C900; height: 80px; position: absolute; top: 0; right: -1px; } #ja-header a { color: #76C900; } h1.logo, h1.logo-text { margin: 0 0 0 5px; padding: 0; font-size: 180%; text-transform: uppercase; } h1.logo a { width: 208px; display: block; background: url(../images/logo.png) no-repeat; height: 80px; position: relative; z-index: 100; } h1.logo a span { position: absolute; top: -1000px; } h1.logo-text a { color: #CCCCCC !important; text-decoration: none; outline: none; position: absolute; bottom: 40px; left: 5px; } p.site-slogan { margin: 0; padding: 0; padding: 2px 5px; color: #FFFFFF; background: #444444; font-size: 92%; position: absolute; bottom: 20px; left: 0; } /* Search */ #ja-search { bottom: 15px; position: absolute; top:40px; left:750px; height:25px } #ja-search .inputbox { width:120px; border: 1px solid #333333; padding: 3px 5px; color: #999999; font-size: 92%; } /* MAIN NAVIGATION --------------------------------------------------------- */ #ja-pathway { font-size: 92%; } #ja-pathway strong { margin-right: 5px; font-weight: normal; } #ja-pathway a { text-decoration: none; } #ja-pathway img { margin: 1px 5px; } /* MODULE --------------------------------------------------------- */ div.moduletable, div.moduletable_menu, div.moduletable_text { padding: 0 0 20px; margin-bottom: 15px; } div.moduletable h3, div.moduletable_menu h3, div.moduletable_text h3 { padding: 0 0 8px; margin: 0; color: #7BA566; font-size: 125%; font-weight: bold; text-transform: uppercase; } /* Module rounded */ div.module h3 { margin: 0 -15px 10px; padding: 8px 15px 5px; border-bottom: 2px solid #B8E700; color: #7BA566; font-size: 125%; font-weight: bold; text-transform: uppercase; } div.module_black, div.module_green, div.module_blue, div.module_red, div.module { margin-bottom: 20px; float: left; clear: both; width: 100%; background: url(../images/b-br.gif) no-repeat bottom right #FFFFFF; } div.module div { background: url(../images/b-bl.gif) no-repeat bottom left; } div.module div div { background: url(../images/b-tr.gif) no-repeat top right; } div.module div div div { padding: 0 15px 10px; background: url(../images/b-tl.gif) no-repeat top left; } div.module_black div div div div, div.module_green div div div div, div.module_blue div div div div, div.module_red div div div div, div.module_text div div div div, div.module div div div div { margin: 0; padding: 0; float: none; width: 99%; background: none; } div.module_text h3 { margin: 0 0 10px; width: 100%; clear: both; display: block; overflow: hidden; } div.module_text span { padding: 0 3px 0 0; float: left; clear: both; display: block; background: #B8E700; font-weight: bold; } div.module_text { margin-bottom: 20px; padding: 0; float: left; clear: both; width: 100%; background: url(../images/bt-br.gif) no-repeat bottom right #B8E700; } div.module_text div { background: url(../images/bt-bl.gif) no-repeat bottom left; } div.module_text div div { background: url(../images/bt-tr.gif) no-repeat top right; } div.module_text div div div { padding: 0 15px 10px; display: block; background: url(../images/bt-tl.gif) no-repeat top left; } div.banneritem_text { padding: 5px 0 !important; } /* SPOTLIGHT --------------------------------------------------------- */ /* Spotlight Box Style */ .ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right { float: left; overflow: hidden; } .ja-box-left div.moduletable, .ja-box-full div.moduletable { padding-right: 30px; background: none; } .ja-box-right div.moduletable { padding-left: 30px; background: url(../images/vdot2.gif) repeat-y left; } .ja-box-center div.moduletable { padding: 0 30px; background: url(../images/vdot2.gif) repeat-y left; } #ja-botsl h3 { background: none; } #ja-botslwrap { background: #B8E700; color: #B8E700; } #ja-botsl { padding: 15px 0; } #ja-botsl div.moduletable { padding-top: 0; padding-bottom: 0; margin: 0; } #ja-botsl h3 { margin: 0 0 12px; padding: 0; color: #FFFFFF; } #ja-botsl a { color: #B8E700; } #ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus { color: #FFFFFF; } #ja-botsl ul, #ja-botsl p, #ja-botsl ol { padding: 0; margin: 0 !important; } #ja-botsl ul li { padding: 0 0 0 15px; margin: 0; background: url(../images/bullet2.gif) no-repeat 3px 8px; } #ja-botsl ol li { margin-left: 25px; padding: 0 !important; } #ja-botsl td { padding: 0; } #ja-botsl .article_separator { display: none; } #ja-botsl table { border-spacing: 0; border-collapse: collapse; } /* FOOTER --------------------------------------------------------- */ #ja-footerwrap { padding: 5px 0 30px; } #ja-footer { padding: 0; color: #B8E700; } #ja-footer .copyright { display: block; color: #B8E700; font-style: normal; font-size: 92%; } #ja-footer ul { margin: 0 0 5px; padding: 0; } #ja-footer li { margin: 0; padding: 0; display: inline; background: none; } #ja-footer li a { display: inline; color: #666666; padding: 0 15px 0 0; font-weight: bold; font-size: 92%; line-height: normal; text-decoration: none; text-transform: uppercase; } #ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus { color: #333333; text-decoration: none; } .ja-cert { font-size: 92%; top: 18px; } .ja-cert a { margin: 0 0 0 5px; padding: 0; border: none; border: none; text-decoration: none; } .ja-cert a span { display: none; } .ja-cert a img { border: none; } .banneritem { display: block; margin-top: 15px; } /* MISCELLANOUS ----------------------------------------------------------- */ ul.accessibility { position: absolute; top: -100%; } /*usertool*/ ul.ja-usertools-font { font-size: 11px; position: absolute; top: 8px; right: 70px; } ul.ja-usertools-font li { padding: 0; margin: 0; display: inline; background: none; } /*collapsible h3*/ h3.show { background: url(../images/arrow2.png) no-repeat 90% 60%; cursor: pointer; } h3.hide { background: url(../images/arrow3.png) no-repeat 90% 60%; cursor: pointer; } /*others*/ #ja-banner { margin: 15px 0; text-align: center; } div.back_button a, div.back_button a:hover, div.back_button a:active { margin: 10px 0; display: block; background: none!important; text-decoration: none!important; } #form-login p { margin: 0 0 5px; } #form-login ul { margin: 10px 0 0; } #form-login .inputbox { width: 90%; } .clr { clear: both; } .hasTip img { margin: 10px 5px 0 0; border: none; } /* Tooltips */ .tool-tip { float: left; border: 1px solid #D4D5AA; padding: 5px; background: #FFFFCC; max-width: 200px; } .tool-title { padding: 0; margin: 0; margin-top: -15px; padding-top: 15px; padding-bottom: 5px; background: url(../../system/images/selector-arrow.png) no-repeat; font-size: 100%; font-weight: bold; } .tool-text { margin: 0; font-size: 100%; } #system-message dd.message ul, #system-message dd.error ul, #system-message dd.notice ul { padding: 0; margin: 0; } #system-message dd.message ul li, #system-message dd.error ul li, #system-message dd.notice ul li { background: none; padding: 5px; margin: 0; color: #FFFFFF; } /* System Standard Messages */ #system-message dd.message ul { background: #006699; border: none; } /* System Error Messages */ #system-message dd.error ul { background: #BF0000; border: none; } /* System Notice Messages */ #system-message dd.notice ul { background: #EE9600; border: none; } /* Clearfix */ .clearfix:after { clear: both; display: block; content: "."; height: 0; visibility: hidden; } * html > body .clearfix { width: 100%; display: block; } * html .clearfix { height: 1%; } /* Firefox Scrollbar Hack - Do not remove */ html { margin-bottom: 1px; height: 100%!important; height: auto; } #Table_01 { left:0px; top:0px; width:950px; overflow: hidden; } #top01 { position:fixed; left:0px; top:0px; width:248px; height:68px; background: url(../../../images/top01.jpg); background-repeat:no-repeat; } #logo { position:fixed; left:248px; top:0px; width:89px; height:68px; background:url(../../../images/logo.jpg); background-repeat:no-repeat; } #top02 { position:fixed; left:337px; top:0px; width:312px; height:68px; background:url(../../../images/top02.jpg); background-repeat:no-repeat; } #index-04 { position:fixed; left:649px; top:0px; width:301px; height:74px; background:url(../../../images/index_04.jpg); background-repeat:no-repeat; } #top03 { position:fixed; left:0px; top:68px; width:297px; height:168px; background:url(../../../images/top03.jpg); background-repeat:no-repeat; } #index-06 { position:fixed; left:297px; top:68px; width:352px; height:6px; background:url(../../../images/index_06.jpg); background-repeat:no-repeat; } #index-07 { position:fixed; left:297px; top:74px; width:288px; height:172px; background:url(../../../images/index_07.jpg); background-repeat:no-repeat; } #top04 { position:fixed; left:585px; top:74px; width:317px; height:165px; background:url(../../../images/top04.jpg); background-repeat:no-repeat; } #index-09 { position:fixed; left:902px; top:74px; width:48px; height:172px; background:url(../../../images/index_09.jpg); } #index-10 { position:fixed; left:0px; top:236px; width:297px; height:10px; background:url(../../../images/index_10.jpg); } #index-11 { position:fixed; left:585px; top:239px; width:317px; height:7px; background:url(../../../images/index_11.jpg); } #index-12 { position:fixed; left:0px; top:246px; width:1px; height:33px; background:url(../../../images/index_12.jpg); } #index-13 { position:fixed; left:1px; top:246px; width:949px; height:28px; background:url(../../../images/index_13.jpg); } #bottom01 { left:0px; top:653px; width:950px; height:32px; background:url(../../../images/bottom01.jpg); } #othersunnypages-14 { background:url(../../../images/othersunnypages_14.jpg); position:fixed; top:247px; left: 1px; width: 949px; height: 5px; } #othersunnypages-15 { background-image:url(../../../images/othersunnypages_15.jpg); position:fixed; top:279px; width:152px; height:142px; } #othersunnypages-16 { background-image:url(../../../images/othersunnypages_16.jpg); position:fixed; top:279px; left: 152px; width: 798px; height: 41px; } #othersunnypages-17 { background-image:url(../../../images/othersunnypages_17.jpg); position:fixed; top:320px; left: 152px; width:510px; height:23px; } #othersunnypages-18 { background-image:url(../../../images/othersunnypages_18.jpg); position:fixed; top:320px; left: 662px; width:33px; height:23px; } #othersunnypages-19 { background-image:url(../../../images/othersunnypages_19.jpg); position:fixed; top:320px; left: 695px; width:203px; height:23px; } #othersunnypages-20 { background-image:url(../../../images/othersunnypages_20.jpg); position:fixed; top:320px; left:898px; width:52px; height:23px; } #othersunnypages-21 { background-image:url(../../../images/othersunnypages_21.jpg); position:fixed; top:343px; left: 152px; width:504px; height:24px; } #othersunnypages-22 { background-image:url(../../../images/othersunnypages_22.jpg); position:fixed; top:343px; left: 656px; width:43px; height:24px; } #othersunnypages-23 { background-image:url(../../../images/othersunnypages_23.jpg); position:fixed; top:343px; left: 699px; width:200px; height:24px; } #othersunnypages-24 { background-image:url(../../../images/othersunnypages_24.jpg); position:fixed; top:343px; left: 899px; width:51px; height:24px; } #othersunnypages-25 { background-image: url(../../../images/othersunnypages_25.jpg); position:fixed; top: 367px; left: 152px; width:504px; height:54px; } #othersunnypages-26 { background-image:url(../../../images/othersunnypages_26.jpg); position:fixed; top:367px; left: 656px; width:43px; height:54px; } #othersunnypages-27 { background-image:url(../../../images/othersunnypages_27.jpg); position:fixed; top:367px; left: 699px; width:193px; height:54px; } #othersunnypages-28 { background-image:url(../../../images/othersunnypages_28.jpg); position:fixed; top:367px; left: 892px; width:58px; height:54px; } #othersunnypages-29 { background-image:url(../../../images/othersunnypages_29.jpg); position:fixed; top:421px; left: 0px; width:69px; height:201px; } #othersunnypages-30 { background-image:url(../../../images/othersunnypages_30.jpg); position:fixed; top:421px; left:69px; width:587px; height:201px; } #othersunnypages-31 { background-image:url(../../../images/othersunnypages_31.jpg); top:421px; left: 656px; width:43px; height:201px; } #othersunnypages-32 { background-image:url(../../../images/othersunnypages_32.jpg); position:fixed; top:421px; left: 699px; width:193px; height:201px; } #othersunnypages-33 { background-image: url(../../../images/othersunnypages_33.jpg); position:fixed; top:421px; left: 892px; width:58px; height:201px; } #othersunnypages-34 { background-image:url(../../../images/othersunnypages_34.jpg); position:fixed; top:622px; left: 0px; width:950px; height:31px; } #othersunnypages-36 { background-image:url(../../../images/othersunnypages_36.jpg); position:fixed; top:685px; left:0px; width:950px; height:15px; } Since this is my first post here, Hello, everyone! I can't find the answer to this simple question anywhere else, so I hope you can help. When a block-level (by default) element is set to "display: inline", can it still contain other block-level elements? BTW I want to avoid using "display: inline-block" since it is not as well-supported. Thanks a bunch, Rachel Hello there. I tried to display the background color in my navigation, but it wan't work. Works fine in safari. Doesn't work in firefox or IE Can anyone help? .navbar { width: 960px; line-height: 30px; background-color: silver; z-index:100; display: block; clear: both; } .navbar ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; z-index:100; } .navbar ul li { display: block; position: relative; float: left; width: 120px; font-weight: bolder; z-index:100; } .navbar li ul { display: none; line-height: 20px; z-index:100; } .navbar ul li a { display: block; text-decoration: none; color: #48fc30; padding: 4px 15px 4px 15px; background: #silver; margin-left: 1px; } .navbar ul li a signup { background: #black; } .navbar ul li a:hover { background: #grey; } .navbar li:hover ul { display: block; position: absolute; } .navbar li:hover li { float: none; font-size: 11px; } .navbar li:hover a { background: #red; } .navbar li:hover li a:hover { background: #blue; } My background image was coded properly? but not displaying in FF 2 or IE 7. background-image:url(../images/FFFFFF-bg780.gif) top left repeat-y; I posted this http://forums.devshed.com/css-help-116/background-image-not-displayed-449462.html Then I took a look at the Firefox error console and saw: Warning: Expected end of value for property but found 'top'. Error in parsing value for property 'background-image'. Declaration dropped. Source File: blah blah blah.css Line: 41 When I changed my CSS to this: background-image:url(../images/FFFFFF-bg780.gif); background-position: top left; background-repeat:repeat-y; everything works! Hello, im trying to do some 3column layout with css menu, but in the middle column i have <div class="attachment_pdf"><a href="/xxx/xxx.pdf">XYZ (PDF, 2 MB )</a></div and in this div there is a background image of pdf icon. Everything works in Firefox, Mozzilas but in same cases on IE they are not shown. If i have 10 icons, 3 of them are not shown. After i go with mouseover on the link, i can see them, or if i scroll the window some of them are showing... have somebody met this problem? Or where can be problem? I know, that maybe you have to see the css, and its rather complicated. Thanx. As the title says... Design constraints unfortunately mean I need to do achieve the basic design shown in the example below (using a list) I have created an example to illustrate the problem I am experiencing. Problem example The list item text is wrapping too early in IE6 and IE7, though fine in my other target browsers such as Firefox and Opera. removing clear:left stops the wrapping, but then when 2 or more nav items have short content they sit on the same line which is no good obviously Any ideas / solutions etc. would be most welcome I have a form that displays the filled in results in an email but using all html. This is difficult to read for the user. Can this be easily corrected? Maybe apply a style sheet or something? It looks like: Code: <html> <head> <title>Moonbounce Adventures Order Form</title> </head> <body> Name: name<br /> Company: <br /> Address: add<br /> City: town - State: de - Zip: 19809<br /> E-Mail Address: name@.net<br /> Daytime Phone: 666-666-666<br /> Fax: <br /> Date of Event: 06/04/2005<br /> Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page |
|||||||