I have an item that when hovering in IE7 is causing the item below to shift slightly.
You can see the item in question here: http://andovertowncouncil.customstudio.co.uk/
In the right sidebar each item has an H2 heading. When you hover over this in IE7 the item below shifts down by 2/3 pixels. If you then hover over something else, like the button, this lower item returns to its original position.
I've tried to be very specific with my hover effect:
.right-item h2 a:hover {
margin-bottom: 5px;
border-bottom: none;
padding-bottom: 0;
text-decoration: none;
line-height: 30px;
}
But without success.
I'd be grateful for any suggestions on how to solve this one?
Thanks in advance,
Tom
Can't tell why you're adding the following rules on hover, but they are what is causing your content shifts:
.right-item h2 a:hover {
border-bottom: medium none;
line-height: 30px;
margin-bottom: 5px;
padding-bottom: 0;
text-decoration: none;
}
a:hover {
border-bottom: medium none;
}
If removed everything looks good in all browsers.
You're adding margin-bottom on hover.
Try removing this and see if it fixes your issue.
Related
I'm learning CSS and I'm trying to copycat a simple nav bar from this website.
I want a black background to appear when hovering over an item so I did this:
nav a:hover {
background: black;
}
but the background is only covering the text. I want to it to cover the entire element like in the original site.
And here's the anchor tags CSS if you need it:
nav a {
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
color: white;
float: left;
padding-right: 2em;
margin-top: 1.5em;
}
I coded the same as on your example website, hope it helps: http://jsfiddle.net/yL7yj4xL/1/ (You have to remove padding-right and replace it for just padding)
I'm assuming you have the nav elements in a <ul><li></li></ul> structure.
in that case, change the nav a:hover to nav li:hover
EDIT:
Made this fiddle off of your pen: https://jsfiddle.net/djgsgqp5/
Your nav ul and li elements were getting no height. If you hover on those elements in the devtools youl see they only have a width.
The style in the fiddle is much more stable hopefully does what you need.
Hope that helps!
I created tabs using <li>. I used css to add style but the problem is, there is a space between tabs. I tried to add margin: 0px; in ul.tabs li but the spaces are still there.
Please see the link http://jsfiddle.net/cfv65agn/
Thanks.
A straightforward fix is to set the font size of your ul with the class "tabs" to 0, and set the proper font size on the list items directly.
This will remove the default spacing between them, without the need of magical negative numbers.
I just tested, and the following works:
ul.tabs {
font-size: 0;
}
ul.tabs li {
font-size: 16px; /* set to the font size you want */
}
Change margin in "ul.tabs li" to a negative number. -3 gets rid of them, -2 makes them real small.
Adding float: left to your ul and li will fix it too (make ul 100% width as well):
CSS
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
width: 100%;
float: left;
}
ul.tabs li {
background: #ffffff;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border-top-right-radius: 1em;
border-top-left-radius: 1em;
border: 1px solid #afafaf;
margin : 0px;
float: left;
}
Here's a jsFiddle
probably it is because you have set display:inline-block in ul.tabs li.
changing it to float:leftwill fix this. this usually happens when there is a \n between inline-block elements
display: inline-block will honour white-space between them. Simply delete the tabs an spaces between your li's. The will unfortunately make your code slightly less readable, but you can more or less compensate by putting a line break within the li, at the end.
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
I'm trying to reverse engineer the menu on this web page (this is just a personal project, not trying to steal their work).
http://clapat.ro/themes/eleven/color/
However, I can't seem to get the transition effect to work. When I add the border-top on, it's pushing the content of the down instead of staying nicely in-line like in the example.
Also, the border seems to "blind" upwards, but when I do it, it blinds downwards.
Any help would be greatly appreciated!
This is causing the problem:
.nav > li > a {
display: block;
}
which is coming from bootstrap.css If you remove that bit of CSS it works correctly.
You can override that style in index2.php by adding display: inline;:
.navbar a, .navbar a:active, .navbar a:visited {
color: #7f7f7f;
padding-top: 35px;
height: 90px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
padding-bottom: 45px;
display: inline; /* added this line */
}
I'm having the weirdest issue in IE (7, specifically) when implementing CSS borders. I first noticed this a few months ago.
The CSS is literally this: #donate {border:1px solid #299ae5;}
As you can see from the attached image, both of these screenshots were taken in IE7, from the same website, different pages - same template file. It's like the border has a "tail" in the bottom left corner.
Does anyone have any insight about this???
Edit: Here is the HTML (although I've seen this also on random sites in IE7 recently on input fields as well)
<li><span>Donate</span></li>
And here's the CSS:
li { display: inline; }
li a { color: #fff; display: block; float: left; margin-right: 8px; padding-right: 8px; line-height: 1.2em; }
li a span { background: url(bg-gradient.png) repeat-x 0 0; border: 1px solid #299a35; padding: 1px 5px 2px 4px; }
Thanks in advance!
I tend to use display:inline-block...the only other thing I'd change is making the anchor the button rather than the span. here's a quick example http://jsfiddle.net/3x4fR/2/
Does giving the li a span element the display: block; declaration do the trick? It may be having trouble applying vertical padding to an inline element.
jsfiddle makes testing stuff easy.
If you don't need the span get rid of it if not try *zoom:1 or some other way to give 'hasLayout' to the element. see example here http://jsfiddle.net/ShaggyDude11/zbZr8/3/