|
CSS - Cellspacing Override For Css Padding
Is there a way to override CSS padding to use cellpadding instead or can inheritance be prevented? I have a CMS and I want editors to still be able to use the cellpadding attribute rather than make a class for each desired padding.
I am not able to set a defining ID or class on the table as it's generated with our CMS. The relevant tables are contained in a defined parent class. Code:
TD{ padding: 0px; }
.custom TD{ /*padding: ignore;*/ }
Code:
<span class="custom">
<table cellpadding="5">
...
</table>
<span>
Similar Tutorialshi, i'm designing my page and i would like my tables to look similarily as Dev Shed Forums table in the "main menu" (the starting page). i cannot find out how this is done: the first table row uses cellspacing, the second row doesn't use it and the third row uses it again. (where 1st row is where "Forum,Last Post,Threads,Posts" is written, 2nd with "Programming Languages" and 3rd with "PHP Development") well, maybe it's not done this way at all (i tried to decode the HTML code but it was too complicated for me), but i would like to ask if it can be done somehow this way (eg: to define a table with cellspacing and then override this setting in one specific row with some CSS rule) or i have to use more tables to achieve this effect? it came in to my mind when i saw something similar in the Dev Shed Forum's HTML code: Code: <td style="padding: 0px;"> is there something similar which influences cellspacing? thank you Is something conformable to cellspacing-color? Or can I have change cellspace color? Hi, At long last, I've managed to figure out how to emulate the HTML cellspacing attribute in CSS. So I thought that I'd post it here so everyone can use it. Here's the code: Code:
.cellspacing td {
border-right : 3px solid #FFF;
}
.cellspacing td:last-child {
border-right : 0px;
}
.cellspacing th {
border-right : 3px solid #FFF;
}
.cellspacing th:last-child {
border-right : 0px;
}
Just add the cellspacing class to a table tag and it creates a white 3px border between each column throughout the table. It's a shame the CSS designers haven't made this easier by having a proper built-in cellspacing attribute, but until they do, this is the next best thing, I guess. Enjoy. Debbie i found selector "padding" but nothing which may be analog of cellspacing. Any directions? please check this page http://www.mueddat.com/index2.php i'm using in the table tag where the select input exist the following cellspacing attribute Code: <table width="97%" align="center" cellspacing="4"> why it doesn't appear in Mozilla Firefox? 2nd question How to change the color of the select box blue area (where the arrow is) from light blue to brown? Hello all, I am encountering a minor bug working on a page, and it is driving me insane. Anyway, I have a table organized as such: <table height="100%" border="0" cellpadding="0" cellspacing="0"> . . . </table> Now, I wanted to convert this to use CSS so that it would be HTML 4.01 compliant. So, I used a CSS document outlined like so: .maintable { padding: 0px; border-spacing: 0px; border: 0px; height: 100%; } and then changed my main code to this: <table class="maintable"> . . . </table> Anyway, the height and border seem to be "moving over" fine, but it is clear to me that the padding and spacing are not. In any browsers that I use, I get an output as if padding and spacing were set to default values... I tried using the collapse method, that failed to. I usually miss minor things, so what is my stupid error? Thanks I am constructing a table (needs to be table) where the first 2 columns of data need to have no spacing in between them. However I want the rest of the columns to have spacing of say 4px. Is this possible? I cant create a table within a table to solve the problem either because all of the cells in the table are related. I tried setting the table to have no spacing and then applying margins to the cells i want to have margins, but no margins were applied. Any ideas? Hi! I'm wondering what would the Cellpadding & Cellspacing be in CSS?? THanks, FletchSOD Hi I'm sure this is an easy one, but I can't figure out how to create a table style sheet that does exactly what the following html does Code: <table width="100" border="0" cellspacing="0" cellpadding="0" bgcolor="blue"> <tr> <td bgcolor="yellow"></td> </tr> </table> I tried many different variations using the table-specific keys documented here but am unable to achieve the above effect. What's happening is that the yellow background of the "td.outlineCollapsed" style (below) has a 1 pixel inset on all sides from the edges of the "table.outlineBase" style box. With the html, by contrast, the yellow background of the <td> exactly overlaps the blue background of the containing table. The exact overlap is what I'm trying to acheive. Could someone take a look and tell me what I'm doing wrong? Thanks Ken Here's the css: Code:
table.outlineBase {
background-color: #888888;
width: 100%;
height: 20px;
/*
tried all of the following in many
different combinations. Nothing worked.
border-style: hidden;
border-collapse: collapse;
border-spacing: 0px;
border: outset 0px;
border-spacing: 0px;
border: inset 0px;
*/
}
table.outlineBase:hover {
cursor: pointer;
}
td.outlineCollapsed {
background-color: yellow;
width: 25px;
height: 20px;
}
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 Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? I'm new to CSS, and I've been working with Wordpress. While learning CSS, I'm experimenting with various things in HTML, Php, and Javascript. I'm often finding myself wanting to override the CSS settings implemented by Wordpress. However, I don't want the settings overridden for every page - just the particular one I'm working on. In other cases, I only want the CSS overridden for a few lines of code (such as font type). This kind of problem is making me think writing customized CSS/Php is worth exploring. I spend twenty minutes coding something to spend an hour trying to integrate it with Wordpress. A quick question about how to over-ride style on the <a> tag: I have the following css: Code:
#menu a {
display:block;
padding:8px 12px;
background:#5a5152 url(images/seperator.gif) bottom right no-repeat;
color:#ccc;
text-decoration:none;
}
#menu a:hover {
background:#2580a2 url(images/hover.gif) bottom center no-repeat;
color:#fff;
}
I want to override this for the last menu item to get rid of the separator on the last menu item on the right - but want to keep everything else. I have tried the following which does what I want but I lose the hover effect: Code: <a style="clear:both; display:block; padding:8px 12px; background:#5a5152 bottom right no-repeat; color:#ccc; text-decoration:none;" href="contact.php" title="Contact Us">CONTACT US</a> How do I add in the hover to the above override or is there abetter way to do this? I have setup a style for the <A> Tag which will be used throughout the site. Code: a {
cursor:pointer;
color: #8E9300;
text-decoration: underline;
}
I have one div on one of the pages that contains some links, on this one div I would like to redefine the <a> tag or override it but not affect the <a> tags on the rest of the site. How can I do this? Thanks. I have 2 css files. One main one that I am using Code: input[type="text"], select
{
background: #FFF !important;
}
I use that mainly for Firefox as without it the form fields are yellow. but I would like to override that have have one form field on this one page stick out and have it like this. Code: .CCfield {
color: Black;
background: #FFFF66;
}
Is this doable? How can I override it for this one field? Thanks Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> I have the following in my css: Code:
input, textarea, select {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #ECEEF1;
border: 1px solid #505355;
color: #505355;
margin: 3px;
font-size: 10px;
}
input:hover, textarea:hover, select:hover {
background-color: #FFE7DB;
border: 1px solid #D64800;
color: #D64800;
}
and then I have something like this on my page: <input name="rate" type="radio" value=6 onclick="this.form.submit()" class="rateradio" /> How can I make the class selector 'rateradio' to override the background-color and border options in the input and input:hover css? I have some inputs wich I want that css to work but some inputs I want to override the background color and the border, how can I do it? I have a CSS that manages my site, but I've got a list of links that are dynamicly created with php/mysql. I have two lists that I would like to use non-CSS colors for their links. Is there a way to override the CSS to force certain colors on the links? I've tried using the normal <p> or style settings, but the main links portion of the CSS always takes precedence and I can't seem to make it work for me. A little background for you...the lists are as follows: 1 - a list of currently open jobs in the company 2 - a list of all jobs in the company Both lists are also links to the job descriptions. List 1 is created based on whether the database has the job flagged as open, so its never static. List 2 is not static either because it lists the jobs in the database. I made a few tables using the old HTML method o setting table attributes. However I later discovered css for tables and wrote the following and it works well with some new tables i have made: Code: table
{
border-collapse: collapse;
border-spacing: 0px;
}
Now all my old tables follow the above style (quite naturally). How can I override the css styles for the older tables? how do i set border-spacing to its default value? thanks |
|||||||