|
CSS - Can't Vertically Align Form Field In Div (ie6) - Solution
Set margin:0px;
Similar TutorialsI'm stumped. Cannot find a solution here. Is it possible to vertically align a form field inside a DIV in IE6? It works fine everywhere else. (Big shock...) Thank you for any help you can give. I've resolved to using tables temporarily. Ughhh. Here's a snippet of the CSS: Code: body { background-color: #e2e4d7; background-image: url("../images/fade_top.gif"); background-repeat: repeat-x; margin: 0; padding: 0 }
#wrapper { margin: 12px auto; width: 796px }
#top { background-image: url("../images/main_top.gif"); background-repeat: no-repeat; width: 796px; height: 8px; overflow: hidden; vertical-align: bottom }
#main { background-image: url("../images/main_back.gif"); background-repeat: repeat-y; width: 796px; overflow: hidden }
#header { background-image: url("../images/header_back.gif"); background-repeat: no-repeat; width: 796px; height: 262px }
#nav { margin-right: 8px; margin-left: 8px; width: 780px; height: 60px }
#nav ul { list-style-type: none; margin: 0; padding: 0; width: 780px }
#nav li { float: left }
#nav li a { display: block; padding-top: 60px; height: 0; overflow: hidden }
...
#banner { margin-right: 8px; margin-left: 8px; width: 780px; height: 202px; overflow: hidden }
#bannerLeft { background-image: url("../images/banner_logo.gif"); background-repeat: no-repeat; position: relative; width: 316px; height: 202px; float: left }
#searchBox { line-height: 53px; text-align: center; position: absolute; top: 149px; width: 316px; height: 53px }
#searchField { margin: 0; padding: 0; width: 196px; vertical-align: middle }
#searchButton { margin: 0 0 0 6px; padding: 0; vertical-align: middle }
#bannerRight { background-image: url("../images/banner_photo.jpg"); background-repeat: no-repeat; width: 464px; height: 202px; float: right }
...
And here's a snippet of the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title></title> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"/> </head> <body> <div id="wrapper"> <div id="top"></div> <div id="main"> <div id="header"> <div id="nav"> <ul> ... </ul> </div> <div id="banner"> <div id="bannerLeft"> <form action="http://www.google.com/search" method="get"> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="oe" value="UTF-8"> <input type="hidden" name="domains" value="http://www.whmca.com"> <input type="hidden" name="sitesearch" value="http://www.whmca.com"> <div id="searchBox"> <input id="searchField" type="text" name="q"><input id="searchButton" name="btnG" type="image" src="images/search_bt.gif" alt="Search" height="14" width="42"> </div> </form> </div> <div id="bannerRight"></div> </div> </div> <div id="body"> ... </div> </div> <div id="bottom"></div> <div id="copyright"> ... </div> </div> </body> </html> I have #sidebar on my website and within the sidebar which contains two smaller divs (Calender and Archive) inside it which are styled by #sidebar div When I put these two divs in, Calender wasn't where I wanted it to be, at the very top of the sidebar. It was a few pixels lower. To fix I went to #sidebar div and changed the top margin to -1px and now it's at the very top. Is this a sensible fix? I've checked in Chrome 2.0, Safari 4.0, Firefox 3.5 and IE 8 and it looks to be OK but there's a nagging feeling in my head that I shouldn't have needed to do this. Here is the HTML: 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>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="content">jkjk</div>
<div id="sidebar">
<div id="calender"><h3>Calender</h3>
<p>fjkfjdklfjkljfsk</p></div>
<div id="active"><h3>Archive</h3>
<p>fjdkfjkfjk</p></div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
And here is the main.css: Code: @charset "utf-8";
/* Main style */
body { padding: 0; margin: 0; background-color: #000; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.wrapper {
text-align: left;
margin: 0 auto;
width: 750px;
}
/* Header */
#header {
background-color: #996666;
margin-top: 35px;
margin-bottom: 5px;
height: 90px;
padding: 0;
border: solid 1px #F00;
}
/* Nav Bar */
div#navcontainer {
background-color: #996666;
border: 1px solid #F00;
margin-bottom: 5px;
}
div#navcontainer ul {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
div#navcontainer ul li {
display: inline;
margin-left: -4px;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: #000;
text-decoration: none;
}
div#navcontainer ul li a:hover
{
color: #FFF;
}
#active a {
}
/* Main Content */
#content {
background-color: #996666;
float: right;
width: 500px;
border: 1px solid #F00;
margin-bottom: 5px;
}
/* Sidebar Styles */
#sidebar {
background-color: #996666;
float: left;
width: 243px;
border: 1px solid #F00;
}
/* The Divs that house Calender and Archive */
#sidebar div {
background-color: #800040;
}
/* The 'Calender' and 'Archive' text */
#sidebar div h3 {
background-color: #FF0;
font-size: 85%;
text-align: center;
text-decoration: underline;
margin-top: -1px; /* Remove this line and the calender 'box' should drop a few pixels from the top */
}
/* Footer */
#footer {
background-color: #996666;
border: 1px solid #f00;
clear: both;
padding: 0;
margin: 0;
}
If someone could take a look that would be great. I've commented it up for you so you should be able to find the divs easily. The code has been verified. I'm not a great web designer by any stretch of the imagination. I'm learning as I go along so hopefully someone with more knowledge can help me out. I am simply trying to align a form (text field and submit button) to the bottom of its containing div. My method works with text, but not the form... it just stays up at the very top. The CSS: Code:
#search {
padding: 0 25px 0 0;
float: right;
}
#srchbox {
height: 118px;
position: relative;
}
#srchbox .form {
bottom: 0;
position: absolute;
}
The HTML: Code:
<div id="search">
<div id="srchbox">
<p class="form">
<form>
<input type="text"><input type="submit" value="Go">
</form>
</p>
</div>
</div>
I know that a form shouldn't be expected to act like text... but I don't know how to go about getting to align at the bottom. Thanks! Hello, how do you align vertically a radiobutton with label without using the <br> tag in css? Code: <fieldset>
<legend>Food</legend>
<input name="Password" type="radio" id="p" value="" checked="checked" />
<label>HTML</label> <br />
<input name="n1" type="radio" id="p" value="" />
<label>ASP</label> <br />
<input name="n1" type="radio" id="p" value="" />
<label>Donut</label> <br />
<input name="n1" type="radio" id="p" />
</fieldset>
i'm trying to vertically align a div box (the sign in area) so that it sits on top of this grey (soon to be) navigation bar...i've floated the box to the right...i want it to align to the bottom now...can anyone help me? ------> http:// www . u2station . com / index2.php and the stylesheet is at: http:// www . u2station . com /movabletype/mt-static/support/themes/u2station/u2station.css i've basically been trying to radically modify an existing theme that movable type (MT) publishing system created so i can alter it to my specs. any quick help with this simple css adjustment would be extremely helpful...(otherwise i'm thinking of reverting back to old fashioned tables as a last resort). I am aware of how difficult it is to vertically align text etc using pure css but what is hte best way to do it. For example i want to put some text slap bang into the middle of the screen. Thanks Hi. I've the following and I couldn't have the right div to vertically align when the left div have multiple lines. I tried vertical-align:middle on the right div and doesn't work. And this is driving me crazy. I hope anyone can help me. Thank you. <div style="width:800px"> <div style="width:730px;border:solid 1px red;float:left;"> LOTS OF CONTENT... MORE THAN 1 LINES </div> <div style="width:50px;float:right;border:solid 1px red;"> CLOSE LINK SHOULD BE HERE LATER </div> <div style="clear:both;"></div> </div> OK, I have three images: a top, middle, and bottom that need to align vertically. It should look like a typewriter with paper coming out when said and done. You can see what's wrong at csshore(dot)com Here is the css: #top { background:url(images/top.gif) no-repeat; background-position:50%; width: 617px; float:none; margin:0 auto; height: 55px; position: relative; } #container { background:url(images/middle.gif) repeat-y; background-position:center; width: 601px; padding:0; margin:0 auto; height: 100%; position: relative; min-height:600px; } #bottom { background:url(images/bottom.gif) no-repeat; background-position:50%; width: 800px; height:485px; margin:0 auto; position: relative; } .center { background-image:url(images/wood014.jpg); } And the html: <div id="top" class="center"></div> <div id="container" class="center">When in the course of human events, it becomes necessary for a people to through off the reigns of governement and create a new one. </div> <div id="bottom" class="center"></div> Ignore the failed attempt to quote the Declaration of Independence. I have tried everything I know (which admittedly is little) and I can't get them to align. Thanks in advance. What I'm wanting is for the links to be in the middle of the div vertically. Currently it's at the top. I've tried using vertical-align but that doesn't work. What am I missing here? asp.net firefox 3.6.11 CSS Code:
#headercont
{
width:auto;
height:100px;
text-align:center;
background-image:url('images/headbg.png');
}
#connav
{
vertical-align:middle;
}
#connav ul
{
position:relative;
list-style-type:none;
list-style-image:none;
}
#connav li
{
display:inline;
}
#connav ul li a
{
text-decoration:none;
margin: 4px;
padding: 5px 20px 5px 20px;
color:#ccff00;
background-color:#61a003;
}
HTML (inside the body tags) Code: <div id="headercont"> <div id="connav"> <ul > <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> If you go to the page http://electrojams.com/2010/05/03/n...le-some-chords/ you will see at the top of my post the "social sharing" icons... They are all embedded JavaScripts, but how can I align them? The Stumbleupon button is lower than the others... Greetings, I've set an anchor tag to display:block and have set the height to 80px. Unfortunately, it seems I am unable to move the text associated within the hyperlink to the middle (vertically) of the block. Any ideas on how this can be done? I am designing this page: theticketsguide.com/sample Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put vertical-align:middle for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding. Thanks, Brandon I have a div with blue background on the page below. It is is currently displaying horitzontally across the screen, with the images inside doing the same. I would like to vertically align it along the right side of the page, next to the text (which would be on the left). I'd also like the 'Property Search' within the blue, aligned below the photo of the house. Can anyone help me out? I'd like to KNOW how to do it and not have someone just send me an updated style sheet. Thanks. Styles attached. http://mulqueenconsulting.com/galese/ I have a custome bullet for an LI...my issue is...when this displays, the bullet displays at the top of the line height. Is there a way to adjust this so that the bullet appears in center of the line height? ok. Ive been trying to use CSS to style my page instead of tables. but I cant get stuff to line up right. basically I have a div spanning the whole width of a css box. inside that div I have 3 sections, one for left-aligned text, one for center aligned text and one for right aligned text. what I want is to display on the far left a left arrow image (for use as a button) and the word 'Previous'. then in the middle of the div, center aligned, I want to display the words 'select a different draw' and on the right hand side, right aligned I want the word 'Next' followed by my right arrow. EASY PEASY I thought. Well it has taken me an hour to realise that I have to set my parent element to position: relative for the left middle and right elements to use absolute without going to the very top of the page. so at least I now have them along in a line. What I have found is that the the text on the left and right is vertically aligned to the BOTTOM edge of the image and the text in the middle has been vertically aligned to the TOP of the image despite all 4 css classes being defined as vertical-align: middle; please tell me where I am going wrong, I'm loosing my marbles here! --html: Code: <div id="width-100"> <div id="third-left"> <img src="images/arrowleft.png" alt="foo"/> Previous </div> <div id="third-middle"> Select a different draw </div> <div id="third-right"> Next <img src="images/arrowright.png" alt="foo"/> </div> </div> --css: Code:
#third-left {
width: 30%;
text-align: left;
vertical-align: middle;
}
#third-middle {
position: absolute;
top: 0px;
margin: 0 35% 0 35%;
width: 30%;
vertical-align: middle;
text-align: center;
}
#third-right {
position: absolute;
top: 0px;
right: 0px;
width: 30%;
text-align: right;
vertical-align: middle;
}
#width-100 {
width: 100%;
position: relative;
vertical-align: middle;
background: white;
}
any thoughts? Thanks, Ben Hi! Is it possible to align vertically block elements in a fixed-height (unknown) container? If not, this is a serious shortcoming of the css model of placing objects on the screen. Thanks! Greetings! Maybe it's a newbie question, but I can't find out why form fields don't get vertically centered when rule height: 4em; line-height: 4em; is applied on them, they are inline elements, aren't they? In FF applied correctly, not so in IE. Please take a look at: http://147.32.113.143/biotest/Sourc..._LookUpTerm.php I used a form generator online that utilizes CSS and PHP. I am very comfortable with programming; but, I have never used CSS. I tried tweaking everything I could and no luck changing the CSS to left-align the entire form. I thought they used padding; but, I can't figure out where. Also, I removed the CSS to make sure the alignment wasn't part of the HTML - it is definitely embedded in the CSS as the form left-aligned (just not as attractive). Here is the CSS - apologies for the length. As you will undoubtedly see, this is my first post and I am not sure of your protocols for posting code. body { background:#fffff; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:small; margin:8px 0 16px; text-align:left; } #form_container { background:#fff; border:1px solid #ccc; margin:0 auto; text-align:left; width:640px; } #top { display:block; height:10px; margin:10px auto 0; width:650px; } #footer { width:640px; clear:both; color:#999999; text-align:left; width:640px; padding-bottom: 15px; font-size: 85%; } #footer a{ color:#999999; text-decoration: none; border-bottom: 1px dotted #999999; } #bottom { display:block; height:10px; margin:0 auto; width:650px; } form.appnitro { margin:0px 0px 0; padding:0 0 20px; } There is much more CSS; but, I believe the issue is isolated to this section. |
|||||||