CSS - Ie6 Making My Page Go Crazy

I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page.

I have
height: 100%;
in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch?
I have tried height: auto; but that doesnt work either.

OK, I have a static sub-navigation on the left side of the page, which works just fine. You can see it here

I'd like the sub-navigation to scroll to just beneath he header navigation, then stay put there, when the page is scrolled. Something like the Vogue web site does with the red navigation bar, which you can see here


Can someone please explain, or give me an idea of how to accomplish this? I think it is with CSS.

thanks

Hey

I am developing a site for our band, and I'm having trouble getting the nav bar to look right. The page is http://www.mattbray.curvedspaces.co..._beta/index.php and I don't want the left hand section to stop halfway down the page. The stylesheet is called style.css in the same directory.

Code:

/* page defaults */
body {
	margin: 0px;
	padding: 0px;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #EAEAEA;
}

/* Layout divs */
#container {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	position: static;
	left: 40px;
	top: 12px;
	padding: 0px;
	width: 800px;
	border-right: #003366 1px solid;
	border-left: #003366 1px solid;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	text-align:left;
	background-color: #FFFFFF;
}
#title {
	background-image: url(images/saved_title.gif);
	margin-top: 10px;
	background-repeat: no-repeat;
	height: 150px;
	border-top-color: #000000;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-color: #000000;
}
#navbar {
	background-image: url(images/navbar.gif);
	background-repeat: no-repeat;
	border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 5px;
	height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navwin {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-right: 1px solid black;
	padding: 5px;
	background-color: #CCCFFF;
	width: 230px;
	height: 100%;
	margin: 0;
	float: left;
	font-size: medium;
}
#content {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 10px;
	padding-top: 40px;
	background-image: url(images/content.gif);
	background-repeat: no-repeat;
	background-position: -239px 0px;
	background-color: #FFFFFF;
	height: auto;
	width: 539px;
}
#footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #CCCCCC;
	margin-bottom: 10px;
	padding: 10px;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	width: 780px;
	height: 25px;
	text-align: center;
}

/* Links */
a:link {
	color: #006699;
}
a:visited {
	color: #006699;
}
a:hover {
	color: #006699;
	text-decoration: none;
}
a:active {
	color: #006699;
}

/* elements */
#navwin h2 {
	font-size: large;
	display: block;
}

#navwin ul {}

thanks

Matt

Hi everyone,

I am trying to create a div that will "float" over an image when the mouse is moved over the image.

I have got the div to appear and disappear when the mouse is hovered over the image, however, unless the positioning is absolute the page grows according to the size of the floating div.

Below is the code I have used. I am almost certain there is a better way to do this. Possibly without the javascript. Any suggestions would be greatly appreciated!

CSS:
Code:

#test {
	background-color: #6374AB;
	display:none;
	position: relative;
	top: -52px;
	z-index: 2;
	width: 400px;
}

#container {
	background-color: #c0c0c0;
	width: 500px;
	border: 1px solid #000;
	padding: 10px;
}

#fakeImage {
	background-color: #00ff00;
	width: 100px;
	height: 50px;
	border: 1px solid #000;
}

.opaque {
	opacity: .7;
	filter: alpha(opacity=70);
}

javascript:
Code:

function makeVisible(whichNavs)
{
	document.getElementById(whichNavs).style.display="block";
}
function makeInvisible(whichNavs)
{
	document.getElementById(whichNavs).style.display="none";
}

HTML:
Code:

<div id="container">

<div id="fakeImage" onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');"><A HREF="javascript:">expanding link</A></div>

<div onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');" id="test" class="opaque">shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf </div>
</div>

Resolved!

I have been working on this problem for the past week now. When I set the height of #main to 100%, it basicly acts like there is nothing in it and all you see are the leftcontent, centercontent, and rightcontent which stretch to the length of the content they hold. I want to have the tanish area stretch all the way down. Right now I have it set as 700px height but if the data in the other 3 divs stretch further than 700px it goes past it (as you can see in this example: http://panik.owphosting.com/article.php?id=1 , This can only be seen in Firefox). so yea, this is crazy, I am also trying to keep this cross browser compatible. So im keeping firefox in mind. Someone please shed some light on this problem. Thanks for any help at all!

Here is my website:

http://panik.owphosting.com/home.php

And here is my css:

Code:

