CSS - Crazy Space Whenuse Clear:both

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;
}

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

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.

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;
}

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

After doing some small changes to the design I checked it in IE6 and its not slightly out of place but very messed up.

The site is http://www.orchard-homes.co.uk/, has anyone got any ideas?

It seems like its been stretched vertically...

Thanks!

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

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.

Our pages all validate and work fine in all browsers (opera, firefox, mozilla, ie6, 5.5, nn >= 4.8) but in ie 5.01 the page content is far too long...a badly drawn ascii example:

normal view:

nav | content
nav | content
nav | content
footer--------

problem in ie 5.01

Code:

      | content
      | content
      | blank
      | blank
nav | blank
nav | blank
nav | blank
      | blank
      | blank
      | blank
      | blank
footer--------

Hope that makes some kind of sense. Basically IE is pushing the nav down, but it also seems to be adding the contents height below the nav as well

Hi guys

Can anyone see why the following has a space under the nav in IE but not in Opera or FF?

http://www.mitya.co.uk/cssproblem

(CSS: http://www.mitya.co.uk/cssproblem/css/main.css )

I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc.

I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK.

Thanks in advance

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>

Hey, so I am a beginner in css and I can't seem to figure out this problem. I am trying to get a td to float: left, and it works just fine on firefox, but IE7 is not showing the float. Here is the code I have for it

/* Style for Entries in Category View (Cards View) */
/* -------------------------------------------------------- */
table.sobi2Listing {
}
table.sobi2Listing td {
vertical-align: top;
float: left;
height: 1%;
width: 97%;
}

/* new */
div.vcard_item {
margin: 1px 0px 2px 0;
padding: 6px;
width: 97%;
border:1px solid #dddddd;
background-color:#fbfaf2;
-moz-border-radius: 5px;

The actual page is findawebsitedesigner.info/directory-2.html
If you look at the entries, they are all floated perfectly in firefox, but not in IE7. If anybody has the fix to this I would love your help.

How is it that safari is toooooo stupid to recognize the fact that I've specified background images... it also doesn't recognize the display:inline attribute. Are these just things that are unsupported in safari? I can't for the life of me figure out why it's doing this.

Code:

#tabs ul {
	padding-left: 0;
	margin:0px;
	display: inline;.
	} 
#tabs ul li{
  	width:170px;
  	height:25px;
	list-style: none;
	display: inline;
  	text-decoration:none;
  	z-index:1;
	} 	
#tabs ul li a{
  	height:25px;
	background-image: url("../images/mainTab.jpg");
  	background-repeat: repeat-x;
  	display: inline;
  	font-size: 10pt;
	color:#fff;
  	text-decoration:none;
	}
#tabs ul li a.selected{
	background-image: url("../images/mainTabSelected.jpg");
  	background-repeat: repeat-x;
  	color:#000;
	}

Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page:

Code:

<body>
	<div id="issingle">
	<div id="container">
		<div id="sitename">
			<a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a>
		</div>
	<div id="mainmenu">
		<ul>
			<!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>-->

			<li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li>
			<li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li>

			<li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li>
		</ul>
	</div>

And here is the css pertaining to that code:
Code:

body {
	background:#fff;
	color:#303030;
	font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
	margin:0 auto;
	padding:0;
	text-align:center;
	width:850px;
}
#container {
	position: relative;
	background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
	color:#303030;
	border:1px solid #C8C8C8;
	margin:10px;
/*	padding:10px;*/
	text-align:left;
	height:598px;

}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
	position: absolute;
	right: 10px;
	top: 27px;
	margin-right: 5px;
}

#mainmenu li.page_item {
	float:left;
/*	height:35px;*/
	list-style:none;
	margin:0;
	padding:0;
}

#mainmenu a {
	border-right:1px solid #b0b0b0;
	color:#808080;
	display:block;
	margin: 0;
	padding: 1px 8px;
	text-transform:lowercase;
}

Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all.

Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info.

Thank you!!
J