CSS - Footer Display Problems..

Hello!
I am new to dreamweaver CS3 and need help with these two things:

when I preview my site in IE my lightbox does not work.
And my sticky footer does not stick to the bottom of the page.

Please someone help me.

Thank you in advance!

I am having problems with my footer once I resize my to make my page have to scroll left to right. It displays fine until I do this. It makes my footer background not display all the way.



Here is my css for reference:


Code:

.footerWrapper {
	margin: 20px 0 0 0;
	padding: 0;
	width: 100%;
	background: url(../images/content123bg.png) repeat-x;
}
.footer {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height: 155px;
}
.footer img {
	margin: 10px 0 0 0;
	float: right;
}
.footer h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #09F;
	text-decoration: none;
	text-align: center;
	padding: 10px 0 10px 0;
	margin: 0;
	width: 145px;
}
h3.facts {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	color: #09F;
	text-decoration: none;
	text-align: center;
	padding: 10px 0 10px 0;
	margin: 0 0 0 -3px;
	width: 145px;
}
.footer p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #CCC;
	text-decoration: none;
	text-align: center;
	width: 140px;
	margin: 0 0 0 2px;
	padding: 0 0 5px 0;
}
.footer p a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #999;
	text-decoration: underline;
}
.footer p a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
}

#twitter_t {
	margin: 0;
	padding: 0;
}
#twitter_t img {
	width: 150px;
	height: 50px;
	margin: 0;
	border: none;
	padding: 0 230px 0 0;
	/* [disabled]float: left; */
	position: relative;
}
 
#twitter_m {
	width: 370px;
	padding: 0 10px 0 0;
	background:url(../images/twiiterbubble.png) no-repeat;
	float: right;
	height: 140px;
	margin: -40px 0 0 0px;
	border: none;
}
 
   #twitter_container {
	min-height:45px;
	height:auto !important;
	height:40px;
	padding-bottom:10px;
	/* [disabled]padding-right: 10px; */
   }
 
       #twitter_update_list {
	width: 350px;
	padding: 0 0 0 20px;
	overflow: hidden;
	font-family: Georgia;
	font-size: 14px;
	font-style: italic;
	color: #000;
	line-height: 16px;
	font-weight:bold;
       }
 
       #twitter_update_list li {
	width: 350px;
	list-style: none;
	margin: 60px 0 0 0;
       }
 
       #twitter_update_list li a {
	color: #FFF;
	border-bottom: dotted 1px;
	text-decoration: none;
       }
       #twitter_update_list li a:hover {
	color: #09f;
       }

Here is my HTML:

Code:

 <div class="footerWrapper">
  <div class="footer">
  <div class="fltlft">
  <h3>Quick Links</h3>
  <p><a href="http://www.beckin.com/">Home</a></p>
    <p><a href="http://www.beckin.com/portfolio.html">Portfolio</a></p>
    <p><a href="http://www.beckin.com/css-menus.html">CSS Menus</a></p>
  <p><a href="http://www.beckin.com/free-templates.php">Templates</a></p>
</div><!-- end fltlft -->

<div class="fltlft">
  <h3>Help</h3>
  <p><a href="http://www.beckin.com/support/">Custom Quotes</a></p>
    <p><a href="http://www.beckin.com/support/">Support</a></p>
  <p><a href="http://www.beckin.com/support/">Webmasters</a></p>
</div><!-- end fltlft -->

<div class="fltlft">
  <h3 class="facts">Facts</h3>
  <p><a href="#">Privacy Policy</a></p>
    <p><a href="#">Terms of Use</a></p>
</div><!-- end fltlft -->

<div id="twitter_t">
<a href="http://twitter.com/beckindesigns"><img src="images/top.png" alt="free web templates" /></a>
</div><!-- end twitter_t -->
<div id="twitter_m">
   <div id="twitter_container">
       <div id="twitter_update_list"></div>

  <!-- end .twitter_container --></div>

  <!-- end .twitter_t --></div>

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/beckindesigns.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

  
    <!-- end .footer --></div>
  <!-- end .footerWrapper --></div>