body {
	margin: 0px;
	color: #000;
	font-size: 8pt;
	font-family: verdana;
	height: 100%;
	width: 100%;
	background: url("images/bg2.jpg");
}
a {
	color: #237CBB;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
}
a:visited {
	color: #237CBB;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
}
a:hover {
	color: #237CBB;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: underline;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {
height:100%;
} 
h1 {
	font-family: verdana;
	color: #000;
	font-weight: bold;
	font-size: 24pt;
}
#header {
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	background: #FBF2D9;
	width: 700px;
	margin: 0;
}
#main {
	position: relative;
	width: 700px;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	height: 700px;
	background: #FBF2D9;
}
#leftcontent {
	position: absolute;
	padding-top: 10px;
	padding-left: 2px;
	padding-right: 2px;
	border-left: 2px solid #000;
	left: -2px;
	background: #FBF2D9;
	width: 150px;
}
#rightcontent {
	position: absolute;
	padding-top: 10px;
	padding-right: 2px;
	padding-left: 2px;
	border-right: 2px solid #000;
	right: -2px;
	background: #FBF2D9;
	width: 150px;
}
#centercontent {
	position: absolute;
	left: 154px;
	padding: 10px;
	background: #FBF2D9;
	width: 375px;
	text-align: left;
}
#moduletop {
	position: relative;
	width: 130px;
	padding: 5px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	border: 1px solid #000;
	background: #26476C;
}
#modulebottom {
	position: relative;
	width: 130px;
	padding: 5px;
	color: #fff;
	text-align: left;
	font-size: 8pt;
	border: 1px solid #000;
	border-top: 0px;
	background: #4184B4;
	background-image: url("images/modulefill.jpg");
	background-position: 0% 100%;
	background-repeat: repeat-x;
	overflow: auto;
}
#modulebottom a {
	color: #fff;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
}
#modulebottom a:visited {
	color: #fff;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
}
#modulebottom a:hover {
	color: #99D8FE;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
}
table#news {
	color: #000;
	font-size: 10pt;
	font-weight: bold;
	width: 375px;
	margin: 0;
	border: 0;
	vertical-align: top; 
}
table#news div.head{
	color: #237CBB;
	font-size: 10pt;
	width: 375px;
	font-weight: bold; 
}
table#news div.date{
	color: #919191;
	font-size: 8pt;
	width: 375px;
	font-weight: 100;
	vertical-align: top; 
}
table#news div.detail{
	color: #000;
	font-size: 8pt;
	width: 375px;
	font-weight: 100;
	vertical-align: top; 
}
table#news div.foot{
	color: #000000;
	font-size: 10pt;
	font-weight: bold;
	margin: 0;
	width: 375px; 
}
shout{
	width: 130px;
	overflow: auto;
}

I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers.

Look at my site: http://www.firstinsurancefunding.net/

It displays differently in EVERY different browser.

WHAT'S THE FIX??

