|
CSS - Javascript Not Displaying Within Div
I wasn't sure whether I should post here or in the Javascript forum, but it's a display issue, so I'm putting it here.
I have a problem with a trivial project that's driving me crazy. I'm using javascript to display a list of the last songs I've listened to. I want that list to display within a div. The problem is that it doesn't at all -- it seems to ignore all CSS positioning altogether. You can see the problem here . You can view the script that's generating the text right here. It's all pretty obvious -- the list of songs that's in the background should be in the "i'm listening to" box. Anyone seen anything like this before? I've searched all over Google and these forums and I can't find anything quite like it. Similar TutorialsHi, I'm trying to write a simple website but I can't get it to run correctly in Internet Explorer. It looks fine in Firefox and Safari, but in IE none of the CSS is used, it looks like a regular html document. I've run the Validations for both files and they pass (aside from the html file throwing errors about the css styles). Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Date: 2009-08-10 --> </head> <body bgcolor="#D5D5D5"> <center> <banner> <img src="toptile.jpg" height="150px" width="100%" alt="topbanner"> </banner> <br> <logo> <img src="bannerlogo.png" alt="logo"></logo> <navbar> <img src="navbar.png" width="100%" height="650px" alt="background"> </navbar> <blackbar><img src="black.png" width="100%" height="20px" alt="blackbox"></blackbar> <br> <middle> <table border="0" width="800px" cellpadding="10" bgcolor="#DBFBFF"> <tr> <td width="50%" valign="top"> <br><br><br><br><br> <center> Coming Soon... </center> </td> </tr> </table> </middle> </center> </body> </html> and the CSS: Code: logo
{
position:absolute;
display:block;
margin-left: auto;
margin-right: auto;
top:10px;
width:100%;
z-index:3;
}
banner
{
position:absolute;
top:-10px;
left:-10px;
right:0px;
z-index:2;
}
middle
{
position:absolute;
display:block;
top:100px;
margin-left: auto;
margin-right: auto;
width:100%;
z-index:1;
}
navbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:-1;
}
blackbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:4;
}
I realize I'm probably not using all the best practices, but it displays fine on everything but IE. Can someone please help me out here. Thanks I'm working on a site (here) that has a two column style layout. Everything works fine in almost any browser OTHER than IE... In IE, the main (right) column shifts so that it is below the content length of the left (floated) column. I want them to be side by side... I've been playing with different solutions for several days. Can anyone help? (link to css file). relevant html: Code: <div id="wrapper"> <div id="container"> <div id="content"> <div id="left"> <!-- Left Block Start --> <!-- Left Sidebox Start --> <!-- Left Sidebox End --> <!-- Left Block End --> </div> <div id="main"> <!-- Center Sidebox Start --> <!-- Center Sidebox End --> <!-- BEGIN: Default News-index Article --> <!-- END: Default News-index Article --> </div> </div> </div> <div class="clearing"> </div> </div> relevant css: Code: /* styles to create table-less layout */
#wrapper {
padding-top:10px;
background-color: white;
text-align:center;
}
#container {
width: 770px;
height: auto;
margin: 0 auto 0 auto; /* sets the left and right margins to auto for everything else */
border-top: 1px solid white;
}
#content {
/*width: 770px; */
text-align:center;
}
#main {
text-align: left;
margin-left: 175px;
width: 595px;
}
#left {
text-align: left;
float: left;
width: 160px;
}
/* utility clearer class */
.clearing {
height: 0px;
clear: both;
}
thanks in advance for the help! I don't know what's wrong, but this HAS to be something simple I'm missing. In my XHTML I have Code: <div class="curved"></div> and for the CSS I have Code:
.curved {
background-image: url(Green_wavy_thing.jpg);
background-color: #ffffff;
background-repeat: no-repeat;
}
The image isn't even displaying in any browser. What am I missing? I've tried quotes, etc to no avail. Is my code wrong? The image is in the same directory as the html and CSS files. Thanks, Chris hi i have few questions: 1. when you have a paragraph and the space between the two lines of text, how do you reduce it? 2. similarly say you have a paragraph and then another element underneath it for eg the end of table, a horiz. line etc, how do i reduce the space between that paragraph and that element. 3. I have a DIV but when i put it on the page it appears at the top, is there a way to place it so that it is placed at the bottom. here is the code: Code:
<div style="float:left;">
<a href="{U_VIEW_FORUM}">{FORUM_NAME}</a><br />
<b>{L_MODERATOR}: {MODERATORS}<br /><br />
{LOGGED_IN_USER_LIST}</b><br/>
<a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a>
<!--<a href="{U_INDEX}">{L_INDEX}</a> -> <a href="{U_VIEW_FORUM}">{FORUM_NAME}</a>-->
<a href="{U_INDEX}">Forum</a> -> <a href="{U_VIEW_FORUM}">{FORUM_NAME}</a>
</div>
<div style="float:right; vertical-align:bottom; margin-top:9%;">
{PAGINATION}
<a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>
</div>
in this the first DIV appears on the left, the second div appears on the right of the first div. HOWEVER it positions itself with the top of first div SOMETHING LIKE: Code: FIRST DIV TEXT SECOND DIV TEXT FIRST DIVE TEXT .... ... however i want it to look like: Code: FIRST DIV TEXT FIRST DIVE TEXT .... END OF FIRST DIV SECOND DIV TEXT now i have two possible sol for this ie: using margin-top to make it go down or use <br/>. is there a css specific tag? Hi, I have a drop down menu which is using jquery to animate it. I am trying to set it up to display when JS is disables. I have added the following code inside a <style> tag which is inside a <noscript> tag. However, the drop down menu does not display it's drop downs. They can simply just appear, so there is no animation needed. This is my code: PHP Code: ul.tabs { display: table; margin: 0; padding: 0; list-style: none; position: relative; height:40px; width:100%; } ul.tabs li { margin: 0; padding: 0; list-style: none; display: inline-block; float: left; position: relative; padding:0 2px 0px 0px; } ul.tabs a { position: relative; display: block; line-height:40px; padding:0 18px; color:#FFF; font-size:13px; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } ul.tabs a:hover, ul.tabs a.selected { background:#c95884; } ul.tabs a.connect { position: relative; display: block; line-height:38px; padding:0 18px; background: #54c45f; font-size:13px; } ul.tabs a.connect:hover, ul.tabs a.connect.selected { background:#68cb72; } Any ideas how I can make the sub items display? I need some help desperately. I am a mediocre CSS guy I am working on a site for a friend of mine. I, for the life of me, can't seem to get an image displayed in IE8 It displays fine in FF. I have a zip file with the whole site so that someone who is an expert in CSS can show what is wrong. I would be very grateful if someone can help me with this. I am not allowed to provide my email since I am a new user. I promise not to be an annoyance to anyone who is willing to share his/her email me so that I can send the files for him/her to look at. I know I am asking too much, but I have no choice Code: <div id="s_site"> <a href="#site">This site</a> <h2 id="site_h">About This Memorial Site</h2> <p id="site_p" class="tab_cont">This site is brought to you by the Royal Canadian Branch 3 Legion John Bernard Croak Victorian Cross. In honor of those fallen and served in WW2.</p> </div> the h2 and p element are hidden using display:none; when I click on the anchor link i'd like them to apper using display:block; It seems like I may need to use javascript but I'd rther not use javascript at all, except for thos eunfortunate enough to still be using IE. I can't figure it out I've tried amny thing that didnt work. I've been searching for a selector that will let me access these hidden elements but I can't come up with anything. I half accomplished what I was trying but I can't get the changes to stick. Thanks for reading Developing a page: As this is my first posting I do not know how to write here the URL, system does not allow me Problem is: I am using behavior: border-radius.htc and border-radius to create rounded corners in boxes. The rounded borders display correctly in Firefox, Chrome, Safari...and amazingly display well in IE7&8. Except for one column on the right hand side. The right and bottom border does not display in IE (the 4 round corners do, however!). I can't figure why. Driving me crazy! Another funny one: the border surrounding the chocolate buttons picture <div class="ftproduct_image"> displays well in all browsers except in IE8. Why could something display well in IE7 but not in IE8? This is a new for me. Any ideas welcomed! I guess you can't help without having a look at the page but I do not know how to give the uRL I've downloaded a free CSS website template with the idea of just swapping out the graphics and text using Notepad. All is going well with one major exception - I cannot seem to change the graphics in the sidebar or main body. I put the new graphics in the same folder as the original graphics then just changed the img tag to reflect the new filename. This results in the image spacer icon displaying but the new image does not. What is strange is that the alt tag will change correctly, just no image. I know I'm overlooking something simple, but I seem to have hit the proverbial brick wall. Any help would be most appreciated! I tried to attach the files but don't see that option and evidently I'm not permitted to post the url. Just google "templatemo 050 metal" to pull up the files. Thanks for reading this and offering any help! I am using the below CSS to display a photo at the top of my pages. The CSS worked fine with the original photo (using a template) on both firefox and IE. However, when I changed the photo for my own it stops appearing on IE. Firefox displays the picture perfectly, and the div that holds the image is sized correctly (shows as white space on page). Does anyone know why this may be happening? I am using IE 7. The rest of the CSS is working, even the links to other images I use as backgrounds. Code: #header-photo {
clear: both;
height: 200px;
width: 790px;
margin: 0 auto;
background: #FFF url(header-photo.jpg) no-repeat center center;
} Hi all, I have a dropdown menu that appears onmouseover and goes away onmouseout. The code works as it is posted here, works. What I was trying to do, was to move the style tag in the div with the id 'p_default_1', into a class in the CSS file. But when I remove the style tag from the div, and add the class (class="menu1"), the dropdown menu no longer gets displayed when i roll over it. note to mods: sorry if this is in the wrong forum, I just don't know what the problem is with. html Code: Original - html Code <td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);" OnMouseOut="hide_sub('p_default_1', this, 0);"> <a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br> <a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br> <div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" > <table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0"> <tr> <td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);"> <div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; "> <a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td> </tr> <tr> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div> </td> </tr> </tbody></table></div></td>
<td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);"
OnMouseOut="hide_sub('p_default_1', this, 0);">
<a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br>
<a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br>
<div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" >
<table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);">
<div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; ">
<a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div>
<td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td>
</tr>
<tr>
<td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div> </td>
</tr>
</tbody></table></div></td>
javascript Code: Original - javascript Code function hide_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = 'none'; } } function show_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = ''; } }
function hide_sub(name, cell, i) {
css Code: Original - css Code .menu1{ margin-left:0px; margin-top:0px; position:absolute; z-index:2; display:none; }
.menu1{
Test Site I'm working on a new design, and it works in Firefox and Safari no problems - and in IE it works mostly with the exception of one thing. None of the background images load. I've tried in 5.5, 6, and 7 and in all 3 nothing loads. How can it load the backgrounds in FF but not in IE. Am I doing something wrong here? Does IE not support: background: #000 url("someimage.jpg") no-repeat; ??? I'm confused as to what's causing this... http://www.houndsandme.com/ It looks great in FireFox of course... but in IE6 the #column div is longer than it's supposed to be so that the background of the inner elements doesn't cover it all the way. It's almost like either the padding of the #column div, or the margin of the inner div (but only the last one) is incorrect... Also, have a look at IE7 for some really strange happenings... Make sure you scroll over the nav links I have a small box displayed at the top of the page for an "anouncment column". Opera and IE show it properly, sort of, and NEtscape/mozilla show it further down the page. I want it to be at the VERY top of the page, IE/Opera show it a few px down and mozilla/netscape show it a good 10+ down. I have tried playing with padding and it made no difference. These browsers are the new versions. any ideas? Code: <div style="position: absolute; left: 617px; top; 0px; width: 147px; height: 30px; background-color: transperant; padding: 0px;"> <h5>text is here</h5> </div> the style sheet Code: body {
color: #000000;
background-color: #ffffff;
font-family: Georgia, "Times New Roman",
Times, serif;
}
}
h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 15px }
h5
{
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
COLOR: #2C31FF; TEXT-DECORATION: underline
}
Hi, I have a simple question. Is it possible to display and hide a list if i click on a link using CSS? I'm not looking to change pages or anything. I know it can be done using Javascript but I would rather not use it. I've done a few searches for hiding lists in CSS but to no avail. Thanks, I'm working on a client's website and trying to get the navigation menu to look right in firefox, for some reason it seems to ignore all width properties and the table cells overlap, but only in firefox. IE displays it perfectly, any help would be appreciated. www.entsource.com/hcs/ It is source viewable and the css code follows: a.nav { color: black; text-decoration: none; border: 1px solid #6D92A2; width: 150px; padding: 2px; font-family: tahoma; font-size: 11pt; text-align: center; } a.nav:hover { color: #F80808; text-decoration: none; border: 1px solid #F80808; width: 150px; padding: 2px; font-family: tahoma; } table.pane { width: 900px; } td.nav-cell { width: 155px; border-right: 2px solid #6D92A2; } td.main { width: 750px; padding: 10px; } hr { color: #6D92A2; height: 1px; width: 400px; } strong.header { color: white; background-color: #CCCCCC; width: 700px; height: 20px; border-top: 1px black solid; border-bottom: 1px black solid; font-size: 16pt; font-family: tahoma; } strong.bold { color: black; font-size: 16pt; font-family: tahoma; } Please help. I have a page with a table just inside the body tag, which i dont want displayed. This is an ad table and i have no control over it because my free host puts it there. I have my own table inside a <div> tag, which I do want displayed. How can i set up my stylesheet to not display the table just inside the body tag but to do display the table inside the div tag? thanks hey all, i am working on new site but it is displaying wrong in IE (surprise surprise). i have been playing around to see if i can get it sorted but am not having any luck, if anyone can offer an idea that would be appreciated. here is the CSS Code:
<style type="text/css">
html, body {padding: 0;
color: #000; background: #eee;
font-family: Arial, Veranda, sans-serif;
margin: 0 140px 0 140px;}
h1 {color: #FFF; background: url('smallpardimg.jpg') center no-repeat #eef;
font: bold 200%/1em Arial, Verdana, sans-serif;
padding: 3em 1em 0; margin: 0 0 0 0;
border-left: 1px solid gray; border-right: 1px solid gray;}
#main {font-size: small; color: #AAA; background: #FFF;
margin: 0; padding: 2.5% 12.5%; clear: left;
border-top: 1px solid gray;}
#nav {margin: 0; padding: 0 0 0 0; float: left; background-color:#eef; border-left: 1px solid gray;
border-right: 1px solid gray;}
#nav li {list-style:none; float: right;
font-size: 12px; line-height: 20px; white-space: nowrap;}
#nav a {display: block; float: left; padding: 0 10px 0 10px;
text-decoration: none; font-weight: normal;
border: 1px solid; border-color: #EEF #EEF #EEF #EEF; color: #333; width: .1em;}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {background-color: #eef; color: #ccc;
border-color: #eee #CCC #eee #ccc;}
</style>
and here is how it is being used in the html Code: <h1></h1> <ul id="nav"> <li><a href="/render/">?</a></li> <li id="current"><a href="/newmed/">contact us</a></li> <li><a href="/photos/">about globalhotel</a></li> <li><a href="/design/">my account</a></li> <li><a href="/webdev/">hotels</a></li> </ul> <div id="main"> <p> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> and finally here is a link to the page where i am having probs. thanks in advanced RF Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic edited links because question has been answered Thanks everyone |
|||||||