I am working with IE8 in quirks mode...
I have styles cascading from my Firefox stylesheet which include:
#container {position:relative; width:1007px; margin-right:auto; margin-left:auto;}
#textbin {width:720px; position:relative; margin-right:auto; margin-left:auto;}
Apparently I'm not doing something right, or auto-margining does not work in IE8.
Is this the case? If so, how can I get around this limitation? I tried no positioning, absolute positioning, and even adding relative position to my IE8 stylesheet. Furthermore, when I manually center the div, IE8 adds margin to the bottom of the page...
by the way, I am a beginner here, so if more info is needed please let me know!
The old-school hack-y way to do it was to add text-align:center to the parent of the div you want to center. Of course you'll need to then specifically declare a text-align property for the child elements if you don't want them to be center aligned, as text-align is going to be inherited by child elements.
This will work for IE5 quirks and higher.
The css:
body, html {
width:100%;
}
#yourdivname {
margin:0px 50% 0px 50%;
//this can be removed, but is just for test sake.
background-color:#bbb;
width:100px;
height:100px;
}
I hope this will help, kind regards Bert Jan.
Related
I've gone through stackoverflow questions and a whole bunch of articles on vertically centering text like the following:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
None of the techniques seem to work with the latest version of Chrome. Is that just the nature of Chrome? My text just always appears at the top. It seems that whenever I use 50% or 100% as values for CSS's height or top, nothing happens.
I just need a single line of text vertically centered. line-height isn't helpful because I want it centered in the middle of the browser window... I don't know how tall the browser window is going to be.
UPDATE: The problem is apparently Foundation 4. Once I delete the following everything works as expected:
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
Any idea on how to make it work with Foundation 4?
I use various vertical centering methods regularly, and they still work in the latest version of chrome (31). You've probably overlooked some small detail - can you post what you've tried?
For example:
This technique uses a display:table-cell wrapper with vertical-align: middle; display: table-cell; element: http://jsbin.com/ofapiv/1/edit
And this technique uses a ghost element (a :before element with height:100% and both it and its sibling have vertical-align:middle): http://jsbin.com/uqutol/4/edit
And this is the ghost element technique simplified to center just a single line of text: http://jsbin.com/ubUxOgO/1/edit
<!DOCTYPE html>
<title>Centered line</title>
<style>
html { height:100%; }
.singleline {
position: absolute;
top:0; left:0; right:0;bottom:0;
text-align:center;
}
.singleline:before {
height:100%;
vertical-align:middle;
position:relative;
content:'';
display:inline-block;
}
</style>
<div class="singleline">This is a centered line!</div>
affected page: http://adq.geantduweb.ca/
Firefox, Ie8,9 and Google chrome all run with the desired effect. The overflow works...
but internet explorer 7 i get a horizontal scroll at the bottom and you can see my white mask hiding the themed blue bar (Breadcrumbs)
any ideas to make this to work in ie7?
my overflow is on my #wrapper that has a min-width of 960px
Here is some of the CSS for the element that is causing the issue. (Note this is SASS CSS it outputs just like normal CSS when parsed.)
#wrapper
min-width:960px
overflow:hidden
#content
background:#fff
min-height:100px
padding:1px 0px 0px 0px
#component
padding-bottom:30px
.contentinner
position:relative
width:960px
margin:0px auto
.contentrightmask
position:absolute
top:-44px
right:-10000px
width:10000px
z-index:900
height:43px
padding:0px
margin:0px
background:#FFF
thanks for the help!
1.IE6 and 7 both do this, and it's caused by their stunningly creaky layout engine - it was never built with CSS in mind and it still shows, even in IE8(q). Put the float:right element first is probably the most commonly seen. By Keith More info
2.Or try setting them to display:inline or display:inline-block More info other link
3.Try to small change markup: place items with a float before items without it (from the same row). It should help. by oryol More info
in your code
<div class="contentrightmask" slick-uniqueid="389"/> in ie7
which has possision absolute and width is 10000px and even it not contains any data remove this div or fix your Css
I fixed IT
Thanks to : http://snook.ca/archives/html_and_css/position_relative_overflow_ie
i put position:relative to my #wrapper
(the element that has the overflow:hidden.)
thanks everyone who tried :)
I'm creating my portfolio. While doing that I just come across with an error in the top menu. It's aligned to left. I tried my level best to solve that problem. I need that to be central aligned. Can anyone please help me? Url is http://jilsonthomas.com
Also footer is not extending to the stream sides. ( both left and right) please help....
Cheers...
You can center the menu by making the list an inline element with display: inline-block; and by specifying text-align:center; on it's parent div#menu.
#menu{
...
text-align:center;
}
#menu ul{
...
display:inline-block;
margin:0;
padding:0;
}
Another option would be to set a width on the list and keep it a block element and specify margins left/right auto, but that would be kinda hackish.
To solve the footer issue just remove the margin and padding on the body. It's the margin in this case, but it's good to remove them both. I'm not sure, but it may vary from browser to browser.
body{
margin:0;
padding:0;
}
Also you may want to use a CSS reset to avoid all sorts of problems like this one.
Hope this helps you,
Alin
I don't understand why FF and Chrome render my page differently. Here's a screenie of it in
firefox: firefox example http://grab.by/65Bn
and here's one in chrome
chrome: chrome example http://grab.by/65BB
fieldset has a relative position and the image has an absolute position.
here's the basic structure:
<fieldset class="passenger-info">
<legend>Passenger 1</legend>
<div class="remove-me">
<img src="/images/delete-icon-sm.png" />
</div>
</fieldset>
basically the image is declared right after the legend.
here's the css for fieldset:
.passenger-info {
background:none repeat scroll 0 0 #F2F2F2;
border:1px solid #9D240F;
display:inline;
float:left;
margin-bottom:10px;
margin-right:10px;
padding:3px 10px;
position:relative;
width:350px;
}
and for the remove-me image:
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
it's totally weird. I tried putting the fieldset padding out, and the image moves up a little, but still not at the corner.
This post shows that FF does indeed have problems with rendering fieldsets.
http://www.codingforums.com/showthread.php?t=132624
Is there a better way of doing a fix without using a browser specific hack?
I can't believe this is 4 years old and still not answered. I searched every where for this answer. Here is what I did to use position absolute on an image within a fieldset. From here, change your right and top positioning to make it work for you in Firefox. (leave your original class in place for IE, Chrome, Safari, Opera)
#-moz-document url-prefix() {
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
}
This is a Firefox Hack that I'm told works for every version of Firefox. I'm using Firefox Version 33.0.2, so I can't confirm this works on older versions. I had the same problem on my site. It looked the same in IE, Opera, Safari, and Chrome. It was only in Firefox I noticed the positioning different. This works!
It appears that Firefox has an invisible padding or margin that places the element at the top right of the text space. Chrome is placing the element at the top right of the fieldset element outside of the flow of text.
One thing you could do is add a div wrapper and then absolutely position the element in the top right of the wrapper so that it lays over the corner of the fieldset.
It appears that the .remove-me element might have margin. Make sure to to remove that prior to adding absolute-positioning to items.
For precise results, you should always do a 'reset' in your CSS. This means removing margin/padding from every element.
A simple reset:
* { margin: 0; padding: 0px; }
Put that at the top of your CSS.
I have used #media screen and (-webkit-min-device-pixel-ratio:0) {} and fixed my absolutes that way. Its not very dry but it works.
I think it is because you didn't indicate the height of the div (passenger-info) that contains the button; Chrome starts acting up when you don't specify this.
The real solution is firefox and ie don't set defaults for top, left, right, and bottom.
I was able to fix my problem by setting these properly.
Instead of using margin use left, top, right, bottom. Example:
position: absolute;
top: 10px;
left: 20px;
Using a feature query against one of mozilla's platform-native properties is probably the correct approach for this in 2020. -moz-appearance is one such property, but others would work as well.
#supports (-moz-appearance: none) {
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
}
I had a similar problem with a web site and the images in Chrome where wrong. I had the position in an image and an input box in the same way as your example at the beginning of this post, and I solved it by putting the absolute position in the input box and in the image position in relative coordinates.
When I do that, it changes both positions but puts margins in both. I got it where I want it, to solve this problem with Firefox an Chrome you have to follow some of these tricks in order to put the images in the right place. Play with the position to make it work.
I have a quick CSS question, i'm hoping that somebody can help me out!
I have a DIV called #ContentPanel and I want it to be able to expand so that it can cater for more text if needed. At the moment if the text is longer than 500px (as specified in the CSS) it flows out the bottom and over the content in the div below. How can I set it up to auto expand and push all divs after downwards.
If anybody has any ideas, please let me know
Here's the HTML
<div id="MainContent">
<div id="MainImage"></div>
<div id="ContentPanel">Text content goes here.</div>
</div>
...and here's the CSS
#MainContent {
position:relative;
height:500px;
width:800px;
margin:0 auto;
background-color: #000;
}
#MainImage {
position:absolute;
top:0;
left:0;
width:350px;
height:500px;
background-color:#000;
}
#ContentPanel {
position:absolute;
height:500px;
top:0;
left:350px;
width:450px;
background-color:#000;
}
Thanks in advance!
Kind regards,
Decbrad
Use min-height instead of height.
Except for IE 6: It has a bug, so that it interprets height like min-height.
As mentioned the problem is that you define a fixed height .. and so the browser adheres to it..
You need to make it more flexible by using the min-height property. However IE does not support it, but due to another bug on how it handles the height (which it expands to cater for the content if more than the defined height) it can be worked around..
A complete solution is
height:auto!important; /*this set the height to auto for those supporting it (not IE)*/
height:500px; /*for IE, all others override it by the previous rule*/
min-height:500px; /*for the ones that support it (all but IE)*/
This, in general, is the solution to such problems.. in your case i see that you use absolute positioning.. if you really need this, and it is not just an attempt to solve your problem, then unfortunately there is no way for an element to adjust its size to cater for absolute positioned elements..
Try setting a minimum height (min-height:) as opposed to a specific, fixed height.
The property you're after is min-height, rather than height.
http://www.w3schools.com/CSS/pr_dim_min-height.asp
This means your element will be at least that high. If the content warrants it, the height will grow past the specified value.
As a second option, you might want to try overflow: scroll; or overflow-x and overflow-y to have a scrollbar appear on the div in case the content doesn't fit.
Personal opinion: to get around IE6's issues with min-height, it's really better to use an IE6-specific conditional comment in your targeting it rather than adding hacks into your CSS.
This is if having standards-compliant CSS matters to you, although tbh that's getting more and more difficult these days thanks to wonky browser support.
<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->
you need to use min-height css attribute