CSS - Width Is Not Consistent

A left floating text box that text wraps around the top, right and bottom is not rendering at the same size in all browsers (IE and Firefox are my main test platforms). The page was going pretty well, thanks to some help I have already received, but I hit a snag on this. Please take a look at the test page below.

TEST PAGE

The relevant style code follows:

Code:

.textboxleft 
{
	background: #3E5C92;
	font: normal 0.8em/140% arial, helvetica, sans-serif;
	margin: 10px;
	width: 160px;
	border: 1px solid #E4E7F5;
	float: left;
	overflow: hidden;
	padding: 0.5em;
}
.textboxleft p
{
	color: #000000;
}
ul li
{
	color: #E0E0F6;
	font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}

Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information.

If there is something I can alter in the CSS to make the box 160px wide (or whatever I decide on) in all browsers, please let me know. I am very new at this and have only gotten this far with the help of people like you.

Thank you,

Grump
PS: you will also notice another thread concerning the bulleted list problem you see. It bumps into the text box and doesn't look good. Please excuse any redundancy, but these are 2 different problems, I think.

See:
http://www.mandgweb.net/css_help/

I am trying to get the 'divs' of the 3 columns of content (A, B, C) to expand to the height of the tallest column (in this case 'A') while the height of the main container (blue border) expands/contracts as necessary to accommodate the tallest column. The main effect I am trying to achieve it to get the vertical rules between the columns to be the same height (i.e. the height of the tallest column).

Easier said then done..?

Thanks in advance.

My web site (URL address blocked: See forum rules) is causing me problems with CSS since I have reworked it.
If you look at my web pages in Internet Explorer they look perfect. In Firefox when loading some of the pages the top logo blinks and takes a few seconds to load. In Opera some pages move slightly to the right.
I know the problem is related to the length of the center div but I have no idea how to fix this unless I make the small centers longer.
Also my previous version of this site just used one image. Logo.gif was in the background.
I have put Logo.gif in the header and have used GREEN.jpg as my background now.
MY CSS
body {
background-image: url(../images/GREEN.jpg);
}
div.container {
position: relative;
margin: 0 auto;
width: 746px;
height: 840px;
}
#header {
height: 100px;
width: 746px;
background-image: url(../images/Logo.gif);
background-repeat: no-repeat;
background-position: 50% 0%;
}
#nav {
position: absolute;
top: 110px;
left: 55px;
height: 20px;
width: 640px;
}
#left {
position: absolute;
top: 160px;
left: 0px;
width: 124px;
}
#center {
position: absolute;
top: 160px;
left: 130px;
width: 441px;
height: auto;
border: solid;
}
/* right div at this time has been made invisible. Maybe later add Flash content*/
#right {
position: absolute;
top: 160px;
left: 600px;
width: 130px;
height: 100px;
}
/* this div belongs on photo pages and shows the alphabet on the right.Takes place of right div */
#navalpha {
position: absolute;
top: 160px;
left: 600px;
width: 100px;
height: 130px;
font-family: "Courier New", Courier, monospace;
border: solid;
}
/* Start of Top Menu*/
ul {
list-style: none;
margin: 0;
padding: 0;
font-size: .95em;

}

ul li {
float: left;
margin: 0;
padding: 0;
}
ul li a {
color: #777;
display: block;
text-align: center;
text-decoration: none;
width: auto;
padding: 3px 5px 3px 5px;
border-color: #191970;
border-width: 1px 1px 1px 0;
border-style: solid;
}
ul li.first a {
border-width: 1px;
}

ul li a:hover {
background-color: Fuchsia;
color: Yellow;
}
/* end of Top Menu*/
/* start of side Menu*/
ul#navlist
{
width: 102px;
padding: 0px;
margin: 0px;
border-left: thin solid Black;
font-size: .95em;
float: left;
}
ul#navlist li
{
list-style: none;
margin: 0px;
border: 0px;
}

