CSS - Text Drops In Different Areas Of Div In Ff Vs. Ie

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>

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

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

I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced.

any idea ? tutorial? let me know if i need to explain more.

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.

can someone help me with this?
here is the page&css I have been working on...

the page file
the css file

I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site?

this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!!

I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example:

Code:

<html>
<body>
<td><p style="text-align:right">Google</p></td>
<td><a href="http://www.google.com" style="text-align:right">Google</a></td>
<td><a style="text-align:right" href="http://www.google.com">Google</a></td>
<td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td>
<td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td>
<span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span>
</body>
</html>

The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions?

(My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.)

I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece

i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text.

Hi.
See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should.
Please also read some comments in the code.

Code:

<html><body><center><br><br>
Why does image not force the outermost span to be at least as high as image?<br>
If the text are long enough and gets below the bottom border of image it look good though.<br><br>
NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br>
In my real application I'm using an <a href=" ...> around the outer span in examples below.<br>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;">
		<span style="display:block; float:left">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0">
		</span>
		
		<span style="display: block; color: white;">
			Text here. 
		</span>
	</span>
</td></tr></table>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left">
			Text here.
	</span>
</td></tr></table>

</center></body></html>

Hmm, This is a problem that has plagued me for a while, but just recently decided to find a solution.

Basically I like to single out words for empasis on certain pages. Well with EM that's fine. However on a new website I'm coding I need to do (TYPE 1 FONT) (TYPE 2 FONT) (TYPE 3 FONT). All are different decorations. Is there a way to create a tag for each word?

Thanks.

Based on the questions I see being asked and answered here, I'm concerned many of you will laugh at my ignorance, but here goes anyway.

I want to know how to use CSS on just a little text.

For example, let's say I want to render One-Two-Three-BOOM as text on a Web page, except that what I really want is for the BOOM part to be in a larger font and bold-faced. Can that be done using CSS? Can I select the BOOM part in Front Page 2003 and impose a CSS style to those four letters and only those four? Everything I try, based on the CSS file I'm using, results in applying the new style to all of the text within a whole paragraph. I want to be able to apply the style to just a little text at a time.

As another example, I want to render the following two lines

Johnny G. Doe
123 West South Street

in such a way that, using CSS to control everything, I can get the second line to appear in a smaller font. I can get it to work if there's a <p> between the two lines, but not if I want to separate them with a <br>.

I'm not asking whether it's a good idea to use CSS this way, I'm just asking how to do it.

I will try to attach a file to this thread that shows the first several lines of the CSS file I'm using, in case that makes a difference. If this doesn't work, please let me know.

Thanks.

--Johnny