Internet Explorer issue - css

This site has an issue with the center content portion. For some reason in internet explorer just a couple of letters are being cut off by the sidebar. I have no idea why, or how to fix it. The div floats right, so I figured adding a few pixels of margin to the right would do the trick. It doesn't...
It's this way on IE8 and I'm actually running IE 7.4 through parallels on a Mac.
Any suggestions?
http://www.thesurgicalsolution.com/

In an ie.css you have:
#content, .sidebar { overflow: hidden; }
which is clipping the text in IE only. So if you remove this rule the text will no longer be clipped. It is possible that this rule exits for a reason though, so you might want to test the whole site before just deleting it.
Edit: I would also fix the validation errors as well as I have had unexplained rendering issues on different browsers in the past which were caused by invalid markup.
Edit 2: The #content parent <div> has a defined width (and is overflow:hidden) but a child <div> also has a defined width and its position makes it greater than the right edge of the parent and is therefore clipped by the parent's overflow rule. So as an alternative, you could make the .rightbox narrower to avoid the overflow hiding in IE.
.custom #content .box-wrapper .rightbox {
float: right;
width: 451px; /* <-- change this */
margin-right:5px;
}

I don't know why that happens, but adding a padding-left: 3px anywhere that applies to it fixes it.

Related

Centered floating logo stuck on right only in IE9

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.

DIV in IE7 ,somehow ignores the width occupies the remaining space

Let me make it quick for you all :
Go to http://chetanreddy.com/chat/ in Internet Explorer 7.
Notice there is a lot of space after the single word.
Works fine in all except IE7.
Would appreciate your help.
If you want to edit it : http://jsbin.com/eribuf/3/edit
Ok, for starters you need a min-height on one of the background boxes, because it's breaking your gradient:
.wBoxTall .right, .gBoxTall .right {min-height: 29px;}
.wBoxTall .bottom .right, .gBoxTall .bottom .right {min-height: 0;}
Whenever you have issues in IE7, the first thing you should try is giving the element hasLayout - it's a weird little bug that means sometimes your styles don't work as they should. It's also often useful to specify a positioning. Try this:
.wBoxTall, .gBoxTall {zoom:1; position:relative}

Correcting css so an element renders correctly in IE and FF

I have been trying to resolve this issue on my own since Friday and I just don't seem to be having any luck. Hopefully with the following specifics, someone here can help push me in the right direction.
The site in question is http://www.jewelbyjewel.co.uk
The problem area: Top navigation menu
If you look at the menu in chrome, this is how the second menu appears:
This is how the menu SHOULD look.
In IE and FF, this is how the menu looks which is incorrect:
Now, I am aware I can fix this by explicitly specifying a width in the following stylesheet:
http://jewelbyjewel.co.uk/wp-content/plugins/ubermenu/styles/custom.css
I could change this:
#megaMenu ul li#menu-item-225 {
position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
max-width: none !important;
}
to this:
#megaMenu ul li#menu-item-225 {
position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
max-width: none !important;
width:400px;
width: 420px\9;
}
(width: 420px\9; is an IE9 hack).
While this does work I am wondering why I am having to specify individual widths when in Chrome this works without issues and I am not specified a maximum width anywhere in the CSS. I hate to admit it but barring using the hack as detailed above, this issue has me beat! I'm pretty certain I've either done something wrong or I'm missing something trivial. Either way, I would love to be able to get to the bottom of this and put it behind me.
Not sure if this helps, but your width behavior is affected by absolute positioning of the <ul class="sub-menu sub-menu-1">.
There is a bit more on the subject: div with unspecified width (absolute positioning), so specifying width or min-width is the way to go.

No bottom margin inside overflow:auto element

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;

Background image is longer than the enclosing div

On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content

Resources