CSS - Weird Width Question

Hello,

(please also see attached/uploaded style sheet)

I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH.

How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)?

Code:

<link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css">

TEST #1
<table class="menu" border=1 CELLPADDING=2>
<tr>
<td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td>
<td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td>
</tr>
</table>

<P>

TEST #2
<table class="menu" border=1 CELLPADDING=2>
<tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr>
<tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr>
</table>

I don't think I've quite grasped the idea of CSS yet?!?!

Any help/pointers would be appreciated.

Thanks,
Andy

Ok. Here's the problem:

I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div?

Css code:
Code:

/* left bar: */
#navBar{
	width: 185px;
	float: left;
}

/* right bar: */
#rightModulesContainer {
	width: 130px;
	margin: 0;
	padding: 0px 0px 0px 10px;
	float: right;
}

/* center content: */
#content{
	padding: 0px 5px 0px 0px;
	margin-top:0;
	margin-bottom:0;
	margin-left:4px;
	margin-right:0px;
	float: left;
	text-align:left;
	/*display: inline;*/
}

/* contained in #container: */

#dataGridContainer{
	margin: 0;
	padding-bottom: 10px;
	min-width:360px;
}

.categoryGridStyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	color: #000000;
        width:100%;
}

and here is the layout of the divs:
Code:

<div id="navBar">left navigation bar here (tree view)</div>

<div id="rightModulesContainer">right side bar here</div>

<div id="content"><div id="dataGridContainer">datagrid here</div></div>

Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of...

I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks.

See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php

I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width?

[EDIT]

Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum:

http://forums.devshed.com/web-desig...e7t-403266.html

I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window.

I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left.

Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands.

Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background.


Full width:
|---------------------------------------|
|AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA|
|---------------------------------------|

Shrunk width:
------- |------------------------| --------
AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA
------- |------------------------| --------

Grey bit outside window edge.
| Window side
A Arms
H Hands
B Banner


I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks.

I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6.

Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further.

Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 
</head>
  <body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
      <form id="frmMain" runat="server"> 
          <div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">        
                      <div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
                  <asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
                  </div> 
          </div>
      </form>
  </body>
</html>

Internet Explorer always presents me with a challenge (partial repost). The current issue involves emulating max-width in IE using the technique described by Svend Tofte.

http://www.svendtofte.com/code/max_width_in_ie/

The CSS code uses JavaScript expressions and feeds the browser's width to the style. The CSS code follows.

* html #Content {
height: 1%;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}
This implementation resizes and displays the fluid width in IE. But it does not emulate the max-width property. Basically, I need help fixing the max-width implementation on #Content. Since max-width remains a challenge in IE, the min-width remains a greater mystery. Min-width would be nice as well. The page is complex with several wrappers for other IE display issues and JavaScript functionality. Presently, these workarounds and hacks have my head spinning.

The page has an overall wrapper #Container. #Content div has the max-width expression. It encases #div.bgWh, so the page could have true transparent round corners. One issue relates to how div.bgWh expands beyond #Content when the client's browser width approaches 260 pixels. These containers serve a purpose; but IE does not deal with their width in a predictable manner. Fortunately, Firefox does not have these issues. These scenarios leave me scratching my head more often than not. Overflow hidden property has worked for me in the past, but did not provide the magic bullet this time around.

Please load the page and shrink you browser to around 260 pixels. Keep your eye on the round corners around the main content area. The container, div.bgWh, expands beyond #Content. Please let me know if you see any relevant patterns and if you have any useful suggestions on implementing max-width. Somebody may suggest better approaches to the IE max-width conundrum.

http://neville.f2o.org/nifty_TEMP1.html

Styles in Question
#Content
div.bgWh
#Container

I'm writing a modification for a bulletin board. One of the beta testers had a problem with their template...

My modification uses a left & right float, with a clearing div at the bottom with a copy right.

I know the problem, but my question is, why is it a problem:

width="75%" will sometimes, in certain templates, make the right floating table drop down beneath the left floating menu, and it's width is 100%. When I change it to inline styling, style="width: 75%;", it works as it should.

I'd really like to know why it's doing this, because I've never ran into this before.

Here's a slimmed version of the HTML/CSS:

Code:

<div id="st0re_wrapper" style="float: left; width: 24%; clear: both;">
	<table class="borderwrap iptable" cellpadding="3" cellspacing="2" width="100%">
		<tr>
			<td colspan="" class="maintitle"><p>Your Menu</p></td>
		</tr>
		<tr>
			<td style="padding-left: 5px;" valign="middle">
				<div style="margin-left: 5px;">
					Sample menu item.
				</div>
			</td>
		</tr>
	</table>
</div>
<table class="borderwrap iptable" style="float: right;" cellpadding="3" cellspacing="2" width="75%">
	<tr>
		<td colspan="" class="maintitle"><p>Sample</p></td>
	</tr>
	<tr class="row2">
		<td valign="top" width="100%">
			Sample content.
		</td>
	</tr>
</table>

The used CSS classes a

Code:

.ipbtable
{
	width: 100%;
}

