|
CSS - Table Elements And Css
I am new to css and just had a quick question. (please forgive me for any invalid lingo... hopefully you can make sense of my question)
I am creating a dynamic calendar of events page, the calendar will be built using a table. If I put "table.calendar" in my style sheet to format the overall table, and I have th.calendar, td.calendar, do I have to add the "class" property to th or td, or will they automatically be in the calendar class because they are part of the table. For example... Do I do this? Code: <table class="calendar"> <tr><th></th></tr> <tr><td></td></tr> </table> Or this? Code: <table class="calendar"> <tr><th class="calendar"></th></tr> <tr><td class="calendar"></td></tr> </table> Similar TutorialsI want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct? So if I have: Code:
#header { width: 900px; }
And then something like this: Code: <div id="header"> <table> <tr> <td> </td> </tr> </table> </div> I'd like to then have something like: Code:
#header.table,td {padding-left: 10px;}
Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right? Hi, How to create a rounded table, which has the td elements also rounded? Thank you I have two problems. First issue is that I cant seem to get a background image to repeat in IE when it works fine in FF. I tried to reproduce the bug on another server using the same exact CSS and to my shock, the background repeat rule works fine. So, it doesnt work on my server at home with a much more complicated stylesheet (albiet the reference to the background image and repeat rule are exactly the same .. and simple) .. but when I port the same stylesheet to another server with simpler markup, boom, it works fine. Cant wrap my head around this one. Is there a commonly known IE bug/problem with background image/CSS/background-repeat rules? My site that does not work through IE shows the image once .. and thats it. No repeating like tell it to. My other issue (if youre still interested) is a problem with the CSS command: Code: table
{
empty-cells: show;
}
which does not work at all. As you can see on this page in IE, (http://www.doublethinkdesigns.com/development/ ) ive specified the rule, but lo and behold, the cells are still missing. Can someone kindly lend me some perspective perhaps? Thank you much in advance. 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'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page. The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows: Code: .w3type{color: black; background-color: #FFCE6B;}
Code: .w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}
I add this class to a <td> tag: Code: <td class="w3type"> and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it. The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code? If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges). Thanks for any help hello everyone, 'tis my frist post... Just had'a quick question I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff. However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible? here's the code, l was trying to get to work with this: Code:
<HTML>
<HEAD>
<style>
/*Left searchBar Cap*/
td.leftCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x1.gif');
background-position: 0px 0px;
width: 28;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x3.gif');
background-position: 0px 0px;
width: 34;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Top bar*/
td.searchTop{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x2.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
width: 425;
height: 16;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Bottom*/
td.searchBottom{
background-color: #c0c0c0;
background-image: url('images/searchBar_3x1.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
width: 425;
height: 15;
}
/*center of searchBar*/
td.searchCen{
background-color: limegreen;
background-position: 0px 0px;
width: 425;
height: 19;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
BODY {
background-color: #c0c0c0;
background-attachment: scroll;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
/*input*/
.input {
background-image: url('images/searchBar_2x1.gif');
color: #191919
border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
font-family: Comic Sans MS (cursive);
font-weight: extra-bold;
font-size: 10pt;
width: 425;
height: 19;
}
</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>
<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">
<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>
</BODY>
</HTML>
Thanks for your help! Samantha G. I don't know if that is what one would call this topic...but I'm having a lot of trouble understanding "referencing elements" in CSS. for example what is the difference between: Code: ul li { }
and Code: li ul{ }
Or let's say I have: Code: <div id="bottom"> <a id="copy" href="http://www.whatever.com">Whatever</a><br> <a class="credits" href="http://www.anothersite.com">Another Site</a><br> Some other random text </div> What is the CSS to reference the link with id="copy"? or the link with class="credits"? Many menus use nested <ul>s and <li>s and have IDs or classes for them as well. I'm very confused as to the syntax to reference an <li> in a <ul> as opposed to a <ul> in an <li>. Anyone have links to some documentation on this? Hi everyone Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics: http://www.crashingbydesign.com.au/newsite/ The relevant code is as follows: Code:
<div id="content_container">
<div id="belowbg">
<div id="left">
<div id="h3lft">
<h3>Welcome</h3>
</div>
<div id="contentlft">
<p>Lorem ipsum ...</p>
</div>
<div id="footlft"></div>
</div>
<div id="right">
<div id="h3rght">
<h3>Latest</h3>
</div>
<div id="contentrght">
<p>Lorem ipsum ...</p>
</div>
<div id="footrght"></div>
</div>
</div>
<div id="footer">
<p>text</p>
</div>
</div>
The relevant CSS is as follows: Code:
#content_container {
position: absolute;
top: 406px;
left: 50%;
margin: 0 0 0 -372px;
width: 742px;
height: auto;
z-index: 10;
}
#belowbg {
padding: 0 11px 11px 11px;
width: 720px;
height: auto;
background-color: #313131;
}
/*hack to ensure that Mozilla encloses the floats with the #belowbg div*/
#belowbg:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#left {
float: left;
width: 481px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3lft {
width: 481px;
height: 25px;
background: url(images/welcomehd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentlft {
width: 459px;
height: auto;
background-color: #293942;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footlft {
width: 481px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/welcomeft.gif) no-repeat;
display: block;
}
#right {
float: right;
width: 230px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3rght {
width: 230px;
height: 25px;
background: url(images/latesthd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentrght {
width: 208px;
height: auto;
background-color: #525252;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footrght {
width: 230px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/latestft.gif) no-repeat;
display: block;
}
#footer {
position: relative;
top: 0;
left: 0;
width: 720px;
height: 188px;
padding: 20px 10px;
margin: 0;
background: url(images/btmhatlines.gif) right no-repeat;
font-size: 1.1em;
line-height: 1.6;
text-align: center;
}
Can anyone see my mistake? Cheers I'm currently customizing a theme for a Drupal site and am having a bit of an issue with background images on some content. I have 1 class and an HTML element that I'm trying to apply the style to. I have a non-repeating background applied to the title class which is positioned to the left of the area. The second is a background I'm attempting to tile across the x-axis of the h2 element. This second background does not show while the first one is showing. Is there a way around this? I'm assuming that because it's the same element, I won't be able to get away with this and will have to find another solution. Here is my HTML Code: <h2 class="title"><a href="/drupal/node/1">Welcome to the Caustic Guild!</a></h2> CSS Code:
#mcol .title {
background: url(/drupal/themes/caustic/images/icon_post.gif) no-repeat 0px 2px;
}
#mcol h2{
background: url(/drupal/themes/caustic/images/mcol_head.jpg) repeat-x;
margin: 0px 0px 0px 0px;
padding: 2px 0px 6px 35px;
font-size: 180%;
letter-spacing: -1px;
text-align: left;
border: 3px solid #78788a;
}
Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary. I should go with the flow. So I copied a basic page structure and twiddled a little. Here is the result so far html link css link A couple of questions. 1. Would you say I'm on the right track, or should I be looking at a different style structure? 2. The page appears in ie to have gaps around the elements. In Mozilla it looks like I hoped it would look. How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix. No luck so far. Any help, advice appreciated. Thanks Solar.. 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. Hi guys, could you help me out with following issue: See this Picture for better understanding: http:// picasaweb. google.se/lh/photo/e446yLNWr_eTqkiwPK0-CA?feat=directlink WHat i have is a div container (mainContent) In which i have some text in a Paragraph <P> and in the middle of this <P> i am trying to make a box which will contain a list of links. Have no clue how to achieve this. My idea would be: <div id: mainContent> //text//<div style="???"> //Link//<div style="float:right; DONT Know how to lower vertically??"> Good ideas for where i can find a solution? Interesting situation i have. In my css i have this declared Code: css
a:link, a:visited { color: #c97c0f; text-decoration: none; font-weight: bold; }
a:active, a:hover { color: #82581d; text-decoration: underline; }
div#buenprov_content a:link, a:visited { color: #644e14; text-decoration: none; font-weight: bold; }
div#buenprov_content a:hover { color: #35290a; text-decoration: underline; }
For a change, IE displays the link colors correctly, the ones inside the div with the id buenprov_content have the color i want them to, and the rest of the page has the ones that are global. However, in firefox, they all inherit the traits from the #buenprov_content Even links not inside divs with that ID.... as shown: Here ( The ones in the fading content should be a different color ) Im building that site for a restaurant...but anyways, im a bit stumped as to why FF is doing this...any help? Thanks. Hi, q)I have a horizontal menu of 4 text buttons on top on screen and another bit of text on the left of it . I have a text element on far left and 4 text elements on far right . The whole section is in a div tag which displays it in a horizontal bar of 10% height. To place the text elements of far right I use float but this displays it on line below where i want it. I want text on far left and menu on far right (no spaces between each link) all in the same line. Code:
#t1 a {font-size:10px;
font-family:verdana;
font-weight:bold;
border:1px outset aqua;
background-color:aqua;
color:#000000;
text-decoration:none;
display:inline;
width:15%
word-spacing: 0;
}
...
<div id="t1">
This is the
place where the logo goes
<a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>
<a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>
</div>
I'm floating an image left and on the right, I'm placing a tabbed menu. FF lines the menu at the top-right corner, IE lines it up at the bottom-right(which is correct). I've tried margin, padding, vertical-align, but nothing will pull that menu down without severely affecting IE. Any suggestions? Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own. Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning. Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/ Before I make the full site I want to work out layout troubles I've been having. I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice. So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers? Here is the code that I think is relevant: Code: p {font-size: .75em; font-weight: bold; margin-left: 12em;
margin-top: 8em;}
#content {margin-top: 10px; margin-bottom: 10px;
margin-right: auto; margin-left: 3em;
width: 800px; padding: 20px;
background: transparent;}
#overlayback {position: absolute; top: 8em;
left: 15em; width: 250px; height: 250px;
z-index: 0;
filter: alpha(opacity=80); opacity: .80;
background: #FFF;}
#overlaytext {position: absolute; top: 3em;
left: 15em; z-index: 1;}
h1 {font-size: 6em; margin-left: .1em;
margin-top: .75em;}
h2 {font-size: 1em; font-weight: normal;
margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
<div id="overlayback"></div>
<div id="overlaytext"><h1>fasu</h1>
<h2>2006-2007</h2>
<p>coming soon</p></div>
</div>
I hope I've been clear and thanks in advance for any advice. It's very much appreciated. Hi Guys, I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet. Like this (. is the li): . Here is My Div Content I want it to be like this: . Here is My Div Content Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure). Here is my markup. <ul> <li> <div class="dragHandle"> </div> </li> </ul> DragHandle class is as follows .dragHandle { width: 20px; height: 25px; background-image: url(/styles/icons/selectarrow.JPG); background-position: center; background-repeat: no-repeat; cursor: move; } Hi guys, I don't know if this is possible.. I have a table with position: fixed and width: 100% height: 100% so it covers the entire screen. There is text behind it, you can see through the table and there is text back there. My problem is you can't click on anything in the background, behind the table. You can't select the text and you can't click the links because the table is blocking them. So my question is it possible to click through the table element on the links in the background and stuff? http://perfbase.com/beta/tablesector/v7/ I tried setting the middle td to visibility: hidden and display: none but that didn't work. I tried javascript events but click, mousedown, mouseover, none of them work for the text in the background. Thanks a lot! I'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this: Code: Picture - Header Text over here I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob. |
|||||||