ul#navlist li a
{
color: #777;
width: 102px;
padding: 2px 8px 2px 8px;
border-color: #191970;
border-width: 0px 1px 1px 0;
border-style: solid;
text-decoration: none;
text-align: left;
}
ul#navlist li.topfirst a {
border-top: 1px solid Black;
}
ul#navlist li a:link { color: Blue;
}
ul#navlist li a:hover
{
border-color: #191970;
color: Red;
background: Yellow;
}
ul#navlist li a:visited {
color: Blue;
}
/* end of side Menu*/
p {
text-align: left;
margin: 0 10px 0 10px;
}
h1 {
font-size: 1.05em;
color: Navy;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
padding: 0px 0 6px 19px;
border-bottom: 1px dashed navy;
background: url(cube.gif) no-repeat 0 2px;
margin: 0 10px 0 10px;
}
h2 {
font-size: 1em;
color: Navy;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
margin: 0 10px 0 10px;
}
h3 {
font-size: .9em;
color: Navy;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
margin: 0 10px 0 10px;
}
a:link {
color: #0000FF;
text-decoration: none;
}
a:visited {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: Red;
text-decoration: none;
}
a:active {
text-decoration: none;
}
/*
....................thumbnail determines how the small photos look
*/
.thumbnail
{
float: left;
width: 83px;
height: 115px;
border: 1px solid #999;
margin: 0px 15px 5px 0;
padding: 5px;
}
/*
.................thumbnailUnitBoard determines how the photos look on Unit Board page
*/
.thumbnailUnitBoard
{
float: left;
width: 220px;
margin: 0px 15px 15px 0;
padding: 5px;
}

I'm playing around with web development after quite a lengthy break. I wrote the home page out by hand and had attempted to validate, fixed the errors and repeated until it validated at w3.org. When I copied the code from the first page and removed the right side of the table ( it was 3 columns on the main page but I only wanted 2 columns for the "template page" ). When viewing the template page in IE the table is off center ( all the way to the left ) and the links have unwarranted line spaces between them.

I can understand removing a column might affect the alignment of a table ( or at least, this is not what I'm worried about so much ) but the alterations to the navigation pane are baffling. Specifically, because the nav pane is inserted by the same php script on both the working, and dysfunctional page. The css is also the same as they are coded to pull from the specified url copy and pasted from one doc to the other as opposed to mistakenly using a css in a different directory than the working one.

The working page is:
Code:

<html>
<head>
<title> Under Construction </title>
<link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<table class="main">

<tr class="header">
	<th class="left"><div  id="img"></div></th>
	<th class="center"><h1 class="MainHeading">Brendan Walton</h1></th>
	<th class="right">&nbsp;</th>
</tr>
<tr class="body">
	<td>
		<div id="navMenu">
<ul class="navlist">
<li>
<div class="navhead" onclick='IsOpen(0)'>Literature</div>
<ul class="navlist" id="sm0" style="display:block;">
<li><a href="" class="navlink">Guides</a></li>
<li><a href="" class="navlink">Web Reference</a></li>
<li><a href="" class="navlink">Desktop Reference</a></li>
<li><a href="" class="navlink">External Reference</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick='IsOpen(1)'>Fun and Random</div>
<ul class="navlist" id="sm1" style="display:none;">
<li><a href="" class="navlink">Videos</a></li>
<li><a href="" class="navlink">Images</a></li>
<li><a href="" class="navlink">Music</a></li>
<li><a href="" class="navlink">Random Page</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick="IsOpen(2)">Code Base</div>
<ul class="navlist" id="sm2" style="display:none;">
<li><a href="code_base_sample2.html" class="navlink">Java</a></li>
<li><a href="code_base_sample2.html" class="navlink">C++</a></li>
<li><a href="code_base_sample2.html" class="navlink">PHP</a></li>
<li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li>
</ul>
</li>
<li><div class="navhead" onclick="IsOpen(3)">General</div>
<ul class="navlist" id="sm3" style="display:none;">
<li><a href="" class="navlink">About Us</a></li>
<li><a href="" class="navlink">Don't Like the Look?</a></li>
<li><a href="" class="navlink">Community</a></li>
<li><a href="" class="navlink">Site Map</a></li>
</ul>
</li>
</ul>
</div>
<div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div>
<script type="text/javascript" src="javascript/menuwork.js"></script>
	</td>
	<td>
		<h4 class="heading">Coming Soon!!</h4>
		<hr class="pagebreak" />
		<p class="cblock"> This website will eventually have content, for now, just enjoy the pretty colors and the fancy, interactive menu to the left...</p>
		<h4 class="heading">Update: April 6, 2010</h4>
		<hr class="pagebreak" />
		<p class="cblock"> I have changed the navigation to the left to reflect the content the site will eventually house. Additionally I have begun styling how the codebase will eventually display it's information. To see a sample of the code output simply click any of the codebase links to the left.</p>
		<p class="cblock"> On a personal note, it has recently come to my attention that Dom's birthday was actually the second of April, not the fourth. I apologize for the tardy wishes. </p>
		<h4 class="heading">Update: April 4, 2010</h4>
		<hr class="pagebreak" />
		<p class="cblock"> Still working on the style for the website, It's coming along, albeit slowly... Also, even though you're never going to see this, Happy birthday Dom 8-)</p>
	</td>
	<td><img src="images/Brendan.jpg" alt="Brendan" id="portrait" />
	<hr style="width:150px;" />
	<p class="iblock"> "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding"</p>
	<hr style="width:150px;" />
	<a href="aboutus.php"> About Us </a>
	</td>
