|
CSS - Css Not Being Applied To Elements Craeted By Javascript
Hi
I think this is some kind of IE 6 bug I am adding some elemnts to the page using the following code: etc... my_new_node3 = wd.createElement('span'); my_new_node3.setAttribute("class", "beep4"); my_new_node3.appendChild(wd.createTextNode("")); my_new_node3.appendChild(wd.createElement('br')); my_new_node3.appendChild(wd.createTextNode("")); my_new_node2.appendChild(my_new_node3); etc... This is not a problem and it works fine. The problem is that when I add this to the page the css (from an external style sheet) that should apply does not. It is some kind of IE bug, I have tested it extensively in Firefox, using the DOM inspector - where it works fine and I can see that all the elements have been created / added to the page correctly. I have also confirmed that the correct elements are being created in IE it is just that styles are not being applied to the created elements. The styles work in Firefox and also in IE under normal circumstances (when the elements are not created on the fly) I'm sorry that I can't give more detail, but its deeply burried in an application and I thought putting in the relevant css etc might just make it more confusing. Any help very appreciated. Thanks. Similar TutorialsI am attempting to add what at first glance looks to be a gradient border down the sides of my container, and it has worked fine in IE, but in Firefox, said style element stops after a certain header box, before the page moves into the main content of the site (which has elements floated). Please have a look at the following page in both IE and Firefox, and you will see the problem: tombstonemedia.com/noise/venues.htm and the stylesheet for this page is: tombstonemedia.com/noise/style.css If anyone knows what exactly it is that I need to tweak in order to make the effect be cross-browser compatible, please let me know. This is a bit puzzling for me. I read that I can apply css to something based on id, which I have been doing, thats how my template is made, USING CSS :S. I need to apply css to an H2 that already has css applied to it but has a different id. Here is the page I need to do it to, view it and see why I need to. http://www.coldfusionzone.com/index.php?p=7 Look down towards where the comments are and youll see Leave a comment I need to change that to where it expands up to 40 pixels from the side, and has a black background without the stinkin date pic next to is . Now that Im talking about it im confused again. Ha ha I had it down pat but now that I need help im confused thats strange. But I need to apply a css style to it when it already has a css it.... Here the css style that controls it is on top and the css style im trying to use is on the bottom. PHP Code: div#content h2 { background: #000 url(images/date.jpg) no-repeat left center; background-color: #232323; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } div#content#postcomment h2 { background: #000; background-color: #000000; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } Hi, I have a XHTML 4.0 file and CSS in a separate file. The CSS if included within the <head> section of the HTML file works correctly and displays the page with the right formatting. However, when I move the CSS to a separate file and just use the <link> tag within the <head> section of the HTML file to link to this CSS file, the formatting is not applied. I am not sure what to do. Any quick help is greatly appreciated. Thanks xworder The section of my site that this effects is a login area, so I can't provide a link... I can post some code if I need to... I have a div with this class applied to it. Code: .minidaysofweek div{
width:13.6%;
float:left;
font-weight:bold;
}
It was working fine here, but when I put it in my site template, the bold doesn't work. So I added color:blue; just for testing, and it changed the color... what would keep the font-weight from being applied? The minititle class isn't bolding either like it should... <edit>FF and IE effected</edit> For the life of me I cant find out what code that will align the image correctly. Currently the "previous" button on the page below has a gap on the left, and is being cropped on the right. http://zombiemod.com/rm/nina2/main.php?g2_itemId=13 This is the image im talking about: http://zombiemod.com/rm/nina2/theme...ntrols-left.png I guess if I remove the space to the left of the previous button, it will drag the image to the corrct position so all of the image is being displayed without having the right side cropped. Here is the HTML for the button: Code: <ul id="control-buttons"> <li><button id="controls-left"> <img src="themes/ajaxian/images/controls-left.png" alt="Left" /> </button></li> <li><button id="controls-play"> <img src="themes/ajaxian/images/controls-right.png" alt="Play" /> </button></li> <li><button id="controls-right"> <img src="themes/ajaxian/images/controls-right.png" alt="Right" /> </button></li> </ul> This is the code I used to try and set the correct height of the buttons: Code: #slideshow-controls button {
width: 44px;
height: 59px;
/*margin: 0;
padding: 0;*/
background-color: #000;
border: none;
text-align: center;
cursor: pointer;
}
All, I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated. 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> Why do margin and padding widths act differently when applied to a floated item in Internet Explorer? Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page. The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows: Code: .w3type{color: black; background-color: #FFCE6B;}
Code: .w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}
I add this class to a <td> tag: Code: <td class="w3type"> and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it. The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code? If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges). Thanks for any help Hi everyone -- first post here in the forums. I hope I can get some pointers on how to get my page to display correctly in IE. I have 2 div tags at the top of my page that are built sorta like this: Code: <div>
<ul>
<li>
some thing (images in my case, and a search bar)
</li>
</ul>
</div>
My css for these elements has "list-style:none;" -- and this works great in modern browsers like firefox, chrome, safari, opera... but the old dinosaur which 30% of my visitors still use doesn't handle this all right. See, I am displaying these list elements in a single horizontal row, but IE wants them in a single vertical column. UGH. I have a post with a screen shot from firefox and IE at this link: http://corneveaux.com/blog/new-animated-banner-and-internet-explorer-sucks So, I am sure its something I have done wrong -- but I cannot get my arms around the problem with firebug or IE developer tool bar. I am a total CSS newb here, so any tips much appreciated. Oh, and I checked and indeed my CSS validates. Thanks everyone! I am new to css and just had a quick question. (please forgive me for any invalid lingo... hopefully you can make sense of my question) I am creating a dynamic calendar of events page, the calendar will be built using a table. If I put "table.calendar" in my style sheet to format the overall table, and I have th.calendar, td.calendar, do I have to add the "class" property to th or td, or will they automatically be in the calendar class because they are part of the table. For example... Do I do this? Code: <table class="calendar"> <tr><th></th></tr> <tr><td></td></tr> </table> Or this? Code: <table class="calendar"> <tr><th class="calendar"></th></tr> <tr><td class="calendar"></td></tr> </table> Hi Guys, I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet. Like this (. is the li): . Here is My Div Content I want it to be like this: . Here is My Div Content Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure). Here is my markup. <ul> <li> <div class="dragHandle"> </div> </li> </ul> DragHandle class is as follows .dragHandle { width: 20px; height: 25px; background-image: url(/styles/icons/selectarrow.JPG); background-position: center; background-repeat: no-repeat; cursor: move; } Hi guys, I don't know if this is possible.. I have a table with position: fixed and width: 100% height: 100% so it covers the entire screen. There is text behind it, you can see through the table and there is text back there. My problem is you can't click on anything in the background, behind the table. You can't select the text and you can't click the links because the table is blocking them. So my question is it possible to click through the table element on the links in the background and stuff? http://perfbase.com/beta/tablesector/v7/ I tried setting the middle td to visibility: hidden and display: none but that didn't work. I tried javascript events but click, mousedown, mouseover, none of them work for the text in the background. Thanks a lot! Hi everyone Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics: http://www.crashingbydesign.com.au/newsite/ The relevant code is as follows: Code:
<div id="content_container">
<div id="belowbg">
<div id="left">
<div id="h3lft">
<h3>Welcome</h3>
</div>
<div id="contentlft">
<p>Lorem ipsum ...</p>
</div>
<div id="footlft"></div>
</div>
<div id="right">
<div id="h3rght">
<h3>Latest</h3>
</div>
<div id="contentrght">
<p>Lorem ipsum ...</p>
</div>
<div id="footrght"></div>
</div>
</div>
<div id="footer">
<p>text</p>
</div>
</div>
The relevant CSS is as follows: Code:
#content_container {
position: absolute;
top: 406px;
left: 50%;
margin: 0 0 0 -372px;
width: 742px;
height: auto;
z-index: 10;
}
#belowbg {
padding: 0 11px 11px 11px;
width: 720px;
height: auto;
background-color: #313131;
}
/*hack to ensure that Mozilla encloses the floats with the #belowbg div*/
#belowbg:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#left {
float: left;
width: 481px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3lft {
width: 481px;
height: 25px;
background: url(images/welcomehd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentlft {
width: 459px;
height: auto;
background-color: #293942;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footlft {
width: 481px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/welcomeft.gif) no-repeat;
display: block;
}
#right {
float: right;
width: 230px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3rght {
width: 230px;
height: 25px;
background: url(images/latesthd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentrght {
width: 208px;
height: auto;
background-color: #525252;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footrght {
width: 230px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/latestft.gif) no-repeat;
display: block;
}
#footer {
position: relative;
top: 0;
left: 0;
width: 720px;
height: 188px;
padding: 20px 10px;
margin: 0;
background: url(images/btmhatlines.gif) right no-repeat;
font-size: 1.1em;
line-height: 1.6;
text-align: center;
}
Can anyone see my mistake? Cheers I have a header set up as a div. Inside the header are three elements: #logo, #picture and #contact_info. #logo and #picture are images (image tags in the "html") and #contact_info is a div. I want #logo to float to the left (no problem), #picture to float to the right (problem), and #contact_info to be flush against #picture's left side. How might I accomplish this? Nothing is positioning correctly except #logo. the (pertinent) css is: Code: #main {
width: 875px;
background-color: #FFCC77;
border-style: inset;
border: 2px solid #008080;
margin-left: auto;
margin-right: auto;
}
#header {
width: 875px;
height: 177px;
margin-left: auto;
margin-right: auto;
background:url("gradient2.jpg") repeat-x;
border: 2px solid #008080;
}
#logo {
width:300px;
height:155px;
float: left;
}
#contact_info {
color: #800080;
font-variant: small-caps;
font-family: sans-serif;
font-weight: 500;
font-size: 14px;
padding-top:0px;
padding-right:10px;
float: right;
}
#picture {
width: 160px;
height: 139;
margin: 10 10 10 10px;
}
The html is: Code: <body>
<div id="header">
<img src="Styles/redonelogo.jpg">
<img src="Styles/picture.jpg">
<div id="contact_info">
<p>Casa Grande Acclaim Realty<br/>
11283 N. Henness Road<br />
Casa Grande, Arizona 85194 <br />
Phone: (520) 560-8366 <br />
Fax: (520) 421-1444
</p>
</div>
<div id="slogan">
Serving All of Pinal County
</div>
<ul id="nav">
<li><a href="About" target="_self">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="index">Home</a></li>
</ul>
</div>
<div id="main">
<div id="border"></div>
<div id="innerloop">
<div id="equal"></div>
<div id="mls"></div>
<div id="secondinnerloop">
<h2><strong>Welcome to Casa Grande Acclaim Realty</strong></h2>
<div id="PicBackground">
<img alt="slide show" src="Graphics/One.jpg" width="540" height="405" id="FirstPicture">
</div>
<script type="text/javascript">
RunSlideShow("FirstPicture","PicBackground","Graphics/One.jpg;Graphics/Two.jpg;Graphics/Three.jpg;Graphics/Four.jpg;Graphics/Five.jpg;Graphics/Six.jpg;Graphics/Seven.jpg;Graphics/Eight.jpg;Graphics/Nine.jpg;Graphics/Ten.jpg;Graphics/Eleven.jpg;Graphics/Twelve.jpg;Graphics/Thirteen.jpg;Graphics/Fourteen.jpg",14);
</script>
</div>
</div>
</div>
</body>
</html>
Interesting situation i have. In my css i have this declared Code: css
a:link, a:visited { color: #c97c0f; text-decoration: none; font-weight: bold; }
a:active, a:hover { color: #82581d; text-decoration: underline; }
div#buenprov_content a:link, a:visited { color: #644e14; text-decoration: none; font-weight: bold; }
div#buenprov_content a:hover { color: #35290a; text-decoration: underline; }
For a change, IE displays the link colors correctly, the ones inside the div with the id buenprov_content have the color i want them to, and the rest of the page has the ones that are global. However, in firefox, they all inherit the traits from the #buenprov_content Even links not inside divs with that ID.... as shown: Here ( The ones in the fading content should be a different color ) Im building that site for a restaurant...but anyways, im a bit stumped as to why FF is doing this...any help? Thanks. Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary. I should go with the flow. So I copied a basic page structure and twiddled a little. Here is the result so far html link css link A couple of questions. 1. Would you say I'm on the right track, or should I be looking at a different style structure? 2. The page appears in ie to have gaps around the elements. In Mozilla it looks like I hoped it would look. How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix. No luck so far. Any help, advice appreciated. Thanks Solar.. |
|||||||