table.ipbtable,
tr.ipbtable,
td.ipbtable
{
	background: transparent;
	color: #222;
	font-size: 10px;
	line-height: 135%;
}

.ipbtable td,
.divpad
{
	padding: 5px;
}
.borderwrap,
.borderwrapm
{
	background: #edede7; 
	border: 1px solid #91908B; 
	color: #55554F;
	padding: 0px;
	margin: 0px;
}

.borderwrapm
{
	margin: 5px;
}

.borderwrap h3,
.maintitle,
.maintitlecollapse
{
	background: url(style_images/convention/maintitle.gif);
	color: #f6f4ef;
	font-size: 12px;
	font-weight: bold;
	margin: -1px;
	padding: 7px 7px 7px 12px;
}

.maintitle td
{
	color: #EEEDE8;
	font-size: 11px;
	font-weight: bold;
	vertical-align: bottom;
}

.maintitlecollapse
{
	border: 1px solid #FFF;
}

.maintitle p,
.maintitlecollapse p,
.formsubtitle p
{
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

st0re_wrapper is just an unused id, besides the inline styling.

Code:

		<tr class='firstrow'>
			<th width=10%><strong>Rank</strong></th>
			<th width=40%><strong>Site</strong></th>
			<th width=25%><strong>In</strong></th>
			<th width=25%><strong>Out</strong></th>
		</tr>

that makes it exactly the way i want, but when i switch to
Code:

		<tr class='firstrow'>
			<th style='width=10%'><strong>Rank</strong></th>
			<th style='width=40%'><strong>Site</strong></th>
			<th style='width=25%'><strong>In</strong></th>
			<th style='width=25%'><strong>Out</strong></th>
		</tr>

it is sized naturally.

Hi Guys,

Consider the following box:

PHP Code:
<div style=border: 1mm black Solid;
 width: 148mm; 
height: 98mm;'>
</div> 





148mm + 1mm + 1mm = width of 150mm
98mm + 1mm + 1mm = width of 100mm

Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out?

Any ideas or is it some quirk?

Charlie

Hey everyone,

I have an odd problem.

CSS Code:
Original - CSS Code ul#admin_menu li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }

  

 ul#admin_menu li.am_item{


     float:left;


     clear:none;


     display:inline;


     border:0;


     padding:0;


     margin:0;


     width:24%;


 } 

This works...

CSS Code:
Original - CSS Code li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }

  

 li.am_item{


     float:left;


     clear:none;


     display:inline;


     border:0;


     padding:0;


     margin:0;


     width:24%;


 } 

This doesn't work... I don't understand why.

What gave it away was the display:inline; The first one displays them inline, the second displays them block and they don't get their width.

omg I am going to fall from the window with this stupid language lol...

Until yesterday, I was designing properly my site, using css and linking it in my php properly andddddddd..........

today I noticed a weird result. When I change something in css, I can see no result in the site. Even if I delete code from css, the site seems to be cached! I use Mozilla, I tried to clean cache, the css is properly linked... whats going on now

Have anyone else faced a similar problem?...

Hi, I'm trying to display text in a floating div in the middle of the page. The style is as follows:

Code:

.mainContentAreaBackground {
	position:absolute;
	z-index:11;
	top: 190px;
	left: 230px; 
	width:70%;
	height:72%;   
}

#mainContentArea{
	z-index:12;
	position:absolute;
	overflow:auto;
	overflow-x:hidden;
	width: 67%;
	height: 68%;
	top:205px;
	left:246px;
	text-align:left;
	font-family:Tahoma;
	font-size:10.0pt;
	visibility:visible;
}

There are two anomalies which I think might be bugs in IE's implementation of CSS, and I was hoping someone might be able to give me some advice as to how to get around them. The first problem is that, when going to highlight text in the main content area, all objects on the page are selected, rather than just the intended text. The second anomaly is that, when using the mouse wheel to scroll down in the mainContentArea div when there's overflow, the cursor needs to be hovering over text. If it's hovering over any place with a "hole" in it, such as the space between paragraphs, then it will not scroll. Everything works fine in Firefox.
You can see what I'm talking about he
http://www.cs.mcgill.ca/~jbeard4/lepdev

If anyone has any advice, please let me know.
Thanks!

-Jake

if you check out this website you'll immediately understand what the problem is about.

The script I wrote, pulls pictures out of a database and displays them. I have a print feature (click the link that says: Ik wil de klassenlijst van **** afprinten).

With Css I check wether or not a picture can be displayed on this page or if it has to be forced onto another page, when printed.

Code:

<style type="text/css" media="print"> 

	table {
		page-break-befo  auto;
	}
</style>

When you check the webpage, you'll notice this row gives problems in IE.
When I print the page from Internet Explorer: this row shows on the page, but not the picture that goes along with it.
When I print the page from Mozilla: this row does not show on the page, neither the picture that goes along with it. as it should be

Can someone help me? It is very important that the pagebreak is automagically forced when printed, because I can't guess the format on which people will print.

So I have the following website: http://www.itmustbecollege.com/

and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size.

I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space!