Heres the link:
DAMNIE6TOHELL
As you can see if viewed in glorious 'IE6-o-color', the footer is shifting 1px over to the left.
I'm struggling to find a fix for this, I've whittled it down to a bare minimum of HTML.
Is it something to do with haslayout perhaps? Any help much appreciated.
This looks like it's a case of the IE6 1px jog which can be solved by a few different fixes.
You will only want to apply these fixes to IE6, using your favourite method (conditional comments, star html hack, whatever). You could
apply background position to #container_bottom
container_bottom { background-position:1px 0; }
apply a left margin or padding to #container_bottom
container_bottom { margin-left:1px; }
or float #container_bottom to the left and give it a width
container_bottom { float:left; width:800px; }
Any of those seemed to work for me.
Add
background-position: 50% top;
to the css of container_bottom.
It works for me with IE Developer toolbar, but it's on a IE6 Virtual machine, so I'm not sure about real world results
Related
Alright, of course I understand why this is happening, I'm just hoping there's some creative solution. Let's say I have this element:
.element {
padding:0 1px;
}
.element:hover {
font-weight:bold;
}
It's crucial that the padding be in place for visual consistency, but is there some magical way I'm not aware of to lock the element's width down before engaging in the hover behavior?
No JavaScript allowed, unfortunately.
JsFiddle:
http://jsfiddle.net/M9V3Q/
More Info
The client is extremely specific about what they want on certain parts of the site, and the nav is one of them, much to my frustration. They insist on hover being black text on a dark shade of red used in their logo, and they want the buttons to be centered. Since different browsers render text differently, the only way to create a consistent look is to use padding to create the width. Unfortunately, with normal font weight the black is very difficult to read.
You can use this approach:
#hoverEle {
width: 100px;
}
#hoverEle {
display:inline-block;
border:1px solid black;
padding:3px;
text-align: center;
}
#hoverEle:hover {
font-weight:bold;
}
Fiddle: http://jsfiddle.net/M9V3Q/4/
Cons is fixed width.
By the way, I think it is bad idea to focus buttons like this. More beautifull for user will be simple color change (e.g. #ccc) and, probably, transition effect. I think it is much more better.
Try this fiddle: http://jsfiddle.net/M9V3Q/9/
I think it is much more beautifull even in this variant :)
Try something like:
.element {
padding: 0 1px;
border: 2px solid transparent;
}
.element:hover {
font-weight: bold;
border: none;
}
A fiddle: http://jsfiddle.net/F4knz/
Could always try CSS3 box-sizing. It cuts into the elements width etc for padding, border..., and so prevents the element from expanding outside its set width.
Need to prefix -moz- or -webkit- for Firefox and safari.
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
I have a problem with margin-top in IE.
I have given a link a margin-top of 2px to align it out correctly in Chrome. But this caused a offset in IE9.
Some code:
CSS
.show_cart{
display: block!important;
float:left;
padding-left: 10px;
margin-top: 2px;
}
HTML
<div class="show_cart">
Toon Winkelwagen
</div>
I hope there is a quickfix but I couldn't find it.
EDIT - Sorry I edit it here but I can't find the code thingy in the comment box. Anyway, I changed it to this based on the answer which stated that I should use the vertical align. Chrome is still displaying properly but in IE its now off by 2px to the TOP.
.vmCartModule .show_cart{
display: inline!important;
float:left;
padding-left: 10px;
}
.vmCartModule .show_cart a{
vertical-align: baseline
}
There is more to it than just a margin. You should also consider font-size, vertical-align and more when you trying to line-up elements with texts. I would not recommend calculating pixels, it will never be consistent in all browsers and very hard to maintain. Instead, try to stick to "vertical-align: baseline", that is more deterministic. Using it you can be sure that your texts are always properly aligned.
This sounds exactly like IE's famous double margin bug, there is an easy fix as described here.
Try changing display: block; to display: inline;. Or you can find another solution to it (there are plenty) or you can use the mentioned HTML5 boilerplate or something similar like headjs, etc.
Just in case if you are using using HTML5 Boilerplate http://html5boilerplate.com/
You can use different value for the same class for IE9 -
.ie9 .show_cart{
margin-top: 0px;
}
Or only if you wish to use jQuery for this, you can write -
if ($.browser.msie && parseInt($.browser.version) == 9){
$('.show_cart').css({'margin-top':'0px'});
}
I've got a puzzling problem in that a certain bit of HTML displays fine in all modern browsers and IE7, but completely fails in IE8. I've racked my mind as to which CSS could remedy this problem but I've come up short every time.
If you look at this link in chrome, near the bottom you'll notice FB/Twitter share buttons, but if you look at the corresponding space in IE8, there's nothing. Could someone please check it out and let me know, I'm stumped...
The CSS code is:
body div.mr_social_sharing_wrapper {
clear: both !important;
overflow: hidden !important;
height: 40px !important;
width: 960px !important;
z-index: 2000 !important;
line-height: 30px !important;
float: left;
}
span.mr_social_sharing,
span.mr_social_sharing_top {
float: left;
}
And yes, I know using !important is poor form; it was inherited and not by choice :)
Seems to be solved by removing the display styles (you had both display: inline-block and display:block) and float: left from span.mr_social_sharing_top.
If there was a good reason for needing the display styles (trouble in other browsers?) you could also add fixed widths to these spans to solve the problem.
I am rendering a small menu in the upper right-hand corner of a web site. There will always be a "Banner" graphic across the top of the page (1024x80 pixels) and the menu must render on top of it. In IE 7, IE 8, FireFox and Safari, the menu looks fine. In IE 6, however, the menu does appear sometimes and fails to appear at other times with no discernable pattern. In the CSS shown below, I placed the "z-index" in the class definitions after reading that this was a fix for some CSS problems of this type in IE 6. However, there is still no joy in Renderville. ANY help will be appreciated!
Here is the CSS defined for the page, the header and the menu:
Div.XPage { background-color: White; position:relative; width:1024px; border-left:1px solid #a4a4b1; border-right:1px solid #a4a4b1; margin:auto; text-align:left; z-index:10; }
Div.XHeader { background-color: White; clear:both; padding:0px; margin:0px; z-index:2; }
Div.XTopMenu { position:absolute; left:810px; top: 0px; width:214px; height:16px; background-color:#333333; z-index:3; }
Div.XTopMenuItem { width:70px; height:14px; margin-bottom:3px; text-align:center; float:left; }
Div.XTopMenuItem a { color: White; font-size:smaller; }
Here is the HTML that uses these CSS classes:
<div class="XPage">
<div class="XHeader">
<a href='/Home.aspx'><img src="/images/Header.png" alt="Banner Graphic" border="0" width="1024" height="80" /></a>
</div>
<div class="XTopMenu">
<div class='XTopMenuItem'><a href='/Home.aspx'>Home</a></div>
<div class='XTopMenuItem'><a href='/Calendar.aspx'>Calendar</a></div>
<div class='XTopMenuItem'><a href='/Logout.aspx'>Log Out</a></div>
</div>
...
</div>
IE6 has issues with z-indexing. In IE6 z-index is only respected for siblings.
Things I'd try:
Reverse the order of menu and header in the html
Give the header a negative z-index
Give the menu a more significant lead on z-index than the header, say z-index:999.
Failing those you could try giving IE6 a different header image that didn't cover up where you want the menu to go. In many cases I've strived for IE6 to have degraded support, it's an ancient browser and has way too many problems. So if it's an option I'd consider letting it have a slightly different appearance. Of course that may not be up to you.
z-index only works on positioned
elements (position:absolute,
position:relative, or position:fixed).
You do not have these on Div.XHeader thus that z-index is being ignored completely.
Read more about z-index on w3schools
No directly useful info, I'm afraid, just another suggestion in case you're sufficiently desparate:
Google has managed to solve this problem, and many more, in GWT. Hold off on the downvotes, please - I'm not sugesting rewriting the app in GWT. I am, however, recommending to look at their code. In their implementation of various components, they have sections, sometimes whole classes, dedicated to working around particular quirks in WebKit, Opera, IE6... Their code is very clear and well commented, often including not just "what" but also "why".
How effective this approach is will depend on how good you are at zeroing in on relevant code (in Java), understanding it and moving the implementation of the essentials to your own code.
Why z-index 10 for the Page? It's supposed to be way in the background, right? Could you try setting its index to 0 or 1?