Need Help Knowing What This Does

**TCH-Bruce** · August 15, 2004

Can someone shed some light on what this little piece of CSS does?

I'm having a problem with a form using it. There are three input fields on the left side of the form and a radio question on the right. This little piece of code is preventing the items on the left from appearing. If I comment this out and the closing "div" all three input items appear with the radio button question below.

**TCH-Dick** · August 15, 2004

><div style="width:180px; padding-right:15px; margin-right:15px; float:left; text-align:left; border-right:1px dotted #bbb;">

div is just defining a section of the page and style= is just setting the styles for that section.

The only thing I see that could be a problem is float:left;. Are the items that are being hidden inside of

... div>? If not the div could be covering them.

**TCH-Bruce** · August 15, 2004

Here is the entire section I am working on.

Name:

Email Address:

URL:

Remember personal info?

YesNo

Comments:

There is a closing div for the comments-post2 style further down, clipped for length.

The name, email address and url fields are the only ones that don't appear. And here's the best part. This only occurs in IE. Works fine in Firefox.

**TCH-Dick** · August 15, 2004

That works just fine for me in IE and FireFox. Can you post all of the code?

Edited August 15, 2004 by TCH-Dick

**TCH-Don** · August 15, 2004

I don't see a type

like

**TCH-Bruce** · August 15, 2004

Don, this is a Movable Type template for individual entries and it's XHTML.

Dick, here is the complete template:

:



<script language="JavaScript" src="http://lunacy.brich.us/blogger.js" type="text/javascript">

" />

" />

<script language="javascript" type="text/javascript">

function OpenTrackback © {

window.open(c,

'trackback',

'width=480,height=480,scrollbars=yes,status=yes');

}

var HOST = '';

// Copyright © 1996-1997 Athenia Associates.

// http://www.webreference.com/js/

// License is granted if and only if this entire

// copyright notice is included. By Tomer Shiran.

function setCookie (name, value, expires, path, domain, secure) {

var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain :

"") + ((secure) ? "; secure" : "");

document.cookie = curCookie;

}

function getCookie (name) {

var prefix = name + '=';

var c = document.cookie;

var nullstring = '';

var cookieStartIndex = c.indexOf(prefix);

if (cookieStartIndex == -1)

return nullstring;

var cookieEndIndex = c.indexOf(";", cookieStartIndex + prefix.length);

if (cookieEndIndex == -1)

cookieEndIndex = c.length;

return unescape(c.substring(cookieStartIndex + prefix.length, cookieEndIndex));

}

function deleteCookie (name, path, domain) {

if (getCookie(name))

document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT";

}

function fixDate (date) {

var base = new Date(0);

var skew = base.getTime();

if (skew > 0)

date.setTime(date.getTime() - skew);

}

function rememberMe (f) {

var now = new Date();

fixDate(now);

now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);

setCookie('mtcmtauth', f.author.value, now, '', HOST, '');

setCookie('mtcmtmail', f.email.value, now, '', HOST, '');

setCookie('mtcmthome', f.url.value, now, '', HOST, '');

}

function forgetMe (f) {

deleteCookie('mtcmtmail', '', HOST);

deleteCookie('mtcmthome', '', HOST);

deleteCookie('mtcmtauth', '', HOST);

f.email.value = '';

f.author.value = '';

f.url.value = '';

}

//-->



Site navigation

About this site -- This is just how I see things. You may not agree with me.

About me -- Hi, my name is Bruce and I sit in front of a computer most of the day!



Sun Mon Tue Wed Thu Fri Sat




Previous Posts

Archives



Current Posts



Search this site:



<script language="JavaScript" type="text/javascript">

writeControls()



Site notes

This page validates as XHTML 1.0, and will look much better in a browser that

supports web standards, but it is accessible to any

browser or Internet device. It was created using techniques detailed at glish.com/css/.



Other sites

Bunni's Blog

PDABruce.com

My Moblog

Kristi's Blog

Kasey's Blog

Syndicate this site (XML)

This weblog is licensed under a Creative Commons License.

Powered by

Movable Type

« |

Main

| »

-- on

| TrackBack

Comments

by on

Post a comment

Name:

Email Address:

URL:

Remember personal info?

YesNo

Comments:

<script type="text/javascript" language="javascript">

I must have a DIV screwed up somewhere but I can't see it. Thanks for the help.

You can see a sample of it here. http://www.pdabruce.us/blog/archives/000086.html

Edited August 15, 2004 by TCH-Bruce

**kaseytraeger** · August 15, 2004

Hi Bruce,

Have you installed MT yet? I just copied and pasted your code into a new index template on my install, then tried to rebuild it, and I got the following error. So maybe the problem isn't with the <div> at all...

An error occurred:

Build error in template 'Bruce': Error in <MTEntryTitle> tag: You used an 'MTEntryTitle' tag outside of the context of an entry; perhaps you mistakenly placed it outside of an 'MTEntries' container?

**LisaJill** · August 15, 2004

He said it's a tag for individual entries - so no, it won't work in an index but will work in the proper archive type. =)

**TCH-Bruce** · August 15, 2004

Yes, as Lisa says it's for the indivdual entries page. If you click the link above with Firefox it appears as it should. In IE the labels and input boxes do not display even though they are there.

I'm also having problems moving the form elements away from the left content border. I'll keep working at it. :unsure:

**Deverill** · August 16, 2004

Can someone shed some light on what this little piece of CSS does?

<div style="width:180px; padding-right:15px; margin-right:15px; float:left; text-align:left; border-right:1px dotted #bbb;">

To answer your question, it puts that piece of your page between the <div> and </div> into a box with a dotted-greyish border that's 1 pixel wide with the following characteristics:

width: 180 pixels

right side padding - 15 pixels (between text and box edge)

right side margin - 15 pixels (between the box edge and everything outside the box)

left-aligned text

The box will break out of the normal flow of the page and float to the left side of the container item, in this case the comments-body2 item..

As to why it's not working, check the opening and closing <div>s to make sure they match. Another thing I try is a CSS Validator - they sometimes show where the syntactical errors are.

Another little trick I've been using a lot lately is to add:

background:#CBC; (or some other color of choice.)

It recently showed me that my box was just a few pixels big and the floats had taken out the contents and allowed the container to squish down to nothing. I had to add a clear:both to make it grow back to include them. (if that makes sense I'll be surprised. :unsure: )

Hope it helps!

**TCH-Bruce** · August 16, 2004

Thanks Jim. I had already ran it through the validator which it passes BTW. I also added background colors to the input fields which appeared fine in Firefox but still it didn't display in IE.

I finally gave up and removed the DIV entirely and it's working fine now.

Thanks everyone for looking. It's an IE problem and I am through messing with it.

Edited August 16, 2004 by TCH-Bruce

Sign In

Need Help Knowing What This Does

Recommended Posts

TCH-Bruce

TCH-Dick

TCH-Bruce

TCH-Dick

TCH-Don

TCH-Bruce

Site navigation

Site notes

Other sites

kaseytraeger

LisaJill

TCH-Bruce

Deverill

TCH-Bruce

Join the conversation

Hosting