“html+css help” – Forum Thread – Discuss

- dignmg
- 08 Apr 10, 1:10 pm
- Comment #1

Well, this has been an issue for longer then it should but i really cant figure it out! And i thought maybe some of you symphony users might have ran into this yourself. Now this is not a symphony error. Its my HTML and CSS.

So lets get it to. So i have the “package” div that has everything in it such as the content div and etc. Now when i added a background color to it, the “package” div is above everything. and everything sits below it. It is acting like its not even IN the div. and then when i tried to fix this while adding a position CSS the footer butts up to the package div and is BEHIND the content.

I dont know how i am running into this error now after coding for awhile but its starting to kill me.

Any ideas?

thanks

- czheng
- 08 Apr 10, 1:19 pm
- Comment #2

Start by validating your code. If it still doesn’t work, pastie your code and hopefully someone can take a look.

- dougoftheabaci
- 08 Apr 10, 1:56 pm
- Comment #3

If you could show us your CSS and your XHTML we could help you a bit more. My guess is that, as you guess, the elements aren’t where you think. Most likely you have a tag issue where it’s closed before you think.

As Czheng suggests first validate your code. That will pop up any of the obvious stuff right away.

Also, check with Firebug in Firefox or the Web Inspector in any WebKit browser (Safar, Chrome).

What browser is it happening in?

- dignmg
- 08 Apr 10, 2:12 pm
- Comment #4

It is happening in all of them. And the validation passes, So i am still not sure.

It seems to be a position absolute or relative and cant get it to work.

well here is my code. It is pretty messed up but i have been going crazy on such a what i thought small task.

Master

<xsl:template match="/">
    <body>
        <div id="wrapper">

            <xsl:apply-templates select="data/navigation"/>

            <div id="masthead">     
                <a href="{$root}"><img src="{$workspace}/images/header.png" alt=""/></a>
            </div>

            <div id="package">
                <p class="date">
                    <xsl:call-template name="format-date">
                        <xsl:with-param name="date" select="$today"/>
                        <xsl:with-param name="format" select="'d'"/>
                    </xsl:call-template>
                    <span>
                        <xsl:call-template name="format-date">
                            <xsl:with-param name="date" select="$today"/>
                            <xsl:with-param name="format" select="'m'"/>
                        </xsl:call-template>
                    </span>
                </p>
                <div id="content">
                    <xsl:apply-templates/>
                </div>
            </div>

            <xsl:call-template name="footers" />

        </div>
    </body>
</xsl:template>

Homepage

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:import href="../utilities/master.xsl"/>
    <xsl:import href="../utilities/side-nav.xsl"/>
    <xsl:import href="../utilities/about-info.xsl"/>

    <xsl:template match="data">
        <xsl:call-template name="side_navs" />
        <xsl:apply-templates select="about-info" />
    </xsl:template>

</xsl:stylesheet>

About info template

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="about-info">
        <div id="my_info">
            <xsl:for-each select="entry">
                <ul class="about_text">
                    <li class="info_title"><xsl:value-of select="title" /></li>
                    <li class="info_text"><xsl:value-of select="body" /></li>
                </ul>
            </xsl:for-each>
        </div>
    </xsl:template>

</xsl:stylesheet>

And finally the messy CSS

/******* Structure *******/

* {
    padding: 0;
    margin: 0;
}

body {
    color: #222;
    background: #ededed;
/*  background-repeat: repeat-x; */
    font: 0.8em/1.7em Helvetica, Verdana, sans-serif;
/*  margin: 2em 0; */
}

#wrapper {
    margin: 0 auto;
    position: relative;
/*  width: 960px; */
}

#package {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 960px;
/*  text-align: left; */
    background-color: lime;
    padding: 40px;
}

#content {

/*  background: url("../images/border.gif") 0 0 no-repeat; */
    background: #fffff7;
    padding-top: 30px;
    position: absolute;
    width: 960px;
}

img {
    border: hidden;

}
/******* Links *******/

a {
    color: #3f6b95;
    text-decoration: none;
}

a:hover {
    color: #65aae8;
}

#content a {
    border-bottom: 1px dotted #a2c7f0;  
}

#content h2 a {
    border: none;
}


h3 a {
    border: none !important;
}

.article h3 a:hover {
    color: #65aae8;
}

.article ul.meta a {
    color: #599777;
    border-bottom: 1px dotted #96d4b4;
}

ul.archive li a {
    border: none !important;
}

/******* Masthead *******/

#masthead {
    position: relative;
    width: 960px;
    text-shadow: #222 0px 0px 2px;
    margin: 0 auto;
    padding-bottom: 40px;
}

#masthead h1 a {
    color: #232323;
    font: normal 2em/2em Helvetica, Sans-serif;

}

#masthead h1 a:hover {
    color: #fefbbf;
}

#package p.date {
    position: absolute;
    top: -2px;
    right: 15px;
    color: #222;
