|
CSS - Nested Div Content, Ignore Styling In Above Classes
Sorry for the slightly ambidgious title, hard to explain my issue.
Two clips of code below, the div "test" relates to an Rss feed i'm pulling in through the javascript below. A class is automatically applied to the RSS when it loads. However, it is being displayed as a bullet list despite the stylesheet having no reference to a bulleted list. It seems to be due to the fact it sits within a <li> class. But is there a way to tell it to ignore any style in above classes? Aim being so it loads without being in a bulleted list. Code: <ul id="column3" class="column">
<li class="widget color-orange">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<div id="test"></div>
</div>
</li>
Code: <script type="text/javascript"> $(document).ready(function () { $('#test').rssfeed('http://www.fmuforum.com/index.php?app=core&module=global§ion=rss&type=forums&id=2', { limit: 5 }); }); </script>
Thanks in advance Similar TutorialsI'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it. Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated... This is the code that creates the box and it works correctly... Code: .box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link... Code: .box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. I have a container div which includes a #header div, a left-floated #content div, a #right div, and a #footer div. The #content div has a background image that does not want to extend all the way down within the div to snuggly join the footer in any IE browser. I've tried the Holly hack, adding a line-height, relative positioning but to no avail. The stylesheet is embedded in the html file. Here's the link: http://www.emaycreations.net/BuildWebsiteIII/Week6/finalexamPractice.html It looks great in NN, FF and Opera but neither IE 5 nor 6 displays the page correctly. Can anyone help? Mari-Anne in Montana Hi, I have changed my test site so I can display an ad and so that each section is separated into different sections, anyway after changing a few things and fixing a few problems I have found that the problem is happening with my #ContentMain except I have no idea how to fix it. Essentially #ContentMain is appearing before it should be (ignoring the formating and appearing behind everything) when it should be appearing directly after <div id="main1"> everything I have tried, I have had no success with. Also as I have separated the gap I had between the top links and the main picture to add in in ad section (no actual css setting for it as everything I have tried hasn't worked) Where as before my editing the content appeared where it was meant to, so any help would be greatly appreciated and if you need me to explain something in more detail let me know. TorqueSRO - Click Me Am I commenting lines incorrectly? If I prefix a line with two slashes // in the CSS, firefox will ignore it. IE will recognize it and perform the CSS styling. For instance: Code: table.myTable tr td
{
background-color: red;
//background-image: url('mypic.jpg');
}
The TD element will not have a background in firefox. It WILL have the background image in IE. P.S. I am using IE8 on Win7 RC1 (build 7100). Thank you i have a table with several header columns: Code: <table> <tr><th>header 1</th><th>header 2</th><th>header 3</th></tr> <tr><td colspan=3>empty info</td></tr> </table> now i want to put a border inbetween the cells, to do this i simply used: Code:
table th {
border-left:1px solid black;
}
except this adds a border to the left hand side of the far left cell, making the table border of 1px actually 2px if i give that end cell an id can it be ignored when applying the left border? or would i have to add the lines: Code:
table th#idname {
border-left:0px;
}
Two questions: 1, I tried using min-width and it doesnt work with block level elements unless I float them or use position: absolute. What is the correct way to set the width on a block level elements? 2, Now FF also implements: word-wrap: break-word, so thats very good news. However I cant get it to ignore a minimum width. Ie I dont want a div with a min-width containing text to expand when the word-wrap is set and the text is too long. I only want it to expand when other items that are larger then the min-width are put in the div not when text is put in the div. thanks Hello, I have a page with the left margin set to 100. How can I use CSS to make a table have a left margin of 0. I need everything else to be @ left margin 100. So I want to totally ignore the left margin setting only for this table. Hi, I'm working on my first standards compliant site, so I'm a bit of a novice with the CSS required. You can view a test page I have set up at: 67.207.72.2/test_styles.htm (forum rules won't let me include this as a url) The css file for this page is at: 67.207.72.2/css/test_styles.css My issue is that the right column stops short- I'd like the background color to continue down the length of the page. To try to do this, I set the wrapping div on this section (#main_content) of the page with the appropriate background-color. IE displays the page the way I want it to appear, but FF, Safari, and Chrome all do not. I know this means I'm doing it wrong, but I don't know what to change. I've also tried using an image for a background for the #main_content div, and to set a height: 100% property for the column, but neither of those worked. Can anyone point me in the right direction? Thanks for your time. Hi, my xml code is: <room> <features> <pool/> <Aircon/> <Radio/> <DVD/> <beds double="2"/> </features> </room> <room> <features> <pool/> <TV/> <VCR/> <beds twin="1" double="2"/> </features> </room> i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list. This is the code i have so far: features{ } features:before { content:"Features"; font-weight:bold; } beds:before{ content:"Beds: "; } beds[sofa-bed]:after{ content:attr(sofa-bed)" x Sofa-bed "; } beds[double]:after{ content:attr(double)" x Double "; } beds[twin]:after{ content:attr(twin)" x Twin "; } The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed. Any idea's? Hi Guys, Hope you are all well. My page layout is in CSS, however in the middle I have a selection of images and text, based in a standard HTML table. All the images are 300px wide. It works fine on all nice small browsers, but it doesn't look nice on screens with a high resolution, because the images have lots of ****e space round them, and adjusting the background colour looks just as bad. I have tried to apply width: 300px; (as well as max-width: 300px; ) to the td element, but neither FF or IE seems to accept this? Should they accept this? Has anyone got a better more practical layout model for this type of display? either using a fix to the above or 'pure' CSS and ditch the table? Charlie I have a menu constructed <div><ul><li><a><img><p>. The li is margined as 16% to space a given number of links across the page in the 100% div. I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work. Any ideas how I can get the <a> border to surround the <img><p> tags? I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet. The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page. Bottom of the Page http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/ The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code. One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags. The following class style did not produce the <textarea> desired attributes. Code:
pre.CodeExample {
/*background-color: transparent;*/
border: medium inset #CCCCCC;
font-family: "Courier New", Courier, monospace;
margin: 1em 2em 1em 2em;
overflow: auto;
padding: .5em .5em .5em .5em;
white-space: nowrap;
}
Please let me know what are the default CSS attributes for the <pre> and <textarea> tags. Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link. http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed. div.ExampleOutput pre.CodeExample I see that layout on my site is completely broken in IE7... funnyfurniture.net Could anybody help me to fix my css... Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. I am trying to add sub navigation to my footer area. I tried codes below but didnt work. http://www.pearl.ru/isdunyasi/ #footer { width:800px; font-size:10px; color:#aaaaaa; } #footer .navigation{ width:800px; background:#aaaaaa; } #footer .navigation li{ float:left; list-style-type:none; border-right:1px solid #ffffff; white-space:nowrap; } #footer .navigation li a{ display:block; padding:0 5px; font-size:12px; text-transform:uppercase; color: #FFFFFF; } #footer p { padding:0; margin:0; text-align:center; } I have a CSS table that is rendering well with no problem in IE browser but it is skipping three rows in the Firefox browser. I can't figure out why it is skipping those three rows which are rows 2, 4, 8. Here's the code: Code: <body>
<div align="center"><link href="../css/theme2.css" rel="stylesheet" type="text/css">
<tbody><tr>
<td style="background-repeat: no-repeat;" background="/images/chart-header.jpg" height="44"><table width="720" border="0" cellpadding="8" cellspacing="0" height="34">
<tbody><tr>
<td class="chart_head border" width="150" height="34">PROVIDER<span class="provider border">your name here</span></td>
<td class="chart_head border" width="53">PRICE</td>
<td class="chart_head border" width="98">SPACE</td>
<td class="chart_head border" width="150">HOSTING BONUSES</td>
<td class="chart_head border" width="98">REVIEWS</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 1 ----->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150"> </td>
<td class="price border" width="53">$4.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/computer.png" width="16" height="16" />free domain for life</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" />Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!---- Row 2 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$1.98</td>
<td class="space border" width="98">1GB</td>
<td class="bonuses border" width="150"><img src="/images/support.png" alt="hosting support" width="16" height="16" />customer support<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/computer.png" width="16" height="16" /> free domain for life</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 3 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$1.99</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" />money back guarantee<br><img src="/images/support.png" width="16" height="16" />customer support<br><img src="images/panel.png" width="16" height="16" />easy control panel</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!------ Row 4 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$3.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/computer.png" alt="free domain" width="16" height="16" /> free domain & setup<br><img src="/images/software.png" width="16" height="16" /> free website builder<br><img src="images/support.png" width="16" height="16" />customer support</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 5 ------->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$2.49</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/video.png" alt="video hosting" width="16" height="16" />FFMPEG hosting<br><img src="/images/computer.png" width="16" height="16" /> free website transfers<br><img src="images/support.png" width="16" height="16" />customer support</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!------ Row 6 ----->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$4.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" />money back guarantee<br><img src="/images/arrow_up.png" width="16" height="16" /> 99% uptime guarantee<br><img src="images/support.png" width="16" height="16" />24/7 Tech Support</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 7 ----->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$3.49</td>
<td class="space border" width="98">150 GB</td>
<td class="bonuses border" width="150"><img src="/images/transfer.png" alt="transfer" width="16" height="16" />unlimited traffic<br><img src="/images/software.png" width="16" height="16" />website builder<br><img src="images/shopping_cart.png" width="16" height="16" />eCommerce software</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" />Visit Website</a><br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 8 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$3.50</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/security.png" width="16" height="16" /> free security suite <br><img src="images/computer.png" width="16" height="16" /> free domain for life</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 9 ------>
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$6.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/software.png" alt="website builder" width="16" height="16" /> free site builder<br><img src="/images/coins.png" width="16" height="16" /> $50 free Ad Credits<br><img src="images/computer.png" width="16" height="16" />free domain with signup</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
<!----- Row 10 ---->
<tr>
<td style="background-repeat: no-repeat;" background="/images/row-bg.jpg" height="90"><table width="720" border="0" cellpadding="8" cellspacing="0" height="56">
<tbody><tr>
<td class="provider border" width="150">your name here</td>
<td class="price border" width="53">$4.95</td>
<td class="space border" width="98">Unlimited</td>
<td class="bonuses border" width="150"><img src="/images/money_bag.png" alt="money back guarantee" width="16" height="16" /> money back guarantee<br><img src="/images/battery.png" width="16" height="16" /> critical data backup<br><img src="images/computer.png" width="16" height="16" /> free domain</td>
<td class="reviews border" width="98"><img src="/images//web_search.png" width="16" height="16" /> Visit Website<br><img src="/images/pencil.png" width="16" height="16" /> Read Review</td>
</tr>
</tbody></table></td>
</tr>
</body>
</html>
</body>
I set up a class (named "emphasized") to be bold, italic and color #087112. The color is being applied but for some reason the font is not appearing bold or italicized. (See "Introduction to EFT" text.) The bullets (set up in css as id selector "li") are not being styled either (same thing, the color is applied but not the list styling). Since I'm a new user I'm not allowed to put links in my post but you can see the pages he HTML page can be found at tinyurl dot com /da97nb CSS can be found at tinyurl dot com /de9tqe Help! And thank you! Hello, I am trying to style my form inputs, textareas and selects as follows: input, select, textarea { border: solid 6px #ECF0F9; color: #252525; font: normal 0.75em Verdana, Geneva, sans-serif; padding: 0.25em; width: 520px; } I am having a few problems: Firefox 3: 1. The select is narrow than the inputs and textareas; 2. When I click the select the dropdown borders look different ... some are thinner than others. IE 7: 1. The select is narrow than the inputs and textareas; 2. The border of the select is not changed. What am I doing wrong and how can I make the appearance of a Select look the same across various browsers? Can I do this with JQuery? Thanks, Miguel |
|||||||