Small layout problem with FormLogin chunk in FF & IE7

Okay, I just discovered this CMS. It is fantastic for all of my needs. Right now, I am building a custom template for our client. Documentation on creating a blog was a little weak, but I just copied every line of code, and every page from http://demo.opensourcecms.com/modx/manager/ to finally get a functioning blog. Everything seems to work great, posting, commenting, login.

Well, one small problem I get is how my CSS is rendering in Firefox and IE 7. My login box looks fine in IE (very shocking), but when I view in Firefox, it wants to break after the [*#content*] in the content column. Heres the snapshots:

Okay, I have to ask. Are you designing using IE as your reference and hoping that your CSS will work out in other browsers? The thing is that IE will render bad css okay but then when you move to others look out.

Anyway, do you have links or can you post your css file?

Cheers,

Jay

LOL, design in IE? Is there anyone who designs for that shitty browser. No offense if you do.

Here is the site: http://www.tomlinnicks.com/modx/index.php?id=2
Anyways here is the style sheet:

/*
Theme Name: TicTac - Wuhan
Theme URI: http://wuhan.authenticasian.com/

Description: My lousy attempt to reproduce a masterpiece by <a href="http://www.simplebits.com">Dan Cederholm</a>.

Version: 0.2
Author: Meng Gao
Author URI: http://wuhan.authenticasian.com/

TicTac is a template created by Dan Cederholm for Blogger and it’s one of my
favorite designs. Therefore, I’ve created a WordPress theme in which I tried
my best to make it look like Dan’s original design. As much as I want to use the
original graphics, I had to make slight changes to them so as not to run into
copyright problems.

Since this theme is an obvious attempt to reproduce TicTac, I take absolutely
no credit in it. If you like this theme, write an email to Dan and let him
know.
-- Meng Gao
*/

/* Main Sections
------------------------------------------------------------------------- */
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
color: #333;
background: #e0e0e0;
}
div, p, img, a, td, ul, ol {
font-size: 10pt;
}

ol {
margin-left: 1em;
padding-left: 1em;
}
ol li {
margin-left: 1em;
padding: 0 0 .5em.3em;
list-style: decimal;
}
h1, h2, h3, h4 {
font-family: "Trebuchet MS", georgia, helvetica, arial, verdana, sans-serif;
font-weight: bold;
margin: .5em 0;
letter-spacing: .07em;
}
h1 { font-size: 218% }
h2 { font-size: 164%; }
h3 { font-size: 145%; }
h4 { font-size: 118%; letter-spacing: .15em }

p { padding: 0 0 1em; }

a, a:link {
text-decoration: none;
color: #69c;
}
a:visited { color: #669; border-color: #669; }
a:hover { color: #693; border-color: #693; text-decoration: none; }
a:active { color: #c33; border-color: #c33 }

a img, img {
border: none;
}

ul {
list-style: none;
margin: 0 0 20px 1em;
}
li {
list-style: none;
padding-left: 1em;
margin-bottom: 3px;
}


.clear {
clear: both;
}


#page {
width: 1024px;
text-align: left;
background:url(http://www.tomlinnicks.com/modx/assets/templates/default/images/page_bg.jpg) center repeat-y;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#content {
float: left;
text-align: left;
width: 596px;
padding: 0;
line-height: 1.5em;
background-color:#fff;
margin-top: 40px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 52px;
}
#content-right {
float: right;
text-align: left;
width: 576px;
line-height: 1.5em;
background-color:#fff;
margin-top: 20px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 0;
}

/* Special text formatting
------------------------------------------------------------------------------- */
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, cite {
text-decoration: none;
}
h2 a:hover, h3 a:hover {
color: #06c;
border-bottom: 1px dotted #06c;
}

h2.pagetitle {
margin-top: 30px;
text-align: center;
}

h4.date-header {
margin-top: 0;
padding-left: 14px;
font-size: 90%;
color: #f93;
background: url(images/date_icon.gif) no-repeat 0 50%;
}

blockquote {
margin: 0 0 0 30px;
padding: 10px 0 0 20px;
font-size: 88%;
line-height: 1.5em;
color: #666;
background: url(images/quotes.gif) no-repeat top left;
}

blockquote p { margin-top: 0; }

blockquote cite {
margin: 5px 0 0;
display: block;
}
code {
font: 1em/2.5em ’Courier New’, Courier, monospace;
color: #444;
white-space: pre;
width: 350px;
height: auto;
overflow: auto;
display: block;
border: 1px solid #999;
border-width: 2px 0;
padding: 1em;
margin: 0 0 1em 0;
background-color: #fafafa;
}
li code { width: 330px }

acronym, abbr, span.caps {
font-size: 90%;
letter-spacing: .07em;
cursor: help;
border-bottom: 1px dotted #3f3f3f;
}

.center { text-align: center;}
.alignright { float: right; }
.alignleft { float: left; }

hr { display: none; }


.error, .message {
padding: 12px;
background-color: red;
color: #fff;
}
.message {
background-color: green;
}
p.bolder {
color: #333;
font-size: 10pt;
font-weight: bolder;
padding:2px;
}

/* Header
------------------------------------------------------------------------- */

#header {
position: relative;
}

#header h1 {
margin: 0;
padding: 45px 60px 45px 75px;
color: #fff;
text-shadow: #81A75B 2px 2px 2px;
background: url(images/top_h1.gif) no-repeat bottom left;
}
#header h1 a {
text-decoration: none;
border-bottom: none;
color: #fff;
}
#header h1 a:hover {
color: #eee;
text-shadow: #fff 0 0 4px;
}


