|
CSS - Help With Vertical Alignment In Ie
Hi, I have navigation links at the top of a blog in a header file, and cannot get them to align vertically for both firefox and IE. I've tried everything I can think of (using extra <br>, <p>, vertical-align: middle, changing margins, changing padding, etc) but cannot find a solution that aligns them vertically in both browsers. Any help is appreciated. Here is the code, which works in firefox:
Code: <body> <!-- page header --> <div id="header" "border: 0px solid; margin:0 auto; "> <a href="http://www.website.com/blog/"><IMG SRC="http://www.website.com/images/logo.png" BORDER=0 width="435" height="92" ALT="logo" align="left"></a> </div> <div style="clear: both; margin:0 auto; "></div> <div style="background-image: url(http://www.website.com/images/sidebar_center2.jpg); border: #333333 2px solid; width: 900px; height: 60px; padding: 6px; margin: 0px auto; font-size: 17px; text-align: center; "> <p><font face="calibri,verdana" color="#ffffff"> <a href="http://www.website.com/"><font color="#ffffff">Home</font></a> | <a href="http://www.website.com/tips-1.html"><font color="#ffffff">ilnk 1</font></a> | <a href="http://www.website.com/tips-2.html"><font color="#ffffff">link 2</font></a> | <a href="http://www.website.com/tips-3.html"><font color="#ffffff">link 3</font></a> | <a href="http://www.website.com/tips-4.html"><font color="#ffffff">link 4</font></a> | </font></p> </div> <!-- begin wrapper divs --> <div id="content"> Similar TutorialsHi-- I'm developing a 3-column site for a customer and was asked to make the first two columns align vertically to 385px. So the bottoms of all the text will be at 385px. The text is dynamic, so I have no way of knowing how tall the blocks will be. The first column will be one or more paragraphs of text and the second will be a bulleted list. Any help is greatly appreciated! :grimey Hi, there. Having looked around the forum for a CSS method of vertically centering an IMG within a DIV, I found the following code which works perfectly in IE but not FF : #full-image { float: right; width: 380px; height: 380px; text-align: center; line-height: 0px; background-color: #F0F5F7; margin-top: 5px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; } #full-image img { margin-top: expression(( 380 - this.height ) / 2); } That's right - works in IE but not FF, which is most unusual! Any ideas how to make this work cross-browser? Thanks in advance for any assistance. I'm creating a tabbed menu system to navigate my site, which is in a three column layout wrapped in the centre fluid wrapper. Due to the way I'm doing the menu I need to vertically align the menu to the bottom of the DIV it is in. The menu is an unordered list with the styling stripped out and replaced so that the items are arranged horizontally. Yet no matter what I do they either align to the top or the centre, worse while searching for an answer I only seem to be able to find people who want centring. Code wise: html4strict Code: Original - html4strict Code <body> <div id="wrapper"> <div id="left"></div> <div id="centre" class="index"></div> <div id="nav"> <ul id="tabnav"> <li><a href="index.php" class="index">Contents</a></li> <li><a href="wip.php" class="wip">In Progress</a></li> <li><a href="c-shorts.php" class="shorts">Short Stories</a></li> <li><a href="fan-fics.php" class="fanfics">Fan Fics</a></li> <li><a href="contact.php" class="contact">Contact</a></li> <li><a href="info.php" class="info">Information</a></li> </ul> </div> </div> </body>
CSS: css Code: Original - css Code #wrapper { background-color:transparent; position:absolute; left:4em; top:1em; bottom:4em; right:4em; min-height:50em; z-index:1; } #left { background-image:url(/fiction/images/left-spiral.png); background-repeat:repeat-y; background-position:right 4px; background-color:transparent; position:absolute; left:0em; top:0em; width:2em; height:100%; z-index:2; } #centre { background-image:url(/fiction/images/right-spiral.png); background-position:0px 4px; background-repeat:repeat-y; background-color:#FCFFC4; position:absolute; left:2em; right:3em; top:0px; height:100%; z-index:4; } /* --- Navigation Elements --- */ #nav { background-color:#FCFFC4; -moz-transform: rotate(90deg); -moz-transform-origin: top left; position:absolute; right:-50em; top:0em; height:3em; min-width:50em; z-index:3; } #nav ul#tabnav { list-style-type:none; margin:0; padding-left:40px; height:2em; } #nav ul#tabnav li { font-variant:small-caps; float:left; /* height:21px; */ background-color:transparent; } #nav ul#tabnav a:link, #nav ul#tabnav a:visited { display:block; color:#000; background-color:#FCFFC4; text-decoration:none; margin-right:12px; padding:3px 6px 2px 6px; /* T R B L */ -moz-border-radius:10px 10px 0 0; /* TL TR BR BL */ } #nav ul#tabnav a:hover { /* background-color:#900; */ color:#666; }
(Not sure how much of that is needed to answer the question.) (Oh and many of the design elements colors etc are still in that due to testing stuff not because I actually need them.) Which is how do I get that dang thing aligned to the bottom/side of that box? Hi guys, I'm still a beginner at CSS and I have run into a problem... In my footer, I want all the text to be aligned vertically and horizontally in the middle. eg. ------------------div-------------------- ............. text text text text text ------------------div-------------------- Can you please show me what text I would need to put in the #footer? My footer is 900px wide and 120px high. I am adding more than one line of text. If there's any more info u need from me to solve this problem then please ask. Any help will be great. Thank you very much Hello all. Suppose I have the following: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* footer styles */
#footer { clear: both; }
#footer ul {
width: 544px;
list-style-type: none;
display: block;
} /* end #footer ul */
#footer ul li {
float: left;
background-color: #003366;
} /* end #footer ul li */
</style>
</head>
<body>
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><img src="images/foot_nav2.gif" alt="" id="footer_image" /></li>
</ul>
</div>
</body>
</html>
Now suppose that the image is 50px high. What I would like is to get the links to align at the bottom of the instead instead of at the top. I tried a vertical-align: bottom but that didn't seem to help the situation any. I have what I think is an easy question for you guys. I have an absolute positioned element and I gave it a height of 100px. I want to know how to make it so that any text that I enter goes to the bottom of this element. By default, the text appears at the top left. I tried vertical-align with all of its values, but none of them worked. The only way I could get it to appear the way I wanted was to use line-height. Using line-height I am able to get the text where I want it, but it doesn't seem like this is the way it should be done. Is there a way in which you don't have to specify a specific line-height value to get the where you want and it make it so all text appears at the bottom instead of the top? Here is what it looks like, and the CSS is below. Thanks. Code:
<html><head><title>test</title>
<style type="text/css">
body {
background-color: white;
}
#top {
position: absolute;
left: 20%;
right: 20%;
top: 2.5%;
height: 100px;
color: white;
background-color: rgb(20%,20%,20%);
border: 2px solid red;
line-height: 180px;
}
</style>
<body>
<div id="top">
this is a test
</div>
</body>
</html>
Hi, I am having trouble with divs inside tables cells. I have td's in a row, and I want all the objects within these cells to be aligned at the top of the cells. However, the objects within the cells with lesser content are vertically aligning to the central level of the cell with the most content. Please check: www dot incorrectlyprogrammed dot org/CRC/ to see what I mean. This is driving me mad. Any help appreciated!! So I have a calendar that I created in PHP and I'm displaying it in a table and I'm having trouble aligning the title and the two image arrows that go on either side of it. I'm trying to align everything vertically in the middle of the row and it seems that in Firefox, the Title is lower than the two arrows, but in Chrome and IE it seems to be right in the middle where it should. How do I solve this? Code: <table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cal_left_arrow">
<img src="/images/left_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $prevYear; ?>, <?php echo $prevMonth; ?>);" />
</td>
<td class="cal_title" colspan="5" valign="middle">
<?php echo date('F', mktime(0,0,0,$month,1,$year)).' '.$year; ?>
</td>
<td class="cal_right_arrow">
<img src="/images/right_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $nextYear; ?>, <?php echo $nextMonth; ?>);" />
</td>
</tr>
Code:
#event_calendar {
margin-top:50px;
margin-bottom:20px;
float:left;
height:auto;
width:245px;
}
.calHeaderDays {
font: bold 10px Arial, Helvetica, sans-serif;
background-color: #3F4C6B;
text-align:center;
height: 20px;
width:245px;
color: white;
overflow:visible;
/*border: 1px solid #3F4C6B;*/
}
.cal_title {
text-align: center;
font: bold 16px Arial, Helvetica, sans-serif;
color: #C79810;
height:40px;
vertical-align:middle;
}
.cal_left_arrow {
text-align:right;
height:40px;
vertical-align:middle;
}
.cal_right_arrow {
text-align:left;
height:40px;
vertical-align:middle;
}
table {
width: 245px;
font-family: Arial, Helvetica, sans-serif;
background-color: white;
border-collapse: collapse;
}
table img {
cursor: pointer;
cursor: hand;
}
.calToday {
height: 28px;
vertical-align: middle;
background-color: #3F4C6B;
color: #fff;
font-weight:bold;
text-align:center;
font-size: 10px;
}
.slDay {
height: 28px;
font-size: 10px;
width: 14%;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
text-align:center;
}
ok the page is http://v2.seductionslingerie.biz/ and the top buttons (home, etc...) will not change their bg color on hover and the text inside the div will not valign to the bottom. please help! here is the html/css code below CSS: Code: div.top_buttons {
background-image:url(../images/top_button_bg.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-color:#660000;
border:1px #660000 solid;
height:50px;
vertical-align:bottom;
padding:2px;
color:#FF99FF;
font-family:"BankGothic Lt BT", Verdana, Arial;
font-family:14px;
font-weight:bold;
cursor:hand;
cursor:pointer;
}
div.top_buttons:hover {
background-color:#950000;
color:#F5F1F2;
}
HTML: Code: <div class="top_buttons">HOME</div> Any and all help is much appreviated! I am already used to tableless design but I have not yet solved the way to vertically center texts the way a cell of a table does by default. How do you solve this problem?. Obviously I look for a simple CSS style to manage this need. Thanks! Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. /*Left Links*/ #leftcol{ float: left; display: block; width: 200px; /*Width of left column*/ } ul#leftcol{ list-style-type: none; padding: 0.5em 0 1em 0; margin: 0; } li#leftcol{ margin: 0; padding: 0; } #leftcol a, #leftcol a:link, #nav a:visited { float: left; display: block; position:relative; width: 165px; height: 1%; padding: 8px 5px 8px 30px; margin: 0; font: normal 11px Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-decoration:none; background-image:url(images/sidelinks_back.jpg); border-bottom: 1px solid #FFFFFF; } #leftcol a:hover { background-position: 0 -45px; color: #0C0F1B; } #leftcol img { border-bottom: 1px solid #FFFFFF; } <!--LEFT COLUMN --> <ul id="leftcol" ><li><img src="images/sidelinks_top.jpg" alt="Our Services" width="200" height="40" border="0" /></li> <li><a href="**">Collision Repair</a></li> <li><a href="**" >Heavy Frame Repairs</a></li> <li><a href="**">Truck Body Repairs</a></li> <li><a href="**" >Sprinter Repair Specialists</a></li> <li><a href="**">Commercial Van Repairs</a></li> <li><a href="**">Painting & Decaling</a></li> <li><a href="**">Custom Truck Body Services</a></li> <li><a href="**">Morgan Body Parts & Service</a></li> <li><img src="images/sidelinks_btm.gif" alt=" " width="200" height="10" border="0" /></li ></ul> 2 problems: 1) In IE and Firefox: gap between <img> and <li> 2) In IE6, a gap appears between all my <li>tags What to do? Do I have to put my <ul> in a <div> and keep my <img> out of the <ul>? I'm trying to get vertical text in a menu ie h o m e - l i n k - And so on how can this be done thanks Hi I want to know if it is possible to vertical align the text in these div tags and how it's done. 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>
<style type="text/css" media="all">
#1 {width:15%}
#2 {width:20%}
#3 {width:25%}
#4 {width:20%}
#5 {width:20%}
#1,#2,#3,#4,#5 {
float:left;
overflow:hidden;
display:inline-block;
height:128px;
text-align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="1"><a href="#"><img name="" src="" width="100" height="125" alt="" /></a></div>
<div id="2"><a href="#">fffffffffffggfgf fg gd</a></div>
<div id="3"><a href="#"> dfg dfg dg d</a></div>
<div id="4"><a href="#"> dgd gd d</a></div>
<div id="5"><a href="#"> gdf gdg ddg</a></div>
</body>
</html>
Greets, dabomb_gent I have a div that is 60px high. I want text to be centered vertically in that box. I know it is easy to do with tables, but how do you do it with css and divs? i tried using vertical-align, but that didn't seem to work. any ideas? hi, http://cyrusnetworkslive.com/products.php?sub_category_id=ph100ce10&brand_id=mo1 How can I get rid of vertical scrollbar, I want only the horizantal one. I am doing something like the in my css. Code:
<style type="text/css">
div
{
background-color:#FFFFFF;
width:950px;
overflow: auto
}
</style>
Ok...I am dabbling with CSS and I was wondering if there was anyway to specify your text to run bottom to top instead of left to right in a table cell. Anyone know if it can be done? I'm trying to put a line of text on the bottom of a box. Code: <div style="width:500px;height:500px;background:black;vertical-align:bottom;"> This is a black box </div> <div style="width:500px;height:500px;background:black;vertical-align:baseline;"> This is a black box </div> What the above code displays: Code: ------------------------- | This is a black box | | | | | | | | | | | | | | | ------------------------- What I want it to display: Code: ------------------------- | | | | | | | | | | | | | | | This is a black box | ------------------------- ive searched google throughout and im blank on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
div
{
width:70%;
margin:0 auto;
height:20em;
border:.4em solid black;
}
p
{
border:.4em solid black;
margin:0 auto;
line-height:8em;
display:inline;
width:55%;
height:8em;
}
span
{
display:block;
color:red;
font-size:2em;
width:60%;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div>
<p>
<span>X</span>
</p>
</div>
</body>
</html>
I need the outer box to be vertiacllly aligned within the viewport, the other boxes vertically aligned within each other. does that make sense? I thought u could do it with line-height but i can't get it working. fresh eyes? Edit: New code there. Anyone knows of a method to cause a vertical line to come all the way down ? Currently it stops where the text stops. but i want it to go all the way to the buttom of the document regardless of the text. (right now i use box border on one side) Thanks! |
|||||||