</tr>
<tr >
	<td>&nbsp;</td>
	<td>
		<!-- footer removed for containing urls -->
	</td>
	<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

The dysfunctional page is:
Code:

<!-- XHTML 1.1 -->

<!-- Document Start -->
<html>

<!-- Head -->
<head>

<!-- Title -->
<title>  </title>

<!-- Style Sheet -->
<link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" />

<!-- Charset UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- PHP Includes -->
</head>
<!-- End Includes -->
<!-- Body -->
<body>

<!-- Main Table -->
<table class="main">
<!-- First Row - Header -->
<tr class="header">
	<!-- Start Banner -->
	<th class="left"><div  id="img"></div></th>
	<th class="center"><h1 class="MainHeading">Brendan Walton</h1></th>
	<!-- End Banner -->
</tr>
<!-- End First Row -->
<!-- Second Row - Content -->
<tr class="body">
	<td>
		<div id="navMenu">
<ul class="navlist">
<li>
<div class="navhead" onclick='IsOpen(0)'>Literature</div>
<ul class="navlist" id="sm0" style="display:block;">
<li><a href="" class="navlink">Guides</a></li>
<li><a href="" class="navlink">Web Reference</a></li>
<li><a href="" class="navlink">Desktop Reference</a></li>
<li><a href="" class="navlink">External Reference</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick='IsOpen(1)'>Fun and Random</div>
<ul class="navlist" id="sm1" style="display:none;">
<li><a href="" class="navlink">Videos</a></li>
<li><a href="" class="navlink">Images</a></li>
<li><a href="" class="navlink">Music</a></li>
<li><a href="" class="navlink">Random Page</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick="IsOpen(2)">Code Base</div>
<ul class="navlist" id="sm2" style="display:none;">
<li><a href="code_base_sample2.html" class="navlink">Java</a></li>
<li><a href="code_base_sample2.html" class="navlink">C++</a></li>
<li><a href="code_base_sample2.html" class="navlink">PHP</a></li>
<li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li>
</ul>
</li>
<li><div class="navhead" onclick="IsOpen(3)">General</div>
<ul class="navlist" id="sm3" style="display:none;">
<li><a href="" class="navlink">About Us</a></li>
<li><a href="" class="navlink">Don't Like the Look?</a></li>
<li><a href="" class="navlink">Community</a></li>
<li><a href="" class="navlink">Site Map</a></li>
</ul>
</li>
</ul>
</div>
<div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div>
<script type="text/javascript" src="javascript/menuwork.js"></script>
	</td>
	<td>
		&nbsp;
	</td>
</tr>
<!-- End Second Row -->
<!-- Third Row - Footer -->
<tr>
	<td>&nbsp;</td>
	<td>
		<!-- footer removed for containing urls -->
	</td>
</tr>
<!-- End Third Row -->
</table>
<!-- End Table -->
</body>
<!-- End Body -->
</html>
<!-- End Doc -->

The css is:
Code:

body
{
 color:#333333;
 background-color:#FFFFFF;
 margin:0px;
 padding:0px;
}

hr.pagebreak
{
 width:450px;
 color:#550072;
}

.subHeading
{
 color:#8A00B8;
 font-size:18px;
}

ul.navlist
{
 display:inline;
 list-style-type:none;
 margin:0px;
 padding:0px;
}

a.navlink:link
{
 color:#FFFFFF;
 background-color:#550072;
 display:block;
 text-align:right;
 text-decoration:none;
 font-weight:bold;
 margin:0px;
 padding-right:2px;
}

