I have to create a fluid 100% width HTML banner. Can you guys look at the code and let me know how I can center vertically the text and if it works in IE6?
Is there a way to auto resize text (font size) when resizing window that works in older browsers?
We’d need to know a little bit more about what you are trying to do here as there could be a number of options. You also seem to have grey text on a grey background so it is invisible!
Usually you would not use a height and just add padding top and bottom to the container and the text will always be vertical.
If it was just one line of text that was not going to wrap then you could just set the line-height to the same size as the height and the text will stay in the vertical middle as long as the text doesn’t wrap.
Alternatively you could use the display:table-cell properties for IE8 and vertically align multiple rows vertically quite easily ( there are hacks for IE7 and under in there).
It al depends on what happens next
You could use media queries to change the text size at smaller screen widths but you would need to use a polyfill for ie8 and under.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.header {
height:120px;
width:100%;
display:table;
border-top:5px solid #000;
border-bottom:5px solid #000;
text-align:center;
background:#666;
}
*+html .header{height:auto;min-height:120px;}/* ie7*/
*+html .header h1{padding:20px 0 0}/* ie7*/
* html .header h1{padding:20px 0 0}/* ie6*/
h1 {
margin:0;
padding:0 10px;
color:#fff;
font-size:120%;
display:table-cell;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="header">
<h1>This is the fluid text that will wrap and stay vertically centred</h1>
</div>
</body>
</html>
IE8+ (and all other browsers get the perfect vertical centring and IE7 and under just get a rough padding top). There are hacks for IE7 and under but you have to add extra elements so is not worth sullying the html for minor browsers.