CSS - Css Issue With A Form

After i set the height of the text box, when viewing it in firefox, not only does it look like the font size is over 100 before typing the norm-sized text, but it starts in the middel-left of the box instead of the top left what do i do to correct this?

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE?



w w w. jaywayproductions . c o m/portfolio/work_history.html


It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated!

Hello Guys,

I am trying to get the the css to work but having a hard time with it and need some help..

Here is the content lined up in fire fox.

http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png

Ad this is what it looks like in IE (See my issue)
http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png

Here is the code

Code:

echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'">&nbsp;&nbsp;Read more</a></span>>>></div>';

Here is the CSS
Code:

.listing {
	width:560px;
	height:auto !important;
	margin: 0 auto;
	text-align: left
}
.listlink {
    float:left;
    margin-left: 10px;
    margin-top: 20px;
    position: absolute;
    text-decoration:underline;
}

.listbody {
	float: left;
    margin-left: 110px;
    margin-top: -30px;
    width:440px
}

.listingdiv{
	border-bottom: 2px dotted #9EABB5;
	color:#FFF;
}

Please advise how to fix this..

Thanks for your help in advance..
Dan

Hi everyone,

For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine.

So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he

http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html

but I don't see what he did to solve it.

Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating .

I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions.

Thanks in advance if you can give a DIV newbie a heads up.
Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
  <style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
  </style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>

Hello

I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this.

Second: In Firefox it looks like a disaster! Help!

http://www.tombraiders.net/katie/shelly/index.html

User: letme
Pass: in

Thank you!

I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position.

This only happens in IE7 by the way.

Whenever I specify <form> in an html page I find that the browser will skip a space after I'm done with the form. Overly simplified example:
Code:

<html>
<body>

<form name="input" action="html_form_action.asp" method="post">
Username: 
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
test (notice that this is two lines below the input box instead of one)

</body>
</html>

Is there any way to use a <form> tag but still have the text after the form appear right after the form and not skip extra spaces?

I am having an issue with IE using the .htc file to render the CSS menu system I have. I am not sure why though. I think it has to do with the server that I have the site up on. Unfortunitly, I am unable to do anything to the server, so I will have to work around this issue.

The menu system works the way it should in Firefox, but not IE. So if you can look at it (in Firefox) and help me figure out what I need to do to make it work in IE I would greatly appreciate it.

The site is: www.fired-up.ca

Hey i don't know if this can be fixed by now i have looked everywhere and tried everything.

i have a style sheet that does not work in IE6 and i don't know why.

Code:

body{
 margin: 0;
 padding: 0;
 line-height: 1.5em;
}

b{font-size: 110%;}
em{color:red;}

#maincontainer{
 width: 940px; /*width of main container*/
 margin: 0 auto; /*Center container on page*/
}

#topsection{
 background: #EAEAEA;
 height: 90px /*Height of top section*/
}

#topsection h1{
 margin: 0;
 padding-top: 12px;
 background: url(images/png_logo.gif) no-repeat right bottom;
}

#contentwrapper{
 float: left;
 width: 100%;
}

#contentcolumn{
 margin: 0 190px 0 188px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}

#leftcolumn{
 float: left;
 width: 188px; /*width of left column in pixel*/
 margin-left: -940px; /*set margin to that of -(maincontainerwidth)*/
 background: #C8FC98;
}

#rightcolumn{
 float: left;
 width: 195px; /*width of right column in pixel*/
 margin-left: -195px; /*set margin to -(rightcolumnwidth)*/
 background: #336699;
}

#footer{
 clear: left;
 width: 100%;
 background: black;
 color: #FFF;
 text-align: center;
 padding: 4px 0;
}

#footer a{
 color: #FFFF80;
}

.innertube{
 margin: 2px; /*margins for inner div inside each column (to provide padding)*/
 margin-top: 0;
}

A.menulink{
 display: block;
 width: 170px;
 text-align: left;
 text-decoration: none;
 font-family: arial;
 font-size: 11px;
 color: #000000;
 border: none;
 border: solid 1px #ffffff;
}

A.menulink:hover {
 border: solid 1px #6100c1;
 background-color: #f0e1ff;
} 

the html code is Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">  

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  <link href = "style.css" rel = "stylesheet" type = "text/css">
<title></title>
</head>

<body>
  <div id="maincontainer">
      <div id="topsection"><div class="innertube">
            <h1>PowerNet Global 
            </h1>

      </div> 
  </div>

  <div id="contentwrapper">
      <div id="contentcolumn">
         <div class="innertube">
                  Thank you for visiting PowerNet Global, please ignore the mess as we update our site to bring you more up 