/*  background: url("../images/ribbon.gif") 50% 0 no-repeat; */
    width: 54px;
    height: 87px;
    font: bold 1.7em/0.7em Helvetica, Sans-serif;
    text-align: center;
    text-transform: uppercase;
/*  text-shadow: #222 0 -1px 1px; */
    letter-spacing: 2px;
    padding-top: 20px;
    margin: 0;
}

#package p.date span {
    display: block;
    font: normal 0.55em/1em Helvetica, Sans-serif;
    margin-top: 0.5em;
}

/******* Menu *******/

#nav {
    background: #252525;
    text-shadow: #222 0px 0px 2px;
    font-size: 28px;
    margin-bottom: 70px;
    padding: 10px;
    overflow: hidden;
}

ul#menu {

    padding: 10px 10px 10px 10px;
    margin-bottom: 30px;
/*  overflow: hidden; */
    width: 960px;
    margin: 0 auto;

}

ul#menu li {
    display: inline;

}

ul#menu a {
    color: #f3f1e9;
    margin: .5em;
    padding: 20px 10px 17px 10px;
}

a.active {
    background: url(../images/nav_image.jpg) 50% 100% no-repeat;
    margin-bottom: 20px;
}

ul#menu a:hover, ul#menu a.active {

    color: #d6610c;
/*  background-color: #ededed; */
}
ul#menu li a:active {
    color: #473f3f;
}

/******* Typography *******/

@font-face { font-family: ChunkFive;
    src: url('../uploads/Chunkfive.otf');
}

h2 {
/*  background: url("../images/hr.gif") 0 100% no-repeat; */
    font: normal 2.2em/1.2em ChunkFive;
    text-transform: uppercase;
    text-shadow: #f6f5e7 0 0 0;
    letter-spacing: -1px;
    padding: 0.3em 30px 0.4em 5px;
    margin-bottom: 1em;
}

h3 {
    color: #424242;
    background: url("../images/hr.gif") 0 100% no-repeat;
    font:  0.9em/1.5em ChunkFive, Sans-serif;
    padding: 0 5px;
}

h4 {
    padding: 1em 5px 0;
    text-transform: uppercase;
    color: #575449;
}

p {
    margin: 0.5em 5px 0.7em;
}

hr {
    background: url("../images/icons/glyph.gif") 50% 50% no-repeat;
    width: 106px;
    height: 11px;
    border: none;
    margin: 2em auto;
}

code {
    color: #843c37;
    font: 0.9em Monaco, "Courier New", Courier, mono;
}

ul, ol {
    margin: 0 55px;
}

ul {
    list-style: square;
}

li {
/*  margin: 0.5em 0; */
    font-family: ChunkFive;
}

#site_info {

    float: right;
    color: #ece8db;
    width: 350px;
    font: 1.2em Verdana, Sans-serif;
    margin-bottom: 80px;

}

.info {
    background: #252525;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    list-style-type: none;
    float: right;
    color: #ece8db;
    height: 200px;
    width: 200px;
    margin: 7px;

}

.info_title {
    font-size: 18px;
    float: left;
    padding: 10px 5px;
}

.more {
    clear: both;
    font-size: 14px;
    float: left;
    padding: 5px 20px;

}

#my_info {
    float: left;
    width: 450px;
    font: 1.2em Verdana, Sans-serif;
}

.about_text {
    list-style-type: none;
    float: left;
    font: 1.2em Verdana, Sans-serif;
    margin: 0;
}

.info_text {
    border-bottom: 1px solid gray;
    float: left;
    font: 12px Verdana, Sans-serif;
    line-height: 25px;
    margin-top: 1px;
    padding-bottom: 15px;
}


/******* Projects *******/
#projects {
    background-color: fuchsia;
    border-top: 1px solid gray;
    padding-top: 50px;
    position: absolute;
    clear: both;

}
.showcase {
    background-color: aqua;
    display: block;
    clear: both;
    border-bottom: 1px solid gray;
    margin-bottom: 40px;
    /* position: absolute; */
    /*  width: 500px; */
    float: left;


}

.projectHeader {
/*  display: block; */
    float: right;
    background-color: #fff;
}

/*
.hello {
    clear: both;
    border: 7px solid gray;
    float: left;
    width: 614px;
}
*/

.left {
    float: left;
    border: 7px solid gray;
    width: 614px;
    background-color: aqua
}

.right {
    float: left;
    width: 200px;
    background-color: aqua
}

.showcase h2 {
/*  padding-left: 40px; */
}

.showcase ul.meta {
    position: relative;
    overflow: hidden;
    color: #599777;
    list-style: none;
    margin: -2em 5px 0;
}

.showcase ul.meta li {
    display: inline;
}

.showcase ul.meta li.icon-filed-under {
    background: url("../images/icons/filed-under.gif") 0 50% no-repeat;
    padding-left: 18px;
    float: left;
}

