|
CSS - Problem With Auto
Hi i am created a div container for my content and i want it so that it goes as big as whatever content i have but it doesnt seem to work as in ie the text goes to the bottom but doesnt display the end of my box and in firefox it only goes to a certain point which is my advert container then goes under it and carries on down the page so is there anyway i can get this property to work properly
any help would be much appriciated as i say i have already tried height:auto; but no luck Similar TutorialsI am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear. 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" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
function initPage()
{
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
}
input {
width: 200px;
background: #f4f4f4;
border: 1px solid #999;
font-size: .9em;
/*
*/
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cAutoCompleteCtl {
position: relative;
/*
border: 3px solid red;
*/
}
.cAutoCompleteCtl input {
margin: 0 5px 0 0;
display: block;
float: left;
}
.cAutoCompleteCtl a.dwnarrow {
width: 15px;
height: 15px;
border: 1px solid #999;
background: url(images/downarrow.gif)
no-repeat;
background-position: center center;
background-color: #efefef;
float: left;
display: block;
font-size: 1px;
text-decoration: none;
}
.cAutoCompleteCtl .acCtlDropdwn {
position: absolute;
top: 20px;
left: 0px;
z-index: 100;
visibility: visible;
min-width: 300px;
max-width: 600px;
height: auto;
max-height: 200px;
background: #fff;
padding: 5px;
border: 1px solid #999;
overflow: auto;
/*
width: 400px;
*/
}
* html .cAutoCompleteCtl .acCtlDropdwn {
width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}
.cAutoCompleteCtl .acCtlDropdwn a {
white-space: nowrap;
display: block;
text-decoration: none;
padding: 2px 5px;
color: #000;
border: 1px solid #fff;
}
.cAutoCompleteCtl .acCtlDropdwn a.lastOption {
}
.cAutoCompleteCtl .acCtlDropdwn a:hover {
background: #f5f5f5;
border: 1px solid #b3b3b3;
}
-->
</style>
</head>
<body onload="initPage();">
<div class="cAutoCompleteCtl clearfix">
<input type="text" /><a href="" class="dwnarrow"> </a>
<div class="acCtlDropdwn">
<!--<a href="#">options here options here options here options here options here options here options here options here options here options here options here</a>-->
<a href="#">options here</a>
<a href="">Boulder Logic</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
</div>
</div>
</body>
</html>
I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected. The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour. Can anyone see where I'm going wrong? Hi All, I have CSS-sheet= .thumbs { border: 2px solid #524b2f; position: static; height: 80px; width: auto; } body { background-color: #f5f0ec; font-family: Verdana, Arial, Helvetica, sans-serif; scrollbar-face-color : #f5f0ec; scrollbar-highlight-color : #aca899; scrollbar-3dlight-color : #f5f0ec; scrollbar-shadow-color : #aca899; scrollbar-darkshadow-color :#f5f0ec; scrollbar-track-color : #f5f0ec; scrollbar-arrow-color : #524b2f; } The thumbs part resizes some pictures to a fixed height of =80px and calculates the width so everyting is resized correctly. But IE6 gives problems with the width=auto , some times it's sets the widt correctly other times it doesn't. In other brouwsers its fine. Any suggestions on fixing this in IE6? here's the page link : http://www.sleuyter.be/04/lay04-1.htm thx, ROY I wish to set a container to have auto height... meaning the height of the container is defined by it's contents. I have had this working in many other designs... but this one baffles me. (Problem is only in good browsers mozila/firebird) Here it is with the height of #main @ auto (attached) Here it is with the height of #main @ 600px (attached) Here is the HTML code: Code: <!-- Code --> <!-- Document --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ben Gunn</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div id="main"> <img src="images/default_header.gif" id="header" height="120" width="749"/> <div id="content"> <div class="left"> <ul id="nav"> <li><a href="#">News</a></li> <li><a href="#">Music</a></li> <li><a href="#">Media</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="right"> </div> </div> </div> <br /><br /> </body> </html> And here is the code for the CSS: Code:
body {
margin: 0;
padding: 0;
background-color: #666666;
}
#header{
margin-left: 2px;
}
#main {
position: relative;
width: 756px;
height: 600px;
left: 50%;
margin-left: -355px;
margin-top: 20px;
background-image:url("images/background-bezel.gif");
background-repeat: repeat-y;
padding: 0px;
padding-bottom: 20px;
/*border: black 1px solid;*/
}
#content{
padding: 10px;
}
.left{
float: left;
width: 30%;
}
.right{
float: right;
width: 60%;
}
#nav{
list-style: none;
margin: 0;
padding: 0;
border: none;
padding-left: 10px;
font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: white;
font-weight: lighter;
}
#nav li {
background-color: #8B0000;
border-bottom: 1px solid #CCCCCC;
margin: 0;
padding: 1px 0 2px 0;
}
#nav li a {
display: block;
text-decoration: none;
width: 100%;
color: white;
padding-left: 5px;
}
html>body #nav li a {
width: auto;
}
#nav li a:hover {
background-color: #191970;
color: #fff;
}
Please notify me of the moronic mistakes I am making... thanks. Hey All, I'm currently testing out an idea for using Facebook Comments within a clients site. The space given to input the is very limited so I have implemented an auto scroll using Mootools. Everything seems OK but when you go to the page the scroll bar is not present, so you are unable to scroll down to see the comments towards the bottom and click the page numbers. The only way in which I can make the scroll bar show is if I right click and click Inspect Element both on Firefox and Chrome (it works perfectly!!!). I would appreciate it greatly if someone could have a look and let me know what I am missing and where I have gone wrong. The link to the page is http://www.theblitzparty.com/communityspirit/comments Thanks What are all of the properties does ie not support the auto value for? I know width and height are a couple, anymore? Hi Friends, I have a problem with image auto fit. My problem is i have to set logos of different companies, one company logo may be small resolution and other may be higher. In my code i have given like this [code] "<td valign="top"><img border="0" src="<%=imagePath%>" alt="<%=firmName%>" style="LEFT: 14px; width:150px; POSITION: absolute;"></td>"[code] But for small images are stretching. this should not happen. Could you please help me on this issue Hello, I have overflow set to auto and it doesn't work in IE Mac. It works just right in all other bnrowsers that I've checked with, except IE 6 which adds the vertical scrolls when it shouldn't. I only want the horizontal scroll bar to show up. But, that's not as big an annoyance as the IE Mac, although, should you have a suggestion for that too, I'll take it. Scroll bars didn't work at all in IE 6 until I added a width to the <code> tag. The webpage is at www.huntacular.com and the css file is here What happens in IE Mac is that the contents of the div disappears when I try to set overflow: auto; I tried to set white-space: pre; as recommended at evolt, but no luck. On another note, is there any other way to resolve the vertical spacing in IE 6 other than using this solution which uses comments to retain the indentation so that the li elements don't need to span more than one line. If not, that's not too big a deal, just annoying. I hope someone can help, thanks. I'm pretty new to this so I'm not 100% sure what I'm doing yet. However, I've created a test page to show you guys the rendering issue that I'm experiencing. The page renders how I want it to in Firefox, Flock and Chrome. It renders incorrectly in IE8 (which is a required browser that this needs to be supported in). Here is a link to the test page cm-rosestate.mine.nu/test.aspx and the css is /MyStyle.css My suspicion is that it's a problem with the css and/or the doctype. However, I just don't know enough about this to know how to troubleshoot it. Any help or insight will be appreciated. Hello, I have been having some problems with ie and auto margins, In firefox my page shows perfectly, but in ie, the page hangs to the left only showing the default margin that ie gives you. I want the page to center in the middle. The link to the page is spanglerdesign.com/test/Mulligan1 Is there anyway to make a division automatically expand based on teh content, even though the elements inside are floating. Obviously, this works nice in IE ( ) but naturally i want it to look nice in FF. i always seem to have problems keeping inner elements within the confines of the div box. i always use overflow: auto, but i am wondering if i am going about this the wrong away. another annoying thing is using overflow: auto tends to make the div tab-able. Code:
<div class="info_box">
<img src="images/temp_tiger.png" class="imgalignleft" alt="Petition Title" />
<h5>Petition Title</h5>
</div>
...
.info_box {
clear: both;
overflow: auto;
border: 1px solid #999;
background-color: #fff;
margin-bottom: 8px;
padding: 10px;
font-size: 11px;
}
.info_box h5 {
color: #06c;
font-size: 14px;
}
I have a page that uses CSS to handle layout. I also use a combination of CSS and javascript to create an expandable menu. I have a simplified version of this page he http://www.stringersites.com/csstest/index.htm Users of Dreamweaver will recognize this as being based on the HaloNavLeft template. As you can see, the page displays fine until you start expanding the menu items contained in <div id="mainMenu">. If you expand enough, the mainMenu box extends beyond the borders of the <div id="pagecell1"> in which it's contained. My primary question to the group is how to get the pagecell div to autoexpand along with the mainMenu div. My secondary question is how to stretch a vertical column to the height of the containing div. Specifically, this is <div class="relatedLinks">, which is contained in pageNav, which, in turn, is contained in pagecell1. The relevant pieces of CSS are included below, but you can link to the entire CSS sheet from the test doc above. Thanks in advance for the help. -Steve Stringer Code:
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}
#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 350px;
position: absolute;
margin-left: 10px;
margin-top: 20px;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}
Thanks for reading my question. I have 2 sections. They are #info and #menu. The way I have my html set up is, I have <div id="info"> then <div id="menu"> that way, the height of "info" will always be at least as high as "menu". My problem arizes when "info" is higher than "menu". In this case I would like "info" to not grow in height, but rather have the Overflow: auto; come into effect, and have a scrollbar on the right hand side of the "info" section. For an example of what is happening right now check out www.pierced.ca/Kelly/index.htm index.htm looks the way I want all the pages to look. if you click on Cards, Tags, or Seasonal, you'll see how the page differs from index.htm or the contact, or order pages. Is there a way to say, height can be no bigger than the current height of "menu"? Thanks, Brad Can someone help me with this please...I've been attepting to beat this for several days, without success (although I've learned alot). My goal is displaying images, while using the browser to automatically wrap the images, so the user doesn't have to pre-define rows/cols. Currently, I just use HTML and stick a bunch of IMG elements one after the other. I would like to start using CSS to create border(s) and [optionally] image info. The page is laid out such that I have a DIV element containing all the images. Inside that DIV, I want each row vertically aligned, and horizontally centered (in the DIV), again, with the browser auto-wrapping the "list" of images at the width of the containing DIV. Although I've tried dozens (or more) combinations, I have been consistently testing with an IMG, surrounded by a DIV to create one border, surrounded by another DIV to create another border. In between the DIVs, I may add text info about the image. I originally started with a single DIV, and defined the IMG with a class that added a border. I switched to the two DIVs, to make it easier to test combinations. If the DIV holding the IMG has it's "display" set to "inline", I think that it would be the same as having an IMG with a class, anyway. It seems that I can get close to the alignment (both vertical and horizontal) I'm looking for, if I make the DIVs "Display: Inline", and do not float them; and set the IMG to "Vertical Align: middle". This creates various problems in different browsers. So I doubt this is the right way. If I float the DIVs left, everything about each image looks correct, but I can't get the vertical alignment nor the horizontal centering. Another side-effect that I don't like is that if an IMG is moved to the next line, it may not get floated all the way to the left if a previous IMG on the same row was taller (ie. sticks down further in the row). I think this is because of the rule that says floats should go the top as much as possible, so rather than the wrapped IMG going down a few extra pixels and then going all the way to the left, it stops at the IMG from the prvious row that sticks down the most. I think I've stated clearly what I'm trying to do, I'll include some sample code to help clarify further. Any help or suggestions is very much appreciated. -Jeff Code:
...
<style type="text/css" media="screen"><!--
.pagebox { margin: 12px; padding: 12px; }
.picborder2 { background-color: silver; float: left; margin: 12px; padding: 12px; border: solid thick purple; display: inline; }
.picborder1 { background-color: red; float: left; margin: 12px; padding: 12px; border: solid thick teal; display: inline; }
--></style>
...
<body>
<div class=pagebox>
<div class=picborder2>
<div class=picborder1>
<img src="thumbnail_01"/>
</div>
</div>
<div class=picborder2>
<div class=picborder1>
<img src="thumbnail_02"/>
</div>
</div>
...
<div class=picborder2>
<div class=picborder1>
<img src="thumbnail_NN"/>
</div>
</div>
</div>
</body>
...
I have a wrapper div with a height of 600px and a width of 900px Inside it there are 2 divs The first is floated left with the below style Code:
#left{
height : 100%;
width : 600px;
overflow:hidden;
float : left;
}
The second one is not floated, so that it can occupy the rest of the space and the style is Code:
#right{
height : 100%;
overflow : auto;
margin-left : 600px;
}
The above design is meant to create a 2 column layout with a fixed height. The html I used is Code:
<div class="wrapper">
<div id="left">
<img id="main-image" src="/some/image"/>
</div>
<div id="right"></div>
<br clear="left"/>
</div>
The thing is that Opera (v 10.01) and Safari (v. 4.0.3) do not display the right div. When I remove the overflow:auto, however they do. I cannot figure out why. Any help appreciated Thanks I'm still fairly new with CSS. I cannot get margin: auto; to work in IE. Working fine in Mozilla. There was a brief bit where I got it to work, but I have no idea what I did, nor how to do it again...LOL(slightly sarcastic laughter). Anyway, it's making me crazy and maybe someone can help me out. I've stripped the code down to my CSS body and area div I've been setting my stuff in. Code:
<html>
<head>
<title>Dude Work Web Page</title>
<style type="text/css" media="screen">
body {
background: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
#area {
background: #FFFAFA; display: table;
width: 776px;
margin: 0 auto;
border: 5px double black;
height: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="area">
What is it that keeps this from having auto margins in IE???
</div> <!-- end area -->
</body>
</html>
Much thanks, James Hi all, I have come back to designing websites after a long time and I am having problems making the height auto work in firefox. The css code: Code: div.t2_container{
width:679px;
height:auto;
text-align:left;
padding-top:10px;
padding-bottom:10px;
background:#e7e7e9;
}
div.t2_col1{
float: left;
width:470px;
height:auto;
display: inline;
clear:both;
background:#FFFFCC;
}
div.t2_col2{
float: right;
width:199px;
height:auto;
display: inline;
background:#CCFFFF;
}
and the html: Code: <body> <div class="t2_container"> <div class="t2_col1"><p>text text</p><p>text text</p><p>text text</p></div> <div class="t2_col2"><p>text text</p><p>text text</p><p>text text</p><p>text text</p></div> </div> </body> IE recognizes the height = auto on the container div and resizes so that the inner divs are contained within the grey bounding box of the container. However firefox does not recognize this and the 2 inner divs fall outside the container which is left hanging thin at the top. Does anyone know a fix for this pls? Thanx It always amazes me how Microsoft can mess something up that was working before. Take the following example, a table cell set to a specific width, containing a div, width set to 100% of its containing block element (the table cell). Overflow:auto is applied to the div and content is placed in the cell that cannot be wrapped. See the code that follows: html4strict Code: Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 100%; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>
One would expect to have the table cell display with a width of 200 pixels and scrollbars will be displayed for the un-wrappable content. IE7 does not do that. It widens the cells width to accommodate the content. FF follows this perfectly. To fix this, one has to set the div to the same width as the table cell, like so: html4strict Code: Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 200px; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>
Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths. i think there is a problem with margin: 0 auto; for ie6. Can you try these code in your IE? I know it's a bug but i couldn't find the solution. Code: <div style="width:250px; background-color: #DFDFDF; margin: 10px auto; text-align:center; padding: 4px;">hello world</div> do you have an idea? thanks. www.ahmetalpbalkan.com |
|||||||