|
CSS - Special Situation With Css
with an included file on top of every page of my website i have
Code:
<STYLE type="text/css">
A:link{color:lightblue;text-decoration:underline}
A:visited{color:lightblue;text-decoration:underline}
A:active{color:lightblueblue;text-decoration:underline}
A:hover{color:lightblue;text-decoration:underline)
textarea, submit{background-color:#19665a;}
</STYLE>
which is how i want my links to appear except for one specific page where there is a table and lots of links inside this table, i want these to have text-decoration:none for link visted active and hover. but the links on this page outside the table i want them the have text-decortation:underline i cant figure out how to do this, someone said something about classes before but this isn't a basic class thing, i have no idea what to do Similar TutorialsI am designing two tables stacked on top of each other on a page. The first table will act like the header rows which will be stationary. The bottom table will act as the table content. It will have a fixed width and height and will be scrollable. I'm taking this approach because I have used a "single-table, CSS/JS fixed header" solution, and it proved to be very buggy across browsers. However, my current solution is being problematic too. The problems are twofold: 1. Inconsistent browser support for using CSS with tables 2. IE6 puts the scrollbar for the bottom table on the outside of the table. So I have to use a negative margin to bring it back in. So this leaves me using standard <td width="xx"> width attributes to control the spacing of the table. Now I cannot get the table columns to line up between the two separate tables. Here is the HTML and CSS. HTML: Code: <div class="searchHolder">
<table class="dataTable topTable" cellspacing="1">
<tr>
<td colspan="2" class="bigHeader whiteSpacer">NAME</td>
<td colspan="3" class="bigHeader">PERMISSIONS</td>
</tr>
<tr>
<td width="120" class="smallHeader sortLink"><a href="#" id="sortLastName">Last Name</a></td>
<td width="120" class="smallHeader sortLink whiteSpacer"><a href="#" id="sortFirstName">First Name</a></td>
<td width="116" class="smallHeader">Manage</td>
<td width="216"class="smallHeader">View</td>
<td width="270" class="smallHeader">Delegate</td>
</tr>
<tr>
<td width="120"> </td>
<td width="120" class="whiteSpacer"> </td>
<td><label for=""><input type="checkbox" class="checkbox" id="" />Select All</label></td>
<td><label for=""><input type="checkbox" class="checkbox" id="" />Select All</label></td>
<td><label for=""><input type="checkbox" class="checkbox" id="" />Select All</label></td>
</tr>
</table>
<div class="tableScroller">
<table cellspacing="1" class="dataTable" id="staffTable">
<thead>
<!-- empty th elements needed for table to sort -->
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td width="120">Last Name</td>
<td width="120" class="whiteSpacer">Laura</td>
<td width="116"><input type="checkbox" /></td>
<td width="216"><input type="checkbox" /></td>
<td width="270"><input type="checkbox" /></td>
</tr>
<tr>
<td>Rome</td>
<td class="whiteSpacer">Name</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
etc...
</tbody>
</table>
</div>
</div>
CSS: Code: div.searchHolder{
border:1px solid #D6d6d6;
padding:1px;
margin:0 0 25px;
}
div.tableScroller{
height:185px;
overflow-y:scroll;
overflow-x:hidden;
border-top:1px solid #E5E5E5;
}
#staffTable{
border:none;
width:700px;
/* margin-right:-16px; IE6-only style in ie6.css */
}
#staffTable thead{
display:none;
}
table.topTable{
border:none;
width:700px;
}
td.bigHeader{
background:#003399;
color:#FFFFFF;
font-weight:bold;
}
td.smallHeader{
background:#5b91d7;
color:#FFFFFF;
font-weight:bold;
}
td.whiteSpacer{border-right:3px solid #FFFFFF;}
While I can get one table or the other displaying the columns correctly, it's damn near impossible to get the other columns to line up. My intended solution is to use JS browser sniffing to write the widths of the top table's columns to match the bottoms. The content of the bottom tables may change, so I figure this would cause less need for configuration in the future. Is this reasonable? can I load a special font to my server and then call to it through css? If I want to use the font Made_In_China.tff can I actualy load it to my server and then call to it through css? Nick Greetings! This is not an easy question but maybe some CSS guru may help: for a web I'm working on, I need quite special layout: It must take 100% viewport height, with header and footer fixed, with middle part (2 columns) taking all rest of (vertical) viewport size, with scrollbar for each of these columns when content of column overflows showed space. To make it short, this is how far I got: http://147.32.113.143/biotest/Sourc...SectionId=80600 However, by now, these 2 columns in the middle have set fixed height to 70% of viewport height, but as I mentioned above, I need it to get all remaining vertical space. I searched the Net for a couple of hours, but didn't find anything suitable, similar layouts with one column in the middle are usually solved with some CSS expression, or they put IE to quirks mode to be working (just like layout of my CSS god Stu Nicolls on http://www.cssplay.co.uk/layouts/bodyfix.html). Or it really does not exist better solution?? I really like this idea: http://37signals.com/svn/archives2/css_tip_create_a_default_with_special_cases.php Unfortunately for the life of me i don't understand why this technique doesn't seem to work in InternetExplorer. It seems to work for only the class defined in your css file first. Can someone shed some light on this? Hi, I'm new to style sheets and hope someone can help me with this question. I can't figure out how to use special characters in a page which refers to an external style sheet. I specifically need to put in an accented "e", and it worked fine in another place which is just an internal sheet, but in the externally referred one it comes out as a gibberbox, looking like a chinese character. I can only assume it has something to do with the difference between the types of css, which is why I bother to make reference to them, but I can't figure out how to get that e to show up right. Help much appreciated.. Maria hi, tried searching for a vertical menu that opens sub menu immediatley below it (and not to the left side as a layer) but none of the publicaly available menus do it. The menu items on the main level also have a specific icon for each of them. can you say how to do this menu?. if somebody has already made this menu and is publically available that would be nice too. thank you |
|||||||