CSS - This Is My First Time - Be Gentle!

Here is the form I am working on

Here are the problems I can't figure out how to fix:

In FF the form part inside the div class - form doesn't start until about 500px down or so.

Also the label and input box are not lining up horizontally properly.

I want the label to be closer to the box and less space in between each row.

In IE the colored box <div id="form> is not taking on the left padding properly. I want it to appear centered in the main col area like it is in FF and I want there to be less box on the left side.

Space between each row is more than I like also - but the rest is pretty close.

Here is the css:
Code:

#enquiry {
	padding: 20px 50px 0px 50px;
}

#enquiry h1 {
	text-align: center;
}

#form {
	background-color: #DDEEFF;
	border: 1px solid #000099;
	padding: 10px;
}

div.rows {
	clear: both;

}

#form div.rows span.label {
	float: left;
	width: 120px;
	text-align: right;
	color: #000099;
	font-weight: normal;
}

div.rows span.input {
	float: right;
	width: 335px;
	text-align: left;
}

#form span {
	clear: both;
	color: #000099;
	font-weight: bold;
	padding: 3px;
	display: block;
	text-align: center;
}

#comments {
	clear: both;
	text-align: center;
}

.submit {
	text-align: right;
	margin-right: 20px;
}

Here is the xhtml:
Code:

<div id="enquiry">
	
		<h1>Customer Support Enquiry Form</h1>
		
		<div id="form">
		
		<span>* Designates Required Fields</span>
	
		<form action="http://www.gomango.co.uk/cgi-bin/formail.cgi" method="POST">
        <input type="hidden" name="redirect" value="http://go.gomango.co.uk/vitalograph/uk/thank.html">
        <input type="hidden" name="recipient" value="marketing@vitalograph.com">
        <input type="hidden" name="subject" value="Vitalograph General Enquiry">
		<input type="hidden" name="required" value="Name,Address,Town,County,Postcode,Country">
		<input type=hidden name="bgcolor" value="#ffffff">
		<input type=hidden name="text_color" value="#000099">
		<input type=hidden name="link_color" value="#3399FF">
		<input type=hidden name="alink_color" value="#990099">
        <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT">
		
			<div class="rows">
				<span class="label">Name*</span>
				<span class="input"><input name="Name" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Company</span>
				<span class="input"><input name="Company" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Address*</span>
				<span class="input"><input name="Address" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Town/City*</span>
				<span class="input"><input name="Town" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">County/State*</span>
				<span class="input"><input name="County" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Post/Zip Code*</span>
				<span class="input"><input name="Postcode" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Country*</span>
				<span class="input"><input name="Country" type="text" size="40"></span>
			</div>
			
			<span>Please complete at least one of the three fields below</span>
			
			<div class="rows">
				<span class="label">Telephone</span>
				<span class="input"><input name="Name" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Fax</span>
				<span class="input"><input name="Name" type="text" size="40"></span>
			</div>
			
			<div class="rows">
				<span class="label">Email</span>
				<span class="input"><input name="Name" type="text" size="40"></span>
			</div>
			
			<span>Please send me information about:</span>
			
			<div id="comments"> <textarea name="infobox" cols="50" rows="6" wrap="VIRTUAL"></textarea>
			</div>
			
			<div class="submit"><input type="SUBMIT" value="Send Form" alt="Submit Brochure Request" class="buttons">
            <input type="RESET" class="buttons"></div>
		
		</form>
	  
	  </div>
	  
	  <p class="back"><a href="javascript:history.go(-1)">< Back</a></p>
	  
	</div>

Hi.

Are doing some tests of a website of mine.

On my local computer it is looking fine in all major browsers.

In IE6 things are not that good.

When visiting pages in IE6 the styling of the page is gone.

And if I click Back button in browser toolbar then I get this in address of browser:

res://ieframe.dll/repost.htm

Another weird thing is that when I visit a page on the site...
then the styling is gone.
Now if I place cursor in browser address field and hit enter then the page is displayed normally with all styling in place.

Same apply if I visit a page, no styling, and click reload button then all styling is correct.

For the two above .. if I then click any link in the site then the page that opens are without styling.

This does not happen on my localhost, only when I test it on www.

ANOTHER weird thing is this:
This is also working on my localhost.

I click a text in the page which runs a JS function that uses window.open to open a window and load a report.php file.

