CSS - Disable <form> Formatting/whitespace, Making Purely A Non-presentational Element

Can a <form element hold inline elements?

For example,

Code:

 <form ... >

<input .... />

I'm putting this bare text in this form even if I dunno if it's allowed haha

</form>

More generally, I know one can NEVER put a block-level element in an inline element.

HOWEVER, IS IT ALWAYS possible to put inline elements in block elements ????


Thank you

Hi:
As strange as it may seem, I need to hide the characters "<br>" (the line break characters between the quotes) on a form. The element is .ms-RadioText.

Example:
Current View:
<br> - option 1
<br> - option 2

Desired View:
- option 1
- option 2

Possible?

Thanks-


Charlie Epes
Buffalo, NY

hi

my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability)

form
{
margin: 0px;
padding: 0px;
}
.mydiv
{
float: left;
}

html looks vaguely like:

<div class="mydiv"><form name="blah" action="blahblah">
.... all form controls
</form></div>

PROBLEM!!!!

in mozilla, none of the form elements display.
in ie, everything displays as expected.

PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE.

thanks in advance.
d

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

Hi everyone,

On the profile section of a site I created for a guy there is yet another annoying whitespace issue that pops up in FF and oddly enough looks fine in IE7.

Using firebug I can fish in the general area but my fixes seem to break things worse.

Here is an example profile where you notice the large space between the bottom of the profile pic and the tabbed interface below.

I tried adding a fixed height to .cbPosTop which didn't work and I knew it wouldn't. Anyway, like I said before it looks fine regardless of profile pic size in IE.

Here is a link to a screenshot of what I'm seeing using FF...
http://www.karenwilliamson.com/test/spot_profile_ff_whitespace.gif

Thanks for any input

http://josephman1988.tripod.com/

Test page.

In FF, the gap between the 2 horizontal lines at the bottom is more narrow then it is in IE.

Why? And how can i fix this?

Thanks for the help.

Joe.

Hi there,

This is my first post here and already I'm asking for help.

I'm new to CSS layout and have read quite a few tutorials and "zeroed" my values for IE but have come across my first rendering issue which I hope you can help me with.

I've attached an image of the dreamweaver layout and how firefox is rendering the page as well as the source of the page in a txt file.

Why is the whitespace appearing in Firefox and not in IE?

Thanks in advance for any guidance.

If I place an image in a <td> there will be a three or four pixel gap under the image and the end of the cell. The only way to avoid this is to do

Code:

<td><img></td>

instead of
Code:

<td>
    <img>
</td>

are there any other ways?

I'm doing a new site with a 3col centered layout. On my left col i have 8 or 9 divs with an image in them. In IE it looks as desired but in *.MOZ browsers there is 2 or 3 pixels of space between each image.

Applying a bottom border to the image's containing div it shows the space is within the div and not between the divs.

Here is the Code

Code:

CSS
.left {
float:left;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 177px;    /*** Critical left col/divider dimension value ***/
margin-left: -176px;    /*** Critical left col/divider dimension value ***/
}

*>html .left {width:176px;}   /*** Fix only for IE/Mac ***/

.container-left {
width: 175px;    /*** Critical left col dimension value ***/
padding-bottom: 110px;   /*** To keep content from going underneath the AP bottom boxes ***/ 
}

.menu-main{
	margin-left:1px;
        border-bottom:1px solid black;

}


XHTML
<div class="left">
	<div class="container-left">
		<div class="menu-main"><img src="images/home_off.jpg" /></div>
		<div class="menu-main"><img src="images/awards_off.jpg" /></div>
		<div class="menu-main"><img src="images/designawards_off.jpg" /></div>
		<div class="menu-main"><img src="images/membership_off.jpg" /></div>
		<div class="menu-main"><img src="images/crewtraining_off.jpg" /></div>
		<div class="menu-main"><img src="images/events_off.jpg" /></div>
		<div class="menu-main"><img src="images/newsletter_off.jpg" /></div>
		<div class="menu-main"><img src="images/pressreleases_off.jpg" /></div>
		<div class="menu-main"><img src="images/contactus_off.jpg" /></div>
		</div>
	</div> <!-- end left div -->

Any suggestions?

The images are all 174px in width

I use Opera browser all the time and notice a couple problems while using Jupitor Portal script, the fault is on Opera so I need a way to fix this.

1. Block had some sort of padding or whitespace on the right side for some reason.
2. Search button width is short.

Problem in red: URL
Site: URL

CSS: URL

Can someone give me a solution or work around for this problem.

P.S: I'ved tried adding margin: 0; padding: 0; to con1 but that didn't work.

Basially theres quite a large extent of whitespace above the text in IE7. Works fine in FF.

http://www.beta-designz.co.uk/manicgaming/

CSS:
Code:

#wwd 
{ 
width:550px; 
height:auto; 
font-family:Geneva, Arial, Helvetica, sans-serif; 
font-size:12px; 
padding:6px; 
}

HTML:
Code:

<div id="wwd">
<h3>This Is What I do!</h3>
<span class="style1">I design sites for individuals and small businesses that are visually unique, well built, and easily manageable. A site we can all be proud of and a site your visitors will find interesting and effective!</span></div>

Help would be great, regards, J.

Please see the screenshots below. Im using offsetTop + offsetHeight of the headings (Menu1, etc) to assign style.top to the sub menus. They appear when you mouseOver the headings. See how there is a pixel or two of whitespace in IE6 w/sp1? Why is that?
Any help would be greatly appreciated.

PS - I tried this on another PC with IE6 and sp2, and it was fine.

These are the style declarations:

Code:

.menuHeading{
	padding-left:3px;
	font-size: 8pt;
	font-weight: bold;
	background-color: #ffffff;
	color: #000000;
	cursor: default;
	position: relative;
	margin-bottom: 0px;
	border-width: 0px;
	border-style: none;



}

.menuHeading_highlight{
	padding-left:3px;
	font-size:8pt;
	font-weight:bold;
	background-color:#fff392;
	color:#000000;
	cursor:default;
	position: relative;
	margin-bottom: 0px;
	border-width: 0px;
	border-style: none;


	
}

.subMenu{
	font-size:8pt;
	color:#cc9900;
	width: 200px;
	visibility:hidden;
	cursor:default;
	position: absolute;
	padding:0px;
	margin-top:0px;
	margin-left:0px
}

I am trying to create a personal website for employers. Already have the web domain and figure its a great way to brush up on everything.

I am trying to get rid of the whitespace that constantly surrounds my div or table tags. I know about background-fill but that only seems to work in the html style and with only 1 background.

This is what I want.

Instead, I keep getting this annoying whitespace around everything that I cannot get rid of.

How do I fix this?