CSS - Cursor Won't Display In Text Area

Hi,

Can anyone recommend how best to how to dynamically constrain amount of Text/Content in a DIV area that can vary in size??

That is, say you have:
(a) a content (DIV) area on your view that can expand/contract depending upon browser size ( i.e. when someone is re-sizing the browser window) and
(b) dynamic text/content that is to be displayed, based upon user input - e.g. image a defined area/size for several user comments for example. Users can create their own comments, but you only want them to be able to take up a given amount of screen resource, and then perhaps have a "...more" link at the bottom if they go over.

How can I best setup this up? e.g.
(1) How to setup the layout/CSS so that if more text / content is present in the DIV area that can be displayed that the DIV area doesn't expand due to the extra content the user put forward, and/or
(2) Do I need to also complete this by programming what content comes out? E.g. in Ruby on Rails say then the question would be how to calculate how much text/content can fit in the current size of the DIV (noting browser re-sizing) so that you get the chance to put the "...more" link at the bottom? Hopefully this approach isn't required.

Any other suggestions welcome that address what I'm trying to do are welcome, which is really offering a area for display of user feedback where each piece of feedback has a maximum area it can take on the main screen only, and also that browser re-sizing is possible.

Tks
Greg

Alrite,

Im having a little trouble hiding text and then showing the text only on the printout of the page. Here is what I have so far:

Setting up Style tags:


PHP Code:
<style type="text/CSS">
#inc
{
   display:none;    //hides text on page
}
</style>
<style type="text/CSS" media="print">
#omit
{
   display:none;    //hides text on printout
}
</style> 




... that bit works fine, it is this bit I am struggling with, how do I write the following:

PHP Code:
<style type="text/CSS" media="print">
#inc
{
   display:??? what goes here ???;    //show text on printout
}
</style> 




... here is the #inc being called:


PHP Code:
<span id="inc">
<font face="Arial" size="3" color="#000000">Text
</span> 




... so the #inc is called to hide the text on the page but displays text on printout.

Am I going in the right direction???

Thanks

Nick

Hi I have the html below and I only want to display the "initial text" and the "some more text" bits of text. Is this possible using only CSS without any modifications to the html e.g. adding id's ?


<div id="snav">

<p><span id="somespan">You are he

<a title="home page" href="/content/index.html">Home</a> <a href="http://www,saving.com">initial text here </a><br />Some more Text here.</span></p>

</div>



thanks.


G

Here's the issue...

When the site loads, you'll see the h3 text for a second (on the right), then it gets covered up by the side boxes. I've tried using z-index for my h3 tags so they "hover" over the side boxes, but to no avail.

Here's the link: http://www.infothreads.com/

Oddly, all the links show up above the side boxes, but not the h3 text.

Any ideas?

Thanks in advance.

Damnit. Differing browser box models piss me off. I guess thats what you get for being a web developer, where someone can use 6+ different programs to run your code.

I just started doing design with divs instead of tables and man what a PITA. I really like the idea of "building blocks" tho (and I really hate the inflexibility of tables), so I'm trying to grind through it. Its a small project, however, so I havent really been able to test cross-browser compatibility too much.

I'm running into a strange error in IE (sidenote: the page does seem to be handled correctly in Opera (though Firefox jacks the page up totally)). Anyways, I have a series of nested divs (to emulate the structure of a table). Everything looks fine until I start messing around with divs with a display of 'none'.

When I insert a div (or set a current div's) with display = 'none', part of the form input text will "flow over" outside of the div. In the pictured example, "Zachary Wedgeworth" is the last entry in the selectbox. There is no code / html after that selectbox, but as you can see, "Wedgeworth" appears after it! It isnt even able to be highlighted! The second line of the form contains a div with style='display:none'. If there's no div containing anything to do with display, this "overflow" error doesnt occur. There should be no difference in inserting a non-displayed div vs. never putting the div in the code at all, but (in IE at least), there is. stupid & frustrating.

Has anyone run into this problem or have any idea why this might be occuring? Its already stumped a couple fellow programmers.

I want to display a byline in front of my logo. The byline is text, and the logo is an image (not a background image). Here is the existing code where I have inserted the new block element 'byline' in the HTML and CSS. The logo img is aligned in the center (align=center), and the byline is to sit on top of that logo slightly to the left of center of the logo image. All code and CSS is currently validated. Doc type: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


HTML CODE
Code:

	<div id="container">
		<img class="logo" src="images/factor30_logo.png" alt="factor30" width="290" height="124" />
		<div id="intro">Blah blah blah blah</div>
		<div id="byline">delivering your internet projects on time and within budget</div>
<!---there are several more block elements but for the purpose this exercise I have removed them--->
	</div>

CSS CODE
Code:

#container {
	margin-top: 26px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

img.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#byline {
	position:absolute;
	display: block;
	margin-left: auto;
	margin-right: auto;
	top: 126px;
	text-align: center;
	font: normal 11px "Trebuchet MS","MS Sans Serif",Geneva,Serif; 
	color: black;
	z-index:1000;
}