This php script sends a pdf file back to browser.....
the code for sending it back to browser is below:
It works as it should in IE7, Firefox etc.. but IE6 present me with a wrong name of the report calling it report.php (name of the php script itself, though the content of the file is definitely pdf content.... )

(I belive IE6 should be hospitalized)

Note: I have also tried with a super simple $docName instead of the one below. Tried using $docName="report.pdf";
and got same result.

My localhost is on windows xp
My www app is on linux.

Code:

$docName = "Report-Name-Here-".$dateTime.".pdf";

Header('Content-Type: application/pdf');
	Header('Content-Length: '.filesize($file));
	
	header('Content-Disposition: attachment; filename="'.$docName.'"');
	header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
	header('Pragma: public');
	
	readfile($file);
	//Remove file
	unlink($file);
	exit;

Has anybody experienced this ... and/or know how to fix this IE6 quirks.

Hello

I would like to have some text replaced after, for example 10 seconds, with new text. And with fading in and fading out

Example given:
after opening page
fade in - show text1 "Welkom to the pleasure dome" - fade out
fade in - after 10 sec "For the latest Items, go to..." - fade out
fade in -after 10 sec "For ordering , call 0800-orderIT" - fade out

and so on. But al on the same place ( footer )

I did see this somewhere, but I am not sure if it was CSS only.

Thanks

Hi all,

I'm trying to create a horizontal menu in CSS and each link has a background image. So I need an image to start the menu, the images for the buttons in the middle, and an image for the end of the menu.

Code:

	#topnav1 {
	position: absolute;
	height: 18px;
	top: 43px;
	left: 300px;
	font-weight: bold;
	}
	#topnav1 ul {
	margin:0; padding: 0;
	width: 420px;
	height: 18px;
	display: inline;
	}
	#topnav1 #first li {
	list-style-type: none;
	display: inline;
	background-image:  url(../images/topnav1_1_bg.gif);
	background-repeat: no-repeat;
 	background-position: bottom left;
	padding-left: 40px;
	padding-bottom: 4px;
	}
	#topnav1 li {
	display: inline;
	background-image:  url(../images/topnav1_2_bg.gif);
	background-repeat: no-repeat;
 	background-position: bottom left;
	padding-left: 34px;
	padding-bottom: 4px;
	}
	#topnav1 #last li {
	display: inline;
	background-image:  url(../images/topnav1_3_bg.gif);
	background-repeat: no-repeat;
 	background-position: bottom right;
	padding-right: 10px;
	padding-bottom: 4px;
	}

First: It seems that as soon as I apply the 'display: inline; code to the 'li' tags, the browser completely ignores the height, width, and padding settings that I put on there. So the background image isn't being displayed properly.

Second: I want to align the menu to the right of the page - how can I do this?

Cheers!

its not so much of a problem because i have "thought" of a remedy (at the end of the post) but i was looking for perhaps a more css'esque solution?
if you go here
http://www.zahra-zahra.com/fullpage.html

you will see menus in the middle somewhere and you will see when the lis go on the second line they are mismatched.. is there a way to match them up precisely?


now the solution which i was thinking was is that to have four arrays and then put them in four divs and then place them side by side.

btw: the menu will be stored in database

Reccently i learnt how to create rollover links, i was very excited as usually my links are boring and dont do anything when you roll over.

I started with the usuall: bodya: link { }, this made ALL the links on my page do the same effect, however i wanted 3 diffrent link effects that i could set on diffrent parts of the text.


the style .smallgreen tells the link to have no text decoration untill "hover" and "visited", same goes for the styke .headerlink.



.SmallGreen {
Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
color: #00FF00;
font-size: 20px;
text-align; left;
}
.SmallGreen a:link {
color: #00FF00;
text-decoration: none;
font-size: 20px;
}
.SmallGreen a:visited {
color: #00FF00;
text-decoration: none;
font-size: 20px;
}
.SmallGreen a:hover {
color: #00FF00;
text-decoration: underline;
font-size: 20px;
}
.SmallGreen a:active {
color: #00FF00;
text-decoration: underline;
font-size: 20px;
}




