|
CSS - Clear All <b> Elements From An Element's Innerhtml?
Like the title says.
How do I clear all the <b> elements from the innerHTML of a given element, in this case a <li> element? I am trying to completely wipe all the <b> elements and their content between the two <li></li> elements described in the below code dump. Note that there is a <span> element that I want to keep at the end. Thanks! Code:
<li style="padding-top: 0pt;" id="active_videos" class=""><b style="background-color: rgb(255, 255, 255);" class="rtop"><b style="background-color: rgb(102, 153, 204);" class="r1"></b><b style="background-color: rgb(102, 153, 204);" class="r2"></b><b style="background-color: rgb(102, 153, 204);" class="r3"></b><b style="background-color: rgb(102, 153, 204);" class="r4"></b></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b><b style="background-color: rgb(255, 255, 255);" class="rtop"></b>
<span id="sp_videos" style="width: 50px; padding-left: 10px; padding-right: 10px;" class=""><a href="#nogo" id="A5" class="" style="cursor: pointer;" onclick="switch_search_videos();">Videos</a></span>
</li>
Similar TutorialsMy skills are a little suspect when it comes to properly using the clear and float elements in CSS and I have searched around for a good tutorial showing when and when-not to use the elements, but have not found anything that will suffice. Anyone have any pointers or tutorials that you think might be worth checking out? TIA. Can a <form element hold inline elements? For example, Code: <form ... > <input .... /> I'm putting this bare text in this form even if I dunno if it's allowed haha </form> More generally, I know one can NEVER put a block-level element in an inline element. HOWEVER, IS IT ALWAYS possible to put inline elements in block elements ???? Thank you I'm making a page with what amounts to footnotes 1 . Some sources may be referenced more 2 than 2 once 2 , and when any of them is hovered over, I'd like all items in the same class to be highlighted 3 , so when i hover over this little number three 3 , I want this next number three 3 and the actual reference down below to all change color. Is there any to do this without using javascript? (I don't care if it doesn't work in IE6 - I know that has hover issues... 4 ) 1 - Like This! 2 - that one was used 3x 3 - This is red and so are all the little #3's up there 4 - I'm just using Firefox Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim 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 have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! Hello, Consider the following design: <div id="container"> <div id="A" class="A"></div> <div id="B" class="B"></div> </div> And the CSS classes: .A {float:left; clear:left} .B {float:left; clear:right} This does not work well. So I always do as follow: <div id="container"> <div id="A" class="A"></div> <div id="B" class="B"></div> <div id="clear" class="clear"></div> </div> Whe .A {clear:both} This always happens when I have divs inside other divs. Does anyone knows how to solve this? Thanks, Miguel I have a site with a bunch of floats. It looks something like this: [HTML]<div id="nav" style="float: left"> </div> <div id="content"> <div style="float: left"> </div> <div style="float: right"> </div> <br style="clear: both" </div>[/HTML] Now that clear:both also clears #nav instead of the two divs in #content. Is there any way to fix this so it doesn't clear #nav? Can someone explain to my why my "spacer" div is not working (i'm looking in IE7 & Firefox)? Here's the page (I put a 1p border around the "clear" div so that you can see it for testing): http://www.welcome-home-interiors.net/services.php Below is the HTML and CSS... HTML: Code: <body>
<div id="container">
<div id="header">
<?php include('includes/flashHeader.php'); ?>
</div>
<div id="nav">
<?php include('includes/navbar.php'); ?>
</div>
<div id="maincontent">
<div id="mainLeftText">
<p><img src="images/headers/services.gif" alt="SERVICES" width="188" height="49" /></p>
<div id="mainLeft">
<p><span class="header">INTERIOR DESIGN</span><br />
Whether it's simply choosing a paint color or extensively remodeling a kitchen, Welcome Home Interiors can offer you guidance. Space planning and 3D Images are available so that you can visualize your room and make changes before any labor or purchasing is made.</p>
<p><span class="header">REAL ESTATE STAGING</span><br />
"Set the Stage" by rearranging current furnishings and accessories to create your own "model home" - spacious, fresh, and beautiful - exactly what buyers are looking for! As trained professionals, Welcome Home Interiors will assist you in establishing a perfect first impression - an important factor in selling your home for the highest price and in the shortest amount of time. In a 1 to 2 hour consultation we will offer suggestions to enhance your home easily and economically, and leave you the comprehensive list of tasks we've discussed. If you'd prefer, you can enjoy the instant gratification of having us rearrange your space on the spot. We also can add pieces from our inventory to enhance your belongings or even fill your vacant home.</p>
<p><span class="header">ROOM REDESIGN</span><br />
Welcome Home Interiors can give your room a whole new look using the furniture and accessories currently in your home. Want to add a few fresh pieces? Let us provide you with a design plan tailored to meet your lifestyle. We can roll up our sleeves and complete the look for you, or turn over the plan for the "do-it-yourselfers".</p>
<p><span class="header">SHOPPING</span><br />
Do you get overwhelmed by all the options? Or just don't have time to shop? Let's discuss the look you're dreaming of and establish a budget, then Welcome Home Interiors will locate it and bring it to you.</p>
<p><span class="header">YOUR NEW PLACE</span><br />
Welcome Home Interiors will recycle your existing furnishings into your new home. We will offer answers to all of those design questions about paint, window treatments, and finishing touches so you'll soon have the "at home" feeling in your new surroundings.</p>
<p><span class="header">GIFT CERTIFICATES</span><br />
Welcome Home Interiors GIFT CERTIFICATES make wonderful hostess, house warming, wedding, birthday, and special occasion gifts. They can be customized to your needs.</p>
<p><span class="header">FEES</span><br />
Together, Lori and Teri of Welcome Home Interiors are $75.oo an hour for design consulting. Prop rental for real estate staging is quoted per room.</p>
</div>
</div>
<div id="mainRight">
<p><img src="images/indexPic.jpg" alt="Welcome Home Interiors" width="310" height="415" /></p>
</div>
<div class="spacer"> </div>
</div>
</div>
</body>
CSS: Code: html, body {
background: #DACCCC;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0;
color: #6E6E53;
height: 100%;
line-height: 1.5em;
}
a:link, a:visited, a:active {
text-decoration: underline;
color: #6E5256;
}
a:hover {
text-decoration: none;
color: #7F0A32;
}
#container {
background: #000;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
height: 100%;
}
#header {
background-color: #FFF;
width: 100%;
height: 272px;
margin: 0px;
padding: 0px;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav {
width: 100%;
height: 32px;
background: url(../images/nav/navLeftFade.jpg) #7F0A32 top left no-repeat;
margin: 0px;
padding: 0px;
text-align: left;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav img {
margin: 0px;
padding: 0px;
width: 126px;
height: 32px;
vertical-align: top;
}
#maincontent {
background-color: #CAD49F;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
overflow: visible;
}
#mainLeftText {
width: 350px;
float: left;
padding: 20px 0px 0px 10px;
margin: 0;
overflow: hidden;
}
#mainLeft {
width: 320px;
padding: 0px 0px 0px 30px;
margin: 0;
float:left;
}
#mainRight {
width: 350px;
float: right;
padding: 50px 5px 0px 0px;
margin: 0px;
overflow: hidden;
}
.header {
font-weight: bold;
text-align: left;
text-decoration: underline;
margin-bottom: 0px;
padding-bottom: 0px;
}
.spacer {
clear: both;
border: 1px solid;
}
/* NAVIGATION ROLLOVERS */
a#home:link, a#home:visited, a#home:active {
margin-left: 150px;
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/home.gif);
}
a#home:hover {
margin-left: 150px;
background-position: -126px 0px;
}
a#services:link, a#services:visited, a#services:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/services.gif);
}
a#services:hover {
background-position: -126px 0px;
}
a#gallery:link, a#gallery:visited, a#gallery:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/gallery.gif);
}
a#gallery:hover {
background-position: -126px 0px;
}
a#testimonials:link, a#testimonials:visited, a#testimonials:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/testimonials.gif);
}
a#testimonials:hover {
background-position: -126px 0px;
}
a#contact:link, a#contact:visited, a#contact:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/contact.gif);
}
a#contact:hover {
background-position: -126px 0px;
}
Thanks!... I've got a div that incorporates some inline styling. Looks fine on a blank page, but when I insert it into a more complex page it inherits all the styling of the stylesheets. Is there anyway to I can have this div ignore all inherited styling and just format itself according to browser defaults and its own inline styling? Hello, The divs numbered #4(extra2) and #5(navigation2) cannot give way to other divs . How can I clear the other divs? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Template 8</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color:#981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#navigation2{background:#CC33FF}
div#extra{background:#FF8539}
div#extra2{background:#996633}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#navigation2{float:left;width:150px;margin:170px 0 0 -150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#extra2{float:left;width:150px;margin:170px 0 0 -700px}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>website name</h1>
</div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very column long make </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long fillercolumn fill fill very silly column silly silly fill fill long filler column fill fill very silly column silly silly fill fill long filler column fill fill very silly column silly silly fill fill long filler </p>
</div>
<div id="navigation2">
<p><strong>5) Cannot clear above div (id=Navigation).</strong> cannot clear above div, this div should be below the div NAVIGATION</p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> column long make silly silly filler silly very very very long column filler fill make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very </p>
</div>
<div id="extra2">
<p><strong>4) Cannot clear above div (id=EXTRA).</strong> cannot clear above div, this div should be below the div EXTRA </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
I'm using float:left for my left nav bar, and then clear:both for my footer. Trouble is, I need to use some content boxes that will be using floats and then clears, however, when I use clear:both in my content box, it clears EVERYTHING (meaning it pushes below my navbar, because the navbar is quite long). Is there a workaround or am I using floats/clear wrong? TIA Javashackgirl I'm trying to get a container div to stretch to the size of it's contents. Note, #navigation and #title will be for aesthetics only and aren't being used yet. Am I wrong in thinking that the clear has to go in the containing div, not the component divs? Anyway, I've tried both and neither works. I have: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>My Blog</title>
</head>
<body>
<div id="title">
<!-- title -->
</div>
<div id="navigation">
<!-- search -->
<!-- jumpbox -->
<!-- subscription_and_rss_images -->
</div>
<div style="border:3px solid red; clear:both">
<div class="leftcolumn" style="border:3px solid green;">
<!-- menu --> <!-- leave this tag in for menu in Admin CP -->
<!-- referrers -->
<!-- photo -->
<!-- calendar -->
<!-- baby -->
</div>
<div class="rightcolumn" style="border:3px solid blue;">
<!-- content -->
</div>
</div>
<div style="border:3px solid yellow;">
<!-- credit -->
</div>
</body>
</html>
And CSS: Code: div.leftcolumn{
float: left;
width: 200px;
}
div.rightcolumn{
position: relative;
margin-left: 205px;
padding-left: 5px;
border-left: 1px solid #222222;
}
This produces: I want to control innerHTML content of another frame. It works at IE, but not in Firefox. Here is my simplifed sample link: http://lcwsk.sinaman.com/Browse.htm Can anyone help make it works both in IE and Firefox? Thanks! I have some simple code that works in all recent browsers, including IE8+. But with some people out there still using IE7, for which it does something odd, and I've been asked to make it work with that as well. I've dumbed it down to it's basics, and it's just easiest to see with a visual. http://www.poweredpages.com/test.php I have four boxes, labeled 1 through 4. It's supposed to wrap at 3, with 4 to the right of that box. In IE7, It wraps at 3 (correctly, because of the clear), but then box 4, which has a float:left after the cleared 3 box, jumps back up to the 1 and 2 row. Any thoughts on how do get this working with the least amount of editing would be appreciated. In real life, I have the left boxes as a class "label" and the right boxes as another class "input", so if I could just add something to one of these classes and be done w/ it, that would be great. Of course, I could put another entire DIV around each row to fix this, but that would require altering a whole bunch of code. Thanks! Prof Here's the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="clear:both;width:50px;float:left;border:1px solid red">1st</div>
<div style="float:left;border:1px solid green">2nd</div>
<div style="clear:both;width:50px;float:left;border:1px solid blue">3rd</div>
<div style="float:left;border:1px solid orange">4th</div>
</body>
</html>
Hi, Im not sure whats going wrong with this, but I have two DIV elements on the page: 1st div "googleMap" CSS for googleMap: #googleMap { height: 300px; width: 500px; float: left; } 2nd div "page_right" CSS for page_right: #page_right { width: 300px; clear: left; float: right; } Could someone please tell me why page_right DIV is not clearing the googleMap div? I've just about had enough so hope some kind person will no the answer!! Here is the live page (showing the flaw): belvoir-mortgages.co.uk/contact.php Thanks Lee Does anyone know why the clear: left isn't working on firefox 1.0 on this page. Generic Page with floating divs and then clearing them for a new line. http://section31.us/temp/float_boxes.html Am I doing something wrong or is this a bug? Hello, I have used the containment hack in several of my projects. However I found examples where they use "<div style="clear:both"></div>". The result is the same. So which one should I use? I can't figure out how to clear the float for the columns with the text column 1 and 2. If the other columns dont have a lot of text then the footer defaults to just under the image so where that 1+2 start. Any ideas plase? Code: <div id="container">
<div id="home_col_1">
<img src="images/holder_slideshow.png" alt="" width="446" height="365" />
<div id="home_col_1_1">
column 1<br />
column 1<br />
column 1<br />
column 1<br />
column 1
</div>
<div id="home_col_1_2">
<p> column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
</div>
</div>
<div id="home_col_2">
<p>column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3</p>
</div>
<div id="home_quicksearch">
Search Box Here
</div>
<div id="home_col_3">
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
</div>
<div id="home_col_4">
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
</div>
<div class="clear_floats"></div>
</div>
Code: #container { width: 986px; margin:0 auto; }
#home_col_1 { width:446px; height:365px; float:left; }
#home_col_1_1 { width:207px; float:left; padding:0 10px 0 0; border-right:#CECECE 1px solid; margin-top:10px; }
#home_col_1_2 { width:207px; float:left; padding:0 10px 0 10px; border-right:#CECECE 1px solid; margin-top:10px; }
#home_col_2 { width:171px; float:left; padding:10px 10px 0 10px; border-right:#CECECE 1px solid; }
#home_col_3 { width:165px; float:left; padding:0 10px; border-right:#CECECE 1px solid; }
#home_col_4 { width:142px; float:left; padding:0 10px; }
#home_quicksearch { width:328px; padding:10px 10px 10px 0; float:left; border-bottom:#CECECE 1px solid; margin:0 0 10px 10px;
background-color:#FFFFFF; }
#footer { width: 966px; margin:0 auto; padding:10px; margin-top:10px; border-top:#CECECE 1px solid; }
|
|||||||