Any help with this would be very appreciated.

Hello,

I am trying to change the layout of my journal which is based on CSS. The codes doesn't come from me. I found it two years ago on a free layout website where all layouts are allowed to be changed if there are credits given for the original style sheed.

I am afraid my problem is pretty simple. I don't know very much about programming and CSS, just very few. So please snap at me immediately if I don't understand fast enough or don't give you exactly the answers you need. Anyways I will give my best!

My problem:

I want to change the footer and something what is supposed to be called the header. I would say: Let's concentrate on the footer at first.

I want to change both from their background color to an image. The text still have to be able to be read.
I have read something about putting the footer in the body but there is my normal background of the whole journal and I think it would make problems this way.

Well I don't know if the codes are messy. I changed a few colors and positions but even that not fully until now. I hope you can get a clue what is my problem!

And thank you so far!

Here are the codes from my footer:
Quote:
#footer {
text-align: center;
font: 7pt arial, sans-serif;
background: #fff url(here would stand the image url but as newbie I am not allowed to post urls, you know the rules) repeat;
color: #BBBBBB;
z-index: 100;
clear: both;
border: 0px;
padding: 10px;
}

I've dabbled with the display: table properties for awhile, and I've looked forward to the time I could use them at work. Equal height columns! No more faking it with extra wrapper div's and background images!

As we're finally rolling out IE8 at work, I decided to take a pretty typical layout that I would have laid out years ago in a table. Header, footer, nav and content, that is always at least the height of the page and will expand with more content:

http://www.richarddoyle.net/tests/css_table/table.html

This could be done using floats, background images, etc, but I wanted to take advantage of what display: table could offer me. So I tried to recreate the same layout. I knew there was no colspan in CSS, but I was sure I could get it to work somehow.

My first attempt showed the colspan issue:

http://www.richarddoyle.net/tests/css_table/cssversion1.html

My second attempt I couldn't get the page to match at least the height of the browser:

http://www.richarddoyle.net/tests/css_table/cssversion2.html

Is this just impossible to do with display:table properties? Is there some mixture of table properties and sticky footer code that can make this work?

I am trying to display a footer below two absolute divs and whatever is the default.
[absolute][default][absolute]
[ FOOTER ]

Any suggestions or tutorials?

