My site design requires a background image running across the top of the page. You can see what it is supposed to look like in this screenshot. Link to my site.
Unfortunately, I used Firefox to check my work while putting this together. I used FireFox, because it has Firebug. The site looks right in Firefox, but wrong in Safari, Chrome, and IE. In Safari, Chrome, and IE, the background body wrapper background image is below the menu. Example screenshot where background at top is wrong.
Is there an easy fix to the background image, so it will work in all browsers, or do I have to take a few steps backward to fix some basic problems in my markup?
The margin on #nav is collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) because its parent (#wrapper) has no top margin, padding, or border to contain it. A quick-and-dirty fix for your problem would be to add padding-top: 1px; to your #wrapper CSS.
Change the margin property of #nav and add padding to #wrapper equal to the height of your background image.
#nav {
margin: 0 auto;
}
#wrapper {
padding-top: 85px;
}
Related
I'm developing a website. Everything looks great on 100% zoom but when I'm zooming in or out in chrome and IE (not Firefox) the style changes and div blocks move! I have a container div with a background and some div blocks on it. Everything should be in exact position and it is important in my site.
You can see in picture how it makes my style look so bad.
I tried to use percentage instead of pixel for sizing and positioning of all elements in the page but its not working.
My CSS:
.container{
width: 880px;
background-image: url('b80.png');
}
.picture{
margin-left:13px;
margin-top:11px;
}
I too faced the same problem, when I tested in a different screen size.
Try position: relative or display: inline-block for .picture. This may solve the issue.
I've been searching through stack overflow to find an answer to this, but nothing has been helping me (or I've been adding it incorrectly).
I've set up a horizontal menu on a website for a client and am trying to center the menu items within the menu bar, however, the right and left padding is off by 1px between firefox and chrome, which makes the last menu item in the row butt up against the right edge only in Firefox. Dropping the left and right padding in firebug by 1px on the li tags in the menu makes it look like it does in Chrome with my original CSS.
The problem code seems to be on the li tags padding.
Here is a JSFiddle with my menu code (sans background images, but the problem is still evident) http://jsfiddle.net/FxznT/1/
and here is the original site I've been working into for reference: http://clients.taylordesign.com/LCBP/site/home.html
What am I missing? I am already using a CSS reset. Thanks.
You could try and use a CSS hack to select only Firefox:
#-moz-document url-prefix() {
.ul.topNav li {
padding: 16px 11px;
}
}
I'm working on a website for a friend of mine and I'm having a bit of a CSS nightmare. The URL is http://www.bike4haiti.com.
In Firefox and Chrome, there is a Haitian flag that appears in the top right corner of the top banner. In IE, however, it appears as a thin vertical line along the right edge, beginning at the top of the menu and descending past where the content section begins. The CSS class is quite simple code:
img.rightfloat
{
float:right;
padding-left:1px;
padding-bottom: 1px;
padding-right: 5px;
padding-top: 1px;
}
My guess is that it is one of the other CSS elements causing the problem, but I have no idea which one. I tried using the F12 tool, but I had no luck finding the problem.
Help please!
set your first anchor to float:left; you already have the image floating so then just clear them with #topmenu{float:none; clear:both}
that should do it. you'll probably want to tinker with margins for spacing.
You have a your width set to nothing (width="") in your <img> tag.
Here is my test case : http://jsfiddle.net/bpw98/15/
I have a div with overflow:auto, and a div inside it with a margin and a border. The inner div doesn't have its bottom margin in IE8, while it's displayed properly in Webkit and Firefox.
Opera renders it in a wrong way too:
The solution is in that browser: use padding in the outside box instead of using margin on the inside.
Here is the code
Unfortunately , it does not resolve the IE8 problem, I know. But it's a known bug , CSS 2.1 spec does not cover precisely how this testcase should be rendered.
Check this
Ok, I have a horrible hack for you:
div.outer:after {
content:"";
background-color: inherit;
}
This works for me but leaves a larger than 5px margin at the bottom of div.outer:
JSFiddle: http://jsfiddle.net/wwTnS/
To get past this you could target IE8 only (so not IE8 and below as IE7 works correctly for once) and set margin-bottom to about 1px...but then that is getting even more hacky. The code I have added above should not have any noticeable effect on any other browsers.
Extra Note
If you remove the background-color and check the code in IE9's IE8 compatability mode then it renders fine and the margin-bottom is 5px. However, in my emulator (which is usually quite accurate), the margin-bottom is back to 0 if you do not add background-color.
As commented by tildy, the problem is already documented. I think I found a working solution, but it requires extra markup: I added a div between outer and inner, with a 5px transparent border. See http://jsfiddle.net/bpw98/19/.
I tried to add padding to outer instead, but it didn't work either. The rationale between that is: "the scrollbar lets the user scroll content, and only content". So the scrollbar stops where content stops, even if there's padding or margin after that.
Instead of margin on div.inner maybe you could try setting padding: 5px on div.outer
Ironically jsfiddle doesn't seem to work in IE8, which is quite funny.
Anyway, I had the same problem just now and went down the route of using :after on the inner element to inject content where the bottom margin should be:
div.inner {
margin: 5px 5px 0;
}
div.inner:after {
content: " ";
display: block;
height: 5px;
}
jsfiddle here: http://jsfiddle.net/bpw98/41/
However, this only works if you don't need that red border. I'm not sure if it was there just for the purpose of showing the issue or you actually need it? If it is needed, I'm afraid this answer won't work.
I removed the height of the .outer div and it worked for me !
Propably it doesn't work because your inner div is higher than 100px;
I'm having a problem with the "overflow: hidden" CSS property.
In Firefox, IE8 and Safari 5 when I apply this property to a div that is used for containing ad banners (like adsense leader boards or flash) at the top of my content there is still some overlap happening in Chrome when the window is resized to be small enough that they collide.
In Firefox and IE8 it works as expected and everything is completely hidden behind the right sidebar. In Chrome the actual content is hidden but it is replaced with a white background that still overlaps and blocks out the sidebar.
I have linked to a screenshot showing what the problem looks like. Is there anything I can do to fix this?!
http://tinypic.com/r/259cs95/7
I was facing problems with the below css in chrome. It was not working at all.
div.hidden {
margin:0px 0px 10px 0px;
overflow-y:hidden;
}
Now, I changed the above CSS as,
div.hidden {
margin:0px 0px 10px 0px;
overflow-y:hidden;
position:relative;
}
It works fine for me.
Likely there is some issue with your css or layout.
You could sidestep the issue by changing the z-index on your sidebar to be greater than the z-index of your ad, this would cause it to render above the add regardless. Make sure you define some value for position.