to date information to help you needs a little better.  The site may continue to change over the next few months, if you have
 any suggestions on how to improve our site to bring you better service please feel free to eamil us at
 <a href="mailto:support@pngusa.net">Support@pngusa.net</a>
                  <script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/tabnews.xml&up_ned=us&up_items=7&up_show_image=0&up_font_size=13pt&up_selectedTab=0&up_tabs=&up_last_url=&synd=open&w=315&h=260&title=Google+News&lang=en&country=ALL&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB  %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
                  </script>
         </div>
      </div>
   </div>


     <div id="leftcolumn">
        <div class="innertube"><strong>Navigation</strong>
           <table border="0" width="180">
                <tr>
                  <td ><h5>Sevice Information</h5>
                  </td>
                </tr>
                <tr>
                  <td width="100%" bgcolor="#e6e6e6"><a href="services.html" class="menulink">Overview Of Services</a>
                  </td>
                </tr>
                <tr>
                  <td width="100%" bgcolor="#e6e6e6"><a href="http://webmail.pngusa.net/src/login.php" class="menulink">View Mail</a>
                  </td>
                </tr>
               </table>
         </div>
    </div>
   
    <div id="rightcolumn">
      <div class="innertube">
          <script src="http://gmodules.com/ig/ifr?url=http://blog.outer-court.com/homepage/miniweb.xml&synd=open&w=180&h=330&title=Mini+Web&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB  %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
          </script>
      </div>
     </div>

       <div id= "footer">
           <a href="http://www.pngusa.net">Go back Home</a>
       </div>
</div>



</body>
</html>

"

In IE6 the right column does not show up and i am unable to give a link as it is on internal test server.

Hi there,

I need to use transparent PNGs in this site I'm building. That's sweet when using Mozilla and Opera but for IE I'm using DXImageTransform.Microsoft.AlphaImageLoader.
My problem is that I'm using this in a text link area and the PNG is the background.
Whenever I apply the filter the PNG actually becomes transparent (yey for that) but (there's always a but with IE) I loose all the links inside the div area (text still there but does nothing at all). If I remove the filter the links get back online.

Any help REALLY appreciated.

Best regards

Hugo

Hi to all

I am having some issues with a few of my sites... they all work fine on PC and on IE and FF etc. but last time i viewed one of them on a MAC while i was overseas it had some errors where i use CSS tags for bg tiled images...

my portfolio is at http://www.blackdropdesign.com/portfolio.html
is it possible for someone who uses a mac to quickly run through these and let me know which ones arent working and why...? is there any way for me to see what my site would be looking like on a mac from my PC?

cheers!

If you go he Code:

http://aissolutions.ca/clients/enerquality/training/courses/

you will see that when you click on the "expand text" link, it works fine in Firefox. However, in IE, the content gets "cut off" (the page doesn't expand with the content). Any ideas for a fix?

So, on this page http://www.infothreads.com all 8 of the tshirts show up in Firefox, however, only 4 of them display in IE 6 or 7. Oddly, I can see the products when viewing the code in IEx, they're just not showing up on the site, which leads me to believe I done did something wrong with css. Any thoughts?

Thank you.

Hey

I have a few containing divs and three divs in the last containing div so basically it's three columns.

Well, I'm trying to get the middle column to always span 100% height of the content, not the page. I have a min-height so it's not too small, but if the content is big, I want the column to basically stretch to fit the content inside.

Here is the pertaining code:
Code:

html,body {
font-family: verdana, arial, helvetica;
margin: 0px;
padding: 0px;
height: 100%;
}

#container {
padding: 0px;
border: solid 1px #fff;
width: 900px;
margin: 0px auto;
text-align: left;
background-color: #000;
min-height: 1000px;
height: 100%;
}
html>body #container {  height: auto; } // because Mozilla actually interprets the height:100% correctly..*sigh*

//  Second containing div
#content_main {
background-color: #000;
width: 900px;
height: 100%;
color: #000;
font-size: 11px;
margin: 0px;
}

// All columns
#leftcolumn,#middlecolumn,#rightcolumn { margin: 0px; min-height: 900px; }

// Middle column
#middlecolumn { width: 493px; height: 100%; float: left; margin-left: -10px; }
html>body #middlecolumn { margin-left: 0px; }

// Third containing div
#thecontent {
width: 460px;
height: 100%;
min-height: 400px;
float: left;
margin-left: 10px;
margin-top: 10px;
}

Pertaining HTML:
Code:

<div id="middlecolumn">
<div id="thecontent">
			<div id="contentheader"><p>'.$contentHeader.'</p></div>
			'.$form.'
			<div id="thecontent2">
				'.$pagecontents.'
			</div>
			<div id="contentbottom"></div>
			'.$formend.'
		</div>
</div>

Oh here are the other divs that are in "thecontent":
Code:

#thecontent2 { 
width: 445px;
min-height: 600px;
background-color: #fff;
line-height: 1.8em; 
font-size: 11px; 
padding: 15px 0px 0px 15px; 
text-align: left;
margin-left: 10px;
height: 100%;
}
#contentheader {
background: url(images/contenttop.gif) no-repeat;
width: 488px;
height: 35px; 
padding-top: 3px;
text-align: center;
margin: 0px auto;
margin-bottom: -3px;
margin-left: -2px;
}
#contentheader p {
color: white; 
font-size: 14px; 
font-weight: bold;
margin-top: 6px;
}

#contentbottom {
background: url(images/contentbottom.gif) no-repeat;
width: 471px;
height: 28px;
margin-left: 3px;
}

Ok that's alot of code

IE does it correctly as I'm sure most of you know, but how can I get the 100%-height-content span for Mozilla?

Thanks