Whatever I try will put the footter below the default center and it will then apear under the two divs aligned absolute. Or if the center column is longer it will be below the divs. (Do I make any sense

Hello,

I am building a website for a friend/client, and I have a serious problem.
When coding it, I made the mistake of checking it only in FF, and now it bugs in IE6 (I don't have any newer version so I can't tell).

I was hoping someone here can point me in the right direction so I can solve this without a complete recode.

I can't post the URL though, being a new user.
The main issues are where-ever I use div tags. They have a problem aligning and centering where I want them.
Also, I get bugs from using absolute positioning inside relatively positioned divs.

Thanks,
Tamir.

Hello all

I've managed to do a nice site design with CSS and spent all day today adding things and solving problems that come to my way but now I'm desperate cause I reached a point a can't solv one problem related to the site appearence on IE. My site works great, like I want, on Firefox, but the layers don't appear right on IE.

Layers get a 2/3 pixels discrepancies when using IE! Can anyone help me on this? The layout where I'm having trouble is at http://www.penaf.com/2/

I'd be really appreciated if someone helped me. Thanks in advance!

hands up who hates IE !!

sorry...
hey all..

my problem, in Mox FF it is great however in IE it is wrong. there is a extra grey rectangle in the bottom right here is the link for you to see it
http://www.fabhols.com/offers/displaylayout.htm

the link to the css is here

would appreciate anyone lending a hand sorting this...

Thanks in advanced

RF

Hi guys,

I've been working on my own select menu for a week or so. I've got it the way I want (I think) in all other browsers besides ie6, where the table I'm using for the title over runs and the visibility is white background instead of nothing.

http://thecheckoutplace.com/practice.php

Also the caching of the button always seems to be a nagging problem.

Thoughts?

I have created a website using html and css which displays perfectly in IE, opera and Firefox etc but... when i try and view it on my Linux computer with Firefox it is wider than the screen ( it has a horizontal scroll bar.

Does anyone know what the common causes of this are ?

hi, I am having problems with nav list

It displays inline on firefox but not in IE..but I can not see why? any ideas??

thanks

PHP Code:
/* NAV */

    #nav {
        width: 420px;
        height: 70px;
        float: right;
        margin: 0;
        padding: 0;
    }

    #nav li.on ul, #nav li.off ul {
        margin: 0;
        padding: 0;
    }

    #nav a {
        text-decoration: none;
    }

    #nav li { /*float the main list items*/
        margin: 0;
        float: right;
        display: inline;
        padding-right: 0px;
        background: url(../images/pipe.gif) no-repeat;
        background-position: 0 10px;
    }

    .noback {
        background: none;
    }

    #nav li ul {
        display: none;
        float: right;
    }
    
    #nav li.off ul, #nav li.on ul { /*put the subnav below*/
        position: absolute;
        top: 88px;
        *top: 104px;
        left: 503px;
        padding-top: 10px;
        height: 28px;
        width: 420px;
    }

    #nav li a {
        color: #155089;
        font-size: 20px;
        display: block;
        height: 15px;
        padding: 10px;
        
        background-position: 0 10px;
    }

    #nav li.on a {
        color: #000;
        background-position: 0 10px;
    }

    #nav li.on ul a, #nav li.off ul a {
        float: left; /*ie doesn't inherit the float*/
        border: 0;
        color: #C1D1E0;
        width: auto;
        margin-right: 0px;
        font-size: 18px;
        line-height: 0px;
        background: none;
    }

    #nav li.on ul {
        display: block;
        background: none;
    }

    #nav li.off:hover ul {
        display: block;
        z-index: 6000;
        background: #fff;
    }

    #nav li.off a:hover, #nav li:hover a {
        color: #000;
        background: #fff;
        background: url(../images/pipe.gif) no-repeat;
        background-position: 0 10px;
    }

    #nav ul li.off a:hover, #nav ul li:hover a {
        color: #000;
        background: none;
    }
    
    ul#nav li.off ul li, ul#nav li.on ul li {
        background-image:none;
    }
    
    ul#nav li.off ul li a:hover, ul#nav li.on ul li a:hover {
        background-image:none;
    }
    
    ul#nav li.on a.nopipe, ul#nav li.off a.nopipe {
        background-image:none;
    }

    /* END OF NAV */ 





and the html

PHP Code:
<div id="divnav">
        
        <ul id="nav">
        
        <li class="off"><a href="#">contact</a></li>
        
        <li class="off"><a href="#">products</a>
            <ul>
            <li><a href="#">testemonials</a></li>
            <li><a href="#">samples</a></li>
            </ul>
        </li>
        
        <li class="off"><a href="#">about us</a>
            <ul>
            <li><a href="#">processes</a></li>
            <li><a href="#">plant list</a></li>
            <li><a href="#">benefits</a></li>
            <li><a href="#">features</a></li>
            </ul>
        </li>
        
        <li class="on" style = "background-image:none;"><a href="#" class = "nopipe">home</a></li>
        
        </ul>
        
        </div> 





thank you

Need assistance determining the cause of the various display issues in IE as indicated by this screen shot from 'browsershots.org':

http://www.mandgweb.net/efw_php/cbc/bs_ss1.png

particularly

a) the pushing down of the main content and obstruction of the background image
b) the explosion occurring in the 'free trial' sidebar (excessive padding, non-centered)

I am not properly set up to test all platforms/browsers and have reviewed and attempted various solutions and reloading to 'browsershots' to try them.

Actual site pages he

http://www.mandgweb.net/efw_php/emp...rds_program.php

CSS: http://www.mandgweb.net/efw_php/css/efw.css

Pages display as intended on:
Mac OSX 10.6.8 on
Firefox/3.6.19
Safari Version 5.1 (6534.50)
Chrome 13.0.782.112

Windows XP Pro (Version 2002)
Firefox/4.01
Chrome 11.0.696.65

Thank you in advance for your assistance.

