CSS - Irritating Css Problem, Mixing Percent & Pixel Widths

Hello,

I'm having an interesting dilemma. Hopefully I can get some advice. I have created a site using a 2 column liquid layout. The site is created using CSS. I have tested successfully in both FF & IE (which my client uses). In the content area, there is a data table that is generated dynamically. At times the table consists of many columns. If the table strecthes beyond the screen view (resulting in horizontal scrolling) the container/layout does not stretch with the table.

Any thoughts?

Any suggestions will be greatly appreciated!

Below are snippets of code from the css code and html code:
CSS
Code:

body {
	margin: 0px 20px 0px 20px;
	background-color: #069;
	background-image: url(../images/bkgd.gif);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #036;
	}
	
#container {
	width: 100%;
	margin: 0px auto 0px auto;
	background-color: #DDD;
	}

...

#content {
	background-color: #FFF;
	padding: 20px;
	margin-left: 190px;
	}

...


	
#content_main table.data {
	margin: 0px 0px 0px 0px;
	border: 1px solid #369;
	background-color: #FFF;
	}
	
#content_main table a.nobrdr {
	border-bottom: none;
	}
	
#content_main table.data th {
	height: 20px;
	color: #E8E8E8;
	text-align: center;
	background-color: #369;
	border: 1px solid #2C537D;
	text-transform: uppercase;
	}
	
#content_main table.data td {
	height: 25px;
	padding: 3px;
	border: 1px solid #CCC;
	vertical-align: top;
	line-height: 15px;
	}

HTML
Code:

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data">
				<tr>
					<th scope="col" width="5%" nowrap>fund</th>
					<th scope="col" width="6%" nowrap>bsli</th>
					<th scope="col" width="4%" nowrap>reg</th>
					<th scope="col">title</th>
					<th scope="col" width="9%" nowrap>projcode</th>
					<th scope="col" width="7%" nowrap>cip</th>
					<th scope="col" width="4%" nowrap>afc</th>
					<th scope="col" width="10%" nowrap>avail</th>
					<th width="10%" nowrap scope="col">oblig</th>
					<th width="10%" nowrap scope="col">oblig</th>
					<th width="10%" nowrap scope="col">oblig</th>
					<th width="10%" nowrap scope="col">oblig</th>
					<th scope="col" width="10%" nowrap>unoblig</th>
					<th scope="col" width="5%" nowrap>&nbsp;</th>
				</tr>
				<tr>
					<td scope="row" align="center" nowrap>682A</td>
					<td align="center" nowrap>1A01A1</td>
					<td align="center" nowrap>HQ</td>
					<td>NEXT GENERATION WEATHER RADAR (NEXRAD) </td>
					<td align="center" nowrap><a href="#">25570427</a></td>
					<td align="center" nowrap>W020200</td>
					<td align="center" nowrap>140</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td>
				</tr>
				<tr>
					<td scope="row" align="center" nowrap>682A</td>
					<td align="center" nowrap>1A01A1</td>
					<td align="center" nowrap>HQ</td>
					<td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td>
					<td align="center" nowrap><a href="#">25570427</a></td>
					<td align="center" nowrap>W020200</td>
					<td align="center" nowrap>3J0</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td>
				</tr>
				<tr>
					<td scope="row" align="center" nowrap>682A</td>
					<td align="center" nowrap>1A01A1</td>
					<td align="center" nowrap>TC</td>
					<td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td>
					<td align="center" nowrap><a href="#">25570427</a></td>
					<td align="center" nowrap>W020200</td>
					<td align="center" nowrap>4C0</td>
					<td align="right" nowrap>000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000,000</td>
					<td align="right" nowrap>000,000</td>
					<td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td>
				</tr>
			</table>

Check out the below test page...

In FF, i get a left margin of 5px, and a right margin of 10px as expected, but in IE6 i get a left margin of 10px, and a right margin of 20px.

Anyone know why?

If I absolute position with left:10px, and right:10px on the relevant boxes they are positioned correctly in IE6, so why don't the margins work? (Can't use absolute positioning as i require flow layout in my real-life page)


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>

<style type="text/css">
*{
	margin:0;
	padding:0;	
}

#leftnav{
	width: 20%;
	float: left;
	clear: left;
	margin-left: 5px;
	border: solid 1px #000000;
}

#main{
	width:76%;
	float: right;
	clear: right;
	margin-right: 10px;
	border: solid 1px #000000;
}

</style>

</head>
<body text="#000000" bgcolor="#FFFFFF">


<div id="leftnav">
some text some text<br>
some text some text
</div>

