I've just noticed a weird bug with Firefox (it works fine with IE and Chrome, all 3 of them at latest version). The brand image is not clickable when the screen is large and the navbar is fully expanded (I can see a few pixels to the left where the click appears, but clicking the image does nothing). But if you resize your screen to have a small width, the navbar collapses and then the link is clickable.
I'm using Bootstrap v3.0.0 for the navbar.
Any ideas? An issue with the padding, or fixed positioning? I couldn't find anything closely similar on the Internet.
Weird issue.
Overriding the bootstrap3 rule of .navbar-header { float: left; } seems to do the trick:
.navbar-header {
float: none;
}
Related
I am using Highcharts 5.0.10, I met the problem like the topic
Highcharts: Chart does not resize properly by making the screen smaller
and I follow the below answer
svg image prevents the table-cell to get smaller. Solution for this is:
.highcharts-container, .highcharts-container svg {
width: 100% !important;}
See the example http://jsfiddle.net/FzXEM/9/
There are other ways to make the chart resize correctly like using
float: left or position: absolute but then there are other problems
and you can only use vertical-align in table or inline layouts.
it works fine in Chrome and IE, but doesn't effected in Mozilla. So my question is how to make it workable in Mozilla too? only do something in CSS.
I've found great advice by #Bojan Petkovski how to make a bxslider full screen:
Making BXslider full screen (filling entire browser window)
But I've encountered a problem running bxslider with parallax effect and few JS scripts (enquire, skollr). I think that they produce the problem. But I could be wrong.
Here is the website: http://tedxmru.com/
Once the browser's window is resized to it's smallest(making it narrow) width the slides doesn't resize proportionally.
As I've tested and if I'm not wrong this rule isn't working on resize:
.bxslider, .bxslider li{
height: 100% !important;;
}
Second problem once the window is narrowed and I hit refresh - the slider disappears, while I haven't written any media queries to hide it.
Need help fixing it with resize issues
Try this:
.bxslider, .bxslider li{
height: 100vh !important;
}
I tried it using developer tools on your site and it appears to be working. At least for resizing the slides.
http://www.imageworkshop.com/2014/03/03/miranda-revisited-portrait-of-anne-louise-lambert-at-hanging-rock/
When an image is clicked it launches in the Nivo lightbox. This was working perfectly until recently. an image will be centered and resize responsively to remain centered. (you can see an example of it working correctly here: http://www.sandbox.sharonblance.com/project/melbourne-town/)
Suddenly this doesn't seem to be working properly anymore. I have recently upgraded from v1.0 to v1.2 of the .js library for the lightbox, however, rolling this back does not fix the issue - so it must be related to some other CSS or theme change somewhere that is affecting the lightbox?
I am also seeing scrollbars showing up when the screen is resized small which is not correct.
I noticed that hiding the following rule seemed to influence the left/right alignment, however I cannot find a way to fix all the issues I am seeing:
.nivo-lightbox-effect-slideLeft.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight.nivo-lightbox-open .nivo-lightbox-wrap {
transform: translateX(0px);
}
from the nivo-lightbox.css
I added/changed (gave it a fixed width) it to this
.nivo-lightbox-content {
margin-left:auto;
margin-right:auto;
width: 800px;
height: 100%;
}
There's this odd IE issue that has been twisting my mind. It works correct in other browsers (Chrome / Firefox).
For those that want to dive directly in the code, here's a Fiddle. Important parts:
HTML:
MyButton
CSS:
.btn {
display:block; width:135px; height:58px; text-indent: -9999px;
background-image:url("http://i47.tinypic.com/e7f4w6.png");
}
.btn:hover { background-position:bottom; }
In the Fiddle I've added an arrow to display the correct "center" of the image. As you can see, this is just a simple image sprite for navigation. The height of the image is double the height of the actual button, so we can apply the background-position:bottom .
But for some reason, when hovering, IE doesn't display the image correctly. Somehow the arrow (black line) and the center line (red line in the hover state) don't align anymore:
Normal state:
Hover state:
Because the line "jumps", the text also jumps (hardly noticeable in my example, but on my project you see it pretty good). Tested & occurs with IE9 and below on Win7.
I hope you might have a solution for this little brain teaser!
The comments from jQuerybeast, Miguel-F & Billy Moat above pushed me to another direction (thanks folks!), and I tried to open my Fiddle on another machine. Same browser, same OS & it was working fine.
After some further investigation, I found out it was my screen resolution and/or video display and/or taskbar that caused the strange effect. This would mean my code is correct, but somehow IE draws some pixels wrong on the screen (where other browsers do this correct). But this might be a whole new question.
Once again, thanks for the help!
I'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.