I have a problem with a site I am doing some maintanence on, the latest test version can be found here http://www.smithandgeorg.com.au/new/ If viewed in IE7-9 or Opera this page displays as intended, however in Firefox and Safari the menu is positioned so that it is against the left side of the screen (it's best seen rather than described).
The problem seems to stem from my use of positioning. The #content element is positioned position:relative; top:0px; left:0px so that when the #menu element (which is nested inside) is positioned position:absolute; left:0px it will be pushed right up against the left side of the #content element, as happens correctly in IE9 and Opera. However Firefox and Safari seem to ignore the fact that #content is positioned relatively and just push #menu up to the left side of the screen.
I tried to reproduce the problem in the simple page below, but everything worked as expected.
<html>
<body>
<div style="border:1px solid red; width:100px; height:100px; position:relative; left:0px">
<div style="border:1px solid black; width:100px; height:100px; position:absolute; top:60px; left:20px">
</div>
</div>
</body>
</html>
Any help would be greatly appreciated :)
Firefox usually ignores position:relative on table elements, but this can be fixed by adding display:block to #content:
#content {
position:relative;
top:0;
left:0;
display:block;
}
SO question/answer about position:relative
Related
I want to fit an image with his parent dimensions. I don't want to use the image as background because is not clearly for google whether the image is using for styling or for content propose.
Anyway, i found object-fit and seems to be what I need.
My big problem now is that object-fit and hover doesn't work together as I expected.
Here is my code:
<div>
<img src="http://cdn2.hubspot.net/hub/53/file-385992610-jpg/html-code.jpg" />
</div>
<style>
div{
width:200px;
height:100px;
overflow:hidden;
}
div img{
width:100%;
height:100%;
object-fit:cover;
opacity:0.5;
}
div img:hover{
opacity:1;
}
</style>
And here is my fiddle:
http://jsfiddle.net/jx0ntkmy/
Hovering several times you will see a distortion of image. I have tested in firefox and chrome. In chrome there is no problem, but in firefox it is.
I have a site which IE and FF render correctly but Chrome and Safari do not.
Here is the HTML:
<div class="cover">
</div>
<div class="nav">
</div>
<div class="misc">
</div>
Here is the CSS:
.cover{
position:absolute;
background-color:#00c9f8;
z-index:600;
height:100%;
}
.nav{
width:100%;
position:fixed;
top:0;
z-index:500;
}
.misc{
position:relative;
top:100%;
height:80%;
min-height:300px;
width:100%;
padding:0;
}
It would be expected that .cover will fill 100% of the viewport, which all browsers render correctly; .nav will be fixed at the top, which all browsers render correctly; and .misc will sit just off the viewport, which IE and FF renders correctly but Chrome and Safari do not. Webkit browsers instead make .misc sit at the top as if it had position: fixed.
In the example above .misc represents .orbit-wrapper in the actual site. Also the same problem exists for .menu-box-row, in which position: relative is not rendered correctly.
Many thanks in advance for a solution!
Percentage values used with relative positioning have been an issue in Webkit for awhile. You should be able to find a workaround by changing the .orbit-wrapper's position to absolute and then tweaking the other elements' styles accordingly to account for the disruption in your flow. Good luck.
I have a Footer that spans the width of the page. Within the footer there is an which is essentially acting as a footer background image that fills the entire width of the footer / page. However, in IE, there is some white space under the footer, when it should just be flush with the bottom of the page. Seems fine in Firefox, Safari, etc. Here's what I have, any recommendations on something to try?
<body>
<div id='container'>
<div id='content'></div
</div>
<div id='footer'></div>
</body>
CSS Is:
html {
font:62.5% 'Helvetica Neue';
color:#777676;
margin:0;
padding:0;
}
body {
font-size:1.8em; /* 18 px */
line-height:1.2em;
margin:0;
padding:0;
width:100%;
}
#container {
width:906px;
margin:0 auto;
height:100%;
position:relative;
z-index:10;
}
#content {
padding-top:20px;
}
div#footer {
position:relative;
bottom:0;
clear:both;
width:100%;
z-index:1;
}
div#footer img {
width:100%;
border:0 none;
}
Add display:block; on the image, that should fix it...
(and use code highlighting in your question if you want <tags> to be visible in your text...)
That could be a very involved answer. I have ran into this before and I forget now how I solved it. First, I should ask which version of IE your testing in, it could be old. I don't think this is as much of an issue in IE 8 and above. Next, is your DOCTYPE set. Then try setting the height and/or line-height on the footer. Make sure all sibling and parent elements have their "position", "top", and "left" set.
Have you tried positioning it "absolute" and if that doesn't work remove all other elements in the body, adding them back in one at a time till it breaks and then figure out what is wrong with the element you added.
I'm building a site using the 960gs and some styling of my own. My navigation menu uses this code:
<nav class="push_1">
<div class="grid_2 alpha"><span>About</span></div>
<div class="grid_2"><span>Services</span></div>
<div class="grid_2"><span>Projects</span></div>
<div class="grid_2"><span>Client Stories</span></div>
<div class="grid_2"><span>Contact</span></div>
</nav>
And this CSS:
.container_12 .grid_2 {width:140px; display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px;}
nav{background:#666; z-index:2; font-family:tahoma, helvetica, sans-serif; font-weight:bold; letter-spacing:1px; overflow:hidden}
nav div{position:relative; background:url(http://placehold.it/140x250/z03); height:250px; display:inline-block }
.interior nav div{height:50px}
nav div span{display:block; background-color:#111; color:#fff; padding:.3em 0; text-align:center; border-bottom: 2px solid #777;opacity:.9}
nav div a{display:block; position:absolute; top:0; height:100%; width:100%; z-index:5}
Which works fine in Firefox, but fails miserably in IE7, where only the text within the <span> elements appears and all other styling is lost. I've run into this same issue when trying to use <li> items instead of divs as well. Curiously, the same code shows no problems in IE7 when the height of nav div is set to 50px, as it is on pages with class="interior set on the body. The HTML5 shim is in effect on this page. I've tried searching through various known IE7 bugs, but couldn't find one that quite matched the problem I'm having. If anyone has any suggestions, I'd be much obliged.
In IE8, I could replicate the issue. What I found was that is was the tags that were confusing it. If I changed those to and added "nav" as a class on those divs and then changed "nav" to ".nav" in the CSS, IE seems to be happy. You can see it in action here in this jsFiddle:
http://jsfiddle.net/jfriend00/Vz85f/
If you still want the tags in for other reasons, it appears that you can wrap the HTML in the fiddle with before and afterwards and it will still display appropriately in IE - just don't use nav in the CSS rules. I'm unsure why - just reporting what I found with experimentation.
I found an example here of using rounded corners using a single image. I've got this working perfectly in IE7+ and FireFox.
The following is an example tab layout:
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
<div class="inner"><p>Test 1</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
<div class="inner"><p>Test - 2</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
<div class="inner"><p>Test - 3</p></div>
</div>
The following is my CSS Style:
.corner
{
background:url(../Images/LightCorner.gif);
position:absolute;
width:13px;
height:13px;
overflow:hidden;
}
.inner
{
position:relative;
padding:13px;
margin:0px;
}
.inner p
{
padding:0px;
}
.tab
{
color:#FFF;
float:left;
font-weight:bold;
margin-right:5px;
position:relative;
text-align:center;
}
.tab p
{
margin:0px;
padding:0px;
}
.tab
{
background:#B5B5B5;
}
.TL
{
top:0px;
left:0px;
background-position:0px 0px;
}
.TR
{
top:0px;
right:0px;
background-position:-13px 0px;
}
.TL, .TR
{
margin:0px;
padding:0px;
position:absolute;
}
The issue is that when my div's width is an even number, I end up with a 1px right-hand border, as though the top right div is actually being positioned as right:1px. When the width is an odd number I do not see the right hand grey colour of the tab and the div is displayed as expected.
The image I am using can be found here. A full example can be found here.
Why is the top right div not being positioned correctly at right:0px? Why do I end up with a 1px gap in IE6 when the tab width is an even number?
The issue is that when my div's width
is an even number, I end up with a 1px
right-hand border, as though the top
right div is actually being positioned
as right:1px. When the width is an odd
number I do not see the right hand
grey colour of the tab and the div is
displayed as expected.
There is nothing with your code, it is a bug in Internet Explorer 6. When absolute-positioning things to the right or to the bottom, the actual position will be rounded to 2px, giving 1px "margin" when the total width/height is even (or odd). Unfortunately, you need JavaScript to fix that.
You can check this example (written by me) and slowly resize the IE6 window, pixel-by-pixel. You will notice that the position of bottom and right boxes will be updated only once every two pixels. Another guy has also found and documented this bug on his site.
I've already written one to fix height-calculation when positioning top and bottom, and leaving height as auto. I use this script on this site. In your cause, this script can be modified to calculate the left-offset based on available_width-(right+width).
Have you tried
body {
margin: 0;
}
Try with:
right:-1px;
for IE6