Hello, I've been having trouble with a simple design I have been creating. I was wanting the footer text to display in a straight line, but it's displaying horizontally. Could you please look at my HTML and CSS coding and see if I had made an error:

Code:

www.wendyhenrichs.com/huy

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 All,

Here's my issue... I have decided to try an all css-based layout which will incorporate:

1. a background image (770px wide) that repeats on the y axis in the BODY tag

2. a background image that will not repeat in a DIV tag that is slightly less wide (750px) than the BODY tag's background image

The background image in the BODY will repeat on the y axis and provide a backdrop and edges that extend beyond and below the background image contained in the DIV tag which will also contain the main content/text for the site. [ Note: The background-image in the DIV tag is 631px in height. ]

The problem is as follows:

Since I do not have enough text to extend the content DIV to the height of the background image and/or beyond, the background image is not being fully displayed; the top and bottom of the background image is being cut off and the image as a whole is being pushed upward at the same time.

To see the problem: http://publictrust.ca/css/default.htm

The css is as follows:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #260D0D;
font-size: 0.8em;
background-color: #260D0D;
margin: 0px;
padding: 0px;
background-image: url(../images/body-bg.jpg);
background-repeat: repeat-y;
background-position: center center;
}
#divHeader {
margin: 0px;
width: 750px;
color: #260D0D;
}
#divMain {
background-color: #EDCCA1;
background-image: url(../images/container-bg.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 750px;
color: #260D0D;
}
#divFooter {
text-align: center;
font-size: 0.7em;
margin: 25px 0 0 0;
}
#divHeader, #divMain, #divFooter {
width:750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
color: #260D0D;
}
#leftMenu {
float:left;
margin:130px 0 0 5px;
padding: 0px;
width:150px;
}
#divMainContent {
float:right;
width:500px;
margin: 150px 5px 50px 5px;
border-top: 1px solid #260D0D;
}

The css file can be downloaded at: http://publictrust.ca/css/css/template_css2.css

Caveat: the solution must work in IE and mozilla/netscape AND when I add more text to the main content area, the DIV must stretch downwards to accommodate the extra text *without* changing the height of the divHeader & divFooter.

Thanks in Advance,

mne

Hello, this is my first attempt at a website and first attempt at using CSS as well.

With much reading and the help of an online CSS layout creator I've been able to get pretty far, but have been having many roadblocks recently.


For instance, the second heading in my layout is not displaying correctly in IE, but looks fine in FireFox. Please take a look at

http://www.onlinecasinoboss.com/new_page_1.htm

The second heading should lay directly underneath heading number 1, with a 2px margin in between header 2 and the main page layout.

Also the text in the right, left and center columns starts as if it had a 12px or greater top margin. This problem exists in BOTH IE and FF.

Please help, and thanks for anyone that takes the time to help a newbie web designer out.

Hi all,

I'm trying to change my cursor when I hover over a image on a onclick event as the example below but I can't get this to work.

<a onmouseover="this.style.cursor='hand'">

Regards

Stephen

Hi people,

I could not find a grabbing hand cursor in css cursor property.
Instead I use this "cursor:move;" for a while. A grabbing hand like what GoogleMap do when dragging a certain map. Is that a server side creation?

Hi,

Is their any way to change the cursor color in css or javascript?

Thanks
Rishu

I'm trying to change the cursor when a user mouses over an image.

Code:

cursor:hand

Works perfect in IE, but the cursor tag doesn't respond at all in Firefox.

I've been able to "trick" Firefox when using onClick JS links by putting href="#".

hello,

i'm placing a custom cursor on a stylesheet like so:

body { cursor: url(normal.cur), default; }

and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)?

thanks for any help!