Jump to content

Need Help Knowing What This Does


TCH-Bruce

Recommended Posts

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.

Link to comment
Share on other sites

><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.
Link to comment
Share on other sites

Here is the entire section I am working on.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Remember personal info?

 


 

 

 

 

 

 

 

 

 

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.

Link to comment
Share on other sites

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

 

Dick, here is the complete template:

<!--

Unless otherwise indicated, all code below was written by Eric Costello,

and you are free to use, modify and distribute it. Please leave this

comment block intact so that people can find the original unmodified

version at: http://www.glish.com/css/blogger/

 

Also see:

http://www.schwa.com

http://www.glish.com

-->

 

<!--

This template requires the existence of two auxilliary files on your web server:

blogger.js and blogger.css. Those files should be placed in the same directory as

your blog page, if you put them somwhere else, just adjust the paths for those files below.

-->

:

<!--   -->

<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 = '';

}

 

//-->

 

 

 

<!-- This section is optional and can be removed if you do not have other pages on your site -->

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

       

    

       

 

       

       

       

 

       

 

       

       

 

 

<!--

This javascript funtion call will write out the customization tools

for browsers that support it (IE5+, NS6)

-->

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

writeControls()

 

<!--

You don't have to keep the link to the w3c validator, but if you do you'll

be helping to support web standards! You should leave the link to webstandards.org

for users who view the page using older browsers. If you leave the link to my CSS site

you'll help other people find information about coding standards compliant web sites

-->

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/.

 

 

<!-- You can link to other sites that you like here -->

Other  sites

Bunni's Blog

 

PDABruce.com

 

My Moblog

 

        Kristi's Blog

 

        Kasey's Blog

 

 

       

        Syndicate this site (XML)

       

 

       

       

        Creative Commons License

 

        This weblog is licensed under a Creative Commons License.

       

       

 

       

        Powered by

Movable Type

   

       

 

 

 

 

 

 

 

 

 

 

-- on

| TrackBack

 

 

 

 

Comments

 

by on

 

 

Post a comment

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Remember personal info?

 


 

 

 

 

 

 

 

 

 

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

<!--

document.comments_form.email.value = getCookie("mtcmtmail");

document.comments_form.author.value = getCookie("mtcmtauth");

document.comments_form.url.value = getCookie("mtcmthome");

if (getCookie("mtcmtauth")) {

    document.comments_form.bakecookie[0].checked = true;

} else {

    document.comments_form.bakecookie[1].checked = true;

}

//-->

 

 

 


 

 

 

 

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 by TCH-Bruce
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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:

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. :D

Edited by TCH-Bruce
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...