I've been researching this for hours now and it seems to be an IE thing but my issue is that I have a container DIV that, in IE9, doesn't expand and cuts everything off after about 400px. Chrome and FF work perfectly, of course.
Container DIV
#main_container{
font-family: arial, verdana;
width: 920px;
top: 0;
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow-x: hidden;
}
Page Container DIV
#page_container{
font-family: arial, verdana;
font-size: 14px;
width: 900px;
color: #000;
border: 0px solid;
overflow: hidden;
}
And the standard markup of page block looks like this
<div id="main_container">
<div id="page_container">
Variable page data goes here
</div>
</div>
Is there an issue with my CSS that I'm missing or is there an IE hack that I need to apply?
UPDATED SCREENSHOTS
IE9
Chrome / FF
The cut off could be coming from the 'overflow: hidden' in '#page_container'.
Did you try overflow: auto ?
Thanks to everyone for the advice and help, greatly appreciated. Saved a few hairs!
#crowjonah's solution of
Try giving #main_container, #page_container { position: relative; float: none; height: auto;} – crowjonah 2 mins ago
Solved the problem.
Related
I am trying to get my nav element to center but it won't work for the older versions of Internet Explorer or Chrome. It also won't change style. How can I get this to center and change? Here is the code:
The nav:
<nav id="Nav">
Library |
Contact |
About
</nav>
The CSS
#Nav {
margin:0 auto;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
There are many ways to centre elements:
Margin way:
With a set width or display: inline-block; you can use:
margin-left: auto;
margin-right: auto;
text-align way:
With a set width or display: inline-block; you can add this to the parent:
text-align: center;
Absolute way:
position: absolute;
left: 50%;
margin-left: width/2;
or
position: absolute;
left: 50%;
transform: translate(0, -50%);
Also don't worry too much about ie7 and below as the the majority of people use higher versions of ie or a different browser though this should work up until ie6
Another thing to watch out for is that you want to use a ul for your navbar. I know, from experience, that it works fine though if you ever want to add a drop-down to the navbar then it is much harder.
Use the below:
text-align: center;
instead of
margin 0 auto;
Sample Fiddle
Note: My assumption was that you did not want to specify a width. Otherwise, you can just use the margin as already stated in the other answers.
EDIT: To use the <nav> and other HTML5 tags with lower version of IE, you can use the HTML5shiv.js (by including the below script).
<script src='http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js' type='text/javascript'></script>
margin: 0 auto; has no meaning without specifying the width.
Since it is a block element it will spread 100% across the page, try giving it a width
#Nav {
display:Block;
width:500px;
margin:0 auto;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
Use:
#Nav
{
margin-left:auto;
margin-right:auto;
width: 12em;
font-size: 40px;
color: #22b14c;
font-family: "Papyrus";
}
Take the following example:
This is a textarea, with a background image (the grey bar) and a relative positioned div after the textarea with a top offset to move the text in place.
The Markup:
<textarea cols="40" rows="6" class="some_textarea">Hello</textarea>
<div class="message_text">This is a message</div>
The CSS:
.some_textarea {
background: transparent url(gray_bar.png) repeat-x 50% 100%;
width: 99%;
padding: 5px;
margin: 0;
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
border: 1px solid #C3C3C3;
}
.message_text {
display: inline;
color: #999;
font-size: 10px;
position: relative;
top: -21px;
padding: 0 6px;
}
The problem is that Firefox is the only browser that doesn't agree with the offset, and results in this very small pixel pushing annoyance:
What is causing this? How can I fix this for consistency? What non-clunky workarounds exist if it can't be fixed?
UPDATE
http://jsfiddle.net/UnsungHero97/maHkr/7/
How about something like this...
http://jsfiddle.net/UnsungHero97/maHkr/2/
What I did was wrap your textarea/message combo in a relatively positioned div and then absolutely positioned the message to the bottom left. You can play round with the exact positioning/margins/paddings to get it looking good across the browsers.
I hope this helps.
Hristo
use jQuery(window).load() instead of jQuery(document).ready()
I have a div with overflowing content. I want the overflowing content to be VISIBLE on all browser. Works nice except for IE7...
I have been trying for a while and was not able to find any info on showing the overflowing content, so I'm hoping someone can help:
Here is the code:
<div class="ui-btn-inner">
<p>hlasd asdasd asdasd lkasdas dalksd ahljklnlnad asljdhasdnas dalsdkjas I am invisible... </p>
</div>
and CSS
.ui-btn-inner {
border: 3px solid red;
padding: 0 !important;
position: relative;
text-align: center;
}
.ui-btn-inner {
height: 22px;
margin-bottom: 22px;
background-color: transparent;
width: 100%;
top: 0;
left: 0;
overflow: visible;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40FFFFFF,EndColorStr=#12FFFFFF);zoom: 1;
}
And as JSfiddle - JS Fiddle where is my overflow in IE7
Thanks for help!
The problem is being caused by your filter:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorStr=#40FFFFFF,EndColorStr=#12FFFFFF);
Unfortunately this is just the way IE7 handles the use of filters and there is no fix for it.
You might consider using a conditional comment to target IE7 only to remove the filter.
The default value for 'overflow' property is 'visible'. I think just removing the 'overflow: visible;' style would help.
I have a div which contains another div with a background image:
<div class="icePnlGrp graMyTasksHomePanelDiv">
<div class="icePnlGrp graMyTasksHomePanelTitleDiv" id="j_id157:j_id165">
<label class="iceOutLbl graMyTasksHomePanelTitle" id="j_id157:j_id166">PLAN</label>
<!--rest of the code--!>
</div>
</div>
This looks fine on Chrome and Firefox:
But on IE it looks strange:
The CSS classes for those two divs:
.gramytaskshomepaneldiv {
background-color: whiteSmoke;
width: 156px;
height: 150px;
margin-right: 50px;
border-right: 3px #EEE9E9 ridge;
border-bottom: 3px #EEE9E9 ridge;
display: inline;
float: left;
margin-bottom: 15px;
}
.gramytaskshomepaneltitlediv {
background: url('/resources/images/external/navigation_arrow.png');
height: 40px;
margin-top: -30px;
width: 185px;
position: relative;
margin-left: -4px;
}
Can you please give a helping hand? Most of the IE 8 issues I had I've solved using position relative, but here this simply does not work...
Thanks...
Ps: If I do hover on a link on IE, on the same page, on that main div (because the rest of the code contains those links), the image AUTOMATICALLY RENDERS fine... Or if I disable any css property from IE developer tools the page is re-render and the image appears fine...which is really strange, ineded...
I have a scrollable div on a page that ends up rendering past the bottom of div and sometimes leaves stick characters behind that don't scroll. This happens in IE7 and IE8 in compatibility mode.
Here is the HTML code from the DOM:
<DIV id=ctl00_MainContent_ViewPort class=AgreementViewPort><IMG class=PortSeal src="/images/Seal.png">
<DIV class=DocumentTitle>Document Title</DIV>
<OL>
<LI>Condition #1</LI>
<LI>Condition #2<SUP>1</SUP></LI>
<LI>Condition #3</LI>
<DL>
<DT><SUP>1</SUP> some foot-noted definition.</DT></DL></DIV>
Here's the applied CSS style:
color: #000;
font-family: arial, tahoma, sans-serif
font-size: 12pt;
height: 300px;
margin: 5px;
overflow: scroll;
padding : 5px;
width: 600px;
This renders fine under IE8, Firefox, and Chrome.
Any suggestions?
Just by looking I'd suggest putting the image in its own DIV. This way you can control any overflows.
Also add the following to your CSS:
clip:rect(0px,600px,300px,0px);
We've solved the mystery.
If you want to poke at the issue directly, here's where it can be seen live. Note: After we push the fix, this link won't repro.
On the LI element in the page level CSS, I removed the following style attributes
li
{
margin-bottom: 10px;
position: relative;
left: 10px;
width: 500px;
}
And replaced them with:
li
{
margin: 0px 0px 10px 25px;
}
On the OL element in the page level CSS, the width attribute was moved.
ol
{
padding-left: 10px;
width: 500px;
}
And I feel like something of an idiot. The moral of the story, and this has been discussed elsewhere is that IE7 scrollable divs and the CSS position attribute do not play well together.