|
CSS - Cellpadding In Css Classes
I cant seem to get my cellpadding working for tables, what do i have to input. I have tried:
.header {background:#2D759F; width:100%; cellpadding:5} all the others work, jus the cellpadding which does not. Similar Tutorialsi found selector "padding" but nothing which may be analog of cellspacing. Any directions? 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 EDIT: Border problem solved by adding a border-style. I have some (table)border and (cell)padding commands that are not responding in any significant way. Let me first explain what you should see. Then show you the code. It should appear is a black rectangle. Inside this are cells which all have an area of 3px around them. The cells are colored but the area around them should be white (set default color if possible). This white padding should also be right inside the black border, as well as between all cells equally. I may be trying to achieve this the wrong way; I am new to using padding/spacing/border at all, let alone the changes in CSS. Here's the code: CSS: Code:
.results_main_table
{
width: 536px;
height: 101px;
border: 1px;
border-color: #000000;
border-style: solid; #just added to fix borders
}
.results_main_cell
{
width: 534px;
height: 101px;
}
.results_content_table
{
width: 534px;
height: 99px;
}
.results_pic_bg
{
height: 93px;
width: 93px;
background-color: #F2F2F2;
padding: 3px;
}
.results_infobar_short
{
width: 214px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}
.results_infobar_medium
{
width: 215px;
height: 21px;
background-color: #CCCCCC;
padding: 3px;
}
.results_infobar_long
{
width: 350px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}
.results_infobar_fav
{
width: 79px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}
HTML: Code: <table class="results_main_table"> <tr> <td class="results_main_cell"> <table class="results_content_table"> <tr> <td class="results_pic_bg" rowspan="3"></td> <td class="results_infobar_short"> [username]</td> <td class="results_infobar_medium"> [age] years old</td> </tr> <tr> <td class="results_infobar_short"> [sex_stat]</td> <td class="results_infobar_medium"> Body Type: [body]</td> </tr> <tr> <td class="results_infobar_long"> Location: [city], [state/province], [CC]</td> <td class="results_infobar_fav"><center>ADD to FAV</center></td> </tr> </table> </td> </tr> </table> Hi! I'm wondering what would the Cellpadding & Cellspacing be in CSS?? THanks, FletchSOD So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it. I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute? Hey guys, I'm having trouble with the cellpadding on a "tab" on my page. I've got a div that has a table with a single cell inside it. The table is left justified in the div and has a black background. I can't give the table cell a fixed width because a word of variable length will appear inside it. The text in the cell appears aligned center and valigned middle, with 10 pixels of padding on the left and right sides. This appears exactly right in every browser but IE 6 on Windows, where the left and right padding is lost, and the word is bumped right up to the edge of the black table cell. How can I fix this? Thanks a lot. Here's the page: http://aoi2.keysandwings.com/about.php Here's the HTML: Code: <div class="relativetitle"">
<table class="titletable">
<tr>
<td align="center" valign="middle">About</td>
</tr>
</table>
</div>
And here's the CSS: Code: .relativetitle {
position: relative;
margin-left: auto;
margin-right: auto;
z-index: 1;
width: 682px;
height: 30px;
color: white;
background: transparent;
font-size: larger;
text-align: left
}
.titletable {
height: 100%;
padding-left: 10px;
padding-right: 10px;
background: black
}
Hello! What is the equivalent of the cellpadding="0" in CSS? I use Code: padding:0; ,but it seems that it doesn't work. Any ideas? Sincerely Artashes ok here is the question. i have done two websites, i have tested them out in multiple browsers and all seemed fine. When i test them in IE the text runs into to image. I am using div classes to control the image. Any insight on why this is happening would be greatly appreciated and hints or solutions would be more then welcomed. I am banging my head against a will trying to figure this out. Thankyou All Hi people, critique this piece of code for a yellowheader and a blue id and tell me what the problem is. It seems both end up as black <style type="text/css"> h3.Big Bird{color:yellow;}/*Class Font#CookieM{color:blue;}/*Id*/ </style> <h3 class="BigBird">Big Bird</h3> <font Id="CookieM">Cookie Monster</Id> Hope to hear from you soon. kaz I've been trying to clean up my code and in the past I never seemed to make use of predefined html element tags like the H1-H6...and instead I just find that I just make a new class but I was wondering if there is anything wrong with using the H-tags in place of a few classes? Obviously it would have to make logical sense to use, but I'm wondering if there has been any changes in how browsers use those tags in the past few years as I wouldn't want to be using an outdated, soon to be phased out element. heya this doesnt seem to work the second class complety overwrites the first ? id like it to append the second one ? any ideas eg main.css .main-header-back { background-repeat: no-repeat; background-position: 793px 0px; overflow: hidden; } index.php .main-header-back { background-image:url('/images/main/image.gif'); } If i set an id to a transition like so: Code:
Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
Then it works fine, but if i use the class ".trans" instead, it doesnt. Im looking for a way to use a style more than once on a page and classes are the only way i know how to do it. Any help? I am very confused how best to define my style sheet for a given goal. Here is what I need to do: I need to have various styles of tables. Some whose text is centered (like the table header), some whose text is left justified. I need to be able to define link colors for each different type of table (i.e. a.link, a.active, etc). I just don't know how to proceed. It seems that I would do something like Code:
TD.centered {
text-align: center;
}
TD.left{
text-align: left;
}
But then I don't know how to define the link colors. Would I have to do something like Code:
.centered a:link {
color: #000000;
}
Isn't there a way I can create one selector that contains everything without having to have all these separate entries? Any help is vastly appreciated! Also, I am confused by the use of SPAN. Is this still used? Or is it best to specify the class in the element tag? thanks, brian Hi, I'm trying to use multiple classes: div class="class1 class2". As usual, IE 6 does all but not what you would expect. Please allow me to post a code snippet: Code:
<html>
<head>
<style type="text/css">
.class1 {
background-color: red;
}
.class2 {
background-color: green;
}
.class1.class2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="class1">
.class1 -- should be red
</div>
<div class="class1 class2">
.class1.class2 -- should be yellow
</div>
<div class="class2">
.class2 -- should be green
</div>
</body>
</html>
Sadly, the rule for .class1.class2 is also applied to the third div, where it should clearly NOT apply, so it is yellow instead of green. I know that using subclasses "is not safe for IE", as is CSS in general -- but is there a workaround that doesn't force me to abandon the technique? Thank you, answers appreciated! Hi, This is such a simple thing and it's causing so much grief. For an assignment in our class we are creating a calendar with tables with CSS, and one element in the table (the heading) and certain table data cells themselves must have the same class tag, but they have to do different things to their respective cells. In the heading cells i want a white background and in the other regular cells it must use a jpeg. The regular cells with the jpeg are working fine, but i can't get the buggers up top to go white. Here is my code: Code:
td.prev {background-image: url(back.jpg)}
td.next {background-image: url(back.jpg)}
th.prev {background-color: white}
th.prev{background-color: white}
Any ideas? thanks in advance. i have <div class="h">this is type 1</div> <div class="h offer">this is type 1 with backgroundA</div> <div class="hd">this is type 2</div> <div class="hd offer">this is type 2 with backgroundB</div> how do I achieve the CSS for accessing only divs with a class of h AND offer? thanks in advance Hello, I have 3 type of h2 headers on my web site: 1 - Post titles on a blog (Ex: <h2>New documents available for download</h2>) 2 - Content section title (Ex: <h2>Contacts</h2>) 3 - Sidebar content section title (Ex: <h2>Publicity</h2>) I am trying to build my CSS to style the 3 different headers but I am having some problems. I could use: h2.Post, h2.Content and h2.Sidebar or: h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar or even: h2 (for Post), h2.Content for content and then h2.Sidebar to change Content class so it fits Sidebar. So a section in sidebar would be: <h2 class = "Content Sidebar">Publicity</h2> Could someone help me in deciding how should I structure my classes? Thank You, Miguel Hello, I am creating a message to display on my web sites. The HTML markup is as follows: <div class="Error"> <h3> <img id="Icon" src="Images/Error_Icon.gif" alt="Icon" style="border-width: 0px;"> <span>Header</span> </h3> <p>Description</p> </div> And the CSS: div.Error { background-color: #FFD9D9; border: solid 1px #FF9595; padding: 0.4em; position: relative; min-height: 1.25em; width: 120px; } div.Error h3 {} div.Error h3 img {vertical-align: middle;} div.Error h3 span {color: #B30000; font: bold 1.0em Georgia, Geneva, sans-serif;} div.Error p {color: #B30000; font: normal 0.8em Arial, Geneva, sans-serif; I have 3 types of messages: Warning, Error and Success. The only difference between the CSS of each message is the colors properties. Should I use a class named Message to define all common properties and then 3 other classes: Error, Warning and success to define the color properties: <div class="Message Error"> Or should I use three different classes? How is this usually done? Any other advice on how I am building my message is welcome to. Thanks, Miguel I have encountered a really annoying bug in IE6 and would be very interested to know if anyone else hase encountered it and found a solution. Look at the following example: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> .class1,.class2,.class3 { border: 1px solid black; width:400px; line-height: 100px; text-align: center; } .class1 { background: none; } .class2 { background: red; } .class3 { background: blue; } .class1.class2.class3 { background: black; } </style> </head> <body> <div class="class1">Test Content 1</div> <div class="class2">Test Content 2</div> <div class="class3">Test Content 3</div> <div class="class1 class2 class3">Test Content 4</div> </body> </html> The four divs should all be different colours as follows: div1: transparent/white div2: red div3: blue div4: black However, both divs 3 & 4 are black. The rule: .class1.class2.class3 { background: black; } is incorrectly effecting divs with only .class3. Any ideas? www. cooperworkskilns.com/kilns.html Two things: The .section classes (images and borders in the middle) are not stretching the width of the parent <div> in IE. Do I have to specify a width with IE? The margin below the images in the .section classes is greater than what it should be. (noticeable when compared to FF) CSS: #subnav { margin: 15px 0px 0px 10px; padding:0px; } .section { width: 51em; border: solid #999999 1px; padding: 10px; margin: 0 0 10px 0; overflow:hidden; text-align:left; } .section img, img a { float: left; border: solid #999999 1px; margin: 0 10px 0 0; } |
|||||||