On my website I have a header with buttons made from background-images and a jQuery hover event. The problem is, in Chrome and Chrome only (in my tests), when mousing over the button the hover image is slightly cut off by about a pixel. I've tested it some and realized it only appears when there is a scroll bar (for consistency's sake, I've added overflow-y: scroll to all of my pages). The problem is fixed if I subtract half a pixel from the width, but it also messes with the margins. The background images are an identical size, 102x42px.
Here is my CSS and a link to my website:
.menubutton
{
margin:0px auto;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
.menubutton:hover
{
background:url('../img/buttons/menuhover.png');
color:#E0E0E0;
text-shadow: 0px 0px 1px rgba(0,0,0,0.75);
}
I confirm the bug and like randy I think this is a problem with chrome and not your code.
It seems the problem appear and disappear because of the width if the page, if I resize my window the problem appear and disappear.
After some trials and error it seems the problem come partially from the size td element that encapsulate your menubutton. After trying some things around I thing I found a workaround. Since you know both the size of the td element and the menubutton, you don't need an automatic margin. So:
.menubutton
{
margin:0px 24px;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
Can you test on your side to see if it resolves the issue?
I see your problem, but it look like a chrome bug though, not a code bug. two out of four elements have correct hover backgrounds, so its a bit strange. You can try to set the width of the element again in the hover, or make the element 1px wider and set background-repeat:none; to display the extra pixel. Bad solution though..
Related
I'm trying to create this box, but it's a little over my head. I can't get the spacing after the white header text to display correctly.
The live version is here, and the current CSS is below. A standard < p > inside the div ignores the bottom padding on hblock and I can't help but think I'm going about this the wrong way. Is there a simpler way to create this element or something I'm missing in the code?
Many thanks.
#lheaderblock{display:block;
padding:0px 10px 0px 10px;
background-image:url('http://atlas.czg.net/atlas/wp-content/uploads/2012/12/caption_header_blue.gif');
height:160px;
width:90%;
border:1px solid #000000;
background-repeat:no-repeat;
overflow: hidden;}
hblock{position:absolute;
color:#FFFFFF;
font-size:14pt;
padding:10px 0px 20px 15px;}
I don't know what <hblock> is. When browsers don't know either, they will render them as inline element. You need to give it display: block and remove position: absolute. Tweak the padding and you'll be fine.
I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?
I have the following code which works fine in ie8 but not in Chrome. I want the border to show and it is not:
.sitewidth{
width:1000px;
min-height:100%;
height:auto;
margin:0 auto 0 auto;
border-left: 1px #EE6A00 solid;
border-right:1px #EE6A00 solid;
overflow:visible !important;
}
It may be that it's not showing high enough in Chrome without a height?
What's in the html code? Sometime it will require a <br clear="all" /> before the end of the closing div so that the whole div shows on screen.
I'm not too sure min-height will have any affect if it's followed by height:auto; ?
At the first, please define a background-color for your box to be sure it can be shown fine. Then, I suggest you remove other features at the first and solve your problem.
Do it with something like this:
.box {
background-color:silver;
width:1000px;
height:100px;
border:1px #000 solid;
}
If this can work fine, you can modify it with other properties.
In my case it happened because I used 0.5px instead of 1px. There is no such thing as half a pixel.
I am styling a asp:DropDownList element with custom CSS. I have set the height and am trying to get the text to appear in the middle of the element, rather than at the bottom. Vertical-align:middle does not seem to work, and if I add padding-bottom to push it up from the bottom, in IE there is an ugly gap between the arrow on the right of the drop-down and the border. This is my CSS currently:
.dropdowndiv
{
font-size:10pt;
margin-bottom:2px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
Try this:
.dropdowndiv
{
font-size:10pt;
padding-bottom:4px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
I changed the margin-bottom setting of 2px to a padding-bottom of 4px.
UPDATE:
Looked fine on mine, but you can add padding to any side to get it the way you wish.
Failing that you may want to look at Tag mapping - Lee Dumond suggested this on his blog in response to a similar problem I was experiencing at the time:
http://leedumond.com/blog/fixing-asp-net-server-control-rendering-issues-with-tag-mapping/
Adding a line height of 26px should align your text to the middle.
First of all here the work in progress website link http://jacobnlsn.com/wordpress/. I want the bars to be the same height. Here is what i have in CSS for both:
#bodybinblog {
width:546px;
float:left;
background:#400000;
border-left:solid 9px #cdba70;
border-right:solid 9px #cdba70;
margin:0 15px 0 30px;
padding:0;
}
#sidebarbinblog {
width:229px;
height:inherit;
float:left;
background:#400000;
border-left:solid 10px #cdba70;
border-right:solid 10px #cdba70;
margin:0 0 0 11px;
padding:0;
}
Any idea how to fix this?
I think one of the tricks designers use in webdesigns is the laying of background images. In this case, you want the sidebarbinblog to assume the same height as the bodybinblog because you want the background to fit nicely. If the sidebar's height is higher than the body, same problem will occur but this time on the body side.
The solution is to create a background image of maybe 1px horizontally capturing both for the body and the sidebar. Apply that background on the container div of both the body and the sidebar Repeat-y it so it spans the full height.
You want to use "faux columns". Here is a useful link - http://dustinbrewer.com/tutorials/fauxcolumns/
It should work like magic.