CSS - Stop Header Overflowing

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

Hello everyone,

I am pretty new to css but have code from various css sites that have used to get the layout i wanted. I am having an issue with IE7.

In IE8 and Chrome everything is working like intended. The link to the page in question is philadler.com/dance09.html

I have validated the CSS and xhmtl and the page passed both.

Can anyone tell my why in IE7 the content is overflowing into the right column, but in the other 2 browsers i have tested it works fine.


Also, does anyone know of a good photo gallery. Some of the events i will be putting have hundreds of pictures is there an auto formating or auto coding gallery that will look at the folder of the pictures and at it to the gallery?

Thanks for any help

Phil

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

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

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

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.

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.

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 all,

I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's.

Hi there,

I really want to not use tables as I want to embrace CSS. Though this problem is killing me as everything looks fine in IE but not in FF, which is never the case so need help.

I require a title (two sentences overlapping each other) to be aligned side by side with a image.

Basically i've got one image and two paragraphs in a container div, the paragraphs are positioned absolute but in FF the look as though they are being place relative ie bottom right of image?

My html file looks like:

<body>
<div id="MainContainer">
<div id="HeaderContainer">
<img src="images/logo.gif" alt="Opix UK" name="Logo"/>
<p id="Title1">Photo products for the contemporary home..</p>
<p id="Title2">or business!</p>
</div>
</div>
</body>

My CSS looks like:

body{
padding:0;
margin:0;
margin-top: 5px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
}
div#MainContainer{
width: 960px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
div#HeaderContainer{
border: 1px solid Blue;
font-size: 19px;
font-style: italic;
font-weight: bold;
}
p#Title1{
border: 1px solid Red;
color: #333333;
position: absolute;
left: 100px;
top: 5px;
z-index: 1;
}
p#Title2{
border:1px solid Red;
color: #0066CC;
position: absolute;
left: 450px;
top: 17px;
z-index: 2;
}

Any help much appreciated?

Hey guys,

So i'm working on the site www. paulfenton .tk.

My problem occurs when you click on one of the categories in the sidebar or go to an individual post by clicking on the title... a horizontal scrollbar seems to come up. when it shouldnt.

if you use the mouse wheel inside the content region, you can see that the content is scrolling a little bit horizontally. I woudld like to stop this or fix the cause but I cant figure out how...

Also, if you click and drag downwards as if you were trying to select everything on the page, the page scrolls below the bottom border.. it is not supposed to do this since I turned off overflow.

Any help or ideas would be great, let me know if you have any questions.

-Paul

Sup all. Im trying to make a website but it keeps resizing when I expand and retract me webbrowser. So Far this is my code


PHP 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=utf-8" />
<title>Free UFC PPV</title>
    <style type="text/css">
        body
        {
            background-color: #CCC;
            font-family: Tahoma;
        }
        #holder
        {
            width: 75%;
            padding: 10px;
            border: 1px solid;
            text-align: left;
        }
        #img{
            background-image:url(images/header.png);
        }
        #login
        {
            width: 100%;
            font-family: Tahoma;
            font-size:15px;
            text-align: right;
            color: Black;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <center>
        <div id="holder" style="width:75%">
            <a href="index.php">
            <img src="images/header.png" alt="Header Image" width="1024" height="150" /></a>
            <div id="login" style="100%" >
                <form action="">
                    Login:<input name="userlog" type="text" />
                    Password:<input name="passlog" type="text" />
                    <input name="btn_sub" type="button" value="Login" />
                </form>
          </div>
        </div>
    </center>
</body>
</html> 





What can I do to stop resizing?

I have the code below that basically builds a css based horizontal menu; menu items are floated into the menu bar, then in the same menuvbar, a small search box follows (floated).
At this point I'd like to stop elements being floated, but IE7 has some troubles because it keeps floating the next element, regardless the clear:both or float:none issued.
No problem in FF 3.5 and Opera 9.64

Can someone help?

Just cut the following code and save in a document.htm and test with your favorit browser and IE7.

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>
<title>mytitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
@charset "utf-8";
/* static START */
body {
background:white;
color:#555;
font-family:Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:12px;
}

h1, h2, h3, h4, h5, h6 {
font-weight:bolder;
letter-spacing:-0.05em;
font-family:Arial;
}

h1 {font-size:170%;}
h2 {font-size:160%;}
h3 {font-size:150%;}
h4 {font-size:130%;}
h5 {font-size:110%;}
h6 {font-size:100%;}

a:hover img.sided {
border-color:#A6A6A6;
}

a {
color:#2970A6;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.fixed{
clear:both;
}

/* static END */

/* layout START */
#idwrapper {
padding:0px;
width:1200px;
}

