|
CSS - Css Not Responding In Certain Areas
Ok, I've read over and over my CSS and everything seems perfect. In my HTML editor, the CSS is working, but when it gets the the internet, the content goes berserk. Here are the parts of the code that are not responding:
CSS #content { width:610px; margin-left:0px; position:absolute; left:128px; top:156px; padding:25px; height: 838px; } HTML <div id="content"> (too long for post, please veiw source at website) </div> And the link to the website Similar TutorialsSolved. Thanks anyhow. Any advice ? PHP Code: _results.setAttribute("style", "visibility : hidden;height : 1%;"); node.Height = int isnt working either. Thanks in advance. EDIT: Border problem solved by adding a border-style. I have some (table)border and (cell)padding commands that are not responding in any significant way. Let me first explain what you should see. Then show you the code. It should appear is a black rectangle. Inside this are cells which all have an area of 3px around them. The cells are colored but the area around them should be white (set default color if possible). This white padding should also be right inside the black border, as well as between all cells equally. I may be trying to achieve this the wrong way; I am new to using padding/spacing/border at all, let alone the changes in CSS. Here's the code: CSS: Code:
.results_main_table
{
width: 536px;
height: 101px;
border: 1px;
border-color: #000000;
border-style: solid; #just added to fix borders
}
.results_main_cell
{
width: 534px;
height: 101px;
}
.results_content_table
{
width: 534px;
height: 99px;
}
.results_pic_bg
{
height: 93px;
width: 93px;
background-color: #F2F2F2;
padding: 3px;
}
.results_infobar_short
{
width: 214px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}
.results_infobar_medium
{
width: 215px;
height: 21px;
background-color: #CCCCCC;
padding: 3px;
}
.results_infobar_long
{
width: 350px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}
.results_infobar_fav
{
width: 79px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}
HTML: Code: <table class="results_main_table"> <tr> <td class="results_main_cell"> <table class="results_content_table"> <tr> <td class="results_pic_bg" rowspan="3"></td> <td class="results_infobar_short"> [username]</td> <td class="results_infobar_medium"> [age] years old</td> </tr> <tr> <td class="results_infobar_short"> [sex_stat]</td> <td class="results_infobar_medium"> Body Type: [body]</td> </tr> <tr> <td class="results_infobar_long"> Location: [city], [state/province], [CC]</td> <td class="results_infobar_fav"><center>ADD to FAV</center></td> </tr> </table> </td> </tr> </table> Here's the code: Code: <table class="tab_thin_table"> <tr> <td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 1</td><td class="tab_end_off" rowspan="2"></td> <td class="tab_start_on" rowspan="2"></td><td class="tab_bg_on" rowspan="2">Example 1 ON</td><td class="tab_end_on" rowspan="2"></td> <td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 3</td><td class="tab_end_off" rowspan="2"></td> <td class="tab_thin_spacer"></td> </tr> <tr> <td class="tab_thin_top"></td> </tr> </table> Here's the CSS: Code:
tab_thin_table
{
width: 578px;
vertical-align: top;
}
.tab_thin_top
{
height: 1px;
background-color: #6E7073;
}
.tab_thin_spacer
{
height: 19px;
}
.tab_start_on
{
width: 6px;
height: 20px;
background: url(../container/tab_start_on.gif);
background-repeat: no-repeat;
}
.tab_bg_on
{
background: url(../container/tab_bg_on.gif);
}
.tab_end_on
{
width: 10px;
height: 20px;
background: url(../container/tab_end_on.gif);
background-repeat: no-repeat;
}
NOTE: tabs with "off" are same as tabs with "on" just different image Here's the problems As you can see the tab_thin_spacer and tab_thin_top sit on top of each other. The cells with are using the tab ons and offs are of dynamic widh determined by each page. However, the tab_thin_table is a set width. I need tab_spacer and tab_top to always stretch the rest of the existing width of the table; whatever width is not taken up by the tab ons and offs Thanks what I am wanting to do is have a reverse of this so that all the areas i contain within a given <div class="printerOnly"></div> is not shown on the screen but is ready to be printed, when the print button is pressed of course. and all the other areas are not printed. is this possible ? Code:
<style type="text/css">
@media all {
.page-break { display: none; }
}
@media print
{
.page-break { display: block; page-break-befo always; }
}
@media print {
div.screenOnly { display: none; }
}
@media print {
div.noborder { border-width: 0px; border-style: none; }
}
</style>
<div class="screenOnly">
this shows on the screen
</div>
<div>this is printed</div>
Image example here. Text different behavior Why is is that the text drops down in different area of the div. The div is set a specific size but the text drops down where ever it wants. I have not added ant <br> tags just srtaight text and it still drops down where ever. Why does the text not go all the way to the end of the div anyway? I'm creating an area that will have code snippets in it, I want it to scroll horizontally (wrapping may make the code inaccurate in some languages), but vertically I want the height of the area to grow dynamically. An example can be seen on this page: http://scratchprojects.com/2006/02/sample_article_tic_tac_toe_p02.php The problem is, in IE, if there is a horizontal scroll bar, it doesn't make quite enough room, so you have to scroll vertically as well. Shrink your browser window so the code snippet at the bottom of the page doesn't fit and you'll see the two scrollbars appear. In Firefox and Opera, just the horizontal scrollbar shows up. Here's the basics of the code: Code: <div class="code">
<pre class="codeblock">Private Sub menuAboutTTT_Click(ByVal sender _
As System.Object, ByVal e As System.EventArgs) Handles menuAboutTTT.Click
MessageBox.Show("Tic-Tac-Toe v1.0" & vbCrLf & _
"See how this and other programs work at" & _
vbCrLf & "http://www.scratchprojects.com")
End Sub ' menuAboutTTT_Click</pre>
</div>
Here's the style sheet: Code: .code {
text-align: center;
margin: 15px;
}
.codeblock {
text-align: left;
background: #fff;
border: 1px;
border-style: inset;
width: 99%;
height: auto;
overflow: auto;
}
Any help would be appreciated. Thanks. I'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you. Code: #content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}
/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/
/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/
/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/
Code: <div id="content"><!--CONTENT SECTION START-->
PHP MENU IS CREATED HERE...
<div id="locationBox"><!--OPEN BOX-->
<div class="boxTop"></div>
<div class="boxContent">
<div class="locInfoMap">
MAIN CONTENT GOES HERE...
</div>
</div>
</div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->
Hi I've got 4 divs that are of the exact same size. I need them to all occupy the same real estate on a page. three of them will always be hidden and only one is visible at a time, this is controled by javascript. My question is what kind of positioning tricks do I have to do in order to make these 4 identical sized divs occupy the same space. I tried relative positioning like this div1{ position:relative; top:0; left:0; height:200px;} div2{ position:relative; top:-200; left:0;height:200px;} div3{ position:relative; top:-400; left:0;height:200px;} div4{ position:relative; top:-600; left:0;height:200px;} This only moved the contents of each div up to the desired location, however, it did not move the actual div itself, so I'm left with the reserved 600px high worth of empty space Please help |
|||||||