a.navlink:visited
{
 color:#FFFFFF;
 background-color:#550072;
 display:block;
 text-align:right;
 text-decoration:none;
 font-weight:bold;
 margin:0px;
 padding-right:2px;
}

a.navlink:hover
{
 color:#FFFFFF;
 background-color:#8A00B8;
 text-decoration:none;
 margin:0px;
 padding-right:2px;
}

tr
{
 vertical-align:top;
}

table
{
 margin-left:auto;
 margin-right:auto;
 margin-bottom:0;
 margin-top:0;
}

table.main
{
 background-color:#FFFFFF;

}

th.left
{
 width:150px;
}

th.center
{
 width:500px;
}

th.right
{
 width:150px;
}

a.navhead:link
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

a.navhead:visited
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

div.navhead
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

h4.heading
{
 display:block;
 margin:0px;
 padding-right:30px;
 color:#550072;
 text-indent:15px;
 text-align:right;
 font-size:24px;
}

img
{
 display:block;
 margin:0;
 padding:0;
}

p.cblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:475px;
}

p.fblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:475px;
 text-align:center;
}

.footer
{
 text-align:center;
}

#navMenu
{
 height:300px;
}

h1.MainHeading
{
 font-size:50px;
 color:#550072;
 text-align:left;
}


#img
{
 background-image:url("../images/purple-150x150-clear.jpg");
 background-repeat:no-repeat;
 height:150px;
 width:150px;
}
img.cssscriptimg
{
 display:inline;
}

#portrait
{
 width:150px;
}

p.iblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:150px;
}

The navigation script is below:
PHP Code:
<?php
// This is a simple script to insert the navigation pane into every page

function echoNav ()
{
    // color changer
    //echo "<img class=\"cssscriptimg\" src=\"images/purple.jpg\" alt=\"purple\" onclick=\"LoadCss(\"purple\")\" />";
    //echo "<img class=\"cssscriptimg\" src=\"images/red.jpg\" alt=\"red\" onclick=\"LoadCss(\"red\")\ />";
    //echo "<img class=\"cssscriptimg\" src=\"images/green.jpg\" alt=\"green\" onclick=\"LoadCss(\"green\")\" />";

    // navMenu devision
    echo "<div id=\"navMenu\">\n";
    
    // Section List
    echo "<ul class=\"navlist\">\n";

    // First section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick='IsOpen(0)'>Literature</div>\n";

    // First link list
    echo "<ul class=\"navlist\" id=\"sm0\" style=\"display:block;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">Guides</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Web Reference</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Desktop Reference</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">External Reference</a></li>\n";
    echo "</ul>\n";

    // End first section
    echo "</li>\n";

    // Second Section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick='IsOpen(1)'>Fun and Random</div>\n";
    echo "<ul class=\"navlist\" id=\"sm1\" style=\"display:none;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">Videos</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Images</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Music</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Random Page</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Second Section

    // Third Section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick=\"IsOpen(2)\">Code Base</div>\n";
    echo "<ul class=\"navlist\" id=\"sm2\" style=\"display:none;\">\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">Java</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">C++</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">PHP</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">JavaScript</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Third Section

    // Fourth Section
    echo "<li>";
    echo "<div class=\"navhead\" onclick=\"IsOpen(3)\">General</div>\n";
    echo "<ul class=\"navlist\" id=\"sm3\" style=\"display:none;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">About Us</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Don't Like the Look?</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Community</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Site Map</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Fourth Section

        // End Section List
        echo "</ul>\n";

        // End navMenu
        echo "</div>\n";

    // Stats
    echo "<div class=\"navhead\" style=\"height:150px;\"><img src=\"images/stats.jpg\" alt=\"TempStats\" /></div>\n";

    // Scripts
    echo "<script type=\"text/javascript\" src=\"javascript/menuwork.js\"></script>\n";
    // echo "<script type=\"text/javascript\" src=\"javascript/LoadCss.js\"></script>\n";
}

?>




Note:
I apologize for only pasting the HTML, this is the HTML as seen by IE after scripts have been run. I would have put links but I am a new user and that appears to be restricted. Removed direct URL access to the javascripts, images, and doctypes, as a result of being a new user as well, in the actual source they are accessed by a URL to ensure that it is compatible no matter which directory the functions are called within. That being said, the javascript was never a problem, even with the display issue, the javascript functioned as expected.

Any help would be very appreciated 8-)

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....