|
CSS - Height Issue
Hey
I have a containing div with 4 inner spans that are set to be displayed like a block element (display:block and floated to the left. Now I want every span in the containing div to be the same height as the first span in the containing div. So if the first span in the containing div spreads to 30 pixels in height, I want the other three spans to do the same. Is there a way I can do this? Here is what the code kinda looks like: Code:
<style>
#c {
min-height:18px;
height:18px;
}
#c span {
color: #fff;
display:block;
float:left;
}
</style>
<div id="c">
<span class="s">blah</span>
<span class="s">blah</span>
<span class="s">blah</span>
<span class="s">blah</span>
</div>
Thanks Similar TutorialsPlease look at this page - http://www.nationwidetranny.com/testimonials.asp The issue is obvious, the image(s) in div.testimonial go outside the div when what i want is that the div expands. The image is floated, might that be part of the issue. Any help would be appreicated so much. Thanks. Code:
div.testimonial{
position:relative;
width:667px;
min-height:200px;
padding:20px 0 30px 0;
background: transparent url(../images/testimonial_div_bg.gif) repeat-y;
font-style:oblique;
}
.testimonial_footer_bg{
position:absolute;bottom:0;left:-1px;clear:left;background: transparent url(../images/testimonial_div_footer.gif) no-repeat;width:667px;height:16px;
}
div.testimonial div.picture{
float:left;
margin:3px 13px 0 17px;
}
div.testimonial p{
margin:0 0 0 320px !important;
width:320px;
padding:0 !important;
}
div.testimonial p.nopic3{
margin:0 0 0 17px !important;
width:600px;
}
Hi guys, I am not sure if any of you have experience this issue. The layout of my page from top to bottom is header (always stays at the top of browser) content footer (always stays at the bottom) the page looks perfect under ie7 firefox and ie6 if at full screen mode. but when i smaller the browser ie6 footer covers up my content which means i can't scroll right to the bottom of my content. the footer seems overlapping the content. any suggestion about how to fix this problem? Hie all, I m stuck with the min-height issue in IE. my requirement is to have div to be atleast 100% in height but not limited to 100% if the page has a vertical scrollbar. If i give out something Code: #pageSround
{
width:1004px;
background: url(../images/bg_main.gif) repeat-y 800px 0px;
background-color: red ;
min-height:100%;
height:auto !important;
}
this works good in FF as it shows the page to be atleast 100% when there is no scrollbar and expands the RED color to the bottom of the page if there is a scrollbar. The above thing doesn't work in IE though. I found a fast hack for IE min-height issue here http://www.dustindiaz.com/min-height-fast-hack/ but it doesn't work for me. or may be i m not giving the height attribute. How do i solve it. kindlgy post links or ur valuable comments. Thankyou Hi, Im trying to make a simple bar with text in the center. Im having a lot of problems with it however, because its height is 50px not 25px. The bars in question are the ones that say "Description, Payment" etc I started by setting its height to 25px in the CSS but this didnt work. Ive tried adding padding: 0px to what I thought was the relevant tag, but this doesnt change it either! This is the address to the test page: http://www.zombiemod.com/test.html This is the code: 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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<style type="text/css">
/*<![CDATA[*/
#title {
border-top:2px #000000 solid;
border-bottom:3px #000000 solid;
}
#mainNav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
float: right;
height: 61px;
}
#mainNav li {
float: left;
margin-top: 38px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}
#mainNav li a {
margin: 0px;
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight: normal;
color: #efeeee;
font-family: Verdana;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a:hover {
font-weight: bold;
color: #efeeee;
}
#mainNav li a span {
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px;
}
#horinav li {
float:left;
width:23%;
text-align:center;
}
p.c13 {text-align: left}
span.c12 {color: #efeeee}
h3.c11 {color: #000000; font-family: Verdana; text-align: center}
div.c10 {text-align: left}
table.c9 {border-collapse: collapse}
span.c8 {font-family: Verdana; font-size: 80%}
p.c7 {font-family: Verdana; font-size: 80%}
span.c6 {color: #000000; font-family: Verdana; font-size: 14}
p.c5 {text-align: center}
span.c4 {font-family: Arial, Helvetica, sans-serif; font-size: 200%}
tr.c3 {background-image: url(http://img6.imageshack.us/img6/3518/63387888.jpg)}
tr.c14 {background-image: url(http://img6.imageshack.us/img6/2466/bgthin.jpg)}
span.c2 {font-family: Arial, Helvetica, sans-serif; font-size: 120%}
span.c1 {color: #232323}
</style>
<style type="text/css">
/*<![CDATA[*/
img.c7 {padding: 5px; border: 1px solid #ffcc00;}
tr.c6 {background-color: #000033}
td.c5 {background-color: #FFFFFF}
tr.c4 {background-color: #FFFFFF}
li.c3 {list-style: none}
tr.c2 {background-color: #FFEDA3}
span.c1 {color: #EFEEEE}
/*]]>*/
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" id="title">
<tr class="c3">
<td align="left"><span class="c2"><strong><span class="c1"><a name="top" id="top"><img src="http://img200.imageshack.us/img200/9856/alienware.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></span></strong></span>
<ul id="mainNav">
<li><a href="#Description"><span>Item</span></a></li>
<li><a href="#Payment"><span>Payment</span></a></li>
<li><a href="#Shipping"><span>Shipping</span></a></li>
<li><a href="#Policies"><span>Pictures</span></a></li>
</ul>
</td>
</tr>
</table>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr class="c4" valign="top">
<td align="center">
<div class="c10">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="c9">
<tr class="c14 c2">
<td width="100%" colspan="3">
<p class="c5"><strong><span class="c6"><a name="Description" id="Description"><span class="c1">Description</span></a></span></strong></p>
</td>
</tr>
<tr>
<td width="49%" align="left" valign="top">
<p class="c7"><br />
Test.</p>
</td>
<td width="2%" align="right" valign="top"></td>
<td valign="top" width="49%">
<ul>
<li class="c3"><br /></li>
<li><span class="c8">Test</span></li>
<li class="c3"><br /></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Payment" id="Payment"><span class="c1">Payment</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="2"><br />
<br />
<span class="c8">Test.<br /></span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Shipping" id="Shipping"><span class="c12">Shipping</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20"><br />
<br />
<span class="c8">Put your Shipping information here.<br />
There are <br> tags here to fill the cell, take them out after inserting you text.</span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Policies" id="Policies"><span class="c12">Pictures</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20">
<p class="c13"><br />
<br />
<span class="c8"><br /></span></p>
<ul id="horinav">
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
</ul>
<br /></td>
</tr>
</table>
</body>
</html>
Ive put it through a validator, now it validates, but it still doesnt work. I believe the tag in question is c14 and c2. Hi, I want to display a background image on the bottom right of the page. Using the following css. It actually worked. But now I have builded a page that needs to scroll down to display all the content. In this case, the background image shows up at the bottom right of the screen and not at the bottom of the page. Any solution for this ? Code:
html
{
height: 98%;
}
body
{
height: 100%;
width: 100%;
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(images/bg.gif);
background-repeat: repeat;
}
#container
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: url(images/bas.gif) no-repeat 100% 100%;
text-align: center;
width: 100%;
height: 100%;
}
I know this problem has been seen hundreds of times when you have floated columns and you want them to be the same height so that the background graphic is continuous down to the foot of the page. Well, I've got a slight variant on that: http://216.120.243.161/~h****ins/browse2.php (if the url doesn't show above it's because the name of the site happens to contain the letters d i c and k next to each other!) I have 4 columns of floated boxes, (row number varies) and after every four boxes (they are floated to the left) there is a br that clears them, and a new row starts underneath. My database system would allow the boxes to actually be quite tall if the name was the full 255 characters. So, I don't want to set a height for them, as most would look silly. I could do a faux-columns style background, but that requires more elements. Any ideas would be greatly appreciated, but in the end, I may have to use tables (Nooooo...! ;-) ) Thanks, Watters I normally do not have an issue with firefox and CSS but this renders fine in IE. Any suggestions: In IE it looks the way it should. Code: div#wrapper {
margin: 0 auto;
margin-top: 20px;
border: 1px solid #ffffff;
width: 760px;
height: 100%;
background: #6f1727 url('../../images/logo_grayscale2.png');
background-position: bottom right;
background-repeat: no-repeat;
}
html>body div#wrapper {
min-height: 600px;
height: 100%;
}
But in FF The wrapper div will not scale to 100% of the containing divs. Any ideas would be much appreciated. It will not let me send a link to the site in this post. Hi there, I am building a site which is working fine in Netscape but is not showing correctly in IE 6. The yellow line I have is not "listening" to its 10px height and there is some mystery spacing occuring around it at well....I have looked around, but can't seen to figure out what the fix is. I would really appreciate some help! Here is the .css and the link: http://www.kohlrbaby.com/vcc/boxlesson.htm body { margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #eee; background-color: #ffffff; text-align: center; } a { text-decoration: none; color: #eee; outline: none; font-size: 12px; } a:visited { color: #ccc; } a:active { color: #ccc; } a:hover { color: #990000; text-decoration: underline; } p { font-size: 12px; line-height: 22px; margin-top: 0px; margin-bottom: 0px; color: #000000; text-align: left; } #head { padding: 0px; margin-top: 30px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ border-top: none; border-right: 1px solid #43709e; border-bottom: none; border-left: none; text-align:left; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 726px; height: 110px; } #yellowStrip{ width: 726px; background-color: #e7d77e; height: 10px;/*height is not functioning?? */ padding: 0px; } #lftBar { width: 93px; background: #43709e; float: left; } #mainBox { border-right: 1px solid #43709e; margin-top: -1px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: #43709e; border-top: none; width: 726px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 726px; } .innerbox { padding: 30px; background-color: #ffffff; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left:93px; } #bottom { padding: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:left; voice-family: "\"}\""; voice-family:inherit; } #bottomText{ padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-right: auto; margin-left: auto; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:center; voice-family: "\"}\""; voice-family:inherit; font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; color: #ccc; } Hello, I would like to know how to do this: I have a fixed-size div and several inner divs in it, positioned vertically (on top of each other). I want the last div's size to be equal to the size of the fixed-size div minus all the other divs (currently, one other div). Example: I have a form, which has a certain height. The form has a header and a section (div) with 3 inner checkbox divs (columns), and I want the checkbox divs to scroll if they overflow the main div and in effect the parent div. Is there any way to do this? Thanks! EDIT: Here is a live example. (in this example, there's an extra div within the child div holding the checkboxes) Currently, instead of the desired solution each checkbox div is 70% of the height of the main parent. helenas flower abode.com / pictures.php?width=800&height=1118&picturediv_height=366&pngalt=.png&js=1&action=search EDIT2: I changed the structure of the site and the page link as well, and you can't see the temp. fix in Firefox and possibly in IE7 (tested in IE6). EDIT3: Anyone? Hi, I'm working on my homepage at www.wecook.co.uk and want the grey background to at least be big enough to fill the whole page on most resoultions - currently on my monitor (1280 x 1024) it ends and i get a white at the bottom of the page - could someone suggest how i can adjust my css to fix this? any help is appreciated. thanks I'm actually getting weird results in IE too, the page seems to extend way beyond 100% of the screen. Also, in Firefox when the browser is at a height of less than 730px the right (blue) bar seems to come up from the footer div. What's up with this? I'd really appreciate it if someone could lend me some advice on this. Sources: http://www.upliftingathletes.org CSS: http://www.upliftingathletes.org/s/content.css Hi Folks, Newbie here, first post. I need to figure out a way for the left border on the right column, its a DIV floated to the right (contains an image of a brain which has a certain irony!) to expand all the way down the page when you set the text to "largest" with your browser. Example: http://www.cre8webdesign.co.uk/services.html Can anyone help? Thanks Darren. After i set the height of the text box, when viewing it in firefox, not only does it look like the font size is over 100 before typing the norm-sized text, but it starts in the middel-left of the box instead of the top left what do i do to correct this? been tearing my hair out with this problem I've been doing an expanding menu for drupal and functionally it works perfect. You click on the legend, it expands the fieldset. However I'm having major difficulties on the CSS side of things. The problem is that when I adjust the height of the legend to fit the background image, it doesn't push the other fieldsets down in IE 7 and 8 but it does in Firefox and (oddly) IE6. Given that means a ~20 pixel gap between menu items in Firefox compared to none in IE7,8 it means the menu always looks ugly in one of the two sets of browers. Here's the CSS in question (displays ok in IE7,8 but spaced out in FF): Code: fieldset.accordian
{
border:none;
margin-top:8px;
padding-bottom:3px;
width:205px;
}
legend
{
background-image: url('images/menubg.png');
background-repeat: no-repeat;
margin:0;
padding:0;
width:205px;
line-height:37px;
height:37px;
}
I like dashed underline links. The trouble is a couple of sections of my site use line-height and vertical-align to center their content. This means that applying a border-bottom: 1px dashed black; to an href has the effect that the underline appears at the bottom of the line height and not directly underneath the link. Is there a way to overcome this? Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? Code: <!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" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. |
|||||||