|
CSS - Applying Padding To Inline Elements For Ie5?
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 Similar TutorialsI have a few styles that I was to apply to anything that has a class="title". These work fine when I say, for example: Code: <div class="title">This is my title</div> but, for some reason, they don't work when I use them like so: Code: <table border="0" cellspacing="0" cellpadding="5" class="maintable">
<tr>
<td>
<div class="title">News Updates:</div>
</td>
</tr>
</table>
Can anyone explain to me why this is? If so, how should I go about getting around it? I'm new to CSS (Other then very basic CSS) Anyway I have a menu which uses a tags, that also have a background image. I am adding in the background image with CSS, I have the display set to inline-block as block would put everything to the next line and inline would not allow for the image to show though in full (only enough for the text inside the link. Anyway using display: inline-block it seems to put padding on the links, is there a way to remove this? i want the background images from the links to be next to each other with no spacing or padding. My code: #buttonBackground { display: inline-block; background-image:url(/media/images/button_background.jpg); background-repeat:no-repeat; width: 113px; padding-top: 4px; height: 23px; text-align:center; vertical-align: bottom; (This isn't working either?) } and a sample link: <a href="default.asp" id="buttonBackground">HOME</a> Anyone able to help me remove the padding surronding the a tag? 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; }
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 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. 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 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 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... 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 This is driving me crazy!!! The headings elements (h1, h2, etc) have this padding or margins above them, and I can't get rid of it. here's an example http://my-test-site.comli.com/high-type.html I've tried to reset the padding and margins to 0. With no change. Any ideas 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. Hey all... I'm doing some testing in Firefox, and I've encountered a problem. Code: <div style="background-color: #FF9801; height: 33px; width: 99px; text-align: center; display: inline; padding-top: 8px;">Help</div> My intention here is to create a box that is 99px high, 33px wide, and with the text in the middle. In IE6, this appears to be fine. However, when testing it out in FF, I don't get the spacing that I want. Here's the kicker: When I add the float element, (float: left), it comes out the way I want it to. But it does seem to add a bit of whitespace above and to the left of it. I don't want the whitespace! Can anyone help with a compromise that will work in both browsers? My CSS usage has been pretty light until up to this issue. Thanks in advance! Hi guys, as you all know when you got lot of text in a <button> element, the padding (left and right) of the latter becomes very annoying. Any way of removing it? P.S. I am fully aware of the fact that setting margin:0 and padding:0 has no effect at all. Thank you 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 Hello, Having a bit of trouble with a <div>. I am trying to have an <img> and a <p> displayed side by side. I have tried to have two child <div> elements displayed inline, that didn't work, floating <div> elements didn't seem to do it either and then i removed the child elements and just had an <img> and a <p> with the <img style="float:left"> but, again, no joy. Does anyone have any suggestions? Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey |
|||||||