<div id="main">
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>

</body>
</html>

You can see an example on http://www.cauwenbergh.be/dzone/

The yellow div does not fill between header and footer when there is not enough text in it :s So is there any way to get it filled between header and footer...

html:
Code:

		<div id="wrap">
			<div id="header">
				<div id="balk">
					<div id="balk_midden">...</div>
				</div>
				<div id="header_wrap">
					<img src="images/header.gif" alt="Dutchzone voor al uw internettoepassingen: Webhosting - webdesign - netwerken"/>
				</div>
				<div id="balk">
					<div id="balk_midden">...</div>
				</div>
			</div>

			<div id="inner-wrap">
				<div id="pagebox">Hier komt tekst</div>
			</div>
		 	<div id="footer">
				<div id="copyright">Footer</div>
			</div>
		</div> 

css:
Code:

body, html {
height:100%;
}
body {
margin:0;
padding:0;
background-image:url(../images/bg34.gif);
font-family: "trebuchet ms", verdana, helvetica, sans-serif;
font-size: 14px;
}
#wrap {
position:relative;
width:100%;
margin:auto;
min-height:100%;
}
* html #wrap {
height:100%;
}
#inner-wrap {
padding-bottom:20px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
background-color:#00FF33;
}
* html #inner-wrap {
height:1px;
}
#header_wrap {
background:#333333 url(../images/dzheader_back.gif);
color:#FF00FF;
margin:0; padding:0;
height:120px;
text-align: center;
}
#balk {
	padding: 0px;
	width: 100%;
	background-color:#7999B9;
	border-bottom: 1px solid #F7F7F9;
	border-top: 1px solid #F7F7F9;
	height: 20px;
}
#balk_midden {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	background-color:#7999B9;
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	color: #FFFFFF;
	line-height: 20px;
	text-align: right;
}
#header {
background-image:url(../images/dzheader_back.gif);
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#header img {
text-align:center;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
margin:0;
margin-bottom: -4px;
padding-left: 30px;
padding-right: 30px;
}
#pagebox {
width: 800px;
margin: auto;
background-color:#FFFF00;
border-left: 1px solid #807E7A;
border-right: 1px solid #807E7A;
height: 300px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:20px;
background-color:#7999B9;
}
#copyright {
padding: 0px;
width: 800px;
text-align: center;
background-color:#7999B9;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
vertical-align: bottom;
margin: 0 auto 0 auto;
color: #FFFFFF;
bottom: 0;
height: 20px;
}

Hi guys,

as you all know when you got lot of text in a <button> element, the padding (left and right) of the latter becomes very annoying. Any way of removing it?

P.S. I am fully aware of the fact that setting margin:0 and padding:0 has no effect at all.

Thank you

I've been looking at some CSS templates over at the Yahoo Developer Network. Link: http://developer.yahoo.com/ypattern...hp?pattern=grid

They define font sizes as percentages (13 pt. is about 100%), and I had never seen this. See he http://developer.yahoo.com/yui/fonts/index.html

Is this common? Uncommon? Is there a reason I haven't seen it before, or am I blind?

Also, in general, have anyone here used these templates as a basis for anything?

Hi,

My client very much likes a website that belongs to their competition. The thing she likes the most is the fact that the content is centered horizontally and vertically in the browser window.

The way they (her competition) have constructed the site is to to place all the content inside a table 100% wide and 100% high with the content centered horizontally and vertically using the table's valign and align attributes.

However, this isn't very "standards", is it . . . so, does anyone know of a way this same effect (content centered horizontally and vertically in browser window) can be acheived using CSS?

Thanks!

Hi,

Hopefully someone can help with this little problem.

I've got a JavaScript menu ...

// JavaScript start.

document.write("<table cellpadding='0' cellspacing='0' border='1' bordercolor='#999999' bgcolor='f5f5f5' width='100%'>");
document.write("<TR><TD class='MenuBackground'>");

if (MenuOption == "Body Lotion")
{
document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>");
}
else
{
document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>");
}

document.write("</TD></TR><TR><TD class='MenuBackground'>");

if (MenuOption == "Shower Gel")
{
document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>");
}
else
{
document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>");
}

document.write("</TD></TR><TR><TD class='MenuBackground'>");

if (MenuOption == "Soaps")
{
document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>");
}
else
{
document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>");
}

// Menu Bottom.
document.write("</TD></TR></table></td></tr></table>");

// JavaScript end.


...and associated CSS file...

// css start.


.MenuBackground
{
WIDTH: 110px; BACKGROUND: #f5f5f5; margin: 0; padding: 0;
}

