unloalraiSa
New Member
Ok, I'm having issues with IE and width values of 25% set on images. How can I fix this?Image of what IE 9 looks like below:
Here is an image of what it is supposed to look like, and how it looks in all other browsers: (Chrome, Opera, Firefox, Safari):
The Code I am using for this is as follows...HTML:\[code\]<html> <head> <title>2013 Conference Test Page</title> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15536399/css/index.css" /> </head><body><div class="header"> <div style="width: 100%;"> <img class='header_img' src='http://stackoverflow.com/questions/15536399/images/image1.jpg' /> <img class='header_img' src='http://stackoverflow.com/questions/15536399/images/image2.jpg' /> <img class='header_img' src='http://stackoverflow.com/questions/15536399/images/image3.jpg' /> <img class='header_img' src='http://stackoverflow.com/questions/15536399/images/image4.jpg' /> </div> <div class="header_text big_text"><div>SAVE THE DATE!</div><div style="margin-top: -.2em;">2013 OFN CONFERENCE</div> </div> <div class="header_text" style="margin-top: -.2em;"> <p class="medium_text"><span style="padding-right: 15px;">October 15-18, 2013</span> • <span style="padding-left: 15px;">Philadelphia, PA</span> </div> <div class="header_text"> <p style="padding: 0px 10% 1.5em; line-height: 1.5em;">Join us for this year's conference at the Philadelphia Marriot Downtown, just steps away from historic sites, great cultural destinations, and Opportunity Finance Network's own headquarters! Registration opens in August, 2013.</p> </div></div></body></html>\[/code\]CSS:\[code\]html,body{ margin:0 0 0 0; padding:0 0 0 0;}.header{ background-color: #049EAB; width: 100%;}@font-face { font-family: hnc_font; src: url('../fonts/hnc.eot'); src: local('hnc_font'), url('../fonts/hnc.woff') format('woff'), url('../fonts/hnc.ttf') format('truetype'), url('../fonts/hnc.svg') format('svg'); font-weight: normal;}.header_img{ width:25%; height:auto; float:left;}.header_text{ width: 100%; text-align: center; color: white;}.medium_text{ text-shadow: 1px 1px 2px black; font-size: 1.5em; font-family: hnc_font;}p{ font-family: Arial, Helvetica, Verdana, Tahoma;}.big_text{ text-shadow: 2px 2px 4px black; font-size: 5.5em; font-family: hnc_font;}\[/code\]Problems detected:[*]The 4 Images at the top are not stretching to the width of the screen. TBH, this is extremely odd behavior that the images are resizing down. It seems that they are resizing down by 25% of the previous image each time it gets displayed, instead of the screen's width. ODD![*]The embedding of a font in CSS using @font-face is not even working here in IE. The font is a Helvetica derivative style font. Looks exactly the way it should in the 2nd pic, but isn't looking right in IE 9, or any version of IE. I am using an .eot font, but it seems that it is being ignored by IE (which according to documentation, it is supposed to work in IE browsers).[*]The CSS3 text-shadow property is not working, is there a way to get this effect for users with IE Browsers?How can I fix, atleast, problems 1 and 2 with IE? For Problem #1: Should I use a table instead? Is that the only way?EDITI made the following changes to the code:HTML:\[code\]<div style="width: 100%; overflow: hidden;"> <div class="image"><img class='header_img' src='http://stackoverflow.com/questions/15536399/images/image1.jpg' alt="" /></div> <div class="image"><img class='header_img' src='http://stackoverflow.com/questions/15536399/images/image2.jpg' alt="" /></div> <div class="image"><img class='header_img' src='http://stackoverflow.com/questions/15536399/images/image3.jpg' alt="" /></div> <div class="image"><img class='header_img' src='http://stackoverflow.com/questions/15536399/images/image4.jpg' alt="" /></div></div>\[/code\]CSS:\[code\]div.image{ width: 25%;}.header_img{ max-width: 100%; height: auto; float: left;}\[/code\]Now this displays the images on top of one another instead of side by side:IE:
ALL OTHER BROWSERS:
