CSS - Trying To Make 1 Pixel Table But In Opera It Gets Thicker

i am trying to make the same effect like phpMyAdmin (when you put your mouse over a row of a table the entire table lights up, not just the links)

whats the best way to do this, it looks like it seems the only way to do it is with javascript and css but all the the solutions ive tried ot search for doesnt do what i want it to do

hi

I am shifting to web 2.0 therefore learning a lot of things that I used to do with tables.

Now I have a task to make a form and also display text in parallel style e.g

Name User Name ------- Rating stars
Email User Email ------- Balance amount


to accomplish this in tables we might make two cells to hold Name, EMail in one and Rating and Balance in the second

then in each CELL further rows and cells for each entity e.g

Name User Name

how can we display this kinda info using pure CSS?

I found a website online http://www.compare-voip.net/viatalk.php there towards the bottom you can see how the email and rating stats are displayed in two columns, this is done with tables though I want to do the same with CSS only

thanks in advance

OK, so I know what the problem is, but I can't figure out how to fix it. This is what I'm doing. I've got a floated div (left) and another div sitting to it's right. I'm using Nifty Corners to get that nice rounded finish (without using four images). But, here's the problem, the JavaScript is designed (I guess) to only cap the size of the div defined in the css file, so when IE 6.0 generously adds an extra 3px, what am I supposed to do?

Ask Google.

So, I found the Holly Hack at Position Is Everything but haven't been able to implement it correctly.

I've been tinkering with this new layout for about a fortnight, but with no luck. I seek enlightenment, if there is anyone with the wisdom . . . ?

Files included a
another 1 = html
nifty = JScript
all = css

This page design works in:
Mac - Safari 2.0.1, Opera 8.5, Firefox 1.0.7
Win - Firefox 1.5, Opera 8.51

The JavaScript doesn't work at all in Internet Explorer 5.2 for Mac, but degrades the way I think it should.

And back to Windows, IE 6.0, the "3px jog" is the only problem. All help appreciated.

I've made this layout:
http://superq.dk/skjoldborg

It works fine in Firefox, but IE somehow has moved the content one pixel to the left.
This shows to the right at the menu, where there is one pixel whitespace, and at the end of the text, to the right, the white content box moves one pixel out in the shadows.
Can someone give me an explanation on this? I've checked it all over, sizes on divs and so one, and I've come to the conclusion that IE has moved the content one pixel to the left, but why?

Hello, I am trying to create a 1 pixel width <tr width="1" style="width: 1px;"><td rowspan="8" width="1" style="width: 1px;"> </td></tr>
and a 1 pixel height <tr height="1" style="height: 1px;"><td colspan="8" height="1" style="height: 1px;"> </td></tr>

But the following methods are not working, instead it is making them bigger than expected. How can I accomplish this?? Is there some sort of clear method in CSS that will clear the height and width and make sure to set it to 1 pixel??

Thanks

Can it be done with just CSS? I have a table of data where the text in the data cells wraps and fills the td cell with several lines of text. This is OK when the browser window is a "normal" size, but if someone is viewing with a widescreen monitor I would like the table to get wider and make the cell contents not wrap the text. Or if they are viewing with a small monitor I want it to wrap even more (table would get smaller). Can this be done with CSS, or do I need to do something with javascript?

OK...thbbt.

Situation 1 (the one that works as I want)

Code:

<table style="width: 100%">
  <tr>
    <td style="width: 15em">Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

In Situation 1, the second column expands to be all of the remaining width. This is good.

Situation 2

Code:

<table style="width: 100%">
  <tr>
    <td style="width: 15em">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

In Situation 2, column 2 and 3 share the remaining space. I want column 2 to take no more than exactly the space it needs. I want column 3 to expand to take all the remaining space.

The only way I've found that (sorta) works is to actually use the old HTML width="" attribute and make it a percentage that's impossible. If you make it 95% or something, then all the other columns squeeze down pretty far. The issue with this approach is that it ignores the style width of the first column and just crushes it as much as possible.

Anyone have an idea?

Thanks
Tim

Hi guys
I'm having a little problem with a <table> based website

Please check the following image



Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well...

Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs)

Thanks a lot in advance

Hey--

Working on a new site, I've got 99.9% of it finished and working, but a menu is displaying one pixel higher in Safari (Mac and PC) than any other browser.

www.inkyfever.com/customer/animotion/

The menu is in the orange bar at the top. It's created with an unordered list. You can view source to check the code.

HELP!

EDIT: Okay, I've got it to mostly work by changing some padding, but hovering over any other orange links, the hover color doesn't quite fill the space vertially. ONE pixel short at the bottom. Ideas?

:grimey

I know this should probably be turend into pure css but for now I'm stuck with tables

i have the following table structure
Code:

<table class="subitemtable">
<tr>
	<td class="subItem">
		<a href="blah">
			blah
		</a>
	</td>
</tr>
<tr>
	<td class="subItemOn">
		<a href="blah">
			blah
		</a>
	</td>
</tr>
<tr>
	<td class="subItem">
		<a href="blah">
			blah
		</a>
	</td>
</tr>
</table>

using the following css styles
Code:

.subItemTable{
	width:100%;
	border-collapse: collapse;	
	margin:0px;
	padding:0px;

}
.subItem{
	margin:0px;
	border-bottom: 1px solid #0E59AE;
	border-right: 1px solid #0E59AE;
	background-color:#e8e8e8;
	padding: 3px 0px 3px 20px;
	width:100%;
}