.HeaderLink {
color: #FF0000;
Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
text-align: center;
font-size:25px;
}
.HeaderLink a:link {
color: #FF0000;
text-decoration: none;
font-size: 25px;
}
.HeaderLink a:visited {
color: #FF0000;
text-decoration: none;
font-size: 25px;
}
.HeaderLink a:hover {
color: #FF0000;
text-decoration: underline;
font-size: 25px;
}
.HeaderLink a:active {
color: #FF0000;
text-decoration: underline;
font-size: 25px;
}

Hi, this is my first posting on these forums, so my apologies in advance if I break some unwritten rules.

I have developed a web page for friend who wanted four large area of the home page to act as buttons but not look like buttons. Each area contains an image and some text and the complete are should be clickable and should change colour when the mose moves over it.

I prefer a pure html/CSS solution rather than resorting to Javascript, so I came up with the following

The html for each area is:

<div id="homePageTopicArea">
<ul>
<li>
<a href="workshops.html">
<img src="images/homePage/topic1Image.jpg" />
<div class="homePageTopicTextHeader">
<h1>Inspiring Workshops</h1>
</div>
<div class="homePageTopicText">
<p>
This range of clear ..........
</p>
</div>
</a>
</li>


and the CSS is

#homePageTopicArea
{
height: 100%;
width: 734px;
margin-top: 10px;
margin-left: 280px;
}

#homePageTopicArea ul
{
list-style-type: none;
width: 734px;
padding-left: 0px;
margin-left: 0px;
}

#homePageTopicArea li
{
outline: none;
border: 0;
margin-top: 15px;
height: 145px;
}

#homePageTopicArea li a
{
display: block;
height: 145px;
outline: none;
text-decoration: none;
}

#homePageTopicArea li a:hover
{
background-color: #AEB8CB;
}

This works great when the page is viewed in Safari. But when I use Firefox 3.5.6 or IE7, I get an error on the page, the images are correctly positioned but the text from one of the boxes, always the second or third, never the first or last, is displayed in the wrong position, way too low down the screen, and it is in the bright blue, or purple, of an unmodified link code.



If you click on the refresh button the page always displays correctly.

Can anyone explain this behaviour?

I have screenshots but dont know how to attach them.

Hi all
simple question really, Im about to rebuild a site for a client and Id like it to be the bee's knees of accessability. I'd love to make it xhtml compliant with a nice textual version for the screen readers etc. however this will require CSSpositioning as tables are not allowed for layout in strict XHTML.
Do people think CSSp is OK cross browsers, are there any good detection scripts for browser support (rather than detecting browser type) how bad will NS4 make it all look?
whats the general feeling, Id like to make it accessable but not at the cost of the end users, some of whom will be on old browsers...

I already own a copy, so I'll tell you it's well worth reading. Now you guys have a chance to read it for free.

More information: http://www.sitepoint.com/blogs/2008...ee-to-download/

With my limited knowledge of css, html, etc.
I can mold my page to look just the way I desire on my given screen size (1280x1024) and browser (mozilla) but can not seem to get a fix for all variables (1024x768, etc.).

I've tried containing divs & percents and a few other solutions to no avail. Just want to know if you guys know any quickfix or a recommended strategy in tackling this issue going further.

id post code here, but the site wont allow it due to external links.
so please check it out here and let me know

http://needaputer.com
css is at same url just located at .com /css/styles.css

my goal:
-- auto center content on page horizontally - (based on screen size - cross browser compatible)
-- make sure header and footers are absolute top and bottom of page always (based on page size and cross-browser compatible)
-- toggle "page zoom" for entire page via buttons (if needed and possible to adjust content for each screen size)

Hi,

I've just spent all night re-building my site as HTML and CSS, since my Joomla site was suffering from a slight case of death due to "hosting issues" during a plaform migration

I've got the site looking and working sweet, apart from one small thing. In Netscape 8.1 which I currently have installed, it loads the content in the right of the design right down at the bottom of the screen. When you refresh the browser it jumps back to the top, and it works perfectly for all links !!! It displays superbly in IE all of the time.

I've been through the CSS checking that I'm using the clear and float in the right places, and I've checked the actual widths of all of the elements to be sure that they add up to what they are supposed to, but somehow it's still only displaying properly in Netscape after a page refresh. I've put in all of the box model hacks in my code for old browsers.

The only thing that stops this from happening is removing the tag "display:table;" in my CSS. But that's used to extend the faux columns down to the bottom of the screen in Netscape. I'm not keen on any of the hacks for extending columns, so I decided on faux columns.

