i've created site via dreamweaver, , it's supposed responsive. when tested in chrome , firefox, it's working fine, when tested in ie11, it's not working expected. reason, ie11 having trouble adjusting text. layout sort of this:
there's parent div 2 child divs (one image , text). depending on row position, image either on right or left , set take 50% of width.
the max width of grid container 1280px , each image, exception of banner 640 x 800.
i've left fluid grid css default (in dreamweaver). i've made 2 versions of page (index , index2) , both have same problem.
here's div in index
<div class="over480"> <!-- technology section --> <div class="divhomecontent" id="fhtech"> <div class="hcimg1"> <a href="tech.html"><img src="images/thumbs/tech_btn.jpg" alt="" border="0"/></a> </div> <div class="hctxt1"> <span class="spncont">developing next generation products control systems , power supply</span> </div> </div> <!-- end technology section --> <!-- project engineering section --> <div class="divhomecontent" id="fhpe"> <div class="hctxt2"> delivering world-class engineering solutions through power generation expertise. </div> <div class="hcimg2"> <a href="pe.html"><img src="images/thumbs/pe_btn.jpg" alt="" border="0"/></a> </div> </div> <!-- end project engineering section --> <!-- marketing & sales support section --> <div class="divhomecontent" id="fhmkt"> <div class="hcimg1"> <a href="mkt.html"><img src="images/thumbs/ms_btn.jpg" alt="" border="0"/></a> </div> <div class="hctxt1"> enhancing product awareness across region , sales win through effective customer engagement. </div> </div> <!-- end marketing & sales support section --> <!-- supply chain section --> <div class="divhomecontent" id="fhsc"> <div class="hctxt2"> the control tower - ensuring delivery of products whenever , wherever customers need them. </div> <div class="hcimg2"> <a href="sc.html"><img src="images/thumbs/sc_btn.jpg" alt="" border="0"/></a> </div> </div> <!-- end supply chain section --> <!-- lifecycle services section --> <div class="divhomecontent" id="fhls"> <div class="hcimg1"> <a href="ls.html"><img src="images/thumbs/ls_btn.jpg" alt="" border="0"/></a> </div> <div class="hctxt1"> best-in-class technical support , services solve our customers’ toughest problems. </div> </div> <!-- end lifecycle services section -->and here css codes:
/* /* * html5 ✰ boilerplate v3.0.2 * * follows result of research on cross-browser styling. * credit left inline , big nicolas gallagher, jonathan neal, * kroc camen, , h5bp dev community , team. * * detailed information css: h5bp.com/css * * dreamweaver modifications: * 1. commented out selection highlight * 2. removed media queries section (we add our own in separate file) * * ==|== normalize ========================================================== */ /* ============================================================================= html5 display definitions ========================================================================== */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= base ========================================================================== */ /* * 1. correct text resizing oddly in ie6/7 when body font-size set using em units * 2. prevent ios text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; background-color: #e5e5e5; font-family: arial; color: #595858; } /* * remove text-shadow in selection highlight: h5bp.com/i * these selection declarations have separate * also: hot pink! (or customize background color match design) */ /* dreamweaver: uncomment these if want customize selection highlight *::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } *::selection { background: #fe57a1; color: #fff; text-shadow: none; } */ /* ============================================================================= links ========================================================================== */ { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } /* improve readability when focused , hovered in browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= typography ========================================================================== */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* improve readability of pre-formatted text in browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } /* position subscript , superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= embedded content ========================================================================== */ /* * 1. improve image quality when scaled in ie7: h5bp.com/d * 2. remove gap between images , borders on image containers: h5bp.com/i/440 */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * correct overflow not hidden in ie9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* indicate 'label' shift focus associated form element */ label { cursor: pointer; } /* * 1. correct color not inheriting in ie6/7/8/9 * 2. correct alignment displayed oddly in ie6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } /* * 1. correct font-size not inheriting in browsers * 2. remove margins in ff3/4 s5 chrome * 3. define consistent vertical alignment display in browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. define line-height normal match ff3/4 (set using !important in ua stylesheet) */ button, input { line-height: normal; } /* * 1. display hand cursor clickable form elements * 2. allow styling of clickable form elements in ios * 3. correct inner spacing displayed oddly in ie7 (doesn't effect ie6) */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } /* * re-set default cursor disabled elements */ button[disabled], input[disabled] { cursor: default; } /* * consistent box sizing , appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* * remove inner padding , border in ff3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. remove default vertical scrollbar in ie6/7/8/9 * 2. allow vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* colors form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= tables ========================================================================== */ /* * 'border-collapse: collapse;' needs overridden in designs having tables rounded corners , drop shadows. */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* ============================================================================= chrome frame prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* ==|== primary styles ===================================================== author: ========================================================================== */ /* ==|== non-semantic helper classes ======================================== please define styles before section. ========================================================================== */ /* image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } /* hide both screenreaders , browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* hide visually, have available screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* extends .visuallyhidden class allow element focusable when navigated via keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* hide visually , screenreaders, maintain layout */ .invisible { visibility: hidden; } /* contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ==|== print styles ======================================================= print styles. inlined avoid required http connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* don't show links images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* ============================================================================= styles ========================================================================== */ .gridcontainer { background-color: #fff; } footer { color: #909090; margin-top: 60px; } .divextras .ex-ico { /*width: 50px; height: 50px;*/ margin-left: auto; margin-right: auto; } .divextras { width: 100%; color: #fff; padding-top: 40px; text-align: center; } .divextras td { width: 20%; text-align: center; padding: 10px; } .divc001 { /*display: table;*/ width: inherit; border: 0px solid black; position: relative; } .divc002 { /*display: table;*/ width: inherit; border: 0px solid red; position: relative; } .imghome { position: relative; } #divh002 { z-index: 0; } /*#fhtech .hcimg1 { position: relative; top: -30px; z-index: 1; } #fhpe .hcimg2 { position: relative; top: -60px; z-index: 2; } #fhmkt .hcimg1 { position: relative; top: -90px; z-index: 3; } #fhsc .hcimg2 { position: relative; top: -120px; z-index: 4; } #fhls .hcimg1 { position: relative; top: -150px; z-index: 5; }*/ .divextras { font-size: 0.9em; } .divhomecontent { border: none; clear:both; display: flex; overflow: hidden; max-width: 1280px; flex-flow: row; } .divhomecontent div.hcimg1 { float: left; width: 50%; border: none; max-width: 640px; } .divhomecontent div.hctxt1 { padding-left: 50px; padding-right: 20px; border: none; max-width: 570px; overflow: hidden; flex: 1; height: inherit; border: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } .divhomecontent div.hcimg2 { width: 50%; border: none; overflow: hidden; max-width: 640px; } .divhomecontent div.hctxt2 { padding-left: 20px; padding-right: 50px; border: none; float: left; width: 100%; max-width: 570px; flex: 1; word-wrap: break-word; height: inherit; border: none; display: flex; flex-direction: column; justify-content: center; } .spncont { display: inline-block; vertical-align: middle; }in firefox , chrome, responsive design working expected: texts vertically align, , word wrap adjusts great, 2 child divs side-by-side.
however in ie11, texts remain vertically @ top , divs text part on left don't seem wrap text , seem go beyond max width set. result, right-had div, houses image, goes bottom.
please :(
i can see you're using flexbox displays, has been known have issues ie11 (and internet explorer in general)
i suggest, if want browser support - utilize grid system such bootstrap or alternatively if wanted more light weight, go toast grid
you can check browser compatibility using website called caniuse - it's handy checking cross-browser compatibility , provides alternative resources can use!
