Working on a new site design in asp.net with master pages. Header of the page is a 35px tall "menu bar" which contains an asp menu control rendered as an unordered list.
The selected menu item is styled with a differenct colored background and 2px border around the left top and right sides. The bottom of the selected menu item should line up with the bottom of the menu bar so the selected "tab" looks as if it flows into the content beneath. Looks fine in firefox and IE but in chrome the "tab" seems to be 1 pixel higher than the bottom of the menu bar.
Just wondering if there is some sort of bug I dont know about.
I realize that you will most likely need code to help with this problem so ill post up the css as soon as possible.
EDIT:
here is the css for the menu...
div.hideSkiplink
{
width:40%;
float:right;
height:35px;
}
div.menu
{
padding: 0px 0px 0px 0px;
display:inline;
}
div.menu ul
{
list-style: none;
}
div.menu ul li
{
margin:0px 4px 0px 0px;
}
div.menu ul li a, div.menu ul li a:visited
{
color: #ffffff;
display: block;
margin-top:0px;
line-height: 17px;
padding: 1px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
color: #ffffff;
text-decoration: none;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: none;
border-left: 1px solid #fff;
}
div.menu ul li a:active
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
color: #000000 !important;
font-weight:bold;
}
div.menu ul a.selected
{
color: #000000 !important;
font-weight:bold;
}
div.menu ul li.selected
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
}
div.menu ul li.selected a:hover
{
border: none;
}
The selected classes are added to the li and a elements via jquery...
Here is a screenshot of the problem...
The chrome example is on the top and u can see 1px of red border below the tab.
On the bottom is the firefox image where everything looks OK.
EDIT:
After playing around with this a bit more, I have discovered that it is actually the "header" div itself that is growing by 1px in chrome... This seems very strange to me.
None of these answers solve the problem.
Set:
line-height: 1;
padding-top: 2px;
Because webkit & mozilla rendering engines implement line height differently do not use this it to manipulate measurement for single line items.
For items like menus, buttons and especially really small notification bubbles, reset the line-height to normal and use padding or margins to make them behave the same.
Here's a JSFiddle illustrating this issue:
http://jsfiddle.net/mahalie/BSMZe/6/
I just had this same problem, and I solved it by explicitly setting the line height and font size in <li> element that contains the <a> elements that are the tab links. Hope this helps someone in the future.
(edited html links)
This is a common issue I run into on some of my sites... when it's IE having the pixel difference, I can usually just add a pixel of margin/padding in my IE stylesheet. But when it's Safari/FireFox/Chrome, I usually just live with the pixel and make the FireFox crowd happy (for now—until Webkit rules the web!), even though it looks a little strange in the opposite browser.
However, you might also want to check out the line-height values (or add a value, if there isn't one already) on the containing ul or div element. Tinkering with that allowed me to get the padding exactly the same in FireFox, Chrome and IE.
Here is the solution that I found in this page :
button::-moz-focus-inner {
border: 0;
padding: 0;
}
I have been fighting with this problem for a little while now, and almost gave up on the pixel. However it's come to me in one of those eurika moments: if you get the tab lined up perfectly in Chrome (which leaves an overlap in Firefox), set the ul height to the height of the li (including any padding), you can remove the offending pixels in Firefox by setting overflow to hidden on the ul.
Hope this helps someone out there!
I had the same problem with my main tabs displaying them in Chrome, they were one pixel off in height and there for leaving an ugly slit between the tabs and the white background of the mainframe.
I solved the problem by giving the tab div an upper margin with a floated value. First tried margin-top:0.1px nothing then 0.2 etc. until with an upper margin of 0.5 everything displayed fine over all the major browsers.
I had the exact same issue, turns out chrome had zoom set to 110% and that was breaking the menu. I noticed it when I fired up chrome on another computer and it looked fine.
I had a similar issue and it was due to using ems for font sizes, margins and padding. The browsers were rounding the ems differently and causing intermittent off-by-1px issues all over the site depending on the length of content. Once I changed everything to pixel measurements my problems went away.
Hope this helps!
I've come across this problem in relation to text with transparent backgrounds.
I couldn't get any of the above solutions to work consistently so I ended up using a webkit hack to give those browsers a different line-height. Like so:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.your-class {
line-height:20px;
}
}
Eww, hacky! I try to avoid CSS hacks but I just couldn't find another way. I hope that helps someone.
I managed to solve this issue with a web font I was working with by setting the following:
.some-class {
display: inline-table;
vertical-align: middle;
}
Granted it's a bit hacky but does the job. It does mean though you will have target styles specifically for Internet Explorer
try using display:block with the a element"
eg...
<li>Link</li>
css:
li{line-height:20px;}/*example only*/
li a{display:block;}
I guess this is the only way , use different styles for different browsers the problematic sections
/* FOR MOZILLA */
#-moz-document url-prefix() {
.selector {
color:lime;
}
}
/* FOR CHROME */
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.container {
margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
margin-top:0px;
}``
if line-height is used for vertically aligning text in a container (which it shouldn't), then consistent behaviour across browsers can be enforced like this:
line-height: 75px
height: 75px
overflow: hidden
you can also make different css for mozila:
-moz-height:2em;
one can also use:
#-moz-document url-prefix{
// your css
}
It's important to realize that web pages will always render differently in different browsers. Acheiving pixel perfection is futile, and nowadays I try to explain to my clients what kind of cost is involved to make every browser render the site exactly alike. More often now, they understand that IE6 and FF4 won't ever render any page the same way. We must try to make our clients understand and embrace the dynamics of the web.
Progressive enhancement and graceful degradation. Peace.
I might be a beginner in CSS, but I found the same problem in W3Cschools.com, in one of their examples.
http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav
this example is about image sprites. You can see in this example, in Chrome, the home icon and prev icon have the 1px divider line, which is not the case in Firefox.
It seems that in Chrome the pixel count is 1pixel different to that of Firefox.
Related
I'm currently building my website and I've run into a problem. Here is the webpage.
I want to add 3px underlines to only the links, like this:
The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.
They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?
Now used to this code (This is demo)
Css
.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
border-bottom:solid 1px red;
}
Demo LInk
Try adding the following:
display: inline-block;
height: 1.2em;
Haven't tested extensively, but seems to close the gap nicely in modern browsers.
Answer 1: Accept that css has limitations and work round them.
Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.
did you try this?
a {
border bottom: 3px red;
}
I've built a site using the contempt theme (wordpress) and I'm changing it's CSS to make it wider.
The problem is that I can make it look great on either Internet Explorer or Firefox and chrome but not all 3 at the same time.
If I remove the sidebar tag:
#sidebar {
width:200px;
padding:20px 200px 10px;
}
the page looks OK on IE (as it now - physiocall.co.il) but the sidebar is hidden in Firefox and chrome.
If I add this little tag to the css -
The site looks great on Firefox and chrome (the sidebar pushed left to it's place)
but on IE it goes down - below the entire page.
Any ideas how can I change the css to make it look correct on both IE and Firefox.
Any ideas what cause FF and Chrome to render the css in one way, and IE in another way ?
Thanks.
the entire CSS:
#content {
float:right;
width:649px;
margin:-50px 30px 0;
padding:0 0 20px 45px;
}
#topbar {
max-width:950px;
height:25px;
line-height:23px;
background:#FFFFE6;
overflow:hidden;
border-bottom:1px black solid;
margin:0;
}
#pagebar {
background:url('images/blue_flower/pagebar.jpg');
width:950px;
height:35px;
border-bottom:1px black solid;
margin:0;
padding:0;
}
#pagebar .children li,#pagebar .sub-menu li {
min-width:105px;
border-left:1px #e1e1e1 solid;
border-bottom:1px #e1e1e1 solid;
margin:0;
padding:0;
}
#pagebar ul a {
background-color:#f1f1f1;
width:101px;
}
#page {
width:950px;
}
#sidebar {
width:200px;
padding:20px 200px 10px;
}
sorry to say that, but you should start from scratch and completly rearrange your html output and css. maybe this is a coding practice due to rtl but your #content appears before the sidebar and has a float:right while your sidebar is positioned left to the content with a margin-left:530px.
and your content has a 640 width..
that can't work out and is not to be fixed by some niffty css trick.
sorry.
Since it works in IE but not the modern browsers, this tells me you used IE as your initial test. Never, ever do that. IE is 12 years behind all others in modern standards and compliance. Inept at best, you should never trust IE to do anything right.
It's been a long time since I've used frames so I'm not sure that the lack of a doctype on your index page, which puts you into quirks mode, is causing the problems.
So, while reworking your markup, use any browser but IE for the initial test. Then look to see how IE screws it up. The quirks and bugs in IE are well known, as are the hacks to fix it.
The solution was
#sidebar {
float:left;
width:200px;
margin:-20px 10px 5px 5px;
}
It looks like IE and FF had the opposite default value to the float parameter, hence making it impossible to set it straight. once given a float value, the margin fixed the rest for both browsers.
IE6,7 are givimg me grieves on browser display. I didnt have prblems with Safari nor FF.
I'm not a CSS expert and in need of advice for this column alignment issues on IE.
And I don't know where to begin because I've tried messing around with the css files and the css browser selector javascript and still I can't get it to work on IE.
The problems I believe center around id doc, bd, yui-main, yui-b, box and box-titles.
For unclear reasons, the sizes show differently in IE from other better browsers.
The sizes width and height values are different.
<body>
<div id="doc" class="yui-t2">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div id="header" class="yui-g">
<a href="index.php">
:
:
unfortunately, the 2 css files are a little overwhelming over me to understand.
I tried pasting it here but the format got out of whacked.
Could someone lend a helping hand ?
Any help is appreciated.
app.css
body {
font-size: 85%;
font-family: "georgia";
}
.yui-t2, #bd, #yui-main {
z-index: -5;
}
.yui-b, .yui-g {
z-index: auto;
}
div.yui-b div.box {
color: #333333;
border: 1px solid #c6e1ec; /* this controls the left boxes on front page */
margin-top: 15px;
}
div.yui-b div p.box-title {
/* background: #0590C7;
border-bottom: 2px solid #c6e1ec; */
background: #6f6f6f;
border-bottom: 2px solid #c6e1ec;
color: #FFFFFF;
display: block;
font-size: 93%;
font-weight: bold;
margin: 1px;
padding: 2px 10px;
}
div.yui-b div ul {
margin: 0;
}
div.yui-b div ul li {
border-bottom: 0px solid #fff;
list-style-type: none;
}
div.yui-b div ul li a {
color: #333333;
display: block;
text-decoration: none;
padding: 3px 10px;
}
div.yui-b div ul li a:hover {
background: #c6e1ec;
color: #333333;
}
grids-min.css
body
{text-align:center;}
#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7
{margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;}
.yui-b{position:relative;}
.yui-b{_position:static;}
#yui-main .yui-b{position:static;}
#yui-main
{width:100%;}
.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main
{float:right;margin-left:-25em;}
.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main
{float:left;margin-right:-25em;}
:
:
more but format is bad over here at stackoverflow to make it readable.
I apologise for I don't wish to come across in this post as unhelpful or rude.
Sincerely
This is a useful resource for dealing with ie6 generally
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
There are many many possible IE6/7 issues. Particularly IE6.
First thing to check is does your HTML code include a valid <!DOCTYPE> declaration? If not, your page will go into quirks mode, which will make all versions of IE (but IE6 in particular) go nuts. Quirks mode is effectively an IE5 compatibility mode. It is badly broken, so make sure you have a doctype.
Second thing to do is read up on some of the IE issues that may be giving you problems, and on browser support for some of the features you may be using. There's a very good website called (appropriately enough) Quirksmode.org which has a comprehensive set of compatibility tables for a wide range of browser features.
The following sites may also help:
http://haslayout.net/css/index
http://css-class.com/test/bugs/ie/ie-bugs.htm
http://positioniseverything.net/explorer.html
Google is your friend here too. ;-)
Next tip, try to narrow down your problem. Strip out the bits that are working until you end up with a page that demonstrates the problem with the minimum of other stuff getting in the way. Save that example to a site like JSFiddle. It'll be easier to work out the issue if you know exactly what the issue is.
Finally, if the remaining issues are minor display glitches that don't prevent the page being used, you should give yourself permission to simply ignore them. The market share for both IE6 and 7 has been dropping rapidly over the last year, and will continue falling. There's very little to be gained by spending too much time sweating over minor issues in these browsers.
See here for up-to-date browser usage stats: http://gs.statcounter.com/#browser_version-ww-monthly-200911-201011
(obviously if your site has significantly different demographics, you may need to pay more attention to IE6 and 7, but if that's the case you'll know already)
I can't figure this one out. I'm trying to get rid of that blue glow when textarea is highlighted in Firefox.
Here's my CSS:
textarea
{
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
}
:focus {
outline:0;
outline:none;
}
It removes it in Safari, but I'm have no luck with Firefox.
Thanks!
Matt
how about
*:focus {outline:0px none transparent;}
You can remove it with -moz-appearance:none;, though that may affect the whole appearance more than you're wanting.
If you use this on the textarea style:
outline:none;
... it should work with all browsers, not just Firefox
I'm fairly sure that's a Mac OS X theme-specific behaviour.
Just add or define a border... for instance, if a border is defined and I've added outline: none; to my CSS, this does the trick.
I just had an issue with this on a text input- Firefox was using the border property to create the blue glow on :focus - not outline.
input:focus, textarea:focus {
outline: none; // for other browsers
border: none; // only necessary if you haven't set a border on the element
}
You cannot remove the glow in Firefox I think.. Only way to do that would be by adding a custom border to your element, like border: 1px black;, that would make the input box have no glow at all.
Only popular browsers which allows the outline tag are Safari and Chrome (not sure about linux browsers).
on #3
#Solution0:focus{
border:solid #CCC 1px;
outline:1px none transparent;
}
The better way to fix this, in my opinion, is define a custom border and :focus behavior.
textarea {
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
border: none;
}
textarea:focus {
outline: none;
border: none;
}
Slightly unrelated but possibly helpful answer: In my case the blue glow was causing an alignment problem in Firefox only since it adds an extra pixel or two and changes the overall element size. My guess is a lot of people will arrive at this question for similar reasons and rather than remove the blue glow altogether, the solution I came to was to style the input element padding in specifically for Firefox:
#-moz-document url-prefix() {
input:focus {
padding: 5px!important;
}
}
You can change this to suite your needs but it may be helpful for some of you to know about the #-moz-document url-prefix() rule.
Edit: Found out that this happens even though Cufon isn't even applied!
Edit2: My bad, looks like Cufon is creating the slowless afterall.
However, removing the line where I replace the menuwrapper font style with Cufon still results in sluggish behaviour. So it doesn't seem like it's got anything to do with applying cufon to the lists themselves.
Hi, I'm using Cufon to "embed" a custom font to my site. And this font is used on the main menu and I've encountered a bug or something where setting the height, padding or anything of the li:hover makes IE go sluggish. I don't know why this happens but the problem dissapears when I remove the property from the li:hover. It works fine in Firefox though.
So my question is, is there another way of getting around this?
What I'm basically trying to do is to position the li:hover because it has a background to it. And I want to skew it a few pixels towards the bottom.
My CSS looks like this:
#menuwrapper {
float:right;
margin-top:10px;
height: 65px;
}
.menuwrapper li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;
padding-left: 23px;
padding-right: 23px;
height:23px;
}
.menuwrapper a{
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none;
}
.menuwrapper li:hover {
background-image: url(img/MenuHover.png);
padding-bottom:6px;
}
Could not understand what you mean exactly but as you said you want to get it a bit lower at the bottom, then you can do that with margin-top css property.
margin-top:10px; /* down it by 10 pixels */
Just have to lay this one dead I guess. Getting nowhere with it as it is now.