html - Empty space on side of page when using width: 100% -
i've seen tons of entries this, , have looked @ many can, , none have resolved issue. following relevant css page:
html, body { background-color:#e9e9e9; font-family: arial; width: 100%; height: 100%; margin: 0px; padding: 0px; } @media screen , (min-width: 900px) { #messagelisting { width: 70%; font-family: arial; list-style-type: none; padding-left: 15%; padding-right: 15%; } } @media screen , (max-width: 900px) { #messagelisting { width: 100%; font-family: arial; list-style-type: none; padding: 0px; margin: 0px; } } #messagelisting > ul { list-style-type: none; padding: 0px; } @media screen , (min-width: 900px) { #messagelisting > ul > li > .messageentry > .messagetitle { width: 100%; display: inline-block; background: -webkit-linear-gradient(#303844, #262c36); /* safari */ background: -o-linear-gradient(#303844, #262c36); /* opera 11.1 12.0 */ background: -moz-linear-gradient(#303844, #262c36); /* firefox 3.6 15 */ background: linear-gradient(#4d545c, #303338); /* standard syntax */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#4d545c', endcolorstr='#303338',gradienttype=0 ); /* ie6-9 */ color: #ffffff; padding: 5px 10px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-top-right-radius: 5px; border-top-left-radius: 5px; margin-bottom: -4px; } } @media screen , (max-width: 900px) { #messagelisting > ul > li > .messageentry > .messagetitle { width: 100%; display: inline-block; background: -webkit-linear-gradient(#303844, #262c36); /* safari */ background: -o-linear-gradient(#303844, #262c36); /* opera 11.1 12.0 */ background: -moz-linear-gradient(#303844, #262c36); /* firefox 3.6 15 */ background: linear-gradient(#4d545c, #303338); /* standard syntax */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#4d545c', endcolorstr='#303338',gradienttype=0 ); /* ie6-9 */ color: #ffffff; font-size: 70%; padding: 2px 4px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-top-right-radius: 5px; border-top-left-radius: 5px; margin-bottom: -4px; } } #messagelisting > ul > li > .messageentry > .messagetitle > .messageinfo { width:100%; } #messagelisting > ul > li > .messageentry > .messagetitle > .messagebadge { float: right; } .messagedate { float: right; } @media screen , (min-width: 900px) { #messagelisting > ul > li > .messageentry > .messagetext { width: 100%; display: inline-block; padding: 5px 10px; border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-bottom: 5px; } } @media screen , (max-width: 900px) { #messagelisting > ul > li > .messageentry > .messagetext { width: 100%; display: inline-block; font-size: 70%; padding: 2px 4px; border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-bottom: 5px; } } #postdiscussionform { padding-top: 20px; } things i've checked , tried far:
- checking html file , width stuff, removing it, checking again. no padding or margin stuff there, nor defining width static pixel values.
- using overflow-x: hidden;, disallowed side scrolling 100% width messages still cut off.
- setting media queries width stuff percentages instead of pixels.
also, should noted i'm using vs2012 mvc, , regarding that, checked shared .cshtml files anything, site.css file, nothing helped. if need more me, let me know, thanks!
also, as seen in inspect view here, space takes place outside encompassing html tag, that's more confusing me.
another view of inspect view, showing messages somehow extending beyond window frame. have idea how that'd happen?
edit: here's sscce of html , else may assist:
details.cshtml
<div id="messagelisting"> <ul></ul> </div> ..................................... /* irrelevant js */ ..................................... if (logintype == "pharmadmin" || logintype == "pharm") { $.getjson("/api/message/", function (messagesjsonpayload) { $(messagesjsonpayload).each(function (i, item) { if (item.ndc == '@model.item1.ndc') { var badge = ''; // check (if user logged in) if unread, update drugvisit entry if (logintype == "pharmadmin") { if (datelastseen != null) { if (item.date > datelastseen) { badge = '<img style="padding-right:5px;" src="/images/message_badge_large.png">'; } } else { badge = '<img style="padding-right:5px;" src="/images/message_badge_large.png">'; } } $("#messagelisting > ul").append('<li><div class="messageentry"><div class="messagetitle"> \ ' + '<div class="messageinfo">' + badge + item.user + '<span class="messagedate">' + formatdateforoutput(item.date) + '</span></div>' + '\ ' + '<div class="messagebadge">' + '</div></div>' + ' \ ' + '<div class="messagetext">' + item.text + '</div></div>' + ' \ </li>'); } } ); if ($(messagesjsonpayload).length <= 0) { $("#messagelisting").prepend("no discussion has been posted shortage."); } $(".messageposting").show(); }); } the code shown grabs messages current page , creates html each of them, inserts messagelisting . else needed, let me know. again!
use f-12 developer tools (in ie - although browsers have them) , use 'select element' option see item 'limiting' content. can try , put random element table ensure there content 'fill' space require. should give start.
Comments
Post a Comment