.showcase ul.meta li.icon-comments {
    float: right;
    background: url("../images/icons/comment-bubble.gif") 0 50% no-repeat;
    padding-left: 18px;
}

.showcase a.read-more {
    background: url("../images/icons/read-more.gif") 100% 50% no-repeat;
    padding-right: 15px;
}

/******* Article *******/

.article {
    margin-bottom: 40px;
}

.article h3 {
    padding-right: 40px;
}

.article ul.meta {
    position: relative;
    overflow: hidden;
    color: #599777;
    list-style: none;
    margin: -2em 5px 0;
}

.article ul.meta li {
    display: inline;
}

.article ul.meta li.icon-filed-under {
    background: url("../images/icons/filed-under.gif") 0 50% no-repeat;
    padding-left: 18px;
    float: left;
}

.article ul.meta li.icon-comments {
    float: right;
    background: url("../images/icons/comment-bubble.gif") 0 50% no-repeat;
    padding-left: 18px;
}

.article a.read-more {
    background: url("../images/icons/read-more.gif") 100% 50% no-repeat;
    padding-right: 15px;
}

/******* Form *******/

form {
/*  background-color: aqua; */
    overflow: hidden;
    border:none;
    width: 250px;
    height: 240px;
    float: left;
}

form fieldset {
    border: none;
    font-size: 90%;
    padding: 20px 15px;
    margin: 1px;

}

form label {
    display: block;
    position: relative;
    color: #3f5a3e;
    font-size: 0.95em;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

form label small {
    position: absolute;
    right: 0;
    color: #3f5a3e;
    font-size: 90%;
    text-transform: none;
    text-align: right;
    margin-left: 40%;
}

form label small a:hover {
    color: #ccc;
    border-color: #888; 
}

form input[type="text"], form textarea {
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    display: block;
    height: 20px;
    width: 170px;
    padding: 3px 0px;
    background-color: #ededed;

}

form textarea {
    height: 100px;  
}

form input[type="submit"]#submit {
    display: block;
    position: relative;
    float: right;
}

#submit {
    display: block;
    position: relative;
    float: right;
    display: inline-block;
    padding: 5px 5px 5px;
/*  color: #fff; */
    text-decoration: none;
    line-height: 1;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
    cursor: pointer;
    /*
    width: 100px;
    height: 50px;
    */
    outline: 0px;
    background-color: #ededed;
    border:none;
}


form label.required input {
    background-color: #ededed;
    width: 100px;
    padding-left: 5px;
}

form p.success {
    color: #2c421b;
    background-color: #8acd55;
    padding: 5px 15px;
    border-top: 1px solid #a9fa68;
    border-bottom: 1px solid #6fa444;
    margin: 1px !important;
}

form p.error {
    color: #5f311b;
    background-color: #fb834b;
    border-top: 1px solid #fcc8a4;
    border-bottom: 1px solid #ae5832;
    padding: 5px 15px;
    margin: 1px !important;
}

form label.error{
    color: #b12123;
    font-weight: bold;
}

form#publish-article {
    text-align: center;
}

form#publish-article fieldset button#submit {
    cursor: pointer;
    color: #333;
    background: url("../images/button.gif") 0 0 no-repeat;
    width: 130px;
    height: 30px;
    border: none;
}

/******* Footer *******/

#footerWrapper {
    clear: both;
    background-color: #252525;
    width: 100%;
    margin-top: 30px;

}
div#footer {
    background-color: #252525;
    color: #f0ecde;
    width: 960px;
    height: 230px;
    font-size: 1em;
    margin: 0 auto;
    padding-bottom: 10px;
}

div#helloBox {
    background-color: #383838;
    display: block;
    float: left;
    font: normal 50px ChunkFive;
    margin-top: 50px;
    padding: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#writeMe{
    display: block;
    float: left;
    font: normal 50px ChunkFive;
    margin-top: 50px;
    margin-left: 30px;
    padding: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ul#footer li {
    display: inline;
    margin-left: 1em;
}

ul#footer li a {
    color: #8e8875;
    border-bottom: 1px dotted #51463d;
}

ul#footer li a:hover {
    color: #fefbbf;
}

- dignmg
- 08 Apr 10, 2:13 pm
- Comment #5

holy cow! that is crazy! sorry about the code :(

- Allen
- 08 Apr 10, 3:39 pm
- Comment #6

We recommend you use pastie.org for long code. I have reformatted your code for now.

- dignmg
- 08 Apr 10, 4:14 pm
- Comment #7

thanks guys… i got it to work. I have been doing this to much today.

Symphony.

html+css help

Search

Master

Homepage

About info template

And finally the messy CSS

Server Requirements

Symphony.

html+css help

Search

You are looking at page 1 of 1

Master

Homepage

About info template

And finally the messy CSS

Server Requirements

Sign in