We have this annoying layout issue. Please see the following url to see it in action:
http://www.businesseventsydney.com.au/home-page-test.cfm
The FB like buttons are neatly situated in the top nav bar. But, as soon as you click "Like" and enter a comment, the buttons drop down below the nav bar. If you refresh the page, the buttons appear correctly again.
Can anyone shed any light on this?
Simple fix:
.fb-like {width: 128px !important;}
Hi now define height of your iframe css as like this
.fb_iframe_widget iframe{
height:244px !important;
border-bottom:solid 1px #000;
}
!important must give to this
Result is this
The element changes from having a width of 129px before liking etc, to having a width of 450px after liking.
So, you will have to make it fit into your design in a spot that allows for the worst case scenario, ie, 450px.
Just change your #top-nav-right css rule to:
#top-nav-right {
float: right;
overflow: hidden;
padding: 4px 125px 0 0;
width: 129px;
}
Related
Example: [redacted] - click the Get a Quote button. The navbar elements do not darken.
Also, resize your screen to emulate a phone screen, and you will see that the navbar elements overlap all other elements. How do I solve this as well?
Thanks in advance for any and all help.
.header {
background: transparent;
color: #fff;
z-index: 1030;
border: 0px solid #ddd;
height: 75px;
position: relative;
}
change z-index to less than 1040
This is an issue of z-index. Your class .header has z-index more than .modal. Try giving
.header{z-index:1035;}.
For responsive or mobile view, either you give .toggled{display:inline-block; width:100%;} or else remove height from .header and .navbar.
Hope this helps.
Let me know in case of a query.
First you have to remove the z-index rule from the .header class. It's position is relative and it has 1000+ index.
Second "nav navbar-nav navbar-right bgblue" either remove the class from the ul when clicked or .nav.navbar-nav.navbar-right.bgblue{ background: transparent }
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
I'm using an accordion slide in my site and I've noticed that on IE and Firefox I get a weird gap of 20 pixels at the top of the slider.
I've checked the CSS back to back for some padding to the UL or the LI or even the slider itself but couldn't find any. It works perfectly on Chrome.
Read many post suggesting this to adjust the line-height but it didn't work for me.
How can I resolve this issue?
http://www.rom.guywalderonline.com
TRY THIS>>>
#slider {
height: 0px; /*IMPORTANT*/
background: url('../images/romold.jpg') top right no-repeat;
background-color: #434749;
}
This 100% works, if you have any problems please comment back....
If you add the following code to your template css file, it willl remove the gap:
#slider .row-fluid [class*="span"] {
min-height: 0px !important;
}
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I am trying to implement a menu into an area.
http://www.gardensandhomesdirect.co.uk/newhomepage
You will see the end of the menu div slightly off the page to the right, however this needs to be inside the HOMEMENU section (the long black bar with no content)
It seems to be overflowing into other areas, despite using a clear:both div.
Can anyone shed any light on this? Is it a z-index issue or something more simple?
You have a width: 930px; somewhere.
Remove it.
#topmenu {
list-style: none;
**width: 930px;**
height: 20px;
background: #014464;
border: 1px solid #002232;
}
When I inspect the element (menu-bar) is see there are some space (like) characters outputted.