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;
}
Related
I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.
I am using the Bootstrap Carousel on my site - everything is working as expected - only Firefox is making trouble.
The .carousel-inner is only shown when I set:
.carousel-inner{
overflow:visible;
width:auto;
}
But now the scrollbars are showing up in every other browser, when the animation is running.
Keeping it like
.carousel-inner{
overflow:hidden;
width:auto;
}
will hide the scrollbars, but the whole div gets positioned to the right somehow in FF.
Where is my error, where did I mess up, or is this a FF positioning bug?
The cause of the problem in Firefox is this:
.carousel {
margin: -1px 0 0 -1px;
}
Specifically, the negative margin-top.
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;
}
I have a fixed div at the top of my page, yet for some reason there is a gap above it when it should be flush with the top of the screen.
On inspecting the HTML I have found that body seems to have a margin-top of 8px. I implemented normalize.css to clear up the problem (as it's useful later on anyway) and now in my Chrome tools it is showing up as being overwritten (margin-top:8px has been striked out and normalize.css margin:0; is not) however it doesn't seem to be making any change to the design?
Can be found here:
http://www.haselden.co.uk/james/docs/index.html
Try setting this style for #navigation:
#navigation {
position: fixed;
height: 100px;
top: 0;
width: 100%;
background-image: url('images/stripes_bg.png');
}
The h1 in #wrapper #top had a margin that was pushing the #wrapper down, creating margin that pushed down the #navigation element, too. If you remove that top-margin from the h1, everything will slide up like you want.
Right now, the portfolio section of my website has the top three images showing properly. But in the Opera browser, it "crops" the top and bottom of the rest of the images, leaving only the very middle of each of the images to show. All of the other browsers show every picture in the portfolio section properly. I've tried messing with the margin and padding on the pictures with no luck. If anyone can help me figure out what is going on, I would surely appreciate it! =] Click here to get to the website.
#portfolio {
overflow: auto;
display: block !important; /* aren't we kind… */
display: inline-block; /* …to IE6 :p */
}
#portfolio a {
float: left;
margin: 3px;
}
Try:
#portfolio a.cboxElement{
display:block;
float:left;
border:3px solid #fff;
}
To answer the "Why?" part of your question, it looks like there's a bug in the browser that's triggered by opacity on some inline elements. Setting the display mode to block will work around it.
Also: which version of Opera are you using?