|
CSS - Questions On Floating Inline Elements
Hi!
Does floating an inline element automatically converts it to a block-level element? If yes, what does this give for an inline element: float: left; display: inline; ? Is it bad practice to float inline elements directly? (img, span, input, and so on). Thanks Similar TutorialsI am working on this site for a client and I can't figure out what the hell I'm doing wrong. It doesn't "work" in FireFox, which of course (I assume) means that IE is simply forgiving my errors, but let's not have a religious debate, let's solve problems. http://www.nolower.com/example.php http://www.nolower.com/css/public.css I am curious about two things: 1) Why is my white background (the main div) not showing up on this page? I thought I had cleared every float, yet, still, there it isn't! 2) Why does the background shadow (the main div), a background image that extends into the padding in IE as you'll see, not show up on FireFox? If anyone can help identify what I've done wrong and explain to me what made it break in CSS, I'd be very grateful. I've been trying to figure out the peculiarities of CSS and its very poor cross-implementation (not that tables were ever cross-implemented well either, oi) for about a year now and I always either make a new mistake or find something I haven't figured out yet. Thanks! Hello, I have the following css css Code: Original - css Code ul#menulist{ position:relative; top:0px; list-style-type:none; margin:0; padding:0; } ul#menulist li{ background-color:#717100; display:inline; margin:0; padding:0 10px; border:0; height:30px; } ul#menulist li a{ text-decoration:none; margin:0; padding:0; border:0; }
A gap is appearing between <li> elements in Opera and FF but not in IE. You can check it here Which is the correct behaviour? How do I remove the gaps between <li> elements in a valid way. Thank you. Maybe an easy one, anyone know how you'd render the the top and bottom border for an inline element in ie? Hi! Is it OK to mix inline and block elements? For example: <imp ... /> <p> .... </p> Thanks Greetings: I need to essentially create a table out of DIV tags. The reason is because I need to grant the user the ability to use scrollbars to navigate in a given cell. The problem I am running into, is when the DIV elements fall outside of the wrapper DIV, they wrap to new lines. The DIV "table" within the HTML table is by design. This is because I cannot create a scrollable subset of elements within TD tags. I am simply looking for the way to ensure the following: 1. The DIV "cells" do not wrap (as they are now) and 2. Scrollbars exist to move horizontally and vertically within the "cell" I've experimented with all sorts of combinations of CSS in several of the elements to no avail. Thanks for any help. The HTML for the table: Code: <table id="optionsMatrixTable" border="1"> <thead id="optionsMatrixTableHead"> <!-- <tr id="optionsMatrixTableHeadRow"></tr> --> <tr class="menuRow" id="optionsMatrixMenuRow"> <td colspan="7"> <label><input type="checkbox" id="autoUpdateTrigger" name="autoUpdateTime"checked="checked" /> Live update every</label> <select id="autoUpdateTime" name="autoUpdateTime"><option value="15000" selected="selected">15</option><option value="30000">30</option><option value="60000">60</option><option value="90000">90</option><option value="120000">120</option></select> seconds | Add field <select id="fieldList" name="" style="width: 250px;"></select> </td> </tr> </thead> <tbody id="optionsMatrixTableBody"> <tr id="optionsMatrixTableBodyCallsRow"> <td colspan="7" id="optionsMatrixTableBodyCallsRowContainer"> <div id="callsRowContainer"> <div id="" class="matrixContainerHeader"><div class="matrixContainer">Calls</div><div class="matrixContainer" id="dec08">Dec (19)</div><div class="matrixContainer" id="jan09">Jan (47)</div><div class="matrixContainer" id="mar09">Mar (110)</div><div class="matrixContainer" id="jun09">Jun (201)</div><div class="matrixContainer" id="sep09">Sep (290)</div><div class="matrixContainer" id="dec09">Dec (380)</div></div> <div id="" class="matrixContainer">65 calls</div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainerFooter"></div> </div> </td> </tr> <tr id="optionsMatrixTableBodyPutsContainer"> <td colspan="7" id="optionsMatrixTableBodyPutsRowContainer"> <div id="putsRowContainer"> <div id="" class="matrixContainerHeader"><span class="matrixContainer">Puts</span><span class="matrixContainer" id="dec08">Dec (19)</span><span class="matrixContainer" id="jan09">Jan (47)</span><span class="matrixContainer" id="mar09">Mar (110)</span><span class="matrixContainer" id="jun09">Jun (201)</span><span class="matrixContainer" id="sep09">Sep (290)</span><span class="matrixContainer" id="dec09">Dec (380)</span></div> <div id="" class="matrixContainer">65 calls</div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainerFooter"></div> </div> </td> </tr> </tbody> <tfoot> <tr class="menuRow" id="optionsMatrixEquityInformation"> <td colspan="7">Underlying: MSFT | Last: 20.83 | Change: 1.93 (0.96%)</td> </tr> </tfoot> </table> And the CSS: Code:
#optionsMatrixContainer { border: 1px solid #000; }
thead { font-weight: bold; }
.menuRow { background-color: #999; }
.loading { background-color:#FFFFCC; font-size: 80% }
.matrixItem { padding: 0 5px 0 5px; }
.matrixContainer { border: 1px solid #000; width: 175px; float: left; margin: 1px}
.matrixContainerHeader { clear: both; }
.matrixContainerFooter { clear: both; }
.matrixItemWrapper { padding: 0; margin: 0; }
.top { border-bottom: 0px; }
.bottom { border-top: 1px dashed #000; }
#callsRowContainer, #putsRowContainer { overflow: scroll; white-space: nowrap; display: block; float: left; clear: right; }
IE5 doesn't support this (trying to apply padding-left to links). Has anyone found a good workaround - Don't really want to put each one inside a DIV Ok, so maybe I don't understand the display attribute quite right. What I'm doing makes sense to me, but it's not working right when displayed. I have a div that is set to display inline (so that I don't have to use floating). Since inline elements can't have height/width attributes, i have another div inside of it, with display set to block. This inner div has height and width attributes. Now, if I place another similar structure (block div inside inline div) in the code, the two outer divs /should/ (in my mind) render side-by-side with the heights and widths of their child div's. When I try it though, it displays everything as block-type. Any ideas? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style type="text/css"> img{ border: 0px black solid; height: 200px; } div.outerholder{ display: inline; } div.innerholder{ text-align: center; height: 200px; width: 267px; margin: 0px; padding: 0px; display: block; } div.centerme{ text-align: center; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="centerme"> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> </body> </html> P.S. It also doesn't center properly in FF, but that's secondary... Since this is my first post here, Hello, everyone! I can't find the answer to this simple question anywhere else, so I hope you can help. When a block-level (by default) element is set to "display: inline", can it still contain other block-level elements? BTW I want to avoid using "display: inline-block" since it is not as well-supported. Thanks a bunch, Rachel Hi all, I've got a problem on my hands. I've been restructuring the site I work on from their FrontPage code to complete XHTML + CSS. I always thought that by using span's that I could make a block level element display inline, but keep all of it's block level uniqueness, such as height and width and other items, but would display right next to other elements. Works great with headers and such but not with boxes. I created a 4 <span> system inside a centered div, figuring they'd all work. But span's don't keep their block level uniqueness, so nothing displayed at all! I fixed 3 of these 4 by putting their background images inside the spans, which I wanted to avoid, but it works so I won't complain on that. Now I have this. Code: <div id="bigdiv"> <span id="maptop"><img src="images/2004/new_main_front/wel_left_top.jpg" alt="Welcome!" /></span><span id="feattop"><img src="images/2004/new_main_front/feat_right_top.png" alt="" /></span><br /> <span id="mapbot"><img src="images/2004/new_main_front/wel_left_bot.jpg" alt="" /></span><span id="featbot">This is where things will go.</span><br /> </div> Span id featbot has no images, it has a repeat-x background so that I can place and change text in there at will. Because of this, and it being a span, it wraps only to the size of the text, which isn't good. I found a display: inline-table (displays as a table, but inline, pretty obvious), which works great in Safari for OS X, but not in IE 6 or Firefox on Windows. How would I structure this correctly so that it actually does work? Here is an image showing the design and how it's set up (ignore the gradients, they're not being used). As you can see where featbot is, that's where text will go, the others are images, so they display right. Suggestions? I'm really confused here... Thanks. Hello, I'm trying to achieve an effect using a background image with an inline element. Specifically, I have certain hyperlinks that I want to display a graphical arrow to the right of. Essentially, it looks something like: Hyperlinked text here >>> Where ">>>" is actually a small graphic approximately 20 pixels wide. I don't want to place the image inline, because it's a visual effect and users don't need to "interact" with it. And it's also tied in with the style of the site, so controlling it through CSS is very attractive. I figured out that if I add about 20 pixels of padding to the right of the ANCHOR element, I can use the graphic as a CSS background image. Looks good in IE5+ and Mozilla-based browsers (not concerned with NS4), as long as the ANCHOR text is on one line. Problem is, when the text of the ANCHOR element breaks across two or more lines, I lose the image in IE. Of course, Mozilla-based browsers handle it perfectly -- it's just Microsoft's little problem child that's giving me fits. Anyone else have any luck using a background image on an inline element that spans two or more lines? I can't find any documented hacks or the like to help me out. Any help is greatly appreciated! -Chris Hello all, sorry if this is a "newb" question, but I am having trouble with the code on my site. The element "#arrival" is not displaying the proper height unless I literally type code in to fill it up the full 400px. I haven't implemented any paragraph styles, I just want to get the basic elements done for this landing page. How would I go about fixing this? Also, do I have to "float" the "#arrival" element? I would like to have the dog house overlap the first div element of the dog jumping (#dog) like in the jpg. Any help would be greatly appreciated. Here is what it should like: http://i33.tinypic.com/2uh7evm.jpg But this is actually what is happening: http://www.amandambruce.com/DROH/index.html Thanks in advance, Amanda p.s. here is the code directly from the source: Code:
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="html://(URL address blocked: See forum rules)/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>
<style type="text/css">
body{
background: url(images/background.jpg) no-repeat top center;}
#contain{
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#menu{ width: 466px;
height: 98px;
float: right;
margin-top: 15px;
}
#dog{ width: 491px;
heigth: 257px;
margin-top: 19px;
margin-left: 22px;
float: left; }
/* margin-top is the menu plus the remaining pixels (19) so,
from the very TOP of the page. I guess you keep "adding"
*/
#community{ float: right;
background: url(images/community_spot.jpg) no-
repeat;
width: 231px;
height: 259px;
margin-top: 19px;
margin-right: 22px;
}
#arrival{
clear: right;
background: url(images/arrivals.png) no-repeat;
width: 800 px;
height: 400 px;
}
p{
font-family: helvetica;
font-size: 12pt;
color: #000000;
padding-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About
button" title="About" border="0"/></a>
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt
button" title="Adopt" border="0"/></a>
<a href="help.html"><img src="images/help_btn.png" alt="Help
button" title="Help DROH" border="0"/></a>
<a href="resources.html"><img src="images/resources_btn.png"
alt="Resources button" title="Resources" border="0"/></a>
<a href="contact.html"><img src="images/contact_btn.png"
alt="Contact button" title="Contact" border="0"/></a>
</div>
<div id="dog">
<img src="images/jumping.jpg" border="0"/> </div>
<div id="community"> </div>
<div id="arrival"> lll
</div></div>
</body>
</html>
Reply With Quote
Hi guys, I have defined 2 headers: <h1> and <h2>. Now, I am unsure about two things: 1/ I have defined all the fonts with em except the body (of course), and the headers <h1> and <h2>. That is cause I include <h1> and <h2> in <divs in which I define let's say font-size: 0.5em. That way, only the text that is not "header text" get changed, which is exactly what i want. Is it a good idea to "block" the font-size of the headers to be able to use them in <divs (some of which the dynamically defined text' font sizes are changed) without never getting altered in font size. 2/ Is it ok to use the headers <h1> and <h2> in other things than headers: What I mean is for example I use the <h2> in a horizontal list (<ul> with display: inline. Is that a commonly accepted usage of headers by you pro CSS developers or should I go by another method? BETTER EXPLANATION BELOW Thank you 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 Is it possible mix inline and block-level elements directly together?? For example: Code: <div....> <input..... /> <-- inline element <ul>... <-- block element </div> Thank you I am using a <dl> list to render dates and titles for a press release page. I want to display the date first and then display the title on the same line next to the date. If the title needs to wrap to more than 1 line, it should not wrap below the date - its left margin should be consistent. Simple example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
dl {
width: 100%;
}
dt, dd {
float: left;
margin: 5px;
}
</style>
</head>
<dl>
<dt>12.24.2006</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi consectetuer cursus lacus. Nullam imperdiet diam sit amet dui. Suspendisse nonummy, ante ut pharetra vehicula, augue neque porta arcu, vel adipiscing lorem augue eu purus. Aenean vulputate pellentesque arcu.</dd>
</dl>
<body>
</body>
</html>
My problem is that with a long title that wraps to more than 1 line, Firefox is putting the <dd> on its own line - it will not float it next to the <dt> as it should. If you change the title to something shoter like Code: <dd>A ShortTitle</dd> It displays as it should. Any ideas why this is happening? I have a floating div with a solid background and a z-index set to 20. I have a form "behind" the div. For some weird reason, the drop down elements on the form "bleed through" the div. Is there any way to fix this? Hi, I have been puzzle for a while now working out how to do this. I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox). Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE. I currently have: <div id="diva"> <object id="face1" width="320" height="110"> <param name="face1" value="face1.swf"> <embed src="face1.swf" width="320" height="110"> </embed> </object> </div> <div id="divb"> <object id="face2" width="320" height="110"> <param name="face2" value="face2.swf"> <embed src="face2.swf" width="320" height="110"> </embed> </object> </div> <div id="clear"></div> With the relavent css: #div1 { background-image : url(images/bg1.gif); width: 381px; height: 346px; float: left; text-align : center; vertical-align : bottom; } #div2 { background-image : url(images/bg2.gif); width: 381px; height: 346px; float: right; text-align: center; vertical-align : bottom; } #clear { clear: both; } img { border: 0px; } #face1{ padding-top: 220px; left: 30px; } #face2{ position: relative; top: 220px; left: 10px; } Effectively what I want is: Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE! Thank you for your time. Hi everybody I'm having a problem (only in IE) with the following layout http://www.ruthwhiteyoga.com/shop/test2/list.htm The left fixed width column, right fixed width column and centre stretchy column all sit inside a holding div (100% wide) The left column is floated left, the right column is floated right and the centre column has margin left and margin right values that clear the two floated columns The problem is that in IE the floated product divs (in the centre column) ignore the margin-right. As soon as the content ends in the right column the product divs spill into the area that the margin should be keeping them out of (you might need to alter the width of your window to see this happening) I think the problem is that I can't give the centre column a width (100%) because it also needs a margin to force the content in - 100% plus 230px for the left column plus 230px for the right column will totally screw up the page Beyond sticking these three columns into a table (something I really really don't want to do) or using percentage for all three columns (so I can give the centre column a width value) is there anything I can do about this. Really appreciate any help Hello all. I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content. The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down! What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing. I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all. I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do... Thanks! I know the difference between block and inline elements which is fundamental to css. What I just recently started seeing was replaced and non-replaced elements. Can someone explain the differences between. I can't grasp the info that's given here. http://www.w3.org/TR/REC-CSS2/visudet.html#q4 |
|||||||