I need some help , I have an IE7 CSS issue (some clients still use IE7 so I need to code for it).
I am having trouble with some nested divs and a horizontal scroll bar which works fine in IE8+ and everything else.
What happens is, the overflow should create a horizontal scroll bar, so the content inside can expand beyond the edge of the screen.
HTML
<div class="CenterBoxFlow Rounded" >
<div class="CenterBoxContainer" id="panetest">
.. Content
</div>
</div>
CSS
.CenterBoxFlow { border: 1px #ccc solid; width: 1110px; white-space: normal; vertical-align: top; display: inline-block; overflow: visible; padding: 15px; margin-bottom: 6px; text-align: center; float: left; position:relative; }
.CenterBoxContainer { text-align: left; width:1110px; overflow:auto; white-space:nowrap; vertical-align:top; overflow-y:hidden; display:inline-block; position:relative; }
FYI, the content is also a series of divs with the following style:
.Chart_Small { padding: 5px; width: 152px; white-space: normal; display: inline-block; position: relative; *display: inline; zoom: 1; }
Any suggestions on getting the div to overflow properly in IE7 would be great.
Peter.
I can't understand why, but removing white-space: normal; from .Chart_Small fixes this bug for me. Can you check if it works for you?
Have you tried:
*zoom:1;
It solves many ie7 bugs.. ;)
Related
When I view the following on my iPhone, the contents of the second div don't appear. I see both divs in chrome and safari on my computer. Seems to be an issue with mobile Safari. I found that if I replace the number, 123-456-7890, with text such as "Right Side Text", the issue goes away.
#bannerLeft {
float: left;
text-transform: uppercase;
font-size: 1.7em;
font-weight: bold;
width: 50%;
}
#bannerRight {
float: right;
font-size: 1.7em;
font-weight: bold;
width: 30%;
}
<div id="bannerLeft">Left Side Text</div>
<div id="bannerRight">123-456-7890</div>
Any suggestions? Thanks in advance.
First of all, you never style through id selectors, is a really bad practice, but this is easy to fix:
.banner {
font-size: 1.7em;
font-weight: bold;
box-sizing: border-box;
}
.banner.left {
float: left;
text-transform: uppercase;
width: 50%;
}
.banner.right {
float: left;
width: 30%;
text-align: right;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
<div class="clearfix">
<div class="banner left">Left Side Text</div>
<div class="banner right">123-456-7890</div>
</div>
The problem may be due to some paddings or margins each browser has as default, the simplest solution in here was to add the box-sizing css3 property, which stops this problem to happen.
Also when floating things you may want to wrap those elements into a clearfix element to prevent overlapping.
Try the codepen I put together, maybe it can help.
http://codepen.io/anon/pen/LELrYd
I also float everything to the left, you'll get quite the same result, just notice the text align property, if this is not your case you can float to right and it would still works.
Cheers!
I was just adapting a webdesign, when I found a problem and couldn't slove it on my own.
I coded a heading and an article picture, both in the same div, with a border at the bottom of the div.
My problem: The border comes right after the title and doesn't integrate my picture.
Check out this fiddle to see what i mean: Click me!
Here is my code:
<div class="latestarticle">
<a class="articletitle" href="#" >Guitar Hero Experts Melt Your Face Off</a>
<div class="articlepicture">
</div>
and CSS:
.latestarticle {
border-bottom: solid 1px #CCC;
padding: 0px;
margin-top: 12px;
font-size: 12px;
}
.articletitle {
color: #CD5700;
text-decoration: none;
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
}
.articlepicture {
height: 76px;
width: 136px;
float: left;
margin-top: 12px;
margin-right: 9px;
border: solid #A3A3A3 2px;
}
I'm wondering why this is not working. This should work, anyway, add display: table; or display: table-cell; to your .latestarticle. It works fine. See Demo
Edit
Oh! I came to know this problem is happening because you have floated left to your .articlepicture and I hope you wanted to do as demo.
I have added <div class="articlegroup"></div> for your .articlepicture div and defined it display: inline-block;
DEMO
use css display: block to .articletitle
I think what you are looking for is a clearfix. You need to add a "clearfix" div as a sibling to a floated element if you want the parent to recognize the height of the floated element.
<div class="latestarticle">
<a class="articletitle" href="#">Guitar Hero</a>
<div class="articlepicture"></div>
<div class="clearfix"></div>
</div>
Then define the .clearfix style in css:
.clearfix { clear:both; }
use disply:inline-block; for latestarticle .see here http://jsfiddle.net/WEHw4/5/
Here is my html:
<ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;">
<li>1st button</li>
<li>2nd button</li>
<li>3rd button</li>
</ul>
I also attached an image if what I currently have. I tried adding display: table-cell;
vertical-align: middle; to the anchor tag class but it did not work I also tried adding a span around teh anchor tag with a class with: display: table-cell; vertical-align: middle; but that did not work either, in both cases button's heights were not constant.
How can I vertically center text and keep my buttons height and width the same?
Ended up going with the display:table-cell solution as it was the most cross browser....I did not like it at first because I had to hard code the width of my button instead of 100% but once I got past that it was a solid solution:
my li:
.header #sub_nav li {
display: table;
float: left;
font-size: 11px;
line-height: 12px;
margin-bottom: 12px;
margin-left: 12px;
width: 86%;
}
my a:
.header #sub_nav li a {
display: table-cell;
height: 45px;
vertical-align: middle;
width: 111px;
}
I Do something similar to what you're asking. Defining the parent as "display: table" and the element itself with "vertical-align:middle" & "display:table-cell" worked for me.
If you have only one item within the li (or div, etc), the easiest way is to set line-height to be the same as the element's height, and it will be vertically aligned. I have created a simple fiddle below, and hope this helps!
http://jsfiddle.net/fCkLJ/
li {
/* other styling */
height: 30px;
line-height: 30px;
}
Try:
li{
padding-top:20%;
padding-bottom:20%;
}
This will cause even padding top/bottom on the LI but if one LI wraps and another one doesnt it they will be different heights.
http://jsfiddle.net/VMCH6/1/
There are many ways, looks here
If you are using background-image, then you should set a fixed width height for the li.a element and use this hack for the a element:
li a {
height: 50px;
width: 300px;
margin: auto 0;
display: block;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
This is the working example (even with your image as background). The complete button will be clickable and the flexibility to be multiple lines:
http://jsfiddle.net/GqBAL/494/
Note: This is not 100% cross-browser, but is the best solution.
I dont have enough knowledge of HTML/CSS but i think it is Ok .
in this answer i have removed height from UL/LI and provided auto height , and in anchor <a> tag i have used padding , to display a bigger-height-centralized button .
CSS part is :
<style>
html , body , ul , li
{
margin:0;
padding:0;
}
html , body
{
width:100%;
height:100%;
}
ul
{
width:100%;
height:auto;
background-color:red;
}
li
{
width:33%;
height:auto;
display:inline-block;
background-color:green;
}
a
{
width:100%;
height:100%;
text-align:center;
display:block;
padding-top:10%;
padding-bottom:10%;
}
</style>
HTML part is :
<body>
<ul>
<li>tushar</li>
<li>tushar</li>
<li>tushar</li>
</ul>
</body>
I can get this to work in all browsers but IE7.
HTML
<span class="verticalMiddle"></span>
<span class="jArrow inlineWrapper"></span>
<h2 class="inlineWrapper">What is depression?</h2>
CSS
.inlineWrapper {
width: 606px;
margin-left: 10px;
vertical-align: middle;
display: inline-block;
}
.verticalMiddle {
vertical-align: middle;
height: 50px;
width: 0;
display: inline-block;
}
.jArrow {
background: url(http://www.healthquestlongbeach.com/images/library/faq/arrow.png) no-repeat left top;
height: 20px;
width: 22px;
}
h2.inlineWrapper {
width: 563px;
margin-right: 13px;
}
Fiddle: http://jsfiddle.net/RfRrG/5/
The problem is that the h2 is being pushed down buy the .verticalMiddle {height: 50px;}, but for some reason only in IE7 (but not .jArrow for some odd reason).
I can fix this problem by adding
.inlineWrapper {display:inline;}
But then it breaks it in the other browsers. Why is the text getting pushed down and how can I align it correctly?
display: inline-block in IE7 only works on elements that are naturally inline.
Fortunately, there's an easy workaround. Replace this:
display: inline-block;
with this:
display: inline-block;
*display: inline;
In most instances you must also add zoom: 1, but it's not required in your case.
* is a "safe hack" that applies the property in only in IE7 and lower.
It's actually two part question regarding my simple page (that will be replaced some day with real content), HTML+CSS boilerplate used there for vertical centering and IE7.
http://engitize.net/
Can anyone provide detailed explanation why the page is displayed correctly in non-IE browsers (Chrome, Fx, Opera), almost all semi-recent to recent IEs (IE5.5, IE6, IE8, IE9), but not in IE7?
I am especially interested in: it works in IE6, yet it doesn't work in IE7, because... kind of explanation.
What should be changed to make div#c properly centered vertically in IE7?
I am using specific height for div#c, but used boilerplate is height-agnostic and fix should preserve this feature.
Spoiling other browsers is not an option, unless it's IE5.5 (ok, IE6 too, but only if it is really unavoidable).
Changing <!DOCTYPE html> and turning IEs into quirks mode is also not accepted (and it's a pretty bad practice for newly developed pages).
If you don't have IE7 (just as I), you can visit http://ipinfo.info/netrenderer/ or http://browserling.com/, paste URL there and choose IE7 to see the problem yourself.
Because the page will change after accepting some answer, I'm providing snapshot of relevant HTML and CSS parts from it (with logo URL changed to be absolute).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style>
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div>
because history is important!
</div></div></div></div>
<div id="footer"><div>
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div></div>
</body>
</html>
your Q#1 has been answered by #thirtydot, IE7 and below does not support the CSS table properties so another way has to be found for them. and his absolute positioning technique is usually the preferred way to do this as most times in a scenario like this (splash page?) the width and height of the centred content would be known.
addendum to above per comments:
In answer to why it was working in IE6 and not IE7 even though IE6 doesn't support the table properties either, IE7 was actually picking up the position: static rule from the #middle[id] {} rule - IE7 does understand this type of selector so this means the later absolute/relative positioning was not working the same as it was in IE6
Taking the above into account redoing the CSS to make sure IE7 and 6 got the same CSS and that it was placed later in cascade to override the "good" CSS it turns out the the positioning method is height agnostic too, in the comments there are various links to to test this, but here is the final working version:
Hybrid table cell/positioning method : here
That fiddle does include the image width and heights, but if you remove them and the positioning for the "sub text" it does (or should) show that whatever is in the middle does stay centered
HTML used is the same as the bottom of this answer.. minus the extra <i></i> element
CSS:
html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000; }
#outer {
position: relative;
width: 100%;
height: 100%;
display: table;
}
#middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#c {
width: 385px;
height: 120px;
margin: 0 auto;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
*position: absolute;
*top: 50%;
*width: 100%;
*text-align: center;
}
#c {
*position: relative;
*top: -50%;
}
/**** end IE7 and below rules ****/
#c div {
position: relative;
top: 100px;
width: 100%;
color: #666;
font-weight: bold;
font-family: serif;
font-size: 12px;
text-align: right;
}
#footer {
width: 100%;
text-align: center;
height: 15px;
padding: 5px 0 0 0;
margin: -20px auto 0 auto;
border: 0;
background-color: #def;
}
#footer div {
padding: 0px 5px 0px 5px;
text-align: right; font-size: 10px;
font-family: sans-serif;
}
#footer p {margin: 0;}
As pointed out in comments using the technique that the HTML5 boilerplate uses to class the HTML element conditionally see:
Conditional stylesheets vs CSS hacks?
Answer: Neither!
means you could replace the IE7 hacks with:
.ie6 #middle, .ie7 #middle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.ie6 #c, .ie7 #c {
position: relative;
top: -50%;
}
Original alternative - "Matchstick Technique"
You could likely mix the following technique with the "table-cell" technique via conditional comments or hacks, but this (hacky!) technique works across browser as far as my tests have seen
As you've asked for a height agnostic version.. you might or might not like the "matchstick" technique, this involves using inline blocks and lining them up.. the "matchstick" is a 100% high empty, off page, inline-block element with its vertical-alignment set to "middle" once it's in place the next inline-block (your actual content div) sits beside it and aligns to the middle or it, then using text-align: center; on it you have the horizontal centering too
here's a link to a working example fiddle
Note: I've left your widths intact, but you can test without widths/heights by removing the height & width off #c and also remove the CSS for the #c div text div - in a plain text scenario entering text into either of these divs should 'auto' centre.
and especially note the insertion of the extra <i></i> HTML just inside the outer div (that's likely why this is not a preferred method!), this is the "matchstick" that props the whole page open.
Code used in fiddle:
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }
#outer { position: relative; width: 100%; height: 100%;}
/* a matchstick spacer */
#outer i {
display: inline-block;
height: 100%;
width: 1px;
margin-left: -1px; /* to hide off page */
margin-right: -4px; /* to remove spacing between this and #middle block */
vertical-align: middle; /* will make inline block next to it center vertically */
background: #f00; /* red, not required just to see or not see it */
}
#middle {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
/* image 385 * 120 */
#c {
display: inline-block;
/* presuming image heights, but it wouldn't matter if there was width/height here or not */
width: 385px;
height: 120px;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
#middle, #c { /* IE hack for inline block on block level elements */
*display: inline;
}
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
HTML:
<div id="outer">
<i></i>
<div id="middle">
<div id="c"><div>
because history is important!
</div></div>
</div>
</div>
<div id="footer">
<div>
<p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div>
</div>
IE7 does not support display: table-cell, which you're using as part of your vertical centering technique.
Your page was relatively simple, so I simplified the HTML/CSS a lot. The centering now works properly everywhere I've tested it.
Complete code: http://jsbin.com/azuhe4
The line that's causing this behavior is...
position: static
...on the "#middle" CSS spec.
If I disable that line IE7 seems to render (more or less) the logo in the middle of the page.
It's the <!DOCTYPE>.
IE6 & 7 were a little flaky with that (that's what I've read, anyway).
If you do the following, you'll see things come around - with your code (no edits, save for a couple borders to see what's happening).
Here's what I did:
Deleted your <!DOCTYPE>
Added to your DIV {} CSS line - border:1px dotted gray
At your "outer", "middle", and "c" divs, a threw an inline border-color just to see which was which.
Hit Refresh
Then pasted <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and hit Refresh again. Looked fine to me. Centered vertically, horizontally.
As of April 20, 2011 W3C states <!DOCTYPE HTML> as "Not a Standard". Certainly, IE6/7 have no idea what that tag means. http://www.w3.org/QA/2002/04/valid-dtd-list.html
I got new and easy solution for that:
<style>
.vam{vertical-align:middle;}
</style>
<div style="line-height:200px; border:1px solid #000000; height:200px;
text-align:center;color:#FFFFFF; font-size:1px;">
.<img src="her-banner.jpg" alt="" class="vam" />
</div>