I know there are many variations of this question posted, but none I've found quite provide an answer that works for this case.
I basically have two left floated divs. Inside those two divs are div headers and tabled content.
I want the Div headers (Hour/Minute) to stretch to the width of the tabled content, but they only do this in FF and Chrome, not IE7. IE7 is my works official browser so the one I need it to work with the most.
Here is the CSS:
#ui-timepicker-div { padding:0.2em; }
#ui-timepicker-hours { float:left; }
#ui-timepicker-minutes { margin:0 0 0 0.2em; float:left; }
.ui-timepicker .ui-timepicker-header { padding:0.2em 0; }
.ui-timepicker .ui-timepicker-title { line-height:1.8em; text-align:center; }
.ui-timepicker table { margin:0.15em 0 0 0; font-size:.9em; border-collapse:collapse; }
.ui-timepicker td { padding:1px; width:2.2em; }
.ui-timepicker th, .ui-timepicker td { border:0; }
.ui-timepicker td a {
display:block;
padding:0.2em 0.3em 0.2em 0.5em;
text-align:right;
text-decoration:none;
}
Here is the HTML (did not include tabled content):
<div style="position: absolute; top: 252.667px; left: 648px; z-index: 1; display: none;" class="ui-timepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-timepicker-div">
<div id="ui-timepicker-hours">
<div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<div class="ui-timepicker-title">Hour</div>
</div>
<table class="ui-timepicker">
</table>
</div>
<div id="ui-timepicker-minutes">
<div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<div class="ui-timepicker-title">Minutes</div>
</div>
<table class="ui-timepicker">
</table>
</div>
</div>
Sorry to answer my own question, but after literally hours on this I just found out that by removing the 'ui-helper-clearfix' class from the ui-timepicker-header, all now works well in IE7 and FF
Related
I'm trying to get the shoutbox on www.talkjesus.com (vBulletin forum) to float left while the verse of the day (orange) to float on the very right side of the shoutbox. I've tried so many variations but it's not working, I'm stuck. Your help appreciated.
The forumhome template code I'm using now is:
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3>
<div style="text-align: center; line-height: 0" class="blockrow">
<div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div>
<div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div>
</div>
</div>
</div>
<br />
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3>
<div>
<div style="font-size:16px; line-height:28px; padding:10px; color: #797979">
<script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&type=js2&tw=auto&tbg=ffffff&bw=0&bc=000000&ta=L&tc=43A6DF&tf=Open Sans&ts=14&ty=B&va=L&vc=43A6DF&vf=Open Sans&vs=12&tt=3&trn=NASB"></script>
</div>
</div>
</div>
</div>
relevant CSS code...
/* Auto-clearing of floats */
.floatcontainer:after,
.formcontrols .blockrow:after,
dl.stats:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:inline-block;
font-weight:normal;
}
/* IE-Mac hide \*/
* html .floatcontainer,
.formcontrols .blockrow,
dl.stats {
height:1%;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:block;
}
.blockrow {
padding:12px;
}
.blocksubhead {
padding:12px;
}
.blockhead_info, .blocksubhead_info {
float:right;
font-weight:normal;
}
Have you tried applying the float property to the .floatcontainer element?
.floatcontainer {
width: 50%;
float: left;
}
Setting the width property will be necessary here because the output of the script in the second .floatcontainer block adds a div element to the document which has a width of 100%. Take a look at the output here: http://goo.gl/Bw7iaD (see inline styles of first element). This makes the verse box span full-width unless it's parent container has a specified width.
Here is an example of the working code: http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe
I'm a little new to coding and I've found these boards really helpful over the last few weeks but I've come across a problem that other posts couldn't help me with, so here goes:
I have a number of divs within one rectangle div, 880px across. The left aligned divs are working perfectly but the floated right div, a video 560px across called #shopvid_2013_01 just won't line up right.
I want it so that the #shopvid_2013_01 div lines up exactly beside the #shop_13_01 div, but instead when I preview it on Firefox it seems to be right underneath another div I have and won't move no matter what margin-top or padding-top I use. I tried adding display:block and overflow:hidden as I read on other posts that might help, but to no avail.
Any help would be appreciated!
I've included my relevant html and css:
HTML
<div id="shop_13">
<div id="shop_13_01">
<div id="shop_13_text_01">
<div id="shop_smlheading">
<p><b>West Cork Rally 2013</b></p>
</div>
<div id="shop_p_13">
<p>Our highlights video from a cracking weekend in Clonakilty.</p>
</div>
<div id="buy_shop_01">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="6D49SM33FHD8U">
<input type="image" src="01 Images/buy_now_price.png" border="0" name="submit" alt="Buy Now">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
</div>
<div class="shopvid_2013_01">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ozXu2-Zf5B0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
#shop_13 {
width:880px;
}
#shop_13_01 {
width: 320px;
height:315px;
margin:30px 0 0 0;
background-color:#E9E9E9;
float:left;
}
#shop_13_text_01 {
font-family: "Arial", sans-serif;
width:240px;
font-size:13px;
line-height:1.4em;
}
#shop_smlheading {
padding: 5px 0 0 20px;
font-size:15px;
}
#shop_p_13 {
font-family: "Arial", sans-serif;
width:240px;
font-size:13px;
line-height:1.4em;
margin: -15px 0 0 20px;
float:left;
}
#buy_shop_01 {
padding: 100px 0 0 0;
float:left;
}
#shopvid_2013_01 {
width: 560px;
height:315px;
float: right;
margin-top: 30px;
display:block;
overflow:hidden;
}
It seems that you are referencing shopvid_2013_01 as an ID rather than a CLASS. Try this:
.shopvid_2013_01 {
width: 560px;
height:315px;
float: right;
margin-top: 30px;
display:block;
overflow:hidden;
}
http://jsfiddle.net/gGtPK/
I have a top nav that extends across the page
Within that top nav I have various elements
two that must align left
one that must align right
The nav is fluid the elements are fixed widths
Do not want the elements to wrap when the browser window is minimized
Needs to work in IE6 on up due to high Chinese audience.
See example here:
http://jsfiddle.net/4SUwg/
<div id="header">
<div id="headerContent">
<div class="search-list"> Search List </div>
<div class="social-buttons"> Social </div>
<div class="signin"> Login Drop Down </div>
</div>
</div>
I would like the div elements within the nav to not wrap. I searched around on stack and could find answers that come close but nothing that completely addressed the issue. My need to have the div element aligned right complicates matters. Must work in all browsers, especially IE's.
Thanks all for your help in advance!!!
Use SPAN .. It's INLINE and not BLOCK ??
<div id="header">
<div id="headerContent">
<span class="search-list"> Search List </span>
<span class="social-buttons"> Social </span>
<span class="signin"> Login Drop Down </span>
</div>
</div>
And your CSS, remove floats
<style>
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:150px;
background:#039;
}
.social-buttons {
width:150px;
background:#060;
}
.signin {
width:200px;
background:#F00;
}
You want a fluid layout but the most important rule of a fluid layout is not to set a definite width of elements but you have set the width.
The CSS have a <style> tag, which is not required, probably you put it by mistake.
I have set the width of divs inside headerContent in percentage value. The CSS is
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:28%;
float:left;
background:#039;
}
.social-buttons {
width:28%;
float:left;
background:#060;
}
.signin {
width:28%;
float:right;
background:#F00;
}
Just changed the width value and on my browser it looked fine, better than the before version. Here's a fiddle http://jsfiddle.net/DeepakKamat/s52Hn/8/
I found a solution that works in all browsers, specifically IE6 on up since that was a requirement for this project. If you have something better that accomplishes the same thing please post! My sincere thanks to everyone who answered/helped.
<div id="header2">
<table id="headerContent2">
<tr>
<td id="left" valign="top">
<div id="leftWrapper">
<div class="search-list2">Search List</div>
<div class="social-buttons2">Social Buttons</div>
</div>
</td>
<td id="middle"> </td>
<td id="right" valign="top">
<div class="signin2">Login Drop Down</div>
</td>
</tr>
</table>
</div>
<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}
#headerContent2 {
width:100%;
}
#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}
.search-list2 {
width:150px;
float:left;
background:#039;
}
.social-buttons2 {
width:200px;
float:left;
background:#060;
}
.signin2 {
background:#F00;
float:right;
width:400px;
}
#leftWrapper {
width:400px;
}
#middle {
width:100%;
}
</style>
See Demo of it working here. Copy the code and try it out in all the IE's since JSfiddle does not work in all IE's.
http://jsfiddle.net/GtXKE/
Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
(yes they're all image buttons for good reason)
but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?
HTML
<div id="top">
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
</div>
CSS
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Init function (runs on $(document).ready())
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thanks
Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...
Then, for each of the link/buttons give them:
position:relative;display:inline-block;float:left;
if you want them centered, then in the #header use text-align:center; and remove float:left from the links
So the container will be fixed, but the buttons inside will be relative and not overlap.
hope this helps!
very crude example
http://jsfiddle.net/6SCTZ/
<div id="header">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
</div>
CSS:
#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }
.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
Just put whatever elements need to be fixed within a container element (in this case, I'll use a div with an ID of "top_fixed").
Consider the following html:
<div id='top_fixed'>
<a href='http://google.com'>Google</a>
<a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>
Now, the following CSS:
a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}
DEMO: http://jsfiddle.net/mHKNc/1/
I know there are several posts about this but none of the solutions are working for me. With that said, my containing div will not grow with my content. I know why this is happening, because it is 'float'ing but even when I use 'clear' it will not expand with the parent div. I've tried using using clear in nearly every element below with no success. Any help would be greatly appreciated.
View Image of problem:
For a live example please visit, http://thehopcompany.com/index.php?id=49
---------------CSS----------------
.product {
width:775px;
margin:0;
padding:0;
margin-top:75px;
margin-left:-8px;
}
.product ol{
margin:0px;
}
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:100px;
color:#000;
}
.product-column-left{
float:left;
width:100px;
height:100px;
}
.product-column-right{
float:left;
width:120px;
border-left:1px solid #ccc;
height:100px;
text-align:center;
}
.product-column-center{
float:left;
width:470px;
min-height:100px;
padding-right:15px;
padding-left:15px;
text-align:left;
padding-bottom:30px;
display:block;
}
.product h2{
font-size:18px;
margin-bottom:5px;
margin-top:0;
}
.product .text-underline{
text-decoration:underline;
}
.description-text{
font-size:12px;
color: #000;
}
.clear{
clear:both;
}
--------------------------HTML--------------------------
<li style="list-style:none;">
<div style="width:750px;" >
<div class="product-column-left">
<img align="left" style="border:0;" src="images/hop-pellets.png" width="100" height="100" />
</div>
<div class="product-column-center" >
<h2><span class="hop-title-text-product">Columbus, Tomahawk and Zeus</span></h2>
<div class="description-text" >Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
</div>
<div class="product-column-right">
<h2>$0.00</h2>
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
</li>
</ol>
</div>
Try to add overflow hidden to the parent li
.product li {
....
overflow: hidden;
/*height: 100px;*/
}
The problem with overflow:hidden is it will hide overflowing elements if you have them in your layout. So by using clearfix which is i suppose the best practice you can acheive it like below.
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Then, basically you just need to add the class in your container elements. More about Clearfix
<li class="clearfix">
<div style="float: left;">
<div class="content">Big content</div>
</div>
</li>
FIDDLE DEMO
Adding a clearfix should solve your problem:
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
Add the above div at the very end of your container div (i think after product-column-right) and just before your closing li tag. That should ensure that the div spans the content.
Your product.li style has a height of 100px, so that's going to constrain the box no matter what. Remove that setting (or change it to height:auto) and then add an empty clear div just before the closing li tag and you should be fine.
So your CSS definition would change to:
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:auto;
color:#000;
}
And then the relevant HTML:
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
<div style="clear:both"></div>
</li>
</ol>
</div>
I was using overflow: for a while with much success - but I had a few problems and decided to go back to this clear fix. If you have any problems - check it out.
http://css-tricks.com/snippets/css/clear-fix/