I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE.

I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code.

Here's a page with the navbar live:
http://www.skullcrow.com/community_upload.php

Here's the css being used:
Code:

/* horizontal drop down navbar - basic formatting */
#centering_wrap {width:100%; position:relative;}
#menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */
#menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */
#menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */

#menu ul li{ background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */

/* Positioning popouts (2nd level only) */
#menu li {position: relative;} /* make "ABSOLUTE" work correctly */
#menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */
#menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */

/* Hover behavior */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

/* Additional text formatting */
#menu a {display: block;width: 100%;height: 100%;}

#menu ul ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc #323E6B #456594 #323E6B ;
margin: 0;
padding: 3px 4px;
background: #2B3344;
}
#menu ul ul a {color: #CCC;text-decoration: none;}

#menu ul ul a:hover {color: #FFF;background:#06F;}

...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all):
Code:

<div id="centering_wrap">
<div id="menu">

<ul style="width:195px;">
  <li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home">&nbsp;</a>
    <ul>
	  <li><a href="http://www.skullcrow.com/">Storefront</a></li>
      <li><a href="http://www.skullcrow.com/community_home.php">Community</a></li>
	</ul>
  </li>
</ul> 
  
<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store">&nbsp;</a>
    <ul>
	  <li><a href="http://www.skullcrow.com/">Shirts</a></li>
      <li>Hats</li>
	  <li>Stickers</li>
	  <li>Misc Stuff</li>
	</ul>
  </li>
</ul>

<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community">&nbsp;</a>
    <ul>
	  <li><a href="http://www.skullcrow.com/forum">Forum</a></li>
      <li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li>
	  <li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li>
	  <li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li>
	</ul>
  </li>
</ul>

<ul style="width:188px;">
  <li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help">&nbsp;</a>
	<ul>
	  <li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li>
	  <li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li>
	  <li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li>
	</ul>
  </li>
</ul>

<ul style="width:196px;">
  <li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff">&nbsp;</a></li>
</ul>

</div>
</div>

...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't:
Code:

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(css/csshover3.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is he http://www.xs4all.nl/~peterned/csshover.html

Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a bastard and I think most web developers would probably agree.

Thanks again.

Hi guys,

Please help. Im very confused as to why setting display:inline in my CSS is giving me grief with text "breaking out" of the list element in FireFox???. If I give the li element a background colour clearly I can see that the text is outside the boundaries of the li element. However, if I used display:block and float:left the li item ecompasses the text just fine.

My CSS is below. Thankyou in advance




Code:

#navcontainer {
	margin-left: 30px;
}
#navlist{
	list-style: none;
	padding: 0;
	margin: 0;
}
#navlist li {
	display: inline;
	border-right: 1px solid #000;
	padding: 0 0.4em 0 0.4em;
	margin: 0 0.4em 0 -0.4em;
}

/*Win IE browsers - hide from Mac IE\*/
* html #navlist li
{
	display: block;
	float: left;
}
#navlist li a{
	font-family: Garamond, "Garamond-Normal", Georgia, "Times New Roman", Times, serif;
	font-size: 200%; /* set the font size for p, scaled from the body declaration */
	text-decoration:none;
}

#navlist a:link,  #navlist a:visited{
	color: #666;
}     /* unvisited link */
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
 	color: #000;
	
}

Thanks for your time. Still learning design, so thanks for your help if they are easy solutions.

Border Issue:
In IE and FF I have a complete border on a few header div's. The bottom and top border is different color than the left and right borders. You can see that the dark brown bottom and top borders appear to lay overtop of the white left and right borders.

Website is he
http://onlinecasinoboss.true2formde...e.php?page=home

Styling CSS is he
http://onlinecasinoboss.true2formde...aster-style.css

Layout CSS is he
http://onlinecasinoboss.true2formde...ster-layout.css

IE Layout Issue:

In FF the three center content columns display how I want it to look. When you view the same home.html page in IE you can see that they don't space out how I'd like. It is most visible by compairing the boxes on the right of the center content.

Thanks a ton for your time and help, I appreciate it.