CSS - Cant Hide Overflowing Div

Hey it's a Friday night and I'm having the worst problems with IE. My page looks ok in FF and Safari but in IE the body is overflowing by like 350px or so. I don't know why it's doing this. I've used my Firebug but it doesn't really style that overflow section. It's like a ghost section.

Doc type is XHTML strict, here's the pertinent CSS. Thanks for any help you can offer. This is kind of ruining my friday night.

Code:

html {
	height: 100%;
	}

body {
	font-family:  Arial, Helvetica, Sans-Serif;
	background: #000 url('img/mainbg.jpg') top left repeat-x;
	text-align: center;
        width: 100%;
        padding: 0;
        margin:0;
	height: 1200px;
	}

#icontainer {
	background-image: url('img/containerbg.jpg');
	margin-right: auto;
	margin-left: auto;
	width: 974px;
	height: 1200px;
	}


#plain {
	background-image: url('img/plainback.jpg');
	background-repeat: no-repeat;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	margin-top: 0;
	width: 974px;
	height: 1200px;
	overflow-y: hidden;
	}

I am constructing a new website and need help preventing the header text from overflowing. I have tried combinations of overflow:hidden; but does not seem to work.

The site is here.

Advice on how I can prevent overflow for FFox, IE6/7 appreciated.

On the this page you will notice the ASDF overflowing into the footer if you resize the page to 1024x768 size.

I'm trying to keep the footer on the bottom but the content still seems to creep into the footer?

Any ideas?

This only happens in IE 6 and 7, FF seems to handle it just fine.

I w3c checked everything, html is good to go, css has some warnings but nothing that I seem to have to worry about.

Any help is greatly appreciated.

Hi,

I am really stuck and need some help.
I have created an alphabet of links across the top of a page. The mark up is like this;
<div id="alphabet">
<a href="#">a</a>
<a href="#">b</a>
...
</div>

Along with an Eric Meyer reset.css stylesheet it has the following CSS applied;
#alphabet{ width: 940px; margin: 0 auto;}
#alphabet a { text-decoration: none; color: #757575; font-size: 20px; margin: 5px 5px; padding: 5px 5px; border: 1px dashed #757575;}

#alphabet a:hover { color: #333; border: 1px solid #333; }

#alphabet a.current-letter{ background: #545353; color: #ffe224; font-weight:600;}

The problem I have is that the #alphabet container only has the height of links' text. It does not included the padding, margin or border. Therefore if I apply a background to #alphabet the links' top and bottom borders appear outside of the div.

I have tried adding overflow: hidden/auto but that only resulted in making the bit outside the div disappear.

Anyone got any ideas???

Thanks in advance

I'm having a problems with a form overflowing it's containing div

Link removed

The html:
Code:

            <div id="mainbody">
                <h2>Manage Double rooms by day</h2>   
                <br/>
                <form name="list" id = "calendarmonth" action="" method="post">
                    ....      
                 </form>
                 <form name="list" id="#updatedays" action="updatewebroomdays.php" method="post">
                 ...
                 </form>
          </div>

Code:

#mainbody {
    padding:0;
    margin: 4em;
    position:relative;
}

#content {
     position:relative; 
     background-color:#ffffff; 
     margin-top: -1em;
}
    

I can fix it buy adding another div around the containting div, like this
Code:

<div id="content">
            <div id="mainbody">
                <h2>Manage Double rooms by day</h2>   
                <br/>
                <form name="list" id = "calendarmonth" action="" method="post">
                    ....      
                 </form>
                 <form name="list" id="#updatedays" action="updatewebroomdays.php" method="post">
                 ...
                 </form>
          </div>
</div>

.... but I don't know why this fixes it and what I'm doing wrong...

Thanks
James

Hi,

I'm new to CSS and haven't been able to get this working. I have two layers, one for an image, and another for text that goes on top. The text is supposed to be centered and the image should be centered wrt the text.

The problem is that sometimes a word in the text will be too long and there's overflow. When this happens, the image stays on the left and the text box gets larger. This way the image isn't right behind the center of the text.

I tried using overflow: visible but this didn't change anything.

Thanks for any help.

Damnit. Differing browser box models piss me off. I guess thats what you get for being a web developer, where someone can use 6+ different programs to run your code.

I just started doing design with divs instead of tables and man what a PITA. I really like the idea of "building blocks" tho (and I really hate the inflexibility of tables), so I'm trying to grind through it. Its a small project, however, so I havent really been able to test cross-browser compatibility too much.