a.MenuOn:link
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100%
}

a.MenuOn:visited
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100%
}

a.MenuOn:active
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100%
}

a.MenuOn:hover
{
FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #c9c9c9; WIDTH: 100%; HEIGHT: 100%
}


a.MenuOff:link
{
FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%;
}

a.MenuOff:visited
{
FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%;
}

a.MenuOff:active
{
FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%;
}


// css end.


What I expect to happen is that when I scroll over the menu options the whole line should become highlighted. This works fine in IE, but for some reason it doesn't in Firefox. Firefox only highlights the text (as shown in the JavaScript code).

Can anyone point out where I'm going wrong?

url = http://www.natureshedgerow.com

Thank you in advance

PS. I've already fixed a few other problems I've found between IE and Firefox (hopefully this isn't a sign of poor worksmanship on my behalf )

--edit 2 SORRY FOR CONFUSING YOU ALL ----

it works but everytime i click on the link i get extra space underneath the <tr with id>???

http://plumstead-mosque.co.uk/test/admin/outofStock.php

here is the revised code:

PHP Code:
 $res = mysql_query($q);?>
<table>
 <tr>
  <td>Product Id</td>
  <td>Name</td>
  <td>Stock Left</td>
  <td></td>
 </tr><?php
while($ro = mysql_fetch_array($res)){
    echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>";
    $q2 = "select * from productsizes where productid = '{$ro[0]}'";
    $res2 = mysql_query($q2); 
    while($ro2 = mysql_fetch_array($res2)){
        //if
        echo "<tr style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">";
        echo "<td>$ro2[1]</td><td>$ro2[2]</td><td>$ro2[3]</td></tr>";
    }    
}    
echo "</table>";
?> 





----edit 2


is it possible to do this:

<table> <div><tr><td></td></tr></table ??

because i have a link that hides/unhides this div. and it doesnt seem to be working? but if i remove all the tables then it works?

basically i do know the solution (i think) currently i have id and style on div that says "display:none" and change it using JS. so i THINK i can move them to the tr? the only problem with this would be if there are more than one tr as i cant have two tr with same id..
--edit
never mind got this to work, each tr will have "unique" id so there is no point using class. HOWEVER when i used class as
var m = document.getElementByClass("name") it didnt work

---

PHP Code:
 $res = mysql_query($q);?>
<table>
 <tr>
  <td>Product Id</td>
  <td>Name</td>
  <td>Stock Left</td>
  <td></td>
 </tr><?php
while($ro = mysql_fetch_array($res)){
    echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>";
    echo "<div style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">";
    $q2 = "select * from productsizes where productid = '{$ro[0]}'";
    $res2 = mysql_query($q2); 
    while($ro2 = mysql_fetch_array($res2)){
        echo "$ro2[1] $ro2[2] $ro2[3]";
    }
    echo "</div>";        
    }    
    echo "</table>"; 

Hi guys, thanks for reading my thread (once again!)

I have the code below that is my first ever "play" with CSS. The site is nothing serious yet but I am learning how to lay things out in a clear fashion and get used to CSS syntax.

Code:

<HTML>

<TITLE>My Page</TITLE>

<HEAD>
<STYLE type="text/css">
body {background-color:#ffffff; font: 13px;}
div {border: 0px}
#main {margin: 0px auto; width=800px; position: absolute; left: 0%;}

#headerlogo {float: left; width: 200px; height: 55px; background-color: #7EC0EE; text-align: center;}
#headertext {float: left; width: 350px; height: 55px; background-color: #7EC0EE; text-align: left; font: 13px;}
#blankspace {float: left; width: 25px; height: 55px; background-color: #F5F5F5;}
#headerlogin {float: left; width: 225px; height: 55px; background-color: #7EC0EE;}

</STYLE>
</HEAD>

<BODY>

<div id="main">

	<div id="headerlogo">
		<h3>Site Logo</H3>
	</div>

	<div id="headertext">
		Site text goes here.  This sentence is a test to see how much text I can fit in this div before things start to go out of line.  It appears that there can be quite a lot
	</div>

	<div id="blankspace">
	</div>	

	<div id="headerlogin">
		<table width="220" border="0"><FORM NAME="login" ACTION="dologin.asp">
			<tr><td width="70" STYLE="font: 13px">Login:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="text" NAME="loginname" SIZE="4"></td><td width="70" rowspan="2"><INPUT STYLE="width: 70px; height: 20px; font: 12px;" TYPE="submit" NAME="submit" VALUE="Login"></td></tr>
			<tr><td width="70" STYLE="font: 13px">Password:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="password" NAME="Password" SIZE="4"></td></tr>

			</FORM>
	
		</table>
	</div>

</div>

</BODY>
</HTML>

The result can be seen by pasting the above into a notepad file.

I have got a mock "login form" on the right panel, and the only way that I could get the fields to display how I wanted was to put them in a small table. I get the impression (from reading other peoples threads) that mixing tables with CSS is bad practice as it is mixing style and structure. Other posts have said that a small amount of tables is ok.

Should the tables above be replaced with CSS? I tried to set it up myself, but all I could do was get the elements to line up under each other! :

Login:
<text field>
Password:
<pass field>
<submit button>

Also, is there any way to get the two text fields (as in, rows of the table) closer together when using CSS? In a table sense I guess it is the opposite of "cell top and bottom padding?"

Thanks for any help anyone can offer me.

Regards,

Porky

Hello

I'm kinda new to css. (PHP programmer by day) and would like some help making something like this.

stevenbarre dot com / sample.jpg

I want the whole thing to stay in the browser (100% width and height) so you never get scroll bars.

The top orange part should have a height in px as well as the bottom purple part. The green should have a width in px and the blue should be whatever is left over.

I've done some googleing but haven't been able to find much on 100% height designs.

Your help is much appreciated as well as links.

I'm using a PHP script from A List Apart to generate a random image for my header whenever it is called. While the script is great, my image sizes need drastic reduction. These header images are composed of two parts -

1)The title text
2)A background photograph.

