|
CSS - Cell Border Not Hiding
Here's something strange. I'm seeing a problem in IE on Windows. I've built a progress bar using vbscript and css, but the table doesn't quite display the way I want it to. Here's demo code:
Code: <html> <body bgcolor="dddddd"> <center> <table border="1" cellpadding="0" cellspacing="0" style="border: 1px solid #000; border-collapse: collapse; background-color: #000" width="100"> <tr><td id="pct_complete" width="50" bgcolor="black"> </td><td id="pct_remain" width="*" bgcolor="blue"> </td></tr> </table> </center> </body> </html> Now I've set the border to collapse, but if you load it up, you'll notice a white line between the two. I think it may be the way ie adds a 3d appearance to the table, but I can't figure out how to overcome it. Any ideas? Thanks! Similar TutorialsI have a web page shell that loads various content into different cells. The entire page is essentially a table. I have 4 graphic overlays that I want to impose on each cell to round the corners. I've tried doing it this way: CSS: Code: .LeftPanelTable {
WIDTH: 182px;
border-style: none }
.LeftPanelCell {
WIDTH: 160px;
vertical-align: Top;
border-style: none }
.ActionOptionsPanel {
background-color: #DDDDDD;
color: #000000;
font-family: verdana;
font-size: 12px;
border-style: none}
#soft_corner_ul {
background:url("http://www.fourfreedomsblog.com/images/corner_ul.gif") no-repeat top left}
#soft_corner_ur {
background:url("http://www.fourfreedomsblog.com/images/corner_ur.gif") no-repeat top right}
#soft_corner_ll {
background:url("http://www.fourfreedomsblog.com/images/corner_ll.gif") no-repeat bottom left}
#soft_corner_lr {
background:url("http://www.fourfreedomsblog.com/images/corner_lr.gif") no-repeat bottom right}
HTML: Code: <table class="LeftPanelTable">
<tr>
<td class="ActionOptionsPanel">
<div id="soft_corner_ul"><div id="soft_corner_ur"><div id="soft_corner_ll"><div id="soft_corner_lr">
This is the table cell content
</div></div></div></div>
</td>
</tr>
</table>
However, I still see a faint border around the cell, which spoils the effect of the rounded corners. If I change it like this: Code: .ActionOptionsPanel {
background-color: #DDDDDD;
background-image:url("http://www.fourfreedomsblog.com/images/corner_ul.gif");
background-repeat: no-repeat;
background-position: bottom right;
color: #000000;
font-family: verdana;
font-size: 12px;
border-style: none}
Code: <table class="LeftPanelTable">
<tr>
<td class="ActionOptionsPanel">
This is the table cell content
</td>
</tr>
</table>
then the border doesn't appear, but I don't know any way to do this with more than one image. Suggestions? Thanks... I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong. Correct look Incorrect look I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any. Here is my main CSS: Code:
body { background-color: #FFFFFF; }
a { text-decoration: none; font-weight: bold; }
a:link { color: #003366; background-color: transparent; }
a:visited { color: #003300; background-color: transparent; }
a:active { color: #339933; background-color: transparent; }
a:hover { text-decoration: underline; }
table { border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
td, th { border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
tr.one { background-color: #FFFFFF; }
tr.two { background-color: #DDDDDD; }
table.squares { border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
td.square { border: 1px solid grey; padding: 4px; }
td.nopadding { padding: 0px; }
.default { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
.h1 { font-size: 200%; font-weight: bold; text-align: center;}
.h2 { font-size: 120%; font-weight: bold; }
.h3 { font-weight: bold; }
.step { font-size: 150%; font-weight: bold; color: #999999; }
Here is one of the sets of squares: Code: <table class="squares">
<tr>
<td class="square" style="background-color: #CCCC66"></td>
<td class="square" style="background-color: #CC9966"></td>
<td class="square" style="background-color: #990000; border: black"><td>
<td class="square" style="background-color: #669966"></td>
<td class="square" style="background-color: #669999"></td>
</tr>
</table>
And finally, here is one of my progress bars: Code: <table style="color: white; width: 100px">
<tr>
<td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
<td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
</tr>
</table>
And in case that code is not enough, here is a link to the full HTML. According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers? My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work? Hi there! This might seem really basic but I don't seem to be able to remove the default border from a cell I created. The code looks like this: "<p> </p> <table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;"> <tbody> <tr> <td> <div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;"> <p align="center"> <img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" /> </p> <p align="center"> </p> <p> </p> </div> </td> </tr> </tbody> </table> <p> </p> How shall I do to hide the border? Thanks in advance! /Kristoffer Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
I would like to set up a table with a different border than the cells inside it. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
TD {border: 1px solid #ccc}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? I'm having a funky issue with a page in IE. I've got tables and have css setting the border properties of cells in the table. My issue is when mousing over Anchors in td's in the table the borders of the td's will sometimes dissapear. Its just funky. Its doing it on 2 different machines running IE6 ...Has anyone esle seen this? Is this some variant of the Guillotine Bug? Can anyone help me out with the following... I'm trying to create a table that, upon hovering a single cell, will increase the border thickness of that one cell, without increasing the thickness of other cells' borders in the same row/column. So far, my attempts have resulted in other table cells also getting increased border thickness, which makes the whole table move. Is there a way to achieve this for just the one cell? Adding border thickness just on the inside of the cell? Many thanks in advance! ZephSev Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well. Here is a setup of my table Code: <div id="Content">
<p class='instructions'>Click a column header to sort the table.</p>
<div spry:region="jdmba">
<div spry:state="loading" class="loading">Please wait while alumni data loads…</div>
<table class="spry" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
<th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
<th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
<th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
<th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
<th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
</tr>
</table>
<div class="Overload">
<table class="spry" cellspacing="0" cellpadding="0">
<tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
<td width="108px">{last}</td>
<td width="106px">{first}</td>
<td width="269px">{account}</td>
<td width="66px">{state}</td>
<td width="82px">{hls_year}</td>
<td width="82px">{hbs_year}</td>
</tr>
</table>
</div>
</div>
Here is my CSS file Code:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#News a:link {
color: #00F;
}
#News a:hover {
color: #00F;
text-decoration: underline;
}
body {
background: #000 repeat;
}
#wrap {
background: #000;
width: 900px;
border: thick solid #9C0029;
float: left;
height: auto;
padding: 0px 0px 1em;
margin-top: 2%;
margin-left: 10%;
}
#footer {
font: bold small/50px Arial, Helvetica, sans-serif;
color: #FFF;
background: #9C0029;
text-align: center;
height: 50px;
width: 850px;
margin-left: 25px;
}
#Header {
background: #8F001C url(../images/banner.jpg) no-repeat center center;
width: 850px;
height: 150px;
margin-top: 20px;
margin-right: 20px;
margin-left: 25px;
}
h1 {
font: normal 18px Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
}
h2 {
font: small Georgia, "Times New Roman", Times, serif;
color: #333;
text-align: justify;
}
h3 {
font: normal medium "Times New Roman", Times, serif;
color: #FFF;
}
h4 {
font-size: small;
color: #333;
text-align: left;
}
.banners {
background: #FFF0B2;
width: auto;
height: auto;
font: 18px Arial, Helvetica, sans-serif;
padding-top: .5em;
padding-bottom: .5em;
text-indent: 10px;
}
.Content {
font: 14px/normal Georgia, "Times New Roman", Times, serif;
text-align: justify;
display: block;
padding: 2em 3em 3em;
}
.Content a:link {
color: #00F;
}
.Content a:hover {
color: #00F;
text-decoration: underline;
}
.Content a:visited {
color: #00F;
}
#inner_body {
background: #FFF;
height: auto;
width: 800px;
margin-top: 0px;
margin-left: 50px;
padding-top: 0.5em;
padding-bottom: .5em;
}
#inner_border {
margin: 0em auto auto;
border: thin solid #8E887C;
width: 775px;
padding: 1em 0em 0em;
}
#nav_bar {
height: 3em;
width: 100%;
margin-left: 0%;
text-align: center;
}
#Content {
height: auto;
width: 95%;
padding: 0em 0% 5em;
margin: 2.5% 2.55% 2%;
text-align: left;
font-family: Verdana;
}
#nav {
height: auto;
width: 20em;
}
#News {
margin-left: 2px;
height: 30%;
background: #FFF0B2;
padding: 3%;
}
#News a:visited {
color: #00F;
}
.Overload
{
height: 208px;
overflow: auto;
}
.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
font-family: Verdana;
font-size: 12px;
line-height:20px;
cursor: pointer;
}
.instructions {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-bottom:8px;
}
.loading {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-top:0px;
margin-bottom:8px;
color:#900;
}
table.spry th {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry td {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px; }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }
I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black. Any ideas? Thanks! currently i have links defined as a certain color and changes to a certain color when i hover over them.. i have a table which has these links inside the cells and when i hover over the cell, the background of the cell changes color but the link wont change color until i hover over the link.. is there anyway so that when i hover over the cell i can make the link change color too? the problem is i have some padding for the cells, so once i go inside the cell but dont hover exactly over the link, the background will change but the link won't until i hover over it thanks I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! hi in Internet Explorer, this style works fine and when i print it prints the div and hides it on screen. however, in firefox, it does not hide the div on screen. can anyone help with this? many thanks Code: <style media="print">
.noPrint { display:none;}
.Hidden { display:inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
<style media="screen">
.Hidden { display:none;}
</style>
<div class="Hidden">Just an example of text in a div.<br /><br />Thank you</div>
</p>
<p><input type="button" value="Print this page" onclick="printpage()" /></p>
I have a problem... I have text in a div class "schedule" which is dragged in dynamically. Basically all the headers are in span tags with the style "font-weight:bold" on them. I want to hide all the non-bold text, ie all the text in the div class .schedule that doesn't have a <span> tag around it. Any ideas? Hello, So I have a page built that displays correctly in all modern browsers. However in IE6 the right floated div does not float right and throws the page off. If I could just hide the right and left columns from IE6 it would work fine. I have tried several bug fixes but nothing so far works. the page is : woodbuiltright com/ test2 php If it would layout correctly in IE6 with a fix/hack that would be great if not could I just make the right and left divs just not display? I even tried using some php to redirect IE6 to a different page. I guess I did not insert the php correctly because I could never get it to work. I would not even support IE6 but I know people who still use it...despite my recommendations. Just so you know, I have spent hours trying stuff before asking. Thanks! This is driving me nuts! I've been trying to do the simplest thing for over 3 hours now. Any help would be greatly appreciated! It's not allowing me to post a link to the site at hand. [myoviedolawyerDOTcom/index2.php]It seems to be working fine in Firefox and Safari, but IE is giving me troubles (as always). Here is the CSS (sorry if it's a mess, I'm learning) ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 298px; background-image: url(../images/PracticeAreas.gif); z-index: 2; } ul.MenuBarActive { z-index: 1000; } ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 298px; } ul.MenuBarVertical ul { margin: 0% 0 0 100%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } ul.MenuBarVertical ul li { width: 302px; background-color: #CCC; border: 1px solid #A32B34; z-index: 2; } ul.MenuBarVertical { border: 0px; } ul.MenuBarVertical ul { border: 0px; } ul.MenuBarVertical a { display: block; cursor: pointer; padding: 0.5em 0.75em; color: #A32B34; text-decoration: none; } ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { color: #FFF; } ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { color: #FFF; } ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(../images/PracticeAreas.gif); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; width: 298px; } ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-repeat: no-repeat; background-position: left top; background-image: url(../images/Template_10_ro_10.png); background-attachment: fixed; width: 298px; } ul.MenuBarVertical iframe { position: absolute; z-index: 1010; filter:alpha(opacity:0.1); } @media screen, projection { ul.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; z-index: 2; } } -------------------------------------------------------------- Any help would be greatly appreciated! ~cheers~ Is there a way to hide part of my css from Firefox but show up in IE? My name is Steven and I wanted to officially introduce myself and see if anyone could help me with a css issue. I have set the page up and upon checking an item, I want the page to show the form below. I was able to do that but either way it keeps the space where the form is which in fact, it should minimize and maximize the space upon clicking the check item. Instead, the area is still there. This seems to the only issue that I am unable to resolve and would greatly appreciate it if someone could help. I have listed the code below as well as attached the css and the page( If images are need, please let me know: Code: html, body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}
#logo {
background: url(profileimages/logo.png) no-repeat;
position: absolute;
left: 6px;
top: 3px;
z-index: 4;
width: 92px;
height: 64px;
}
#congratulations {
position: absolute;
left: 22px;
top: 377px;
z-index: 3;
width: 914px;
height: 30px;
font-size:26px;
font-weight:bold;
color:#4fa700;
}
#toptext {
position: absolute;
left: 31px;
top: 85px;
z-index: 6;
width: 897px;
height: 16px;
font-size:16px;
font-weight:bold;
color:#1b1b1b;
}
#cartproduct,
#cartproductcopy {
position: absolute;
z-index: 2;
width: 268px;
height: 20px;
font-size:18px;
color:#272727;
}
#shippinginformation {
position: absolute;
left: 226px;
top: 421px;
z-index: 2;
width: 711px;
height: 31px;
font-weight:bold;
font-size:34px;
color:#272727;
}
#willbesecure {
position: absolute;
left: 83px;
top: 285px;
z-index: 3;
width: 315px;
height: 14px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#foryourarea {
position: absolute;
left: 682px;
top: 257px;
z-index: 3;
width: 233px;
height: 14px;
font-size:11px;
color:#272727;
font-weight:bold;
}
.toplinksbar {
color:#006FD6;
text-decoration:none;
}
.toplinksites {
font: 12px/14px Arial;
margin: 0px;
color: #1B1B1B;
text-align: left;
text-decoration: underline;
}
#toplinks {
position: absolute;
left: 745px;
top: 25px;
z-index: 2;
width: 227px;
}
#item,
#qtyproductback {
background: url(profileimages/layer5copy12.gif) no-repeat;
position: absolute;
left: 11px;
z-index: 2;
width: 31px;
height: 25px;
}
#totalback,
#priceback {
background: url(profileimages/layer5copy9.gif) no-repeat;
position: absolute;
top: 156px;
z-index: 2;
width: 124px;
height: 25px;
}
#cartproductcopy {
top: 720px;
left: 262px;
}
#ourprice {
position: absolute;
left: 803px;
top: 190px;
z-index: 2;
width: 117px;
height: 28px;
font-size:12px;
font-weight:bold;
}
.ourpricepercent {
color:#43a000;
}
#securelock {
background: url(profileimages/id46vectorsmartobject.gif) no-repeat;
position: absolute;
left: 525px;
top: 875px;
z-index: 2;
width: 20px;
height: 27px;
}
#profilevectorsmartobject {
background: url(profileimages/vectorsmartobjectsmall.gif) no-repeat;
position: absolute;
left: 15px;
top: 259px;
z-index: 3;
width: 62px;
height: 68px;
}
#cartproduct {
top: 191px;
left: 54px;
}
#productdescription {
position: absolute;
left: 59px;
top: 163px;
z-index: 3;
width: 140px;
height: 13px;
color:#272727;
font-size:14px;
font-weight:bold;
}
#retailprice {
position: absolute;
left: 669px;
top: 190px;
z-index: 2;
width: 117px;
height: 13px;
font-size:13px;
color:#ff0000;
}
#acceptedpayments {
position: absolute;
left: 490px;
top: 270px;
z-index: 2;
width: 121px;
height: 13px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#enteryourzipcode {
position: absolute;
left: 683px;
top: 279px;
z-index: 3;
width: 145px;
height: 12px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#profilereadmoreaboutit {
position: absolute;
left: 87px;
top: 300px;
z-index: 3;
width: 98px;
height: 9px;
}
.profilereadmoreaboutitlink {
text-decoration:underline;
color:#3170ab;
font-size:10px;
}
#formback {
background: url(profileimages/layer5copy13.gif) no-repeat;
position: absolute;
left: 557px;
top: 467px;
z-index: 2;
width: 380px;
height: 381px;
}
#formtable {
font-size:14px;
font-weight:bold;
}
#item {
top: 187px;
}
#qtyproductback {
top: 156px;
}
#checkback {
background: url(profileimages/layer5copy10.gif) no-repeat;
position: absolute;
left: 677px;
top: 249px;
z-index: 2;
width: 249px;
height: 77px;
}
#lowerbar {
background: url(profileimages/layer1copy5.gif) no-repeat;
position: absolute;
left: 4px;
top: 342px;
z-index: 2;
width: 952px;
height: 3px;
}
#shippingback {
background: url(profileimages/layer5copy7.gif) no-repeat;
position: absolute;
left: 566px;
top: 156px;
z-index: 2;
width: 90px;
height: 92px;
}
#zipcodefield {
position: absolute;
left: 681px;
top: 296px;
z-index: 3;
width: 150px;
height: 25px;
}
#zipcodefieldform {
border:#aab1b7;
}
#totalback {
left: 800px;
}
#priceback {
left: 667px;
}
#formarea {
display:none;
overflow:hidden;
width:1px;
height:1px;
}
#congratulationsback {
background: url(profileimages/layer24copy.gif) no-repeat;
position: absolute;
left: 5px;
top: 368px;
z-index: 2;
width: 951px;
height: 42px;
}
#producttitleback {
background: url(profileimages/layer5copy6.gif) no-repeat;
position: absolute;
left: 48px;
top: 156px;
z-index: 2;
width: 507px;
height: 25px;
}
#layer1copy {
background: url(profileimages/layer1copy.gif) no-repeat;
position: absolute;
left: 373px;
top: 68px;
z-index: 3;
width: 400px;
height: 5px;
}
#profilesecurityback {
background: url(profileimages/layer5copy.gif) no-repeat;
position: absolute;
left: 19px;
top: 278px;
z-index: 2;
width: 395px;
height: 40px;
}
#area {
margin: 0px auto 0px auto;
background: url(profileimages/background.gif) no-repeat;
height:100%;
width: 960px;
position: relative;
}
#shipping {
position: absolute;
left: 583px;
top: 162px;
z-index: 3;
width: 54px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#yourcart {
position: absolute;
left: 10px;
top: 132px;
z-index: 2;
width: 106px;
height: 17px;
font-size:20px;
font-weight:bold;
color:#272727;
}
#profileshadow {
background: url(profileimages/layer16.gif) no-repeat;
position: absolute;
left: 29px;
top: 326px;
z-index: 2;
width: 32px;
height: 4px;
}
#fedex {
background: url(profileimages/layer30.gif) no-repeat;
position: absolute;
left: 579px;
top: 221px;
z-index: 4;
width: 66px;
height: 18px;
}
#paymenttypes {
background: url(profileimages/layer18.gif) no-repeat;
position: absolute;
left: 490px;
top: 291px;
z-index: 2;
width: 174px;
height: 27px;
}
#profileproductback {
background: url(profileimages/layer24.gif) no-repeat;
left: 223px;
top: 467px;
z-index: 2;
width: 323px;
height: 243px;
}
#profileproductimage {
/*background: url(profileimages/layer25.gif) no-repeat;*/
position: absolute;
left: 227px;
top: 491px;
z-index: 3;
width: 305px;
height: 200px;
}
#topbar {
background: url(profileimages/topbar.png) no-repeat;
position: absolute;
left: 15px;
top: 73px;
z-index: 5;
width: 952px;
height: 41px;
}
#freedivide {
background: url(profileimages/layer32.gif) no-repeat;
position: absolute;
left: 567px;
top: 213px;
z-index: 4;
width: 88px;
height: 1px;
}
#fedexback {
background: url(profileimages/layer31.gif) no-repeat;
position: absolute;
left: 567px;
top: 214px;
z-index: 3;
width: 88px;
height: 33px;
}
#checkbackbutton {
/*background: url(profileimages/layer21.gif) no-repeat;*/
position: absolute;
left: 835px;
top: 293px;
z-index: 3;
width: 72px;
height: 26px;
}
#lowerarrow {
background: url(profileimages/layer34.gif) no-repeat;
position: absolute;
left: 862px;
top: 344px;
z-index: 3;
width: 24px;
height: 6px;
}
#paymentline {
background: url(profileimages/layer20.gif) no-repeat;
position: absolute;
left: 490px;
top: 285px;
z-index: 2;
width: 173px;
height: 1px;
}
#form {
/*background: url(profileimages/layer23.gif) no-repeat;*/
position: absolute;
left: 571px;
top: 480px;
z-index: 3;
width: 349px;
height: 354px;
}
#checkoutbuttonback {
/*background: url(profileimages/layer6.gif) no-repeat;*/
position: absolute;
left: 556px;
top: 854px;
z-index: 2;
width: 382px;
height: 50px;
}
#total {
position: absolute;
left: 806px;
top: 163px;
z-index: 3;
width: 28px;
height: 10px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#price {
position: absolute;
left: 673px;
top: 163px;
z-index: 3;
width: 30px;
height: 11px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#free {
position: absolute;
left: 598px;
top: 191px;
z-index: 3;
width: 34px;
height: 10px;
font-size:14px;
color:#2e2e2e;
font-weight:bold;
}
#radiobutton {
position: absolute;
left: 571px;
top: 190px;
z-index: 3;
width: 13px;
height: 13px;
}
#qty {
position: absolute;
left: 15px;
top: 162px;
z-index: 3;
width: 25px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#itemnumber {
position: absolute;
left: 24px;
top: 190px;
z-index: 3;
width: 5px;
height: 13px;
font-size:18px;
color:#272727;
}
#copyright {
position: absolute;
left: 13px;
top: 971px;
z-index: 2;
width: 940px;
height: 126px;
font-size:11px;
}
.copyrighttext {
text-align:center;
}
.copyrightlinks {
text-decoration:underline;
color:#000000;
}
In a basic CSS single column layout with Header, Content, Footer div structure, where the page background image is defined in the Body CSS, is there a way to specify that below the Footer div, the page background does not show? I have recently seen an article from 2005 stating that using CSS to hide text could lead to flagging from Google and other Search Engines as Spam sites. My question is, if hidden text is used for certain elements of the page such as branding a logo as an h1 tag, will my site be penalized? I don't want to risk being blacklisted from Google, but If all I have is an image header anyways, would it hurt to use a CSS text indentation to hide the h1 text? I notice that several of the designs on CSS Zen Garden use this techinique for header images, yet the page has a google page rank of 9. Any knowledgeable advice or references to recent articles would be very helpful including personal experience. Thanks in advance! |
|||||||