|
CSS - Image Within Div Messes Up Height
problems with positions divs and images within them ...
when I have a positioned div, and I insert an image, or another div with image inside, it makes the div too high, and not sure how to get it straight. Code: ?>
<div id="cmp" style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; top: <?=(($startrow*$y_scale)+($cmp_y)*$y_scale)-$offy ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace ?>; height: <?=$y_scale+1 ?>; background-color: <? if( $cmp_row[ $j ] != null ) echo $cmp_row[ $j ]->type->getcolour( -1, $connect ); ?>; border: solid black 1px; z-index:<?=$i ?> " >
<div style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace-20 ?>; height: <?=$y_scale ?>;" align="left" width="20px" height="<?=$y_scale ?>px">
<? if( $cmp_row[ $j ] != null ) echo substr( rtrim( $cmp_row[ $j ]->getName() ), 0, $maxchars ); ?>
</div>
<div style="position: absolute; left: <?=$cmp_right*$x_scale+$offx+$leftcolwidth-20 ?>px; width: <?=20 ?>; height: <?=$y_scale ?>; align: right" >
<img src="images/<?=$icon ?>" alt=<?=$alt ?> border="0" <?=$mousey ?>>
</div>
</div>
<?
the code above has got a bit messy with trying to fix the problem... Cheers Adam Similar TutorialsHi 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! It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> http://www.innerspect.net/blog/ can anyone confirm this? offer some fixes? Hi, Im new to totally CSS designs im more a table guy but im trying and getting a problem if you look at http://www.michaelwoodward.co.uk/clients/RSS on the shop page when you go into a department the footer moves up to the top of the main content section - why?? its not related to the height of the page so im guessing is something to do with the databse driven information that is placed in there (in a table). Can anyone help? Thanks Hello, I was wondering if someone could take a look at my website and tell me what the CSS error is and some possible work arounds or fixes. The problem is CSS is messing with links and general text/input boxes. This problem does not occur in Internet Explorer where the css isn't rendered correctly. If you take a look around the site you'll see the error in a few seconds. Not working in: Mozilla and Google Chrome url: egames.hostoi.com/test/home.html Hi to all of you, I've started this new page just this morning, i have some experience with sitebuilding and css but not much. the result can be found here I spent most of my afternoon trying to fix this little error in IE (works fine in FF, opera and netscape). I've tried everything I could find, box model, floating boxes, lots of tricks and hacks but nothing seemed to work (or I implementer everything the wrong way). The problem seems quite simple, it looks like it has something to do with padding or margin for as long as text appears in the left column things in the right column are shifted a little to the right. Pleas help me out on this one, thanks in advance, kind regards, Jef Hi I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css) The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move. Does anybody know what could cause this? Hi guys, This is another standard "why won't it work in IE"-post. I'm making a multi-column news-style site (<spam>first link in my signature</spam>), and IE screws up the widths. The layout is basically three .col's which are floated left, and a #menu on the right. Here's the relevant css: Code:
#menu
{
float: left;
margin-left: 0%;
width: 20%;
line-height: 120%;
padding: 2%;
font-size: larger;
}
.col
{
float: left;
width: 24%;
font-size: 0.8em;
}
.col ul{
list-style-type: none;
padding-left: 0;
}
.col .story{
background: #F5F8ED;
padding: 0 ;
margin: 1%;
border: 1px solid #71804D;
color: #333;
text-align: justify;
}
Here's some example html: Code:
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div id="menu">
<div id="menu_title">
<h1> title </h1>
</div>
<ul id="navbox">
<li> ... </li>
</ul>
... etc
</div>
The problem is that IE renders the .col's very narrowly, and has some major space vertically between them. This means that #menu gets pushed down below the .col's. Can anyone point me in the right direction to fix this width issue? Thanks, Simon Hi all, with your great help, the pages looks now almost fine in both IE and FF. But, the photogallery looks much more better with all the photos bordered, like on this screenshot from FireFox. Unfornutely, when you check it in IE, all the images are messed around in a totally upredictable way (screenshot from IE). It was the same using vertical-align, but it's not so essential. So, is there please any solution to handle this? And is there a way how to center floating <div> within his parent <div> ("Unfortunately, there is no easy way to center floated elements." - But is there any way)? The red bordered div is floating, including all the images put in <div>, which are floating too, I'd love center the red bordered <div> inside the green bordered one. To be specific, I don't insist on the red bordered div to be floating, I just looking for a way how to center all the images inside the green bordered <div>. Here are CSS used: Fotogalerie.css, Web.css. Webdesign isn't really easy thing to learn , if all would work how it's supposed to work, it'd wonderful, but IE makes it all 3times harder , I really start to not to like him (more than before ) [edit] New question, see http://forums.devshed.com/css-help-...tml#post1377956 below for details. Thanks! --------- old question ------------ Hi, I'm trying to get some checkboxes aligned in a form that i'm creating. I can get it to work perfectly in Firefox, but not in IE6. In Firefox: In IE6: I don't care so much about the height/spacing issue as much as the left/right reversal. the relevant css(i think) is here Code: #application p {text-indent: 0px;}
#application div.col1 {width: 50%; float: left;}
#application div.col2 {width: 50%; float: right;}
#application label {
float: left;
width: 70px;
text-align: right;
height: 2em; line-height: 2em;
}
#application .label_checkbox {width: 100%;}
#application .label_checkbox p{
clear: both;
float: none;
position: relative;
}
#application .label_checkbox input {
position: absolute;
top: 1px;
left: 1px;
}
#application .label_checkbox label {
display: block;
margin-left: 22px;
text-align: left;
width: 160px;
}
and relevant xhtml: Code: <div class="label_checkbox">
<div class="col1">
<p><input type="checkbox" id="ch" value="Classroom Helper" name="roles" /><label for="ch">Classroom Helpers</label></p>
<p><input type="checkbox" id="lt" value="Literacy Tutor" name="roles" /><label for="lt">Literacy Tutor</label></p>
<p><input type="checkbox" id="ta" value="Technology Assistant" name="roles" /><label for="ta">Technology Assistant</label></p>
<p><input type="checkbox" id="ce" value="Campus Enrichment" name="roles" /><label for="ce">Campus Enrichment</label></p>
<p><input type="checkbox" id="ote" value="One-Time Events" name="roles" /><label for="ote">One-Time Events</label></p>
</div>
<div class="col2">
<p><input type="checkbox" id="frn" value="Family Reading Night" name="roles" /><label for="frn">Family Reading Night</label></p>
<p><input type="checkbox" id="rad" value="Read Aloud Day" name="roles" /><label for="rad">Read Aloud Day</label></p>
<p><input type="checkbox" id="dd" value="Dictionary Day" name="roles" /><label for="dd">Dictionary Day</label></p>
<p><input type="checkbox" id="gs" value="Guest Speaker" name="roles" /><label for="gs">Guest Speaker</label></p>
<p><input type="checkbox" id="other" value="Other" name="roles" /><label for="other">Other</label></p>
</div>
</div>
you can see the page at http://oaklandheroes.org/beta/application.php. Thanks for the help! As per suggestion, I have created a new thread in this forum. This is a follow on from my thread in the Javascript forum I have created a table which displays exactly how I want it to. It displays correctly in IE8, FF3.6, Opera & Chrome. What I've done is created some Javascript to remove the last column of the table. When this happens FF and Chrome (untested in Opera) redraws the table with the right edge column of the right-most column as I would hope it would - with the right edge style of the table as it was before the column was removed - in this instance, a solid black border. IE does not redraw the right border like this - it retains the internal column border, in this instance, a grey dashed cell border. I was wondering if there was a way to make IE behave? A demo is available at geostatsireland and it is a .com - the page name is mytable.html Hi, Does anyone have any ideas or fixes to get an image to be 100% height of a table cell in IE. (XHTML Transitional) Here is an example http://www.degs.co.uk/test/css/height.htm Works fine in Mozilla/Firefox & Opera Code: html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
height: 96%;
}
table {
padding: 0px;
height: 100%;
width: 700px;
border: 1px solid #000000;
}
.vdivider {
width: 5px;
height: 100%;
}
Cheers, Degs Hello, I had a site exactly how I wanted to and messed up a css file. I am almost back to where I was but I am having an issue with the background image of the body element. Please look at this layout - Client Website . Notice how the hardwood floor does not go all the down? I have the image sized to 1500 pixels high and yesterday I did not have this issue. Also, when I outline elements in FF I see the body element seems to fall short. Any help would be appreciated. Tom Hey guys, how are you? So, I got two questions. Right now, on my main pages I have a fixed height, and wondering the best way to change it to a liquid one, so no matter how long the page is, I get a white background that's consistent with my 'main' <div>. And the second one, is how do I get a second background image on the body? I'm probably going to use almost almost a mirror type gradient of the top gradient, but not sure how to add it. You can view the two problems here http://thecheckoutplace.com/ home page). Thanks for your time, cheers. i am trying to have the background of all pages appear like this one: www(dot)grimebikes(dot)com/events/ however it will only fill its parent container, like this www(dot)grimebikes(dot)com/media/ fade1000.png is the image i need to cover the entire pages content. /* HTML Tag Redefinition */ html { height: 100%; background: #000000 url(images/background.png) center center fixed; background-size: cover;} body { padding: 0px; margin: auto; height:100%; font-family:Arial, Helvetica, sans-serif; font-size:12px; } img { border: 0px; } a {cursorointer; } /* Page Structure / Navigation */ #page { position:relative; width: 1000px; margin: auto; text-align:left; background: url(images/fade1000.png) repeat-y; min-height:200%;} #page.logo {position:absolute; top:0; left:0; width:330;} #page input { color: #c2d826; background-color: #000000; border-style:solid; border-width:1px; border-color:#444444; padding:2px; font-size:10px;} #page #content {width: 900px; margin:auto; text-align:left; position:relative; height:100%; } #page #content #header{ position:relative; width:900px; float:left; } Below is what I have. Displays fine in FF. In IE, there is approximatly a 13px white space under the image. Can't find an answer to this. Any insight is appreciated. --Sean HTML: <p id="dot"></p> CSS: #dot { position:relative; left: 0px; top: 0px; width:200px; height:6px; background-image: url(dot.jpg); background-repeat: repeat-x; line-height:0pt; margin: 0px; } Hi I have a div where I want to use two vertical images as border. I also want the images to stretch vertically in relation to the height of div. Works in IE6, IE8, Firefox, and Chrome (have not tested other browsers yet), but not in IE7. IE 7 make the border images in example below, stretch all the way towards the bottom of the outer idv, far below the div in question. Does anyone know how I prevent IE7 to stretch the two border images below their parent container? Here is code used: Please use attached images if you want to test this. Nice way to test this in multiple browsers are he https://browserlab.adobe.com/en-us/index.html Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.quoteStretch {
height:100%;
}
/* next is hack to make it work in IE6 */
* html .quoteStretch {
height:expression(
this.parentElement.offsetHeight+'px'
);
}
</style>
</head>
<body>
<div style="width:300px; height: 400px; margin: 50px auto 0 auto; border: 1px solid red;">
<div style="position:relative; width:100%; border-bottom:1px solid gray;">
<img src="path-to-image/siteborder-left.jpg" width="1px" height="1px" class="quoteStretch" style="position:absolute; top:0px; left:-22px; z-index:auto; width:22px;" />
<img src="path-to-image/siteborder-right.jpg" width="1px" height="1px" class="quoteStretch" style="position:absolute; top:0px; right:-23px; z-index:auto; width:23px;" />
<div style="display:block; padding:15px;">
Text comes here
<br />
Text comes here
</div>
</div>
</div>
</body>
</html>
I'm trying to do something that probably isn't as difficult as it's becoming for me. I want to have a 100% height page, which I've managed okay with so far. I want the header and menu to be a fixed height, and a footer of fixed height too, with the middle section being what expands to fit the whole design. This middle section, however, is a div containing an image that needs to get its height somehow. I've reverted back to my old fixed code, which loaded a stylesheet depending on the users screen resolution, but it's too limited and I'd like to know how to go about incorporating the 100% height idea. http://www.ryanbuckley.ca/BRIT/drawings.php |
|||||||