I can increase the compression of the background photograph to get it down from 120kb to about 20kb with little notice in quality - a great improvement! However, when I do this, the text suffers a great loss of quality.

Since I can save the text as a .gif which would only register about 6kb, I was wondering if there was a way I could combine the script to get the random photograph and have the text lay on top.

Ive tried putting both img codes in the same div and giving the text a higher z-index, but that does not work.

I know that the best-case scenario would be to just use actual styled text in the div to go on top of the photograph. But I can't get the stroked look I'd want by doing this.

Any suggestions?

I have 2 columns. I have a very tall, narrow column on the left that needs to be exactly 22em wide. I also have a short, fat column on the right that I want to take up the rest of the screen's width.

The problem is that I have to contian my code so that after all of the formatting syntax is done, I can put in a whole ton of text and the text will stay in the right column, and then when the text gets past bttom of the left column it will take the entire width of the screen.

The way I'm doing it right now is by floating to the left both columns and using 29% width for the thin left column and 70% width for the fat right column. This adds up to less than 100% so the browser places them paralell. But if I were to absolutely size the left column (as I want to), 22em + 100% is definately more than 100%. I can't constrain it so it thinks 100% is 100% of the space available to the right column because the text has to be in that "corner" between the right side of the left column and the bottom of the right column.

Any ideas on how I could solve this? If you can do it without floats, that would be even better- it might solve another of my problems.

The page in question is here by the way. All of the formatting code is transcluded in, you probably won't be able to see it unless you're familiar with wikipeida. Please don't edit the page directly

Thanks,
froth

Hello,

I am trying to absolute position two elements within a relatively positioned DIV. My relatively positioned DIV is necessary to center my content on the page. The elements within this DIV must be placed in the upper left corner of the DIV. The reason why is because I want them to be placed on top of one another. Here is the code I have thus far:

<div>
<div id="elem1Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;">
<img id="myItem1" src="image1.png" />
</div>
<div id="elem2Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;">
<img id="myItem2" src="image2.png" />
</div>
</div>

Can anyone help me accomplish my goal? For some reason, the second image is always below the first image. In reality I need it right on top of the first image. At the same time, these two images centered in relation to my page. That is why I placed them in a general div element.

Thank you!
Crystal

I am using style sheet for fonts etc. I was wondering is it OK to use style sheet and <Font> tags at the same time on a page. I mean if you are using certain font only once. Why bother creating a class in style sheet and then calling using that class ..

Common scenario: A floated div that is set to have width:100% to fill up the entire horizontal space.

Here's the problem: I want to bump the div 45px from the left (i.e. adding a 45px left margin). Having both the width: 100% and margin-left: 45px declaration in the CSS expands the div way too far (100% of the screen + 45px for the margin). Because of the design, I cannot use a 45px left padding instead.

A constraint: I don't want to touch the HTML. I know an easy way would be to add a div within the floated div and use a 45px left padding on the floated div.

Almost makes me pine for the IE5.0 broken box model...

p.s. any one have any general advice when mixing 100% widths with absolute values for padding/margins for both floated and non-floated elements?