(sorry, I'm frustrated. Could really use some pointers).

Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE?

You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly

Site

Hi, I have a very odd IE6 issue occuring within my site which I hope someone can help me with.

Here is my xhtml
And here is my css

I have commented both the relevant CSS and HTML with "TEXT PROBLEM IN IE" so you can find it quickly.

Please ignore the functionality, this is very much in the development phase. The problem I have is that under the categories listed - in IE there are the letters "c" and "e" which seem to have been duplicated from the last category "executive office". If you select the "ce" in the browser you will see what I mean. This doesn't happen in FireFox etc.

Cheers

Hi,
I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment.
I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home
And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height.
Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me.
Any help would be greatly appreciated.
Thanks,
Steph

Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes?

please click here to read my message.

My code:
Code:

#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}

#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}

Please help me CSS gods. I want pure CSS Menus.

I have tried two independent times to get working menus for a site and every time one of the IE browsers is killing me.

URL Blocked
Works fine on FF and IE6. IE7 users complain.

URL Blocked
Works fine on FF but IE6 has fat border on right and the whole page jumps a pixel when looking at sub menus.

I also can't get it centered or the title evenly spaced on any browser.


At this point, I don't care which I get working. But If I get sample2 working then I can add many more pages.

The CSS is main.css in the respective folders.


Ohh well, the forum won't let me give links to my samples.

Hi -

I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain.

The website works fine in Firefox and Safari, and almost all the pages work fine in IE.

The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari.

It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP.

The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place.

If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code.

It would be greatly appreciated if you could let me know if you would like to help me out.

I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all.

Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member.

Hi Everybody,

I am really struggling here. I came up with a nice layout in photoshop and then marked up the HTML/CSS. Everything looked great until I tested the browser zoom in. On every single browser, the footer background image stops repeating. Here is a screenshot:




You can clearly see that the footer just stop repeating. Please look at the css and the html format. I am developing this layout on my PC so I can only attach the code... I can't provide a link to the server.

Thanks in advance and here's the CSS:
Code:

* {
	margin: 0;
	padding: 0;
}
html, body {
	font-family: Helvetica, sans-serif;
	background: url(../images/body_bg_2.png) repeat-x top #ffffff;
    margin: 0;
    font-size: 100%;
    height: 100%;
}
img {
    border: none;
}
p {
	font-size: 1em;
	line-height: 1.2em;
	margin-bottom: 0.8em;
}
a {
    color: #540000;
    text-decoration: none;
}
a:hover, a:active { 
    text-decoration: underline;
}
h1 {
    font-size: 1.7em;
    letter-spacing: 1px;
    margin-bottom: 0.8em;
}
h2 { 
    font-size: 1.3em;
    letter-spacing: 1px;
    margin-bottom: 0.8em;
}
h3 {
	font-size: 1.2em;
	font-style: italic;
	letter-spacing: 2px;
	color: #5e0d04;
	margin-bottom: 0.8em;
}
.clear { 
    clear: both;
}
div#wrapper {
    width:100%;
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
}
div#header {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
div#header a {
    color: #95ba48;
}
div#logo {
    height: 110px;
    width: 295px;
    float: left;
}
div#header_right {
    float: right;
    width: 295px;
    padding-top: 50px;
    text-align: right;
    font-size: 1em;
    color: #95ba48;
}
#header_right p.header_rss {
    margin-left: 35px;
    margin-top: 17px;
    float:left;
}
#header_right #header_rss {
    margin-top: -13px;
}
div#navigation_wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
div#navigation {
    float: left;
    width: 700px;
    margin-top: -17px;
}
div#search {
    float: right;
    width: 260px;
    text-align: right;
    margin-top: -5px;
}
input[type=submit] {
    border: none;
    padding: 3px;
    text-decoration: none;
    font-size: 1.2em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #4A4A4A;
    color: #ffffff;
    -moz-box-shadow:  0 1px 0 white;
    -webkit-box-shadow:  0 1px 0 white;
}
#searchform #search {
    border: 1px solid #999;
    background-color: #c3e570;
    padding: 3px 2px 2px 0;
    height: 23px;
    width: 215px;
    line-height: 1;
    font-size: 1.1em;
    letter-spacing: .1em;
    vertical-align: top;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow:  0 1px 0 white;
    -webkit-box-shadow:  0 1px 0 white;
}
input[type=submit]:hover
{
  background: black;
  cursor: pointer;
}
ul#nav {
    width:100%;
    list-style: none;
    margin: 0px 0 0 0px;
    background: url(../images/nav_bg.png) repeat-x top;
}
ul#nav li {
    display: block;
    float: left;
    margin-top: 15px;
}
ul#nav li a {
    text-decoration: none;
    font-size: 1.3em;
    font-family: Helvetica, sans-serif;/*, Verdana, Geneva, Helvetica, sans-serif;*/
	color: #4a4a4a;/*#9f9f9f;*/
	border-right: 1px solid #ccc;
    padding: 7px 15px 7px 15px;
}
ul#nav li a:hover {
	color: #95ba48;
    border-bottom: 3px solid #95ba48;
}
#index li.index a {
	color: #95ba48;
    border-bottom: 3px solid #95ba48;
}
#network_sites li.network_sites a {
	color: #95ba48;
    border-bottom: 3px solid #95ba48;
}
#recent_tutorials li.recent_tutorials a {
	color: #95ba48;
    border-bottom: 3px solid #95ba48;
}
#about_us li.about_us a {
	color: #95ba48;
    border-bottom: 3px solid #95ba48;
}
#contact_us li.contact_us a {
	color: #95ba48;
    border-bottom: 3px solid #95ba48;
}
div#content {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    padding-bottom: 100px;
    overflow:auto;
}
div#left_column {
    float: left;
    width: 600px;
}
div#right_column {
    float: right;
    width: 330px;
    margin-left: 30px;
    text-align: right;
}
div#footer_wrapper {
    background: url(../images/footer_bg.png) repeat-x #dcdcdc;
    width: 100%;
    position: absolute;
	margin-top: -100px; /* negative value of footer height */
	height: 100px;  /*still needs to be changed as things are added on to the footer*/
	clear:both;
}
div#footer {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 35px;

}
div#footer_left {
    float:left;
    text-align: left;
    font-size: 0.9em;
}
div#footer_left p.copyright {
    margin-top: 10px;
}
#footer_right p.footer_rss {
    margin-top: 20px;
    padding-right: 55px;
}
div#footer_right #footer_rss {
    margin-top: -50px;
}
div#footer_right {
    float:right;
    text-align: right;
    font-size: 0.9em;
}
div#footer a {
    color: #272727;
}

