html - IE 11 not displaying CSS padding correctly -
i'm no expert in css use here. entry page designed works fine in browsers except ie 11 (and possibly earlier ie versions). http://src.wpl.ca/ ie seems ignoring padding i've used shift "container" class down header , menu. i've done search on google , here can't seem find solution.
css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* css reset done */ html,body { height: 100%; } body { color: #fff; margin: 0 auto; font: 1em/1.3em helvetica, sans-serif; background-color: #fff; } {text-decoration: none;} .header { margin-bottom: 40px; } .clearfix { clear: both; } .container { z-index: 1; position: relative; padding: 140px 40px 0 40px; text-align: center; height: 100%; font-size: large; } .container p { padding: 0 0 15px 0; } .container.white { background-color: #fff; color: #007dc3; } .container.white { color: #7bc143; } .container.white a:hover { color: #fcb034; } .container.blue { background-color: #007dc3; color: #fff; } .container.blue { color: #fcb034; } .container.blue a:hover { color: #7bc143; } .container.green { background-color: #7bc143; color: #fff; } .container.green { color: #007dc3; } .container.green a:hover { color: #fcb034; } .container.gold { background-color: #fcb034; color: #fff; } .container.gold { color: #007dc3; } .container.gold a:hover { color: #7bc143; } h1 { margin: 60px 0 60px 0; font-size: 40px; line-height: 40px; font-family: 'love ya sister', 'cursive'; } /* menu styles */ .menu-container { width: 100%; position: fixed; height: 100px; background-color: #fcb034; background-image:url('http://src.wpl.ca/wp-content/uploads/2014/05/tdsrc_2014_logo.png'); background-repeat:no-repeat; background-attachment:fixed; background-position:right top; z-index: 2; } .menu { width: 100%; position: relative; height: 70px; background-image:url('http://src.wpl.ca/wp-content/uploads/2014/05/menu-background.png'); background-repeat:repeat-x; margin: 100px 0 0 0; height: 70px; z-index: 2; } .chester-circle { position:absolute; z-index:1; left:20px; top:-40px; } .menu-wrap { height: 100%; margin-left: 219px; } .menu { width: 142px; height: 68px; margin-left: -15px; display: inline-block; vertical-align: middle; } .menu a.club { background: url('http://src.wpl.ca/wp-content/uploads/2014/05/menu-the-club.png') left top no-repeat; } .menu a.contests { background: url('http://src.wpl.ca/wp-content/uploads/2014/05/menu-contests.png') left top no-repeat; } .menu a.chapter { background: url('http://src.wpl.ca/wp-content/uploads/2014/05/menu-chapter.png') left top no-repeat; } .menu a.things { background: url('http://src.wpl.ca/wp-content/uploads/2014/05/menu-things.png') left top no-repeat; } .menu a.tell { background: url('http://src.wpl.ca/wp-content/uploads/2014/05/menu-tell.png') left top no-repeat; } .menu a.what { background: url('http://src.wpl.ca/wp-content/uploads/2014/05/menu-what.png') left top no-repeat; } .menu a:hover { background-position: left -70px; } .twocol { width: 100%; } .twocol h1 {text-align:center} .twocol h2 { margin: 30px 0 30px 0; font-size: 30px; line-height: 40px; font-family: 'love ya sister', 'cursive'; text-align:center } .twocol img { margin: auto; } .col1 { float: left; width: 600px; text-align: left; } .col2 { margin-left: 600px; text-align: left; } .indent { margin-left: 20px; } .italics { font-style:italic; } html:
<!doctype html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>the waterloo public library's </br>2014 summer reading club</title> <link href="style-home.css" type="text/css" rel="stylesheet" media="screen,projection" /> <link href='http://fonts.googleapis.com/css?family=love+ya+like+a+sister' rel='stylesheet' type='text/css'> </head> <body> <div class="menu-container"> <div class="menu"> <div class="chester-circle"> <img src="images/menu-chester.png" width="155" height="155" /> </div> <div class="menu-wrap"> <a class="club active" href="#club"></a> <a class="contests" href="#contests"></a> <a class="chapter" href="#chapter"></a> <a class="things" href="#things"></a> <a class="tell" href="#tell" ></a> <a class="what" href="#what"></a> </div> </div> </div> <div id="club" class="container white"> <h1>the waterloo public library's </br>2014 summer reading club</h1> <div class="twocol"> <div class="col1"> <img src="/images/tdsrc_2014_teaser_vertical_english_1_.png"> </div> <div class="col2"> <p class="italics">welcome 2014 wpl summer reading club!</p> <p>spend summer reading , earn incentives (a fancy word "cool stuff"), chances @ weekly prizes chance @ stupendous (another fancy word "really cool stuff") grand prize @ end of summer.</p> <p> club runs july 2 august 23. sign @ of our locations. <a href="http://src.wpl.ca/about">for more details click here</a> . </p> <p> summer's theme eureka! , things maker. @ locations summer long there <a href="#things">astounding programs , events</a> . starting eureka kickoff party @ mccormick july 2. </p> <p> , there's more! have monthly <a href="#contests">contests</a> , <a href="#chapter">the chapter book challenge</a> , <a href="#tell">sharing own summer stories</a> , , lots more. </p> <h2> <a href="http://src.wpl.ca/main">enter wpl summer reading club site more information</a> </h2> </div> </div> </div> <div id="contests" class="container white"> <h1>contests</h1> <div class="twocol"> <div class="col1"> <p class="italics">win! win! win!</p> <p>every month summer you'll have chance win snazzy prize when enter of our contests @ our locations.</p> <p class="indent">in june eureka word search. how many words can find?</p> <p class="indent">then in july it's time set out on scavenger hunt.</p> <p class="indent">and in august out magnifying glass challenging game of spy.</p> <p>good luck!</p> <h2> <a href="http://src.wpl.ca/contests">details @ our contest page</a> </h2> </div> <div class="col2"> <img src="/images/look.png"> </div> </div> </div> <div id="chapter" class="container white"> <h1>chapter book challenge</h1> <div class="twocol"> <div class="col1"> <img src="/images/book_mouse.png"> </div> <div class="col2"> <p> thought <span class="italics">harry potter</span> greatest series ever written? or did think boring counting grains of sand in kid brother's sandbox? <span class="italics">diary of wimpy kid</span> made laugh hard milk spewed nose (and weren't drinking milk)? or unfunny made yawn jaw fell off? </p> <p>did find hidden gem of book can't wait share world (or @ least waterloo)? or did find book bad want warn others ever falling prey it's horridness ever again?</p> <p>then tell it! not internet sensation may win prize. cool, top secret prize.</p> <h2> <a href="http://src.wpl.ca/chapter-book-challenge">for complete details check out chapter book challenge page</a> </h2> </div> </div> </div> <div id="things" class="container white"> <h1>things @ library</h1> <div class="twocol"> <div class="col1"> <p class="italics">mooooommmmm! i'm bored!</p> <p>if you're looking summer head on over of our locations amazing events , programs. babies tweens have everyone.</p> <p>lots , lots of stories, robot building, art meets science, getting ready kindergarten, experiments little scientists, crime solving budding detectives, hands on crafts, computer programming, , more!</p> <p>how possibly bored?</p> <h2> <a href="http://src.wpl.ca/programs">for complete list of our programs click here</a> </h2> </div> <div class="col2"> <img src="/images/mouse_trampoline.png"> </div> </div> </div> <div id="tell" class="container white"> <h1>tell us!</h1> <div class="twocol"> <div class="col1"> <img src="/images/tincan_mice-2.png"> </div> <div class="col2"> <p>it best of summers. worst of summers.</p> <p>it summer of swimming. summer of spilled ice cream.</p> <p>it summer of unexpected adventure. summer of bee stings , mosquito bites.</p> <p>what summer like? fun, boring, silly, itchy? share stories us.</p> <h2> <a href="http://src.wpl.ca/tell-us">share stories here</a> </h2> </div> </div> </div> <div id="what" class="container white"> <h1>what read</h1> <div class="twocol"> <div class="col1"> <p> read every <span class="italics">geronimo stilton</span> book? finished <span class="italics">harry potter</span> in weekend? solved <span class="italics">hardy boys</span> ? <span class="italics">nancy drew</span> ? <span class="italics">and happened</span> has happened? <span class="italics">diary of wimpy kid</span> finished greg's dream of pumping iron? </p> <p>you're wandering around shelves looking next read have no idea look? check out these suggested reading lists. hand picked staff you!</p> <h2> <a href="http://src.wpl.ca/suggested-books">all our suggestions can found here</a> </h2> </div> <div class="col2"> <img src="/images/chipmunkmagazine.png"> </div> </div> </div> </body> </html> thanks.
i checked in ie 11 if problems occurs, , although tried hard, didn't appear. however, can try things:
try hard refresh ie (ctrl + f5)
add
float: left;.container rules.instead of writing every single tag @ begining of css file, write *, example:
instead of:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } go with:
* { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } i hope helps :)
Comments
Post a Comment