/* Search Form
------------------------------------------------------------------------------- */
#search {
position: absolute;
right: 60px;
top: 40px;
padding: 15px 15px 0;
}
form.FSF_form {
margin: 0;
padding: 0;
width: auto;
text-align: right !important;
}

input.FSF_input {
display: inline;
height: 17px;
border: 1px solid #ddd;
border-left-color: #c3c3c3;
border-top-color: #7c7c7c;
background: #fff url(images/input-bg.gif) repeat-x top left;
margin: -1px 3px 0;
padding: 3px 0 0;
}
input.FSF_submit {
display: inline;
margin: -1px 0 0;
padding: 0;
height: 22px;
line-height: 22px;
}


/* Post (main content entries)
------------------------------------------------------------------------- */
.post {
margin: 0 0 1.5em 0;
padding: 0 0 1.5em 14px;
border-bottom: 1px solid #ddd;
}

.post h3 {
margin-top: 0;
color: #f63;
}
.post ul li {
background: url(images/tictac_orange.gif) no-repeat 0 6px;
margin-left: 0em;
}



/* Related Links
------------------------------------------------------------------------- */
#navlist li {
display: inline;
list-style-type: none;
}


/* UserComments
------------------------------------------------------------------------- */
.comment {
background-color: #fff;
border-bottom: 1px solid #ddd;
position: relative;
padding: 10px;
overflow: hidden;
}
.commentAlt {
background-color: #f4f4f4;
}
.commentAuthor {
background-color: #ffc;
}
.commentMe {
background-color: #ccf !important;
padding-top: 5px;
}
.commentNum {
font-family: Arial, sans-serif;
font-size: 50px;
line-height: 30px;
position: absolute;
top: 0;
right: 0;
color: #f2f2f2;
font-weight: bold;
letter-spacing: -4px;
z-index: 1;
}
.commentAlt .commentNum {
color: #eaeaea;
}
.commentMe .commentNum {
color: #b0b0ff;
}
.commentAuthor .commentNum {
color: #f3f3bb;
}
.commentTitle {
position: relative;
z-index: 10;
color: #999;
}
.commentTitle span {
text-transform: uppercase;
font-size: 86%;
}
.commentTitle strong {
color: #693;
font-size: 110%;
text-transform: none;
font-weight: normal;
margin-right: 6px;
}
.comment .content {
position: relative;
z-index: 10;
}


/* Sidebar
------------------------------------------------------------------------- */

#sidebar {
color: #999;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 650px;
padding-top: 23px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
}
#sidebar-left {
color: #999;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
width: 386px;
margin-top: 40px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

#sidebar h2 {
padding: 0px;
color: #666;
height: 32px !important; /* for most browsers */
height /**/:57px; /* for IE5/Win */
}

#sidebar ul, #sidebar p {
padding: 5px 15px 1em;
margin-left: -5px;
}

#sidebar ul { margin-bottom: 1em }
#sidebar ul ul { margin-bottom: 0; border-bottom: 1px solid #ddd; }
#sidebar ul ul ul { border-bottom: none; margin-bottom: 0; }
#sidebar ul li ul li { background: url(images/tictac_green.gif) no-repeat 0 6px; }

#sidebarlogin {
height:200px;
width:340px;
background-color:#CC6633;
}

Quote from: danthach6 at Mar 18, 2008, 01:51 PM

LOL, design in IE? Is there anyone who designs for that shitty browser.

Yes. But not me for sure.

Anyway. I am not sure what is going on but they look the same in my FX 2.0.0.12 and in IE7 on WinXP almost to the pixel.

very odd... thanks anyways!

Wow, this is really bothering me. It seems so simple to figure out, yet I think I tried everything.

1st, I removed the login box. I guess it wasnt the login that was messing up my layout like I assumed.
2nd, it must be a float/clear problem, but clearing the sidebar column does nothing to fix it.
3rd, I removed that big form I had in the content column, and still no luck.

Its as if MODx is just stuck in this layout and I cant refresh it. Here is another screenshot. Check out my sidebar all the way at the bottom.
CSS link:http://www.tomlinnicks.com/modx/assets/templates/default/site.css
HTML link:http://www.tomlinnicks.com/modx