I have a form with errors that appear above it that look like
<div class="form-error" id="optin_error" style="display: none; ">You must opt-in to participate.</div>
And a form inside a <form> with a bunch of inputs inside of divs... nothing really out of the ordinary.
But I have javascript validation on my field with turns the form-error from display:none; to display:block; which resizes the container field fine. The problem lies in the fact there is a footer (also inside a div) that does not move down. If I open up IE8 developer and look at the main container (that wraps everything) it also does not extend. If I for example uncheck the main container width style and then recheck it, it fixes everything.
Is there a way to force IE8 to "resize" their divs when an element inside a div turns from display:none; to display:block;
PS. There is no funny css, no floats, no absolute positioning, nothing that would cause this...
Form Error Block CSS
.form-error {
color: #EB1F25;
}
Footer Block CSS
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
}
.footer-wrapper .links {
width: 960px;
}
After some investigating it seems the inline-block attribute on the container is causing the issue.
Ended up being an issue with display:inline-block; element not resizing. Changing to float worked.
try givin the width to the wrapper. remember the footer should be inside your main wrapper, Also give a height other divs... min-height or something similar.
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
width: 960px;
}
.footer-wrapper .links {
width : 100px;
}
It's hard to tell what exactly is making the problems. But you can test out some of this tips I suggest you to try:
If your .form-error is showing up before (above) the actual <form ...></form>, then try to insert a <br clear="all"/> tag between those two blocks. If not, add clear:all to <form ...> and width:100% to .form-error.
If not, add position:relative and overflow:hidden first to the .form-error, if not helps, add it to <form...> too.
As already said, will be much easier if we could see your entire code, try to use jsbin with your entire css and html source code, because IE is very strict in html rendering.
Related
I cannot seem to make IE9 render a fieldset with rounded corners whereas other browsers do.
Has anyone encountered this too ?
This happens only if you use <fieldset> with <legend> - without it the corners render ok.
You can fix this bug by applying display:inline or display:inline-block to your <legend> element - but than you have to reposition it back in place by setting position:relative and moving it around.
Depending how the styling of your legend looks like (with background it will look the same - without the background the border of fieldset will still be visible behind the letters) you can make it look pretty much the same as in other normal browsers.
From my experence in the latest version of IE9, I can not get a fieldset with legend to have a radius. I have not had any trouble with other borders in IE9, the css3 border-radius works just fine, just fieldset/ledgend. I'm still scratching my head over this.
I too used to use fieldset and for more than just forms, but the constant hit and miss on compatibility has caused me to dump them. Better to write your own CSS DIV Classes that emulate fieldset. Using CSS you can get an exact replica of what fieldset looks like and you have a lot more flexibility and compatibility
its only working in latest rc build , aint working in beta version of IE9
try
.class {
border-radius-right-bottom: 15px;
}
It is still problem under IE11 when using legend
, and the solution is in this thread:
Rounded corners on a fieldset
fieldset {
margin:20px;
padding:0 10px 10px;
border:1px solid #666;
border-radius:8px;
box-shadow:0 0 10px #666;
padding-top:10px;
}
legend {
padding:2px 4px;
background:#fff;
}
fieldset > legend {
float:left;
margin-top:-20px;
}
fieldset > legend + * {
clear:both;
}
http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/
You can add the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Fieldset rendering is always fraught with problems with rendering and particularly with printing. It's hardly surprising that it doesn't work.
The standard workaround is to add another container and style that.
To get IE9 to use rounded corners(CSS 3) you have to add this to the HTML header:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Then use CSS as normal: border-radius-right-bottom:15px;
I had the same issue & this fixed it.
I had an access only to CSS file, so I could not make any changes in HTML, so I made the hack in CSS for IE.
HTML structure was:
<form>
<fieldset>
...form content...
</fieldset>
</form>
The whole CSS for all browers and with IE hack:
fieldset {
border-radius: 20px;
border: 1px #3D3D3D solid;
}
#media screen and (min-width:0\0) {
form {
border: 1px #3D3D3D solid;
border-radius: 20px;
}
fieldset {
border: 0 none;
margin-top: 1px;
margin-bottom: 1px;
}
}
Of course, if your site has another html-structure, this will not work. Therefore instead "form" you can apply in css to a parent div of your fieldset.
I am an awful web programmer trying to make a website for a school club. I'm using the fullcalendar plugin to display my Google calendar's events.
The trouble is, I'm using a lot of weird little tricks to get my sidebar to work, and I think that some of the css i'm using to get my divs to display in the proper places are preventing my calendar from displaying correctly. Right now, it's crammed at the top of my div (as you can see in the events tab). I just want the calendar to display beneath the header in my #events div.
I think the culprit lies somewhere in one of these css blocks:
.container div
{
opacity: 0;
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
overflow:hidden;
}
.container
{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
width:80%;
min-height: 100%;
left:20%;
background-color: #ffffff;
position: relative;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
overflow-x:hidden;
overflow-y:scroll;
}
I play around with the "position:absolute" in .container div, but that just makes all of my divs go haywire. I'm really, really new at this. If anyone can help me figure out why this isn't working or give me tips on how to manage my sidebar more intelligently, I would appreciate it.
The site is hosted here:
http://webbox.cs.du.edu/~samkern/DU-GDS/index.php
Also, if any clarifications are needed, please ask. I hope I have given enough information.
I think I might have a sollution for you:
change
.container div {}
to
.container > div {}
What you're saying with .container div {}, is that ALL divs within the .container must have that style. This is apparently not what you want.
With .container > div, you only select the div's within the .container on the 1st level.
I.E.:
<div class="container">
<div> <!-- this div gets the styling from .container > div -->
<div> <!-- this div doesn't get styling from .container > div --> </div>
</div>
</div>
I hope I made this clear for you.
Give a height to your div, either in the HTML initially, or in the JavaScript when that populates the div with something. Since the page starts up with nothing much in the div it doesn't have any height. Later the JavaScript is adding content, but that won't change the height, so scroll bars appear instead and everything is out of sight. So give it enough height to hold all the content (use em units for the height, rather than px units, so it won't matter what text height your users are using).
Also check out your JavaScript syntax - there's an unwanted comma I think in the $(document.ready()) function, for instance, which should stop that bit of code running.
Also correct your HTML (run it through an HTML validator - there's several around). The errors aren't causing your particular problem, but needs cleaning up nevertheless. It needs a DOCTYPE eg for HTML5. The link to normalize.css should be in an href not an src attribute, and the for attributes in your labels don't all point to field names.
Please take a look at this: http://sources.freehosting.bg/landing.html
I am trying to vertically align #content so it looks good on larger (1920x1200) and smaller (1024x768) resolutions. By that I mean it does not have a scrollbar.
As you see there is plenty of free space so a scrollbar is unneeded.
The only solution I came up with is to calculate the height of #content with JS and to set a padding, but I realize it is the lamest possible solution.
Please advise me on how to achieve that.
See if this fiddle is what you are looking for. Simple solution IMO.
It works by forcing the containing div to behave as a table-cell, and making use of the vertical-align: middle style. It doesn't require you to know the heights of any elements at all.
Code used in the fiddle are below.
HTML:
<div class="a">
text inside div a
<div class="b">
text inside div b
</div>
</div>
The important styles are:
display: table-cell
vertical-align: middle
The rest are only there for demonstration. CSS:
div.a {
border: 1px solid red;
}
div.b {
border: 1px solid blue;
height: 200px;
display:table-cell;
vertical-align:middle;
}
If your content height is fixed put a div before the content
<div id="distance"></div>
<div id="content">
Vertically centered :D
</div>
and style it like:
html, body {
height:100%;
margin:0;
padding:0;
}
div#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* half of website height */
float:left;
}
div#content {
text-align:left;
margin:auto;
position: relative;
width: 950px;
height: 600px;
clear: left;
}
The only way I know of that works using pure CSS, no JS and no hacks requires you to know the height of the thing you're trying to position:
<html>
<head>
<style type="text/css">
/* Give your document height */
body, #content {
height: 100%;
}
/* Give your element height */
.thing {
width: 20px;
height: 300px;
background: #000;
}
/* Position thing */
#content .thing {
position: absolute;
top: 50%;
margin-top: -150px; /* half the height of the thing */
}
</style>
</head>
<body>
<div id="content">
<div class="thing"></div>
</div>
</body>
</html>
EDIT: Updated height of item, container id. Still works just fine.
There is one way to do this without javascript and without knowing the height of the content - but purists will not like it. Then again, sometimes it doesn't matter if it's not approved by the trendy people. Sometimes all you need is to get the job done because you boss wants it that way.
And the solution is: use a table (told you purists wouldn't like it). Do layout the old school way and abuse the fact that HTML specifies lots of capabilities to tables.
A table cell is the only HTML element that has a vertical alignment attribute that does what most people expect it to do. Just give the table 100% width and height (so that is expands with the window size) and use cell alignment to position the content you want.
I've only ever had to use this trick once and it still makes me feel dirty* but when you really need it it works better than anything else.
*note: I'm a purist myself but understand that sometimes a man's got to do what a man's got to do.
This is the markup
img.shadow | div#content |div.shadow
I need to find a way to reliably keep the shadow images the same height as the content area. Problem is the content area can resize (like tabs that have different height, or parts of it that only appear in certain conditions). I was able to set the height of the shadow using javascript on page load, but then as soon as the height of the #content changes... not sure this makes sense, but...
Maybe this explains the problem better
http://jsfiddle.net/uLUnf/28/
The question is
how can I make the images (the grey boxes) resize along with the content (light grey box)?
http://jsfiddle.net/uLUnf/29/
You did it urself? :P
You could put the resize call inside the function that adds the content as well, like this:
jQuery('document').ready(function($){
$('#click_me').click(function(){
var id = $(this).attr('href');
$(id).show();
$('.shadow').height($('#content').outerHeight());
});
$('.shadow').height($('#content').outerHeight());
})()
Or it seems like you could get rid of the shadow images and the call to resize it entirely, and just add a border to the content in the CSS:
#content{
float: left;
display: block;
background: #eee;
width: 200px;
border-right: 7px solid #666;
border-left: 7px solid #666;
}
I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.
Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.
You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.
I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div
My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index
Make sure your button is inside a positioned element, which isn't itself hidden.