I want to align 2 sections next to each other. One has text(heading) and the text will be changing in length. one more section has a image.
My issue is when i make the screen size smaller, the second section is coming down.
Tried display:table-row; display:table; display:table-cell; nothing helps. the second div still comes down.
Please Help.
-Thanks in advance.
This is my code:
HTML
<h2><span>BE PREPARED PREPARED</span><img src="http://localhost/safesteps/wp-content/uploads/2014/04/before_bg_r.png" alt="before_bg_r"/></h2>
CSS
.inner_berfore h2{
display:table-row;
border-top: 4px solid #767676;
position: relative;
float:left;
width:98%;
}
.inner_berfore h2 span{
background:#767676;
display:table-cell;
font-family: 'arial-black';
text-transform:uppercase;
padding-left:16px;
font-size:22px;
line-height:40px;
color:#FFF;
float:left;
}
.inner_berfore h2 img{
display:table-cell;
float:left;
height:40px;
}
For static Text:
Try : http://jsfiddle.net/lotusgodkk/anK6u/6/
div{display:inline-block;width:49%;vertical-align:top;}
div img{max-width:100%}
HTML:
<div>Text</div>
<div><img src="src" /></div>
you can assign different width as per your design
For dynamic text:
http://jsfiddle.net/lotusgodkk/anK6u/8/
CSS:
.table{display:table;}
.table div{display:table-cell;vertical-align:top;}
.table div img{max-width:100%}
HTML:
<div class="table">
<div>Hellodfgsdfgsdfghsdfhsdfhdsfhdfhdsfhsdfhsdh</div>
<div>
<img src="http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg" />
</div>
</div>
I'm using a bit of javascript to create a dropdown that appears when an image is clicked. Currently the initial image is centered, but the drop down is appearing at the left of the frame... and I'm stumped. Help would be greatly appreciated. My code is below:
<div align="center" class="dropdown">
<img alt="Select Your District Here" onclick="showMenu()" src="images/buttons/select_district.png" style="width: 200px; height: 36px;" />
<ul aria-labelledby="dLabel" class="dropdown-menu" id="district-dd2" onmouseout="hideMenu()" role="menu" style="display:none">
<li>
Arbuckle</li>
<li>
Country Estates</li>
<li>
Strawberry</li>
<li>
Walnut Ranch</li>
</ul>
<script type="text/javascript">
function showMenu(){
document.getElementById("district-dd2").style.display="block";
}
function hideMenu(){
document.getElementById("district-dd2").style.display="none";
}
</script></div>
Site can be seen here: http://www.waterutilitymanagementservices.com/deloro/water-districts.html
EDIT: CSS for dropdown-menu added. FYI, this site is using joomla beez template with bootstrap, with css heavily modified. the code below comes from bootstrap.css
.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 20px;
padding: 3px 20px;
white-space: nowrap;
}
EDIT 2: More CSS - After scouring all my css files, it looks like all the references to dropdowns are in bootstrap.css. Rather than past all of them here (which would be long), i posted the CSS as a txt file here: http://www.waterutilitymanagementservices.com/boostrap.txt
The IE8 documentation says it supports min-width, but it doesn't seem to work for me.
The html I want to be a minimum width is in table cells.
I saw another question here which suggested adding a 1-pixel height div to each cell, with a width setting, but that doesn't work - IE renders it as 18 pixels high, for some reason.
Here is the html code:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
table.keyboard div.key {
height: 50px;
font-size:50px;
border: 5px outset gray;
min-width: 60px;
text-align: center;
}
table.keyboard div.spc {
height: 1px;
width: 60px;
background-color: green;
}
table.keyboard td:hover {
background-color: lightblue;
}
table.keyboard {
border: 3px inset blue;
}
</style>
</head>
<body>
<div id="body">
<div>Here is some stuff</div>
<table class='keyboard'>
<tbody>
<tr>
<td><div class='key'>1</div><div class='spc'></div></td>
<td><div class='key'>2</div><div class='spc'></div></td>
<td><div class='key'>3</div><div class='spc'></div></td>
<td><div class='key'>4</div><div class='spc'></div></td>
<td><div class='key'>5</div><div class='spc'></div></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The "spc" div appears 18 px high!
Of course, if min-width worked, I wouldn't need the div...
<table class='keyboard'>
<tbody>
<tr>
<td><div class='key'>1</div></td>
<td><div class='key'>2</div></td>
<td><div class='key'>3</div></td>
<td><div class='key'>4</div></td>
<td><div class='key'>5</div></td>
</tr>
</tbody>
</table>
Any clues?
Just to make this easier, I have put 3 different versions of this code on my website.
http://jsfiddle.net/3htmA/
IE8. your code works perfect.
The HTML TABLE spec uses COL to define column widths. See the following spec: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4
Here's an example of how it's used:
http://www.htmldog.com/guides/htmladvanced/tables/
Min-width on table cells works differently than block-level elements. Table cells are controlled on the column level, not on the individual cell level. If a given cell size increases or decreases, the entire column will be affected, unless explicitly controlled by the tag.
Try this:
table.keyboard .key
{
min-width:60px;
width: expression(this.width < 60 ? 60: true);
}
This width expressions is an alternative for min-width, it supposed to be a workaround for older versions of IE.
I think your problem is that your column is determining the width of the element, not the div.
EDIT:
Also check if your browser is not in Compatibility mode.
I created Ajax Calender Extender as a user control and using the same in various pages. My problem with the calender user control is, When I click on the Next and Previous buttons in the calender It is not navigating previous month or next month.
AJAX version is : 4.1.40412.2
AJAX Calendar CSS :
.ajax_calendar
{
position: relative;
left: 0px !important;
top: 0px !important;
visibility: visible;
display: block;
background-color: Red;
}
.ajax_calendar iframe
{
left: 0px !important;
top: 0px !important;
}
Here is my user Control is :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="UCCalender.ascx.cs"
Inherits="test.Web.Pages.UserControls.UCCalender" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControl" %>
<div style="position:relative;border:solid 1px red;">
<asp:TextBox ID="txtDate" MaxLength="10" CssClass="txtBox medium" ToolTip="DD/MM/YYYY"
Style="width: 85px;" Font-Size="11px" runat="server"></asp:TextBox>
<asp:ImageButton ImageUrl="~/Resources/Images/calendar.gif" ID="imgCalender" runat="Server"
BorderWidth="0" ImageAlign="absmiddle" />
<ajaxControl:CalendarExtender ID="AjaxCalenderCtrl" runat="server" Format="dd/MM/yyyy" PopupPosition ="TopLeft"
TargetControlID="txtDate" FirstDayOfWeek="Sunday" PopupButtonID="imgCalender">
</ajaxControl:CalendarExtender>
<ajaxControl:TextBoxWatermarkExtender WatermarkCssClass="watermark" ID="txtWaterMarkDate"
runat="server" WatermarkText="DD/MM/YYYY" TargetControlID="txtDate">
</ajaxControl:TextBoxWatermarkExtender>
<asp:RegularExpressionValidator ID="regexpvalEndDateEdit" ErrorMessage="!" ValidationExpression="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d"
ControlToValidate="txtDate" runat="server"></asp:RegularExpressionValidator>
</div>
And I am using the same UserControl in the pages in this way:
<table id="inputDetails" style="padding: 0px; width: 700px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 198px; position: relative" align="left">
<asp:Label ID="lblBeginning" runat="server" Text="Beginning :" Style="margin-left: 10px;"></asp:Label>
<asp:TextBox ID="tbxBeginCalendar" TabIndex="3" runat="server" Style="width: 85px;" Font-Size="11px"></asp:TextBox>
<asp:ImageButton ID="BeginCal" runat="server" ImageUrl= "~/Resources/Images/calendar.gif" />
<uc1:UCCalender ID="UCCalStartDate" runat="server" />
</td>
</table>
Please provide the solution for this post.
This problem happens when you browse the CalendarExtender in IE8. You need to add the following CSS class to have the problem solved:
.MyCalendar .ajax__calendar_title
{
border: none; /* Fixes the "previous" and "next" buttons in the popup title */
}
This is explained here: http://ajaxcontroltoolkit.codeplex.com/workitem/22894
I have just come across this same issue. It was seemingly being caused because I had applied position:relative to the parent element.
Adding this this CSS fixed the issue for me:
.ajax__calendar_prev, .ajax__calendar_next{z-index:1;}
Hope that helps!
Due to current limitations on getting DIV tags to work well across browser platforms for the particular liquid layout I desire, I have opted to use a combination of Tables and DIVs for layout. That being said, a couple of issues remain.
The FIRST issue is that in Firefox, my table row height for my footer is being rendered differently than it is being rendered in IE when using a table with a height of 100%. What happens is that in Firefox the footer row for the table has a height that is greater than the height specified for the table row. This, in turn, throws off my footer layout.
Here is the code for the page:
<html>
<head>
<meta NAME="DESCRIPTION" CONTENT="Cold Fusion Applications and Development">
<meta NAME="keywords" CONTENT="cold fusion, coldfusion, sql server, graphic design, houston, texas, tx, web developer, web development, e-commerce, survey, surveys, web applications, php, mysql, access, foxpro, sql, perl, shopping cart, web programming, macromedia, webmaster, html, cfml, xml, 77057, cfware, cfware.com, www.cfware.com, hosting, dhtml, dynamic html, web programmer, graphic designer, website, resume">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<!-- BODY -->
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
<!--TABLE I -->
<table class="fullheight" width="100%" height="100%" min-height="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr><td height="116" align="center" valign="top">
<!-- HEADER -->
<div class="header">
<div class="lfc">Cornerstone</div>
<div class="rfl"><img src="c4sqlogo.gif" width="295" height="68"></div>
<div class="lf4">Foursquare</div>
</div>
<div class="spacer"></div>
<!-- HEADER END -->
</td>
</tr>
<tr><td align="center" valign="center" bgcolor="#FFFFFF">
<!-- CONTENT -->
<div class="content">
<table class="fullheight" width="100%" height="100%">
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td align="center" valign="middle">
<h1 class="font-black">Cornerstone Foursquare Church</h1>
<br>
<h2>7791 Hillbarn Dr. Houston, TX 77040</h2>
<br>
<h2>(713) 856 - 7773</h2>
<br>
<br>
<h3>Service Times:<br>Sunday Morning Worship 10:30AM<br>Sunday Evening Bible Study 6:00PM
<br>Wednesday Evening Bible Study and Prayer 7:00PM</h3>
</td>
<td></td>
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
</table>
</div>
<!-- CONTENT END -->
</td>
</tr>
<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
<!-- FOOTER -->
<div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
<div class="footer"><div class="footertext"> w w w . c 4 s q . o r g </div></div>
<!-- FOOTER END -->
</td>
</tr>
</table>
<!-- TABLE I END -->
</body>
</html>
And here is the code for the sytle sheet:
html, body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: :#a02f1d;
height: 100%;
width: 100%;
}
a {
color: #ffffff;
text-decoration: none;
font-size: 12;
font-weight: 500;
}
.header {
color: #ff0000;
margin: 0 auto;
width: 760px;
height: 116px;
background-image: url(stripe.gif);
background-repeat: repeat-x;
}
.fullheight {
height:100%;}
.lf4 {
float: left;
margin-top: 0px;
clear: left;
width: 240px;
margin-left: 190px;
color: #a02f1d;
font-size: 26px;
font-weight: semi-bold;
font-style: italic;
}
.lfc {
float: left;
margin-top: 8px;
margin-left: 20px;
color: #a02f1d;
font-size: 48px;
font-weight: semi-bold;
font-style: italic;
}
.rfl {
float: right;
margin-top: 24px;
margin-right: 20px;
clear: right;
}
.content {
margin: 0 auto;
width: 760px;
overflow: hidden;
color: :#a02f1d;
}
.spacer {
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 4px;
overflow: hidden;
}
.clearspacer {
background-color:#000000;
}
.footer {
color: #ffffff;
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 30px;
clear: both;
}
.footertext {
color:#ffffff;
margin-top: 6px;
font-size: 12px;
}
The SECOND issue has to do with modifying the existing layout so that there is a centered vertical area of 760px in width that displays in a shade of color different from the surrounding viewport. The primary difficulty is that in order to get my footer to stick to the bottom in both browsers and resize with the viewport, I had to re-adopt a table layout. The current strategy, however, is to use as few nests as possible in order to benefit from the speed and clarity from using DIVs. I would opt to use a DIV layout to the exclusion of a TABLE layout if it were not for the apparently, currently insoluble problem of getting a working sticky-footer to work with a DIV liquid layout.
I know this is quite unrelated, but I recommend that you use the w3c validator to validate your HTML once in a while.
A couple suggestions:
Add a doctype - if use use the right one you can get IE to standards mode rather than quirks mode http://www.quirksmode.org/css/quirksmode.html, so behaviour will be more consistent between IE and other browsers.
As suggested by K4emic - validate your markup.
Add a css reset to zero default margins and paddings, a good starting point here http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/.
You will find that these things will make chasing down layout bugs a lot easier. Otherwise, you just won't know where to start, is it your css, your html, the default browser stylings, the rendering mode of IE......?
As the other responders pointed out you first have to make sure that your document is well formed. That is, it must conform to a DTD. I will point out one issue that is easy to spot:
<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
<!-- FOOTER -->
<div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
<div class="footer"><div class="footertext"> w w w . c 4 s q . o r g </div></div>
<!-- FOOTER END -->
</td>
</tr>
</table>
In this snippet you can see that your
<tfoot>
element is unclosed. It should contain
<tr>
but that is missing.
These small errors are probably causing the inconsistent behavior that you are witnessing. After they have been corrected if you are still getting the behavior then you can look at the browser differences. Some HTML editor like Frontpage and Dreamweaver can be set to out put code that conforms to a DTD and highlight areas that do not conform. I would recommend using one.