EDIT (08/09/13): You can see the error here.
I have a jQuery drop-down (it replaces the standard select with a based drop-down) that's set to overflow:visible, and in Firefox, the drop-down overflows into adjacent content like it should when clicked. But in Safari, the drop-down, even without being clicked, moves adjacent content around the drop-down. Below is a picture of what I'm talking about.
Any ideas why this might be happening?
On your gf-style.css on line 297 you have "overflow: visible". That's what is causing consistency issues. Remove that and should be fine on all browsers.
EDIT: That was not it, this is the solution. Add this in your CSS file:
.clearfix {
display: inline-block;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.clearfix {
display: block;
}
And then add this class to your two_col_container div:
<div class="two_col_container clearfix">
Related
Ok, I'm having some more fun with the ::after feature. Here are 2 examples:
With issue: http://codepen.io/anon/pen/zrBJRO
Works: http://codepen.io/anon/pen/LGZJQN
The first example, I am adding the .clearfix class to the div's I want to apply it to:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
However, this doesn't work - and the red bar (which should be showing under the 3rd .link-listing div), simply shows at the top of the page.
On the other hand, if you look at the 2nd example ( http://codepen.io/anon/pen/LGZJQN ) , you can see that this DOES work ... but I've had to go back to using horrible divs to clear them:
<div style="clear:both"></div>
The idea of this exercise, is to try and get rid of as many DOM elements as possible (each link we currently have 2 "clear" divs (sometimes 4, depending on if there is an "offer" on the listing as well), and when there are 50 links per page - thats a heck of a lot of DOM elements we can remove, if this will work :))
I think that the use of floats here is exagerated. Removing the floats you have the same behaviour and you don't need to put clearfixes anymore. Floats are for floating elements, not for layouts.
https://jsfiddle.net/j9oecqp3/
Simply change float for display block
.link-listing {
display:block; /* before was float:left;
}
How can I make a link that appears when the mouse is over the main area like a youtube comment.
I have this code - but when the mouse is over the .showme class it's not visible like the showhim element.
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
Maybe you want the inner div to be in the flow of the outer. In that case use
.showhim:hover .showme{
display : inline-block;
}
Or, if you want to display the inner div on :hover for the inner div too, use
showme{
visibility: hidden;
}
.showhim:hover .showme{
visibility: visible;
}
Just one thing: Maybe you tested with IE 6. The dirty one from Redmond doesn't know :hover on elements other than <a/>. He doesn't know display: inline-block either by the way.
I have the following:
<div id="tab-notes" class="clearfix">
<textarea cols=100 rows=15 class="full-width" id="dialogNotes" name="Pages">#Model.Notes</textarea>
</div>
I have added a clearfix class but it seems that the DIV does not stretch to fit the height of the textarea. Is there something simple that I am missing?
.clearfix:after, .block-controls:after, .side-tabs:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
giving your #tab-notes a background-color you'll see that it does stretch to the textareas high (like it should) if there really aren't any other css-rules that affect these elements.
you can see it in action here: http://jsfiddle.net/Mqke4/
the clearsfix seems to be senseless just given this snippet and doesn't change anything ( http://jsfiddle.net/Mqke4/1/ ). given this, there must be styles defined for .full-width, #tab-notes, #dialogNotes (or anything like that) causing this problem.
Is your textarea applied with float: left or float: right ?
If so, remove the float property from textarea.
But if you have to use that property,
the easiest way to solve the problem is to also apply the float: to your div too.
Or you can change the display type of your div to block by using display: block
There's more way to solve this problem.
But I think these are the easiest ones.
I'm having a weird problem at here: http://www.princessly.com/about-us/
See the bottom of the page where there's the "Get Princess Newsletter".
The newsletter <form id="newsletter-validate-detail"></form> is no where to be found by Firebug in Firefox. It seems to be out of the static flow but its children, namely h2, .newsletter-text, and .newsletter-paragraph are all displaying fine, yet OUTSIDE of their parent, the white box of .footer-newsletter.
This is causing me problem because I can't position the form inside .footer-newsletter which is a 2px border white background box with 2px border-radius, its parent.
Thus far I tried:
overflow:hidden for .footer-newsletter
position:static for #newsletter-validate-detail
position:relative for #newsletter-validate-detail
display:block for #newsletter-validate-detail
But none of them worked.
Any idea what the culprit would be? Thanks a lot!
You're not properly clearing your newsletter section. Add this to fix it:
.footer-newsletter:before, .footer-newsletter:after {
display: table;
content: "";
zoom: 1;
}
.footer-newsletter:after {
clear: both;
}
And your form is not being found because the ID does not exist in your CSS. Define it and it shall appear:
#newsletter-validate-detail {
display: block;
float: left;
margin: 0 0 10px;
width: 100%;
}
I have a css driven dropdown menu, and in Chrome when I hover over the last option the whole thing jumps to the left slightly. I assume it's because the dropdown menu is adding to the overall width of the main list even though it's styled to float. Is there any way to fix this? (it's not doing it in firefox interestingly)
I've noticed by using webdeveloper to outline elements that the last li appears to get wider when it's hovered, but none of the others do.
the applicable sourcecode is here:
http://jsfiddle.net/WsAEW/
It worked for me changing this:
#menu ul li {
display: inline;
position: relative;
}
to this:
#menu ul li {
display: inline-block;
position: relative;
}
Here is a modified jsfiddle. I think the issue is fixed. Give it a try.
http://jsfiddle.net/WsAEW/5/
BTW, I only changed the following style. The 'float left' gets the elements to line up horizontally and the 'display: block' gets the top element to size to include the drop down menu.
#menu ul li {
float: left;
display: block;
position: relative;
}