Height for the Community Box looks different at firefox browser compared to Chrome. How do I fix it? http://sciex.com/support
<div class="row"><!-- SECTON PROMO -->
<div class="col-sm-6 col-md-6 col-lg-6">
<div><header><a class="promo-1153" href="community">Community</a></header>
<div style="height: 224px;">
<h2 style="padding: 15px;">Frequently Asked Questions:</h2>
<ul>
<li>What should I do if Analyst freezes and won’t respond to any commands?</a></li>
<li>XIC Manager isn’t working with multi-period data files, what should I do?</a></li>
</ul>
</div>
</div>
</div>
</div>
you would require js to do this in your layout: demo
var hRight = $('.right').height();
$('.left').height(hRight);
< div class="callout" > has set
.feature-callout-combo .callout {
min-height: 274px;
}
which doesn't work for some reason in FF, but only on the Community box. For Library it does indeed work, because disabling it lessens its height...
If you instead use height: 274px, it works perfectly fine. Which should not be a solution tbh, it's rather an ugly hack.
Overall this seems like a bug to me? Have no time left sadly, maybe you can find out something with this.
Related
The main structure I'm using is:
<div class="portfolio-thumbs">
<div class="col-md-4 thumb-item">
<a href="#">
<div class="thumb-img">
<img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
<div class="thumb-overlay"></div>
</div>
</a>
</div>
...
</div>
I've created a full JS Fiddle here
I'm looking to add a semi-transparent overlay to the image (will later be adding transition and some content to slide in from bottom of each image), yet can't seem to get it to appear.
Have compared to couple of other articles on SO but none seemed to fit the bill.
I've done this a thousand times before, any idea what's going wrong with this?
With help of #ZachSaucier , adding 100% height to all elements in tree. Also adding:
div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
position: absolute;
top: 0;
}
Made the overlay sit on top of the img.
Updated fiddle here
I will first say that I am learning CSS right now, and I am using coffeecup RLMP as software.
I am trying to give a row a image background property but what I am doing is not working at all, if anyone could help I would very much appreciate it, thank you.
code as follows..
<div class="row image-here">
<div class="coffee-span-12"></div>
</div>
<div class="row">
<div class="coffee-span-6"></div>
<div class="coffee-span-4"></div>
<div class="coffee-span-2"></div>
</div>
css now..
body > .row.image-here {
background-image:url('');
}
This would be the main markup:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
Where (allthough there are many more rules wich can be seen in the link this are the widths)
.espacio{
margin-left: 192px;
background: transparent;
width:808px !important
}
.lacarta{
width:595px;
float:left;
}
#sidebar{
width:210px;
float:right
}
The problem is that .lacarta and #sidebar are not floating one next to other (this only happens in IE8 or lower)
It can be tested here: http://goo.gl/ksFQI (if you compare to firefox/chrome you will se that the sidebar is not in the right side of the container..)
I checked with the IE8 developer tools that the container seems to be big enough for both elements..
Any idea what I missed?
-EDIT-
Current IE:
Wanted (like in Firefox):
Actually, there is a bug in IE8 where right-floated elements seem to clear:left.
http://blogs.msdn.com/b/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned-differently-than-internet-explorer-7.aspx
If you don't want to add anything to your HTML at all, you can slightly restructure it for a quick fix. Put the right-floated sidebar first, ie:
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div id="sidebar">RIGHT CONTENT</div>
<div class="lacarta">LEFT CONTENT</div>
</div>
Add parent container:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
</div>
Does this jsfiddle fix it: http://jsfiddle.net/hgrHq/
.lacarta{
width:590px;
float:left;
}
Just reduced the width of .lacarta a bit.
As an aside, you might want to consider a responsive grid system for laying out your coulmns like this. For example:
http://cssgrid.net/
http://semantic.gs/
Then you won't have lining up issues like this ... and it'll respond to all screen sizes.
What exactly the Prob is...?? I just Tested the link and found those menu were not aligned .. and here the solution is .menu li{ float:left} .. for more jus put a screen shot if Possible :)
I am trying to make a message bubble, and I've got it working on all browsers with exception to IE7. The bubble needs to wrap itself around variable width content, so it's width will depend on the amount of content. It may grow to 100%, but it may only be 100px wide if the message is short. This is where I'm running into problems with IE.
Here's a jsfiddle: http://jsfiddle.net/w9Vdh/
The main construct of the bubble is a top row, middle row and bottom row. I've got a sprite and a couple other background images that I use render the graphics. Here's the HTML:
<div class="thread-item-wrapper">
<div class="thread-item-horiz thread-item-top">
<div class="thread-item-corner thread-item-topleft"></div>
<div class="thread-item-corner thread-item-topright"></div>
</div>
<div class="thread-item-middle">
<div class="thread-item-content-wrapper">
<div class="thread-item-label">You:</div>
<div class="thread-item-content">
<div class="thread-item-msg">
<div class="thread-item-content-top"></div>
<p>Message</p>
</div>
</div>
</div>
</div>
<div class="thread-item-horiz thread-item-bottom">
<div class="thread-item-corner thread-item-bottomleft"></div>
<div class="thread-item-corner thread-item-bottomright"></div>
</div>
<div class="thread-item-date">Aug 18, 2011 12:01 PM</div>
</div>
Here's what it's supposed to look like:
And here's what it looks like in IE7:
see the fiddle for code and demo-
Fiddle: http://jsfiddle.net/w9Vdh/6
Demo: http://jsfiddle.net/w9Vdh/6/embedded/result/
screen shot of IE7:
Updated fiddle for sent bubble fix for IE7
Fiddle : http://jsfiddle.net/8NpwH/2/
Demo: http://jsfiddle.net/8NpwH/2/embedded/result/
Changes in code html:
<div class="thread-item-clear"> </div>
<div class="thread-item-date"><div style="text-align:right;">Mar 23, 2012 12:41 PM</div></div>
Css:
.thread-item-sent .thread-item-date {/*clear:left; float:right;*/ margin:0px 4px 0 15px; } /* <--- this line --- */
"Received messages" work... the bubble wraps to the message width nicely. However, sent messages are being displayed full-width, and not sizing correctly to the message width. This has something to do with the date. In my fiddle (jsfiddle.net/8NpwH) you'll see a comment in the CSS on the .thread-item-sent .thread-item-date style, which indicates the CSS that appears to be the problem. If you get rid of that CSS, the bubble sizes correctly, but the date is missing.
If you use IE 7 and click on this site:
http://www.tlsadmin.com/tlsadmin/PortalHome.aspx
Then, navigate to:
TLS Admin
--\My Companies
------\Contoso
----------\Shared Contacts
You'll see how the list of contacts is all messed up and I can't scroll down. Anyone know why?
And if you're curious, it's my job to take this site as-is and make it production ready :)
I do not see an issue with the scroll bar, but with the floated contact cards. Clear your float after all the cards.
<div style="height: 100%; width: 100%; background-color: white;" id="ContactsGridUserControl1_ContactsAsDIVCallback">
<div class="outerContact">
<div class="contactLarge"></div>
</div>
<div class="outerContact">
<div class="contactLarge"></div>
</div>
<div class="outerContact">
<div class="contactLarge"></div>
</div>
<!--Rest of cards...-->
<br style="clear: left;" />
</div