I have a page like http://ratingscorner.com/mobiles
if u see the left hand side there is a + image displayed. it does not appear in IE 7. i tried all possible things ..but could not solve it. so seeking help here.. any help on this.
You need to explicitly state the width and height in your css declaration for .plus
span.plus {
width:12px;
height:12px;
}
It is a span, inline element.
Add display: block; and specify the height and width.
Also it behaves the same in IE8.
Your image has a height and width of 0, so it won't show up in IE7 at all. I did some quick debugging and found that if you set the height to 15px and display to block, then it shows up just fine. Adding a left float helped move it to the left of the button name.
So to your .Syb .plus CSS definition, add:
height:15px;
display:block;
float:left;
Then you should be fine.
Related
I have two buttons, one implemented as an input, the other as a span. They are put side by side with:
{ display:inline-block; }
The buttons are rendered from a customized tag and a class name is added dynamically in jsp. In css, there are some definition for shadow, for background gradient, for padding, and for font. They do use some CSS3 like border-radius.
But in Firefox, the height of the span button is 18 while the input 20. Interestingly, the height of them in IE 8 are both 25px, why?
Now I need them to be of the same height and aligned horizontally.
Update:
Now I have those two buttons in jsfiddle. Use height:22px; and vertical-align:top; won't help much.
http://jsfiddle.net/gBeCP/
Try setting the vertical-align:top on the input tag. I recommend specifically setting the dimensions in px as this will prevent the browser from applying defaults.
I think I have it done.
Answer in this page indicates that FF treats the padding differently in submit type of input and a span. CSS padding added to height/width for <input type='submit'>
My solution is to set a min-height of both input and span, then use vertical-align:middle; to have them aligned. Finally play around the padding number to have the text on the buttons aligned.
The reason it's different is because each browser has its own default styles so they will vary... just like javascript varies dramatically.
Have you ever thought about actually setting some height on the elements that you want to be the same height?
maybe
span, input[type="button"] {
height: 25px;
}
Or more specifically if you like.
The easiest solution is the following two lines (vendor-prefixes removed for brevity):
.tranCoreButton {
/* I couldn't be bothered to read through the rest of the CSS, or the
in-line CSS; seriously: *minimal* reproductive demo, please... */
display: inline-block;
box-sizing: border-box;
}
JS Fiddle demo.
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;
}
I have a fluid width site with a logo centered in the header area. The logo stays in the center regardless of the window size. Works in all browsers except ie9. In ie9 it is stuck on the right. If I could get it stuck on the left that would be an ok compromise but the right will not do. My best guess is that ie9 does not support the css code:
.logo {
width:100%;
position:relative;
}
.logo img {
margin-left:auto;
margin-right:auto;
display:block;
}
Here is the website http://www.cyberdefenselabs.org/
Anyone know a workaround for ie9 that will not affect other browsers or involve drastic recode?
Your .social-header-wrap element contains floating elements that are not properly cleared. Add this style:
.social-header-wrap {overflow:hidden}
The person above is correct - you have floats that are not properly cleared.
But you should sort out your layout before making style changes as you have the same main menu 3 times but with 1 of them hidden and 1 (the first one) with white on white links.
Simply removing the first main menu (the div with the class "social-header-wrap") also solves the problem.
When using
margin:auto;
you should say
margin:0 auto;
Get rid of margin-left and -right and change to margin:0 auto;
Also the containing element needs to be text-align:center which you undo by putting text-align:left in the element you are centering.
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;
Hey, I appear to have a CSS problem, regarding the spacing of my <div>s on my site.
If you point your browser to www.marioplanet.com you will see an odd space after my Apple-themed navigation bar.
I was wondering if anyone can help me identify why this spacing was added, and how I can eliminate it, as it's undesired.
Also, I believe it has something directly related to the nav bar, because without the nav bar, this is no spacing problem.
Thanks!
It is because of <a></a> present in <li id="gn-support"><a></a></li>
That #globalheader DIV that contains the menu bar has 18px of vertical margin (top and bottom). So naturally what follows is displaced by 18px.
#globalheader {
height:37px;
margin:18px auto;
position:relative;
width:771px;
z-index:1;
}
You might want to remove the gn-ipad, gn-itunes and gn-support <li> elements from your html.
Get rid of the 18px portion of the margin in the globalheader item, then change the width of the globalnav item to 1000px:
globalnav {
margin:0;
padding:0;
width:1000px;
}
Ok the problem has to do with you fixed width on:
#globalheader{
width: 769px; //this is too small and actually not needed.
}
The contained list (#globalnav) has a rendered width of 830px (it has some white space at the end didn't investigate to see where it came from. So if you remove the fixed width from globalheader and add a margin-left of 200px to #globalnav you will center it and get rid of the space.
Additionally if you can see why your list have a bunch of white space to the right of it expanding its size to 830px you can just do a margin-left and margin-right of auto and center the list inside the global header div.
Figured out where the extra space at the end of the ul is comming from list items gn-itunes and gn-support are both rendering with 103px in width. this is comming from the (#globalheader #globalnav LI A css rule) You can override the width in (#globalheader #globalnav li#gn-support A) as well as the (#globalheader #globalnav li#gn-itunes A) css rules and that should fix it as well without resorting to fix above.
If you change the width of globalheader will work.
#globalheader {
height:37px;
margin:auto;
position:relative;
width:515px;
z-index:1;
}
If you want to add more navigation links later you will have to increase the width of globalheader.