Forum Moderators: not2easy
1) How can you set the vertical alignment of divs and objects within the div stick to the bottom?
\\\\\\\\\\\\\\\\\\\\\\\\\\
DIV POSiTION
//////////////////////////
as opposed to the default of
///////////////////////////////
DIV POSITION
//////////////////////////////
I have over come this wanting to be valigned to the TOP of the div by adding padding to the divs with elements not as high. here is my second issue.
2. Look at this page in IE vs FF <ooops>
It looks good in FF, not IE...How do I get rid of the gap in IE?
Any help will be greatly appreciated
***THANKS***
[edited by: SuzyUK at 6:41 pm (utc) on Mar. 8, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]
First off personal URLs are against the TOS so you'll need to post your code here. I recommend using [quote]your code here[/quote] to make it easier to read. I will show you in my second reply with the [codes] enabled.
- John
It's not a CSS problem. The problem is the space after the image. You should also put spaces before the close slash in <img> elements. IE gets picky with spaces after images.
<div id="toptabrt" align="right"><img src="images/client_login_tab.jpg" alt="#"/> </div>should be:
<div id="toptabrt" align="right"><img src="images/client_login_tab.jpg" alt="#" /></div>[edited by: SuzyUK at 7:24 pm (utc) on Mar. 8, 2007]
[edit reason] examplified [/edit]
You can read Microsoft's Conditional Comments page at...
[msdn.microsoft.com...]
Since (X)HTML comments are ignored by all browsers only Internet Explorer will bother to look at your (X)HTML comments for conditional comments.
Secondly you can include anything, additional JavaScript, CSS, linked CSS or JS, etcetera.
<!--[if IE]><link href="ieccss.css" media="screen" rel="stylesheet" title="ieccss" type="text/css" /><![endif]-->
Thankfully unlike Konqueror and Opera Internet Explorer will override the first stylesheet with additionally included stylesheets (absolutely required if you want to patch a rendering engine's shortcomings) without having to plop the code inside of style elements on every...single...page!
I refer to this method as IECCSS (Internet Explorer Conditional Comments Style Sheet).
There are two important things to keep in mind when patching IE...
1.) When adding CSS to your IECCSS you only have to use your selector and the effect. Usually you'll end up doing something crazy. I've horizontally centered an absolute position div using margin-left: 15%;. So all you have to do it play with the variables. Since I design to pixel perfect (something looks bad on my site if it's a single pixel off) usually I'll just need to set the width one (or two) more or one (or two) less pixels then the main stylesheet. No other properties needed!
2.) Your IECCSS must be served after your main CSS. Otherwise IE will use your IECCSS and then override it with your main CSS.
You can also target specific versions of IE. In example IE7 cleaned up HORDES of bad rendering on my site (and disabling IECCSS between IE6 and IE7 proves it). If you read Microsoft's page that I linked above you'll see how you can serve different versions of IECCSS to various versions of IE.
When I test locally with stand alone versions of IE 4, 5.01, 5.5, 6.0, and 7.0 I usually have to make each IECCSS specific to the Windows's native version (which is IE 6 SV1 right now) as conditional comments seem to detect the version of IE through the registry and not the program itself! So I usually patch either starting with the latest or the earliest versions of IE and work my way to the other end. If I patch IE 5.01 first I usually copy all the code and delete and refresh to see if I need the same patch in the newer version. Needless to say most of the patched CSS in my IECCSS makes my IECCSS file for IE7 very small. Most of the patch CSS though fixes the same stuff between IE 5.01, IE 5.5, and IE 6.0.
As far as setting an element to the bottom play with the margins and positioning. Try some zany stuff and keep in mind it will only effect Internet Explorer without having any other effects on other browsers.
Lastly since only IE will make use of IECCSS and you want to keep your main code completely valid according to the W3C you can include special proprietary Microsoft-only code in your IECCSS such as colored scrollbars. The same if you want to do special proprietary JavaScript if you include a JavaScript file through conditional comments.
It just saddens me to see so many people complaining about IE when all they have to do is add a single line and an extra file to relieve themselves of otherwise horrid barriers to good coding practices.
- John
[validator.w3.org...]
- John
You missed by two characters.
Is there a way to anchor items in divs to the bottom?
thanks!
When I want things on the bottom, I include them as background-images, and either size the <div> or use a 1-pixel spacer, stretched to fill the <div>.
taken from the page that was linked and examplified - I've added background colors to the left, right and header divs to make it easier to see the divides AND I've added the image dimensions in the HTML because
a. they should be there ;) and
b. they do have a very small bearing in this case
<!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>Page Title</title>
<style type="text/css" media="screen">
div#top{
height:49px;
padding:0;
margin:0;
vertical-align:bottom;
}div#toplogolft{
float:left;
width:360px;
margin:0;
background: #0f0;
}div#toptabrt{
float:right;
width:200px;
padding-top:23px;
margin:0;
background: #0f0;
}div#topsearchctr{
float:left;
width:200px;
padding-top:15px;
margin:0;
}div#header{
background: #ff0;
height: 156px;
padding:0;
margin:0;
clear:both;
border-top:0px solid #010080;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="top" >
<div id="toplogolft"><img src="images/logo.jpg" width="223" height="49" alt="#" /></div>
<div id="topsearchctr" align="right"><form action="" method="get">
<img src="images/search_icon.jpg" alt="#" />
<input name="Search" type="text" dir="ltr" lang="en" value="" class="homesearch" />
</form>
</div>
<div id="toptabrt" align="right"><img src="images/client_login_tab.jpg" width="92" height="27" alt="#"/> </div>
</div>
<div id="header"></div>
</div>
</body>
</html>
While that's good advice you have about the spaces in the code it isn't actually the problem IMHO..
and for those testing in IE7 it's OK in IE7 - IE6 (or IE7 in quirks) will show the problem
Suzy
While that's good advice you have about the spaces in the code it isn't actually the problem IMHO.
Fixed it for me.
I distilled the code as above and ran it against my IE6/XP VM.
With space: gap
Without space: no gap
The space before the closer didn't actually make a difference ( />), but the one between the image and the </div> close caused it on mine.
Oh, yeah, I see now that I also added the *{margin:0;padding:0} thingy to my test file. That will help, but the gap shows up whenever I put in that space, even with the wildcard.
* {margin:0;padding:0}
is important! - what element in this code is being affected by that?
Yes I agree the whitespace is one cause but I've not come across a problem yet (apart from the duplicate characters bug) where it couldn't be counteracted with CSS. I hate having to do an HTML fix for whitespace!
but the gap shows up whenever I put in that space, even with the wildcard
yes but does the gap get smaller?
[edited by: SuzyUK at 9:17 pm (utc) on Mar. 8, 2007]
[edited by: SuzyUK at 8:31 am (utc) on Mar. 9, 2007]
[edit reason] removed specifics [/edit]
yes but does the gap get smaller?
To answer that question, yes, it does.
ieiskillingme, you should preface your CSS with the global *{margin:0;padding:0} wildcard. This reduces the margin and padding of just about every element, and forces you to add explicit padding and margins. It "levels the playing field."
Can someone post there version that fixed the gap?
Ask, and ye shall receive:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
/* <![CDATA[ */
/* CSS Document */
*{margin:0;padding:0}
body, HTML {
margin:2% 0% 0 0%;
padding:0;
font-family:Arial, Helvetica, sans-serif;
color:#000;
}
div#main_wrapper{
width:796px;
}
div#top{
height:49px;
}
div#toplogolft{
float:left;
}
div#toptabrt{
float:right;
width:200px;
padding-top:23px;
}
div#topsearchctr{
float:left;
width:200px;
padding-top:15px;
}
div#header{
background-image: url(images/header.jpg);
background-position: center;
background-repeat: no-repeat;
height: 156px;
clear:both;
border-top:0px solid #010080;
}
img{
border: none;
}
/* ]]> */
</style>
</head>
<body>
<div id="main_wrapper">
<div id="top" >
<div id="toplogolft"><img src="images/logo.jpg" alt="#" /></div>
<div id="topsearchctr" align="right">
<form action="" method="get">
<img src="images/search_icon.jpg" alt="#" />
<input name="Search" type="text" dir="ltr" lang="en" value="" class="homesearch" />
</form>
</div>
<div id="toptabrt" align="right"><img src="images/client_login_tab.jpg" alt="#"/></div>
</div>
<div id="header"></div>
</div>
<div id="main_wrapper">
<div id="top" >
<div id="toplogolft"><img src="images/logo.jpg" alt="#" /></div>
<div id="topsearchctr" align="right">
<form action="" method="get">
<img src="images/search_icon.jpg" alt="#" />
<input name="Search" type="text" dir="ltr" lang="en" value="" class="homesearch" />
</form>
</div>
<div id="toptabrt" align="right"><img src="images/client_login_tab.jpg" alt="#" /></div>
</div>
<div id="header"></div>
</div>
</body>
</html>
[edited by: SuzyUK at 8:32 am (utc) on Mar. 9, 2007]
[edit reason] removed specifics [/edit]
one small thing which you may not have noticed though it's not causing a major issue your image inside toptabrt is 27px high and you have the top padding set at 23px this equals 50px whereas the main image and your whole top div is set @ 49px high.. not so noticeable if your main image doesn't have a visible join/gap but it does mean that top div is actually 50px high
re the first part of your question, this is a margin issue and not a padding one - the <form> in the middle div is the element that's causing the biggest gap (there are two gaps) problem. The Form element has default margins (top and bottom in IE and Opera, top in FF) and that along with IE6 and below's inability to honor height is causing the top div to stretch its height. That's why cmarshalls solution the Global reset works (for the big gap) anyway. Just beware using the global reset as it sets padding and margin to zero for ALL elements so as you go through the rest of your site you will have to set your own padding and margin for all elements (especially lists if you need the indents and bullets). you could if you like just set #top form {margin: 0;} to only target that form if you've already got other CSS to mind.
The whitespace (in HTML) is causing a small line-height gap which you can fix by as suggested removing any whitespace in the HTML (though in some cases this isn't always possible e.g. CMS generated code) - or you can fix your code by setting #top img {vertical-align: bottom;}
.. but the good news is you could choose to fix the whole lot without doing any of the above and actually reduce your CSS!
div#top{
height:49px;
padding:0;
margin:0;
vertical-align:bottom;
}
change to:
div#top{
height:49px; /* or change this to 50px whatever suits best */
overflow: hidden;
}
the overflow setting crops the bottom margin, crops the whitespace gap - in effect it fixes IE6 and below by telling it explicitly not to stretch more than the 49px height you want, which is what other browsers are doing anyway!
Suzy
thanks again for all your help.