I'm running into a strange error in IE (sidenote: the page does seem to be handled correctly in Opera (though Firefox jacks the page up totally)). Anyways, I have a series of nested divs (to emulate the structure of a table). Everything looks fine until I start messing around with divs with a display of 'none'.

When I insert a div (or set a current div's) with display = 'none', part of the form input text will "flow over" outside of the div. In the pictured example, "Zachary Wedgeworth" is the last entry in the selectbox. There is no code / html after that selectbox, but as you can see, "Wedgeworth" appears after it! It isnt even able to be highlighted! The second line of the form contains a div with style='display:none'. If there's no div containing anything to do with display, this "overflow" error doesnt occur. There should be no difference in inserting a non-displayed div vs. never putting the div in the code at all, but (in IE at least), there is. stupid & frustrating.

Has anyone run into this problem or have any idea why this might be occuring? Its already stumped a couple fellow programmers.

Greetings, I have a 3 column layout with a header, nav bar, content space and footer on the center column, making the center column have 4 rows. The content div's height is set to auto and it's overflow to auto so that when the browser is maximized on higher resolutions it will expand and contain the text without a scrollbar. alternatively it will give a scroll bar if the content div is shrunk below 300px. however the auto height on the content div is causing it to take up more room than necessary. if the window is shrunken down, the content text will leak out over the footer bar and beyond. Before i post code does anyone have any suggestions on what i should be looking for? If code is wanted lemme know.

Hi,

I am having a strange issue with my new site code . I am experimenting with a new look and decided to go with all css, no tables look.

I have a div where the enteries go. I entered some random text to see how it looks. To my surprise in Mozilla 1.7.10 the text overflows from the entry div into the other one while it works fine in Internet Explorer ( the post box expands automatically to fit all the text).

Second the in the commentsarea div, why is the "comments(1) floating in the middle of the entry box instead of the bottm right ?

here is the code in question
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="author" content="Kashif Khan" />
		
		<style type = "text/css" media="screen">
		body
		{
			background-color:#A2C257;
			color: #333;
			padding:0;
			margin:0;
			font: 90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		}
		
		#page
		{
			text-align: left;
			margin: 20px auto;
			padding: 0px;
			width: 800px;
			background-color:#A2C257;
			
		}
		
		
		#header
		{
			height:105px;
			margin-bottom: -1px;
			background: url("url13.jpg") no-repeat top center;
			
		}
		
		.entry
		{
			border: 1px solid #FF4500;
			background-color:white;
			height:200px;
			margin:15px 0px;
			padding: 15px 20px 20px 20px;
		}
		
		
		#menuarea
		{
			padding:0px;
			margin:0px;
			font:90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
			text-align:center;
		}
		
		#menuarea #navbar
		{
			text-align:center;
			padding-bottom:5px;
			padding-top:5px;
			padding-left:0px;
			margin-top:0px;
			margin-left:0px;
			background-color:#white;
			color:white;
			line-height: 18px;
			margin: auto;
			width:100%;
		}
		
		#navbar
		{
			font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
			text-align:right;
			margin: 0px 0px;
		}
		#navbar a
		{
			color:white;
		}
		
		#navbar li
		{
			display:inline;
			padding: 5px 0px 5px 0px;
		}
		
		#navbar li a
		{
			padding: 5px 10px 5px 10px;
			color: white;
			text-decoration:none;
			border-right: 1px solid #fff;
		}
		.center
		{
			text-align:center;
		}
		
		p img
		{
			padding: 0;
			max-width: 100%;
		}
		
		a
		{
			text-decoration:none;
		}
		
		a:hover
		{
			text-decoration:underline;
		}
		
		a img
		{
			border:none;
		}
		.commentsarea
		{
			font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
			text-align:right;
			margin:0px 0px ;
		}
		
		</style>
	</head>
	
	<body>
		
		<div id = "page">
		
			<div id = "header">
			</div>
			
			<div id="menuarea">
					<ul id="navbar">
						<li><a href="">Root</a></li>
						<li><a href="archive.php">Archive</a></li>
						<li><a href="search.php">Search</a></li>
						<li><a href="mailme.php">Email Me</a></li>
						<li><a href="http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://kashif.f2o.org/xml.gif" align="middle" border="0"/></a></li>
						
						<li><a href="http://my.msn.com/addtomymsn.armx?id=rss&ut=http://feeds.feedburner.com/kashiflocalhost/root&tt=CENTRALDIRECTORY&ru=http://rss.msn.com'"><img src="http://sc.msn.com/c/rss/rss_mymsn.gif" alt="" style="border:0"/></a></li>
						<li><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://www.bloglines.com/images/sub_modern6.gif" border="0" alt="Subscribe with Bloglines" /></a></li>
						<li ><a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" width="91" height="17" border="0" align="middle" alt="Add to My Yahoo!"></a></li>
					</ul>
			</div>
		
			<div class = "entry">
				Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
				Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
				Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
				Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
				Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
				Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
				Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
				Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
				Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
				Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.
				<p class = "commentsarea">
					<a href = "comment.php">Comments (1)</a>
				</p>
			</div>
			<div class = "entry">
				This where the enteries will go. 2
				<p class = "commentsarea">
					<a href = "comment.php">Comments (1)</a>
				</p>
			</div>
			<div class = "entry">
				This where the enteries will go.3
				<p class = "commentsarea">
					<a href = "comment.php">Comments (1)</a>
				</p>
			</div>
			<div class = "entry">
				This where the enteries will go.4
				<p class = "commentsarea">
					<a href = "comment.php">Comments (1)</a>
				</p>
			</div>
			<div class = "entry">
				This where the enteries will go.5
				<p class = "commentsarea">
					<a href = "comment.php">Comments (1)</a>
				</p>
			</div>
			<div class = "entry">
				This where the enteries will go.6
				<p class = "commentsarea">
					<a href = "comment.php">Comments (1)</a>
				</p>
			</div>
			<div class = "entry">
				This where the enteries will go.7
				<p class = "commentsarea">
					<a href = "comment.php">Comments (1)</a>
				</p>
			</div>
			
			
			
		</div>
		
	</body>
</html>

Thanks

If you are getting results as in the above image, simply add "clear:both;" to the container (blue) div which you do not want affected and it will flatten its ceiling and stop any float's escaping.

-Luke

Hi there,

Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css.

My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript.


<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/libs/modernizr-1.7.min.js"></script>

<style>

div.items ul:not(:target) {display:none;}
div.items ul:target {display:block;}

.tabs {
float:left;
clear:none;
width:200px;
height:30px;
border:solid 1px #cccccc;
padding:10px;
background:#000000;
}
a {
text-decoration:none;
}
.tabs a {
float:left;
margin:8px 5px 5px 5px;
color:#ffffff;
}
ul {
width:222px;
float:left;
clear:both;
padding:10px 0px 10px 0px;
margin:-8px 0px 0px 222px;
line-height:35px;
list-style:none;
}
li {
border-left:#cccccc solid 1px;
border-right:#cccccc solid 1px;
border-bottom:#cccccc solid 1px;
}
ul li a {
margin-left:15px;
}

</style>

</head>
<body>
<!-- Start Tabs -->
<div class="tabs">
<a href="#">Dashboard</a>
</div>
<div class="tabs">
<a href="#item2">Data & Reports</a>
</div>
<div class="tabs">
<a href="#">Data Archives</a>
</div>

<!-- End Tabs -->

<!-- Start 2nd Tabs Content -->
<div class="items">
<ul id="item2">
<li>
<a href="#">Sales By Device</a>
</li>
<li>
<a href="#">Delivery</a>
</li>
<li>
<a href="#">Revenue</a>
</li>
<li>
<a href="#">Sales By Purchase Type</a>
</li>
<li>
<a href="#">Data Archives</a>
</li>
</ul>
</div>
<!-- End 2nd Tabs Content -->
</body>

</html>

Hello,

Can search engine see a hide H1 tag?

Quote:
h1 {display:none;}

I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV.

I found this script:

http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

But it seems like a lot of JS overhead. Is there a simpler way?

For some reason i am adding

css Code:
Original - css Code /* Hide this from IE-Mac \*/ div.spacer { height: 5px; } /* End the hiding */

  

 /* Hide this from IE-Mac \*/


 div.spacer {


   height:  5px;


 }


 /* End the hiding */ 

But IE keeps seeing this, does anyone knows why?

hey
on my site at http://www.tequme.com theres a little copyright footer at the bottom and it looks good in 1280 but in 1024 it gets tucked away under the main site. its all divs and css and i kinda get whats going wrong but any suggestions/solutions on resolving it would be appreciated. i use one table to centrally align the main div.

Regards
Russell