.subItem a{
	font-size: 9.5pt;
	color: #666666;
}
.subItem a:link,.subItem a:visited{
	text-decoration:none;
}
.subItem a:hover{
	text-decoration:underline;
}

.subItemOn{
	margin:0px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #0E59AE;
	background-color:#ffffff;
	padding: 3px 0px 3px 20px;
	width:100%;
}

.subItemOn a{
	font-size: 9.5pt;
	color: #666666;

}
.subItemOn a:link,.subItemOn a:visited{
	text-decoration:none;
	
}
.subItemOn a:hover{
	text-decoration:underline;
}

my problem is after the first cell the bottom right most pixel of the border is just missing. This happens in firefox and IE ..The attached picture should show what I'm talking about.

Thanks for your help

Hello, I am developing a site for a client and originally I had the template stretching 100% height in the browser which worked for both IE and FF. The problem now is that I have integrated a shopping cart into the template and because of the system of the cart, it breaks the 100% rule of height. So now I have began to use the idea of creating a -y tiling centered bg image.

The problem is that when I align the image to meet the edges of the template, the alignment is different between IE and FF by 1 pixel!!! Its so frustrating! Has anyone run across this issue before? I ran a quick search for this in google but didnt find anything helpful, only things with regular images.

If anyone has a solution for this, it would be great! Thanks!

Rproctor

Hi,
I'm trying to do a two column layout which spans across the whole screen. This would be easy if I was just using percentages because I could just go:

Left: width:20%;
Right: width:80%;

But I need the left bar to be a fixed width and the right bar to span the rest of the screen.

There might be something really simple here that I'm overlooking but at the minute I can't think of how I would do it...

Joe

The site http://glish.com/css/7.asp is showing me how to make tabls in css. I get it but their example which has a workour I don't get doesn;t work either.... look at the top right corner.

I'm trying to learn but how can you with erroneous code?

The code is all exposed on their page in the scroll down bit down the page a bit.

I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy)

The problem:
Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear.

Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world.

shortened HTML:
Code:

<div class="menu">
menu here
</div>

<div class="contents">
the rest of page
</div>

shortened CSS:
Code:

.menu
{float: left;
width: 20%;
padding: 1%;
}

.contents
{float: left;
padding: 1%; 
width: 76%; 
}

Hi there,

I am back with another browser issue with css. When I set the position from the top on the center logo it shows correctly at top: 15px in IE but not in Navigator. To make it ok in Navigator I have to put it at 17px and then its off in IE.
I would love some help as i have a similar problem occuring in another site which I have also been trying to solve.
Here is the link: http://www.paintyourplace.com/emerald/

Here is the CSS:

body{
font-family: verdana, helvetica, arial, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px;
font-size:12px;
color: black;
background-color: #FFFFFF;
scrollbar-arrow-color:#003366;
scrollbar-face-color:#0C5331;
scrollbar-shadow-color: #9FB304;
scrollbar-highlight-color: #FFFFFF;
scrollbar-track-color: #CCCCCC;

}


#menuList {
margin: 0px;
padding: 0px;
}

#menuList ul {
margin: 0px;
padding: 0px;
}

#menuList li {
display: inline;
list-style: none;
}

a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
margin: 0px;
padding: 3px 6px;
text-decoration: none;
}

a.actuator:hover {

color: #990000;
}


.menu {
color: #000;
background-color: #EEE;
border: 1px solid #CCC;
position: absolute;
visibility: hidden;
}

.menu li a {
background-color: #EEE;
color: #000;
display: block;
font-size: 12px;
line-height: 1.75em;
margin: 0px;
padding: 0px 10px;
text-decoration: none;
}

.menu li a:hover {
background-color: #0C5331;
color: #EEE;
}

span.key {
text-decoration: underline;
}

#homeMenu { width: 120px; }
#aboutMenu { width: 120px; }
#productsMenu { width: 120px; }
#careersMenu { width: 120px; }
#customerMenu { width: 120px; }
#healthcareMenu { width: 120px; }
#contactMenu { width: 120px; }

a{
color:#990000;
font-weight:normal;
text-decoration:none;
}
a:visited{
color:#005940
}
a:hover{
color:#990000;
text-decoration:underline;
}



#mainMenu {

text-align: center;
color: #000;
margin: 0px;
padding: 0px 0px 2px 20px;
}

DIV.jill_toplogo{
align: left;
}

DIV.jill_leftgreen{
top: 75px;
background-color: #0C5331;
height: 95px;
position:absolute;
width: 50%;
}
DIV.jill_rightblue{
left: 50%;
top: 75px;
background-color: #254E7C;
height: 95px;
position:absolute;
width: 50%;
}

DIV.jill_centered_logo{
position:relative;
text-align: center;
top: 15px;


}
DIV.jill_greyback{
padding-top: 112px;
background-color: #E1E5E0;
position: absolute;
top: 60px;

width: 100%;
text-align: center;
font-size: 12px;


}

DIV.mainBox {
position: absolute;
top: 230px;
font-family: verdana, helvetica, arial, sans-serif;
font-size:12px;
left: 57px;
width: 80%;

}
#bottomText{
padding: 0px;
margin-top: 20px;
margin-bottom: 10px;
margin-right: 20%;
margin-left: 20%;
background: none;
border: none;
border-top: none;
text-align:center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
color: #ccc;
}

THANKS!!!!