The thing is, if it is that tag that's causing it to display incorrectly, why is it having no effect when the page gets reloaded?

Try for yourself. Click a link in the menu a few times, then click the refresh button a few times. You will see the content load incorrectly, and then correctly! Puzzling.

http://www.acecards.com

Code:

body {
	background-color: #999999;
	margin-left: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
}
	#container {
		width: 750px; /* For browsers with no escapes */
		\width: 770px; /* For IE5/Win */
		w\idth: 750px; /* For good browsers */
		border: 1px solid gray;
		margin-left: auto;
		margin-right: auto;
		padding: 10px;
		background-color: #000000;
		}
			#banner {
			width: 750px; /* For browsers with no escapes */
			\width: 750px; /* For IE5/Win */
			w\idth: 750px; /* For good browsers */
			height: 251px;
			background-repeat: no-repeat;
			clear: both;
			}
			#mainarea {
			clear: both;
			width: 750px; /* For browsers with no escapes */
			\width: 750px; /* For IE5/Win */
			w\idth: 750px; /* For good browsers */
			background: url(images/fauxcolumns.gif) repeat-y;
			display: table;
			}
			#sidebar {
			width: 179px; /* For browsers with no escapes */
			\width: 179px; /* For IE5/Win */
			w\idth: 179px; /* For good browsers */
			background-color: #993300;
			float: left;
 			}
			#content {
			margin-top: 0px;
			float: right;
			background-color: #FFFFFF;
			width: 570px;  /*For browsers with no escapes */
			\width: 570px;  /*For IE5/Win*/ 
			w\idth: 570px;  /*For good browsers */
			}
			#footer {
			width: 740px; /* For browsers with no escapes */
			\width: 750px; /* For IE5/Win */
			w\idth: 740px; /* For good browsers */
			padding: 5px;
			clear: both;
			}
.FooterText {	
	font-family: Verdana;
	color: #FFFFFF;
	font-size: 10px;
	text-align: right;
}
.Bodytext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 11px;
	line-height: 17px;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 2px;
	padding-bottom: 2px;
}
.Bodylink {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #499EEE;
	font-size: 12px;
	line-height: 17px;
	font-weight: bold;
	text-align: left;
	padding-top: 2px;
	padding-bottom: 2px;
}
.Bodyhighlight {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #993300;
	font-size: 12px;
	line-height: 17px;
	font-weight: bold;
	text-align: left;
	padding-top: 2px;
	padding-bottom: 2px;
}
.SideBarBanner {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	line-height:inherit;
	padding-top: 5px;
	padding-bottom: 5px;
}
.SideBarLink {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.SideBarHeadingTop {
	background-color: #FF9B6A;
	height: auto;
	width: 169px; /* For browsers with no escapes */
	\width: 179px; /* For IE5/Win */
	w\idth: 169px; /* For good browsers */
	padding: 5px;
	color: #000000;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-bottom:thin solid;
	border-bottom-color:#D74600;
}
.SideBarHeading {
	background-color: #FF9B6A;
	height: auto;
	width: 169px; /* For browsers with no escapes */
	\width: 179px; /* For IE5/Win */
	w\idth: 169px; /* For good browsers */
	padding: 5px;
	color: #000000;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-top:thick solid;
	border-top-color:#000000;
	border-bottom:thin solid;
	border-bottom-color:#D74600;
}
.SideBarMenuBlock {
	background-image: url(images/button.gif);
	background-repeat: no-repeat;
	height: 26px;
	margin-top: 4px;
	margin-bottom: 0px;
	padding-left: 20px;
	margin-left: 9px;
	margin-right: 9px;
	width: 159px; /* For browsers with no escapes */
	\width: 179px; /* For IE5/Win */
	w\idth: 159px; /* For good browsers */
	text-align: left;
	vertical-align: middle;
	color: #000000;
	font-size: 11px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}
a:active {
	color: #000000;
	text-decoration: underline;
}
.Heading {
	width: 520px; /* For browsers with no escapes */
	\width: 570px; /* For IE5/Win */
	w\idth: 520px; /* For good browsers */
	padding-left: 40px;
	padding-right: 10px;
	padding-top: 15px;
	padding-bottom: 10px;
	background-image: url(images/aceofspades.gif);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: left;
	vertical-align: top;
	font-weight: bold;
	font-style: italic;
}
img {
border: none;
}

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page