CSS - Problem In Viewing Tables In Firefox 1.5.0.1

The objective:
Produce page content which behaves as if it were 'tabbed' as seen on many websites and programmes.

I have done this many times before, but only with absolute positioning from the document base level. This time, the div containing the information to be tabbed has to appear relative (for re-sizability) and contain the tab divs within it.

I am using a short javascript to change the z-index of the divs in order to produce the tab effect.

The problem:
The whole thing works fine, except for:
- If I leave the css height off the divs, IE chops the bottom off, and does not allow a scroll.
- If I put a height and auto (or scroll) overflow on the divs they display correctly in IE, but disappear in firefox
- Until a table contained within one of the divs becomes larger than the stated height. At which point that div (not any of the others) disappears from IE as well.

The question:
Is this a known bug? If so, what is the work-around?
Have I done something dumb? If so, what?

The source:
source files are available for download (they are quite large, and I don't want to trim them in case something in the trim is the problem. Plus they need to be large to demonstrate the length issue correctly). Text within these examples is copyrighted by various people and is used without permission, for illustrative purposes only.

the xhtml page - click through the tabs to see the effect. Add extra rows to the table in the 'dates & prices' tab to see the disappearing problem.
the javascript file - the function is at the bottom, 'layer_z_lift'.
the css stylesheet - the styles for the tabs are in the middle, commented as tour details tabs.

any questions, post and I shall answer.
Jz.

Hello there, at the moment I have this CSS which I apply to a table cell by <a class='menulink' href='etc etc'

Code:

A.menulink {
	TEXT-DECORATION: none;
	display:block; 
	width:138px;
	BACKGROUND-COLOR: #666666;
	padding: 0px;
}
A.menulink:link {
	TEXT-DECORATION: none;
	display:block; 
	width:138px;
	BACKGROUND-COLOR: #666666;
	padding: 0px;
}
A.menulink:visited {
	TEXT-DECORATION: none;
	display:block; 
	width:138px;
	BACKGROUND-COLOR: #666666;
	padding: 0px;
}
A.menulink:active {
	TEXT-DECORATION: none;
	display:block; 
	width:138px;
	BACKGROUND-COLOR: #666666;
	padding: 0px;
}
A.menulink:hover {
	TEXT-DECORATION: none;
	display:block; 
	width:138px;
	BACKGROUND-COLOR: #000000;
	padding: 0px;
}

The problem I have is with the width:138px. If I apply this class to a cell that isn't 138px, it automatically goes that size. And if I delete the width:138px lines, then the class only works when you go over the word, not when you hover over the cell. So does anybody know how to change the CSS so that a width doesn't have to be defined so that I can apply the class to any size cell?

Thanks

I have a problem with positioning elements on a page. It is no problem to position everything (text, header, logo's, banners) but somehow the div or table that contains the content of page does not grow when the contents do (it's the div/table with the white background).

It is no problem to position everything exactly including the background table but then when the text grows longer the table or div ( I tried both and both give the same problem ) does not grow longer so part of the text is not readable anymore.

Wierd thing is that when I only give the main div positions and not the text and images the div will adapt to it's contents but then I can't position my header as I want to.

The page is located here and the css is attached to this post as a txt file.

What did I overlook? I've searched the internet but I can't find anything.

I'm using what seems to be called a "liquid two column" CSS layout. Its a main column of 100% width left padding the width of the side bar. In the main column, I need to use table, but I'm stumpt on how to insure it doesn't extend beyond the right edge of the main column div. Can this be done?

Since the side column is 200px, the main column has a left margin of 200px. So this means a table with a width of 100% actually extends 200px past the right edge of the main column. Playing with the right margin of the table seems to be the right direction, but just not sure how to make the table fill the space right, and work the same in bot FF and IE.

Any ideas?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Untitled</title>
	<style>
	#container
	{
	width: 100%;
	margin: 10px auto;
	background-color: #fff;
	color: #333;
	border: 1px solid gray;
	line-height: 130%;
	}
	#leftnav
	{
	float: left;
	width: 250px;
	margin: 0;
	padding: .5em;
	}
	#content
	{
	margin-left: 250px;
	border-left: 1px solid gray;
	padding: 1em;
	max-width: 36em;
	}
	#leftnav p { margin: 0 0 1em 0; }
	
	.testTable {
	border: 1px solid gray;
	margin-right: -283;
	width: 100%;
	}
	</style>
</head>

<body>

<div id="container">
<div id="leftnav">
<p>
Side Column
</p>
</div>
<div id="content">
Stuff Here
</p>
<table class="testTable"><tr><td>eeee</td></tr></table>
<p>
Stuff Here
</p>
</div>
</div>
</body>
</html>

[edit]

The purpose of the table will be to display row data from a DB.

i have nested tables but table inside is inheriting properties from table outside. i have written classes for both tables in css and i dnt want inside table to inherit. what can i do?

I have having trouble with CSS alignment when dealing with IE7

If i have 2 DIV tags (one inside the other) and set 10px padding for the first DIV tag and the set the left hand alignment of second DIV tag to 50% the left hand edge will be 50% plus the padding where as in FireFox and Safari it does not matter that there is padding it still aligns up to the 50% line. Can any body point me in the direction of a fix?

Thanks

Site
CSS

I've been making that for a few days now. It used to be larger, but didn't fit on an 800x600 display.

I resized the three sliced BG images down to 641px from 684px. I resized #main to 768px.

I chose 641px for this reason... The left side BG is 125px wide. The border for #main is 2px. 641 + 125 + 2 = 768px

Right? Is my thinking clear?

It all looks great in all 3 major browser, IE, FF, and Opera! I'm stoked!

I have FF, but I did not have that developer extension. So, I downloaded it. This is GREAT!

Now, when I resize to 800x600, the window I had it in shrinks, and I STILL get a horizontal scrollbar. I don't care about a vertical scrollbar. I'm not worried about that, but I don't understand why I get a horizontal scrollbar. Is there some web development piece of info I don't have, or am I just doing something wrong. Now, let me also say that the entire page still actually fits on screen at 800x600, meaning that all text is still visible, and all links/images can be seen, but the fact that there is a scrollbar at all annoys me...

Please have a look-see, and tell me what you think, folks.

All in all, how do I ensure that anyone with any screen can effectively view this site?

Chris

Hi Everyone.

Apologies if this problem has been posted before or if it's simple - I'm very new to CSS!

I'm having some problems inheriting text size from a class in a table.

I have a table that inherits from a class (clsRoundCornersTable below) that specifies that text size should be 12px. This works fine except when I have another table defined within my original table which has text at the default size.

I'm assuming that my sub table is not inheriting from the parent but instead is using the <TABLE> definition below but I thought that text size would filter down.

Can anyone help????

TABLE
{
border-width:0px;
border-style:solid;
width:100%;
text-align:left;
}

TR
{
border-width:0px;
border-style:solid;
}

TH
{
vertical-align:top;
border-width:0px;
border-style:solid;
}

TD
{
vertical-align:top;
border-width:0px;
border-style:solid;
}

.clsRoundCornersTable
{
border:0px;
padding:0px 0px 0px 0px;
width:100%;
background-color:whitesmoke;
font-size:12px;
}

I'm trying to create a very simple navbar with css rollovers. I made one based on a tutorial on the macromedia website but it's not quite right (in Internet Explorer anyway)

If you have a look here you can see what I want it to look like:

http://www.eveythingfree.buildtolea...ieds/index2.php

Now here is my attempt:

http://www.eveythingfree.buildtolea.../whynotwork.php

It looks fine in Mozilla but in IE the right hand side of the table doesn't exist (there is no 1 pixel black line).

What have I done wrong?

Heres the css properties:

Code:

.button a {
	background-color: #e9e9e9;
	border: 1px solid #333333;
	display: block;
	text-decoration: none;
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align: center;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;
}


.button a:hover {
   background-color: #DDDDDD; 
   border: 1px solid #333333; 
   color: #CC0000;
   text-decoration: none 
}

Can anyone spot it?

Unlike in the design I'm trying to replicate, I want to have 1px lines dividing the links. This works in the 2nd example except for the problem on the right.

I really hope someone can shed some light on all this.

Thanks in advance,
Robert

Hey, I'm working on a site (URL) and I am having some problems.
I made a class in CSS:
Code:

.middle {
	background-attachment: fixed;
	background-image: url(images/midtop.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

and am applying that class to the middle table. When I view it in IE, it looks fine, but in mozilla (I'm using firefox) it looks like it is positioning it at 0, 0 of the page, not the table.
If I change background-position: 0px 0px; to background-position: 139px 0px; then it looks fine in mozilla, but not IE.

Does anyone know how to fix this? (Or why it is happening)
Thanks~

anyway to disable a user from viewing your css source? not particular for me but, i think there might be a way with php in the css file, but it still displays the code when i go to the file

I'm sure this is something stupid and simple I've overlooked.. So I am hoping that someone here can see what I am missing here.. I am FINALLY in the home stretch for this site, and I cannot for the life of me figure this out..

This only happens on the gallery pages.. The side border disappears when viewing the site in IE7 but ONLY under the Vista OS.. (At home I have IE7 and WinXP and the gallery pages display just fine..)
http://clients.overthehillweb . com/hairisle/index.php?main_page=page&id=2&chapter=0

What the is different with IE7 and Vista?

Screenshot of what's happening:
http://i25.tinypic . com/2gtq4jr.png


Perhaps a better question is this.. It appears that my method for applying that border to the center content and dropdown nav menu is not working well under IE7 with Vista (and for some folks XP and IE7). Is there a better way to apply this border to the center content and the nav menu that WILL work with IE7??

Hello,

I have a menu of <a> tags and when the user is on the page that the <a> tag goes to how do I keep it a different color than the rest of the <a> tags on that page?

I tried a.active and it does not work.

Also this page is dynamic so the nav menu is repeated often and is one block of code. Setting a different class according to each page is not an option.

Thanks for the help.

So I have a myspace, and I like things neat and compact. And I like filling out lots of long surveys that most likely no one will ever read, and posting them on my myspace. But when I do that, my page becomes very long and I don't like that. So my idea was something like this:

There would be a series of links across the top that would correspond to the various surverys and/or other content that I deem necessary to share with the world. The many users who visit my page looking for more details about my life click on the link of their choice. The box below all the links shows that particular survey. They read it all, and of course want more, so they click the next link. And poof, a new survery shows up right where the other one was. Compact and efficient.

I've seen sites use a slightly similar system before, often in the help/faq sections. You find the topic you need help with, click on it, and it pops up below it. However I'm pretty sure they used javascript, which isn't allowed on myspace. ("Security" or some other overrated matter). Therefore I would have to do it with CSS. I was thinking have each survey in a different table, all absolute positioned in the same place. Then when you click the link, either all the rest get visibility turned to not visible, (and that one turned to visible), or perhaps the z-index is changed. However I'm not sure you can do that in a link, especially without javascript. So I may need to find an alternative. Unfortunately, I'm not very good with CSS at all, and I'm also not very creative in problem solving.

Does anyone have any ideas on how I could implement this system without javascript or using other pages? (I just get my one little myspace homepage, although I guess I could cheat and use blog pages too. But then all the other blog crap like comments would show up on it).

I apologize if this has already been covered, I tried to look through the more recent posts for something similar and found nothing, and I wasn't really sure what to search for, since it isn't really something concrete I'm working with. I don't necessarily need code, mostly just ideas right now.

Thanks in advance to anyone who helps, and if you don't know what I'm talking about/thought it was too long, tell me and I'll try to clear it up or shorten it up, respectably (and respectfully, as it were).

PS. My myspace account, if you care and didn't already guess, is www.myspace.com/mynameismolotov. Althought it's basically empty right now.

I'm in the process of switching my table driven site to a CSS one. I guess I'm having trouble with positioning, I have all the text stuff pretty down, but this is giving me troubles.

Here is what it should look like, (screen from IE)

http://www.samuraiblog.com/utl1.jpg

Here is what it looks like in anything but IE (screen from Firefox)

http://www.samuraiblog.com/utl2.jpg

Here is my CSS snippet:

Code:

h3{
   color:#666666;
   font-size:medium;
   font-variant:small-caps;
   letter-spacing:.1ex;
   border-top:1px solid #999999;
   border-bottom:1px solid #999999;}

#title {
width: 800;
height: 250;
position: absolute;
top: 0;
left: 0;
backround-color: white;
}

#b-title {
width: 800;
height: 166;
position: absolute;
top: 250px;
left: 0px;
backround-color: black;
}

#quote {
	position: absolute;
	top: 270;
	left: 16;
    float: left;
    height:70;
    width: 700;
}

and here is direcly from HTML,

Code:

<div id="title">
<table id="Table_01" width="800" height="250" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="5">
			<img src="images/title-nav_01.jpg" width="800" height="192" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/title-nav_02.jpg" width="223" height="58" alt=""></td>
		
      <td> <a href="/blogs"><img src="images/title-nav_03.jpg" alt="" width="98" height="58" border="0"></a></td>
		
      <td> <a href="/forums"><img src="images/title-nav_04.jpg" alt="" width="133" height="58" border="0"></a></td>
		
      <td> <a href="/folding"><img src="images/title-nav_05.jpg" alt="" width="136" height="58" border="0"></a></td>
		
      <td> <a href="/the-arts"><img src="images/title-nav_06.jpg" alt="" width="210" height="58" border="0"></a></td>
	</tr>
</table>
</div>
<div id="b-title"><img src="images/title-bottem.jpg" width="800" height="166" /></div>
<div id="quote"> 
  <h3>"There once was a man from nan tucket and he sat on a bucket and read 
    computer Magizines all day long..." -Sam</h3>
</div>

Any suggestions? Thanks,
-Sam