Here's the HTML:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>PSD_Slice</title>
        <link rel=StyleSheet href="style/style.css" type="text/css" media="screen, print" charset = "utf-8" />
        <link rel=StyleSheet href="style/search.css" type="text/css" media="screen, print" charset = "utf-8" />
    </head>
    <body  id="<?php echo $view; ?>">
        <div id="wrapper">

            <div id="header">

                <div id="logo">
                    <span><a href="/" title="Go to homepage"><img src="images/logo_test.png" alt="Wishlistr" /></a></span>
                </div>
                <div id="header_right">
                        <p class="header_rss">
                            <a href = "http://www.tuts4.me/feed" title = "Subscribe to Tuts4.me Feed" target = "_new">
                                RSS Feed By Feed burner
                            </a>
                        </p>
                        <div id="header_rss">
                            <a href = "http://www.tuts4.me/feed" title = "Subscribe to Tuts4.me Feed" target = "_new">
                                <img src="images/rss_green.png" alt="Subscribe to Tuts4.me Feed" />
                            </a>
                        </div>
                </div>
                <div class="clear"></div>
            </div>

            <div id="navigation_wrapper">
                <div id="navigation">
                    <ul id="nav">
                        <li class="index"><a href="index.php" title="Return home" target="_top">Home</a></li>
                        <li class="network_sites"><a href="network_sites.php" title="Network Sites" target="_top">Network Sites</a></li>
                        </ul>
                </div><!--#navigation-->

                <div id="search">
                    <form action="page.html" method="post" name="search" id="searchform">
                        <div>
                              <input type="text" name="search" id="search" value ="Search..." onfocus="if(this.value=='Search...'){this.value=''};" onblur="if(this.value==''){this.value='Search...'};" />
                              <input type="submit" value="Go" alt="Search all tutorials" />
                        </div>
                    </form>
                </div><!--#navigation-->

                <div class="clear"></div>

            </div><!--#navigation_wrapper-->

            <div id="content">

                <div id="left_column">
                    <h1>Title of documents</h1>
                </div><!--left_column-->

                <div id="right_column">
                    <h2>Right Column</h2>
                    <br />
                    <h3>More Right Column</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisl lacus, iaculis id dignissim quis, dapibus eu lacus. Nam nec nunc at diam lobortis bibendum eget nec nibh. Duis accumsan sapien nec felis convallis sit amet pharetra urna sodales. Nam nec arcu nibh. Praesent id semper nisl. Integer luctus venenatis tempus. Morbi consequat, massa a egestas tempor, urna tortor gravida lectus, ac interdum diam nunc nec diam. Duis suscipit pulvinar ipsum ut iaculis. Nullam dapibus egestas leo a sodales. Sed metus metus, luctus consectetur sagittis sit amet, laoreet et purus. Praesent lacinia dapibus ligula, et condimentum nibh facilisis vel. Duis condimentum imperdiet elit, vel interdum ipsum tristique quis. Sed sit amet lorem scelerisque nunc ultricies scelerisque nec rutrum lectus. Morbi erat risus, rutrum eu semper ut, pretium a tellus. Phasellus ultricies facilisis mi a euismod. Maecenas dapibus ante non sapien aliquam pellentesque ornare turpis vulputate. Nullam sit amet condimentum odio. Cras ut tempor est.</p>
                </div><!--right_column-->

                <div class="clear"></div>

            </div><!--content-->
</div><!--#wrapper-->
            <div id="footer_wrapper">
                <div id="footer">
                    <div id="footer_left">

                    </div>
                    <div id="footer_right">
                        <p class="footer_rss">

                        </p>
                        <div id="footer_rss">

                        </div>
                    </div>

                </div><!--#footer-->
            </div><!--#footer_wrapper-->



    </body>
</html>