#header {
width:100%;
margin-top:20px;
height:300px;
}

#content{
width:1020px;
}

#footer{
}

#bitmaplogo{
margin-left:20px;
background:url("http://farm1.static.flickr.com/37/112944254_3f5212215a.jpg") no-repeat left bottom;
height:100%;

}

#menu {
display:block;
font-family:Arial Black, Arial Black, Gadget, sans-serif;
font-weight:bold;
background-color: Khaki;
width: 1000px;
height: 33px;
text-align: left;
}

#menu a{
display: block;
text-decoration: none;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:15px;
font-weight:bold;
color:black;
width:auto;
height: auto;
float: left;
display: inline;
margin-right: 1px;
background-color: Khaki;
padding: 5px 2% 8px 2%;
text-align:center;}

#menu a:hover {
color: white;
background-color: DarkKhaki;
background-repeat:no-repeat;
text-decoration:none;
}

#searchbox {
background-color: Khaki;
position:relative;
float:left;
clear:right;
height:33px;
width:350px;
}

#cse-search-box{
float:left;
padding:3px 10px;
}

#search-box-text{
float:left;
padding-left:8px;
/*padding-top: 5px ;*/
line-height:32px;
letter-spacing:-0.05em;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:16px;
font-weight:bold;
color: DarkGray;
}

.cse-box-style{
height: 20px;
width: 250px;
}

/* header END */

.tgrow{
margin-top:5px;
width:100%;
}
.adboxyellow {
background:Khaki;
font-size:100%;
color:black;
font-weight:bold;
border:4px solid DarkKhaki;
text-align:center;
}
.adboxblu {
background:#8DC3E9;
font-size:100%;
color:white;
font-weight:bold;
border:4px solid #4C88BE;
text-align:center;
}

.spacer{
background:url(img/spacer.gif);
}

.box_left_padded{
width:300px;
height:252px;
float:left;
margin-right:5px;
padding: 5px 5px 5px 5px;
}

.box_left_unpadded{
width:300px;
height:252px;
float:left;
margin-right:5px;
}

.box_mid_big_unpadded{
width:500px;
height:252px;
float:left;
margin-right:5px;
}

.box_right_unpadded{
width:210px;
height:252px;
float:left;
}
</style>
</head>
<body>
<div id="idwrapper">
<div id="header">
<div id="bitmaplogo"></div>

<div id="menu">
<a href="/articles">Articles</a> <a href="/guides">Guides</a> <a href=
"/news">News</a> <a href="/join">JOIN!</a> <a href="/disclaimer">Disclaimer</a>
<a href="/sitemap">Sitemap</a>

<div id="searchbox">
<div id="search-box-text">
Search
</div>

<form id="cse-search-box" action="http://mydot.com/search-results/"
name="cse-search-box">
<input type="hidden" value="p" name="cx" />
<input type="hidden" value="FORID:9" name="cof" />
<input type="hidden" value="UTF-8" name="ie" />
<input class="cse-box-style" type="text" size="20" name="q" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://www.google.com/coop/intl/en/images/google_custom_search_watermark.gif) no-repeat scroll left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" />
</form>
<script src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" type="text/javascript">
</script>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
<div id="content">
<div class="adboxblu" style="width: 1033px; height: 20px; line-height: 20px; margin-top: 7px;">
your text Here! test
</div>
<div class="row">
<div class="spacer" style="height: 7px;"></div>
<div class="box_left_unpadded">
<div class="adboxblu" style="width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="fixed"></div>

<div class="row">
<div class="spacer" style="height: 7px;"></div>

<div class="box_left_unpadded">
<div class="adboxblu" style=
"width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="fixed"></div>
</div>

<div id="footer"></div>
</div>
</div>
</div>
</body>
</html>