|
CSS - Text Box Width 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. Similar TutorialsHi... I have got a problem with a page I am working on. I have got at stylesheet for my site. By this stylesheet I want my page to look the same nearly always. But unfortunately the page moves around and the width of my <div> tags changes from time to time. This image is of the page as it should look: http://www.student.dtu.dk/~s011606/width2.jpg And this image is as it often looks like: http://www.student.dtu.dk/~s011606/width1.jpg I would like the page to look like the first image at all times.. But i cant find the problem in the stylesheet.. My default page looks like this: Code: <TABLE width="100%">
<TR>
<TD valign="top">
<div id="centermainbox">
<?php
if (!isset($page)) {
include "frontpage/frontpage.php";
}
else {
include($page . "/" . $page . "_page.php");
}
?>
</div>
</TD>
<?PHP
if ($_SESSION['inst_msg']) {
echo '<TD width="285" valign="top">';
echo "<div id=\"instantbox\">";
echo '<IFRAME src="instantmsg/inst_msg_page.php" HEIGHT="100%" WIDTH="100%" frameborder="0"></IFRAME>';
//$db_connection->db_stop();
echo "</div>";
echo "</TD>";
}
else {
echo "<td width=\"20%\"></td>";
}
?>
</TR></TABLE>
The relevant informations in the stylesheet looks like this: Code: #centerbox {
position: relative;
top:1px;
left: 20em;
width: 75%;
padding : 0px 0px 0px 0px;
}
#centermainbox {
position: relative;
top:0px;
left: 0em;
height: auto;
width: auto;
min-height: 490px;
background: white;
border:1px solid #8CACBB;
padding : 10px 10px 10px 10px;
overflow: auto;
}
#instantbox {
position: relative;
top:0px;
min-height: 490px;
height: 490px;
min-width: 285px;
max-width: 285px;
width: 285px;
background: white;
border:1px solid #8CACBB;
padding : 10px 10px 10px 10px;
overflow: auto;
}
I hope there is someone who can help me.. Kind regards Jens... 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"> </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> </td> <td> <!-- footer removed for containing urls --> </td> <td> </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> </td> </tr> <!-- End Second Row --> <!-- Third Row - Footer --> <tr> <td> </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-) 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; } 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. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. this should be simple, but im just not finding my answer. im trying to figure out how to evenly spread several links across a fixed width. i could manually set the padding or margins for each link, but i figure there has to be a way to do it in css automagically. I must be missing something really simple... but it seems that setting style ="text-align:center; width:300px" or anything equivalent doesn't work (for me). I don't find anything that says they can't be used together, but when I do, my div is suddenly left-aligned. I have tried placing the two items in a single division and also nesting divisions with one attribute in each... Nothing seems to work: <div style="text-align:center; border: 7px red ridge; height:300px; width:300px;"> fails; Take out the width: div style="text-align:center; border: 7px red ridge; height:300px; "> and it centers just fine. (at least netscape and safari both have this result) any ideas? (I must be blind) Hi, I am creating a site with drop down menus, done purely in CSS. If I don't set the 'width' parameter for 'ul' element then in IE7, Firefox and Opera the menu appears fine. In IE6 however the menu just stacks vertically unless I set the width parameter. The reason I don't want to set width is because I would like the top level menu items to just be the length of the text as in IE7 etc. One item is particularly longer than the others and so wastes space. The code for this element: Code:
#menu ul {
list-style: none;
margin: 0;
padding: 0;
/*change for IE6*/
/*width: 7em;*/
/*stops going onto two lines but then just becomes hidden*/
/*white-space: nowrap;*/
/*
width: auto;
min-width: 40px;
*/
float: left;
}
Is there any way to set the width to be that of the text contained? IE7, Firefox and Opera seem to do this automatically. After extensive searching I have tried auto width, floating in different ways, setting min-width as well as setting no-wrap but no joy. Is there a way to do this, or will I need to configure a set width to make it backwards compatible? Thanks. What I'm trying to do is create a menu for an AJAX function in which my content will slide. I don't know need help with the AJAX portion. Where I'm having my trouble is that I want to display four items at a time and then hide the other content to the right of this. When someone would click the button it would slide to left and display the next four elements. I have my four elements and have set a width for them. I am floating these elements left to get them to line up next to each other and I'm using overflow:hidden to hide the content you don't set. What I'm doing wrong is with the width portion. Code: #rightnav {
margin-top:14px;
background-image:url(../images/loader.gif);
background-position:center center;
background-repeat:no-repeat;
width:282px;
overflow:hidden;
}
#rightnav hr {
color:white;
background-color:white;
height:1px;
border:none;
width: 250px;
margin: 7px auto ;
}
#rightnav, #wslist, #rslist, #wtlist {
height:306px;
float:left;
}
#wslist {
background-color:#336699;
}
.list {
width:282px;
float:left;
}
HTML as follows:
<div id="rightnav">
<div id="rightbox">
<div id="wslist">
<div id="video">
Word on the Street: <span id="linkIntro">[ <a id="introVid" href="#">Play intro video</a> ]</span>
</div>
<hr />
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Why is my family so screwed up?</p>
<p id="vidSub">What to do when families fight</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This my second Title</p>
<p id="vidSub">A video on titles</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This is my third title</p>
<p id="vidSub">Yay for subtitles, esp ESL</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Four titles are great though</p>
<p id="vidSub">I am full of English SDH</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">I am the outcast of the group</p>
<p id="vidSub">Mah.. nobody loves me</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="clearfix"><!--clear--></div>
</div>
</div>
</div>
What I've noticed if I don't put the width property in the div floats to the left as desired. But when I put the width property in and use overflow it just knocks it down below it. Any suggestions? i want to fit in my 'Did you know?' panel beside my ad, but i'm having a lot of trouble... the ad is 468x60. here is the panel: Code: <div class='ocontentsection panelmargins floatleft' style='margin-left:8px; height:101px; width:167px;'>
<h2 class='aligncenter' style='text-indent:0;'>
Did you know?
</h2>
<div class='contenttext' style='font-size:9px;'>
<p class='nomargins'>
<?php
$tips = array(
"The formula generating your VIPortals Score is:
<strong>Games Played * 2 + Votes Casted * 3 + Comments Added * 4 + (Games Played + Votes Casted + Comments Added) * 5</strong>",
"The money awarded to the winners of every contest comes from the <strong>advertisers</strong> who are paying us to place their ads here."
);
$rand_index = round(rand(0, count($tips) - 1));
echo $tips[$rand_index];
?>
</p>
</div>
</div>
look here in the middle of the page i want the text to fit inside the box too :S is there a better way of doing this? as you can see, i had to set a bunch of widths and stuff... thanks. Hi. Lets say I've a div with width:300px and then there're some user generated content (Example: aaaaaaaaaa.....) that was so long without any whitespace that exceed the lenght of the div. Right now that word gone pass the right border of my div. Is there a way to style it so the word will not pass the right border and actually moved to the next line? I was thinking about changing the div as display table but maybe I don't want to do that and not sure if that will do it as well. The reason I don't want to use display as table because it's not compatiable to older browser. Is there any way to prevent this type of behaviour? Thanks. 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.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. 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 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... 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 |
|||||||