aeroswat Posted March 23, 2010 Share Posted March 23, 2010 This framework has given me an enormous amount of problems. In my opinion it is so user-unfriendly that I think at this point i'd be better drawing pictures of a damn website and doing this <html> <body> <img src="page1.jpg" /> </body> </html> I have so many issues with formatting. Even the most basic layout does not show up the same way in FireFox that it does in Internet Exploder. First of all let's start with the site. You can take a look at it at www.gamelads.site50.net If you look in firefox you will notice a padding on the left side. If you look at it in IE there is no such padding. Quote Link to comment Share on other sites More sharing options...
ignace Posted March 23, 2010 Share Posted March 23, 2010 Post your code we can not help you otherwise Quote Link to comment Share on other sites More sharing options...
aeroswat Posted March 23, 2010 Author Share Posted March 23, 2010 Post your code we can not help you otherwise I figured out the reason why it was doing the margin and that's because internet exploder doesn't use auto margin correctly. The exception is in IE.css Now i am having a problem with the fact that the pic is like 5 px large on internet explorer and works right on FF index <html> <head> <link rel="stylesheet" href="css/bpfw/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/bpfw/print.css" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="css/bpfw/ie.css" type="text/css" media="screen, projection"><![endif]--> </head> <body> <div class="container"> <div id="d_header" class="span-24 clearfix"> <img src="/images/randlogo.png" /> </div> </div> </body> </html> screen.css file /* reset.css */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;} article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;} body {line-height:1.5;} table {border-collapse:separate;border-spacing:0;} caption, th, td {text-align:left;font-weight:normal;} table, td, th {vertical-align:middle;} blockquote:before, blockquote:after, q:before, q:after {content:"";} blockquote, q {quotes:"" "";} a img {border:none;} /* typography.css */ /* html {font-size:100.01%;} body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;} h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;} h1 {font-size:3em;line-height:1;margin-bottom:0.5em;} h2 {font-size:2em;margin-bottom:0.75em;} h3 {font-size:1.5em;line-height:1;margin-bottom:1em;} h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;} h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;} h6 {font-size:1em;font-weight:bold;} h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;} p {margin:0 0 1.5em;} p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;} p img.right {float:right;margin:1.5em 0 1.5em 1.5em;} a:focus, a:hover {color:#000;} a {color:#009;text-decoration:underline;} blockquote {margin:1.5em;color:#666;font-style:italic;} strong {font-weight:bold;} em, dfn {font-style:italic;} dfn {font-weight:bold;} sup, sub {line-height:0;} abbr, acronym {border-bottom:1px dotted #666;} address {margin:0 0 1.5em;font-style:italic;} del {color:#666;} pre {margin:1.5em 0;white-space:pre;} pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;} li ul, li ol {margin:0;} ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;} ul {list-style-type:disc;} ol {list-style-type:decimal;} dl {margin:0 0 1.5em 0;} dl dt {font-weight:bold;} dd {margin-left:1.5em;} table {margin-bottom:1.4em;width:100%;} th {font-weight:bold;} thead th {background:#c3d9ff;} th, td, caption {padding:4px 10px 4px 5px;} tr.even td {background:#e5ecf9;} tfoot {font-style:italic;} caption {background:#eee;} .small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;} .large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;} .hide {display:none;} .quiet {color:#666;} .loud {color:#000;} .highlight {background:#ff0;} .added {background:#060;color:#fff;} .removed {background:#900;color:#fff;} .first {margin-left:0;padding-left:0;} .last {margin-right:0;padding-right:0;} .top {margin-top:0;padding-top:0;} .bottom {margin-bottom:0;padding-bottom:0;} */ /* forms.css */ /* label {font-weight:bold;} fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;} legend {font-weight:bold;font-size:1.2em;} input[type=text], input[type=password], input.text, input.title, textarea, select {background-color:#fff;border:1px solid #bbb;} input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#666;} input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;} input.text, input.title {width:300px;padding:5px;} input.title {font-size:1.5em;} textarea {width:390px;height:250px;padding:5px;} input[type=checkbox], input[type=radio], input.checkbox, input.radio {position:relative;top:.25em;} form.inline {line-height:3;} form.inline p {margin-bottom:0;} .error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;} .error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;} .notice {background:#FFF6BF;color:#514721;border-color:#FFD324;} .success {background:#E6EFC2;color:#264409;border-color:#C6D880;} .error a {color:#8a1f11;} .notice a {color:#514721;} .success a {color:#264409;} */ /* grid.css */ /* .container {width:950px;margin:0 auto;} .showgrid {background:url(src/grid.png);} .column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;} .last {margin-right:0;} .span-1 {width:30px;} .span-2 {width:70px;} .span-3 {width:110px;} .span-4 {width:150px;} .span-5 {width:190px;} .span-6 {width:230px;} .span-7 {width:270px;} .span-8 {width:310px;} .span-9 {width:350px;} .span-10 {width:390px;} .span-11 {width:430px;} .span-12 {width:470px;} .span-13 {width:510px;} .span-14 {width:550px;} .span-15 {width:590px;} .span-16 {width:630px;} .span-17 {width:670px;} .span-18 {width:710px;} .span-19 {width:750px;} .span-20 {width:790px;} .span-21 {width:830px;} .span-22 {width:870px;} .span-23 {width:910px;} .span-24 {width:950px;margin-right:0;} input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important;} input.span-1, textarea.span-1 {width:18px!important;} input.span-2, textarea.span-2 {width:58px!important;} input.span-3, textarea.span-3 {width:98px!important;} input.span-4, textarea.span-4 {width:138px!important;} input.span-5, textarea.span-5 {width:178px!important;} input.span-6, textarea.span-6 {width:218px!important;} input.span-7, textarea.span-7 {width:258px!important;} input.span-8, textarea.span-8 {width:298px!important;} input.span-9, textarea.span-9 {width:338px!important;} input.span-10, textarea.span-10 {width:378px!important;} input.span-11, textarea.span-11 {width:418px!important;} input.span-12, textarea.span-12 {width:458px!important;} input.span-13, textarea.span-13 {width:498px!important;} input.span-14, textarea.span-14 {width:538px!important;} input.span-15, textarea.span-15 {width:578px!important;} input.span-16, textarea.span-16 {width:618px!important;} input.span-17, textarea.span-17 {width:658px!important;} input.span-18, textarea.span-18 {width:698px!important;} input.span-19, textarea.span-19 {width:738px!important;} input.span-20, textarea.span-20 {width:778px!important;} input.span-21, textarea.span-21 {width:818px!important;} input.span-22, textarea.span-22 {width:858px!important;} input.span-23, textarea.span-23 {width:898px!important;} input.span-24, textarea.span-24 {width:938px!important;} .append-1 {padding-right:40px;} .append-2 {padding-right:80px;} .append-3 {padding-right:120px;} .append-4 {padding-right:160px;} .append-5 {padding-right:200px;} .append-6 {padding-right:240px;} .append-7 {padding-right:280px;} .append-8 {padding-right:320px;} .append-9 {padding-right:360px;} .append-10 {padding-right:400px;} .append-11 {padding-right:440px;} .append-12 {padding-right:480px;} .append-13 {padding-right:520px;} .append-14 {padding-right:560px;} .append-15 {padding-right:600px;} .append-16 {padding-right:640px;} .append-17 {padding-right:680px;} .append-18 {padding-right:720px;} .append-19 {padding-right:760px;} .append-20 {padding-right:800px;} .append-21 {padding-right:840px;} .append-22 {padding-right:880px;} .append-23 {padding-right:920px;} .prepend-1 {padding-left:40px;} .prepend-2 {padding-left:80px;} .prepend-3 {padding-left:120px;} .prepend-4 {padding-left:160px;} .prepend-5 {padding-left:200px;} .prepend-6 {padding-left:240px;} .prepend-7 {padding-left:280px;} .prepend-8 {padding-left:320px;} .prepend-9 {padding-left:360px;} .prepend-10 {padding-left:400px;} .prepend-11 {padding-left:440px;} .prepend-12 {padding-left:480px;} .prepend-13 {padding-left:520px;} .prepend-14 {padding-left:560px;} .prepend-15 {padding-left:600px;} .prepend-16 {padding-left:640px;} .prepend-17 {padding-left:680px;} .prepend-18 {padding-left:720px;} .prepend-19 {padding-left:760px;} .prepend-20 {padding-left:800px;} .prepend-21 {padding-left:840px;} .prepend-22 {padding-left:880px;} .prepend-23 {padding-left:920px;} .border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;} .colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;} .pull-1 {margin-left:-40px;} .pull-2 {margin-left:-80px;} .pull-3 {margin-left:-120px;} .pull-4 {margin-left:-160px;} .pull-5 {margin-left:-200px;} .pull-6 {margin-left:-240px;} .pull-7 {margin-left:-280px;} .pull-8 {margin-left:-320px;} .pull-9 {margin-left:-360px;} .pull-10 {margin-left:-400px;} .pull-11 {margin-left:-440px;} .pull-12 {margin-left:-480px;} .pull-13 {margin-left:-520px;} .pull-14 {margin-left:-560px;} .pull-15 {margin-left:-600px;} .pull-16 {margin-left:-640px;} .pull-17 {margin-left:-680px;} .pull-18 {margin-left:-720px;} .pull-19 {margin-left:-760px;} .pull-20 {margin-left:-800px;} .pull-21 {margin-left:-840px;} .pull-22 {margin-left:-880px;} .pull-23 {margin-left:-920px;} .pull-24 {margin-left:-960px;} .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;} .push-1 {margin:0 -40px 1.5em 40px;} .push-2 {margin:0 -80px 1.5em 80px;} .push-3 {margin:0 -120px 1.5em 120px;} .push-4 {margin:0 -160px 1.5em 160px;} .push-5 {margin:0 -200px 1.5em 200px;} .push-6 {margin:0 -240px 1.5em 240px;} .push-7 {margin:0 -280px 1.5em 280px;} .push-8 {margin:0 -320px 1.5em 320px;} .push-9 {margin:0 -360px 1.5em 360px;} .push-10 {margin:0 -400px 1.5em 400px;} .push-11 {margin:0 -440px 1.5em 440px;} .push-12 {margin:0 -480px 1.5em 480px;} .push-13 {margin:0 -520px 1.5em 520px;} .push-14 {margin:0 -560px 1.5em 560px;} .push-15 {margin:0 -600px 1.5em 600px;} .push-16 {margin:0 -640px 1.5em 640px;} .push-17 {margin:0 -680px 1.5em 680px;} .push-18 {margin:0 -720px 1.5em 720px;} .push-19 {margin:0 -760px 1.5em 760px;} .push-20 {margin:0 -800px 1.5em 800px;} .push-21 {margin:0 -840px 1.5em 840px;} .push-22 {margin:0 -880px 1.5em 880px;} .push-23 {margin:0 -920px 1.5em 920px;} .push-24 {margin:0 -960px 1.5em 960px;} .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;} .prepend-top {margin-top:1.5em;} .append-bottom {margin-bottom:1.5em;} .box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;} hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;} hr.space {background:#fff;color:#fff;visibility:hidden;} .clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;} .clearfix, .container {display:block;} .clear {clear:both;}*/ /* -------------------------------------------------------------- liquid.css * Sets up an easy-to-use grid of 24 columns that stretch to the window width or can also be fixed width. Liquid grid work by: * Ben Listwon * David Bedingfield * Andrei Michael Herasimchuk Involution Studios, http://www.involutionstudios.com ----- grid.css * Sets up an easy-to-use grid of 24 columns. Based on work by: * Nathan Borror [playgroundblues.com] * Jeff Croft [jeffcroft.com] * Christian Metts [mintchaos.com] * Khoi Vinh [subtraction.com] ----- By default, the grid is 80% of window width, with 24 columns. To make the grid fixed, simply change the .container width property to a pixel value. e.g., 960px. -------------------------------------------------------------- */ /* A container should group your entire grid. */ .container { min-width: 950px; width: 80%; margin: 0 auto; overflow: hidden; } /* A block should group all your columns per row stack. */ .block {overflow: hidden;} /* Columns -------------------------------------------------------------- */ /* Use this class together with the .span-x classes to create any composition of columns in a layout. */ .column {float: left;} /* The last column in a row needs this class. */ .last { margin-right: 0; } /* Use these classes to set the width of a column. */ .span-1 { width: 4%; } .span-2 { width: 8%; } .span-3 { width: 12%; } .span-4 { width: 16%; } .span-5 { width: 20%; } .span-6 { width: 25%; } .span-7 { width: 29%; } .span-8 { width: 33%; } .span-9 { width: 37%; } .span-10 { width: 41%; } .span-11 { width: 45%; } .span-12 { width: 50%; } .span-13 { width: 54%; } .span-14 { width: 58%; } .span-15 { width: 62%; } .span-16 { width: 66%; } .span-17 { width: 70%; } .span-18 { width: 75%; } .span-19 { width: 79%; } .span-20 { width: 83%; } .span-21 { width: 87%; } .span-22 { width: 91%; } .span-23 { width: 95%; } .span-24 { width: 100%; margin-right: 0; } .span-1>div, .span-2>div, .span-3>div, .span-4>div, .span-5>div, .span-6>div, .span-7>div, .span-8>div, .span-9>div, .span-10>div, .span-11>div, .span-12>div, .span-13>div, .span-14>div, .span-15>div, .span-16>div, .span-17>div, .span-18>div, .span-19>div, .span-20>div, .span-21>div, .span-22>div, .span-23>div, .span-24>div { margin: 0 0.833em 0 0; overflow: hidden; } /* Add these to a column to append empty cols. */ .append-1 { padding-right: 4%; } .append-2 { padding-right: 8%; } .append-3 { padding-right: 12%; } .append-4 { padding-right: 16%; } .append-5 { padding-right: 20%; } .append-6 { padding-right: 25%; } .append-7 { padding-right: 29%; } .append-8 { padding-right: 33%; } .append-9 { padding-right: 37%; } .append-10 { padding-right: 41%; } .append-11 { padding-right: 45%; } .append-12 { padding-right: 50%; } .append-13 { padding-right: 54%; } .append-14 { padding-right: 58%; } .append-15 { padding-right: 62%; } .append-16 { padding-right: 66%; } .append-17 { padding-right: 70%; } .append-18 { padding-right: 75%; } .append-19 { padding-right: 79%; } .append-20 { padding-right: 83%; } .append-21 { padding-right: 87%; } .append-22 { padding-right: 91%; } .append-23 { padding-right: 95%; } /* Add these to a column to prepend empty cols. */ .prepend-1 { padding-left: 4%; } .prepend-2 { padding-left: 8%; } .prepend-3 { padding-left: 12%; } .prepend-4 { padding-left: 16%; } .prepend-5 { padding-left: 20%; } .prepend-6 { padding-left: 25%; } .prepend-7 { padding-left: 29%; } .prepend-8 { padding-left: 33%; } .prepend-9 { padding-left: 37%; } .prepend-10 { padding-left: 41%; } .prepend-11 { padding-left: 45%; } .prepend-12 { padding-left: 50%; } .prepend-13 { padding-left: 54%; } .prepend-14 { padding-left: 58%; } .prepend-15 { padding-left: 62%; } .prepend-16 { padding-left: 66%; } .prepend-17 { padding-left: 70%; } .prepend-18 { padding-left: 75%; } .prepend-19 { padding-left: 79%; } .prepend-20 { padding-left: 83%; } .prepend-21 { padding-left: 87%; } .prepend-22 { padding-left: 91%; } .prepend-23 { padding-left: 95%; } /* Border on right hand side of a column. */ .border { border-right: 1px solid #eee; } /* Border with more whitespace, spans one column. */ .colborder { padding-right: 2%; margin-right: 2%; border-right: 1px solid #eee; } .colborder>div { margin: 0; } /* Use these classes on an element to push it into the next column, or to pull it into the previous column. */ .pull-1 { margin-left: -3.333em; } .pull-2 { margin-left: -6.666em; } .pull-3 { margin-left: -10em; } .pull-4 { margin-left: -13.333em; } .push-0 { margin: 0 0 0 1.5em; } .push-1 { margin: 0 -3.333em 0 1.5em; } .push-2 { margin: 0 -6.666em 0 1.5em; } .push-3 { margin: 0 -10em 0 1.5em; } .push-4 { margin: 0 -13.333em 0 1.5em; } .push-0, .push-1, .push-2, .push-3, .push-4 { float: right; } /* Misc classes and elements -------------------------------------------------------------- */ /* Use a .box to create a padded box inside a column. */ .box { padding: 1.5em; margin-bottom: 1.5em; background: #eee; } /* Use this to create a horizontal ruler across a column. */ hr { background: #ddd; color: #ddd; width: 100%; height: 0.083em; margin: 0 0 1.583em; border: none; } hr.space { background: #fff; color: #fff; } print.css body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;} .container {background:none;} hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;} hr.space {background:#fff;color:#fff;visibility:hidden;} h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;} code {font:.9em "Courier New", Monaco, Courier, monospace;} a img {border:none;} p img.top {margin-top:0;} blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;} .small {font-size:.9em;} .large {font-size:1.1em;} .quiet {color:#999;} .hide {display:none;} a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;} a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;} ie.css /* Make sure the layout is centered in IE5 */ body { text-align: center; } .container { text-align: left; } /* Fixes IE margin bugs */ * html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 { display:inline; overflow-x: hidden; } /* Elements -------------------------------------------------------------- */ /* Fixes incorrect styling of legend in IE6. */ * html legend { margin:0px -8px 16px 0; padding:0; } /* Fixes wrong line-height on sup/sub in IE. */ sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } /* Fixes IE7 missing wrapping of code elements. */ html>body p code { *white-space: normal; } /* IE 6&7 has problems with setting proper <hr> margins. */ hr { margin:-8px auto 11px; } /* Explicitly set interpolation, allowing dynamically resized images to not look horrible */ img { -ms-interpolation-mode:bicubic; } /* Clearing -------------------------------------------------------------- */ /* Makes clearfix actually work in IE */ .clearfix, .container { display:inline-block; } * html .clearfix, * html .container { height:1%; } /* Forms -------------------------------------------------------------- */ /* Fixes padding on fieldset */ fieldset { padding-top:0; } /* Makes classic textareas in IE 6 resemble other browsers */ textarea { overflow:auto; } /* Fixes rule that IE 6 ignores */ input.text, input.title, textarea { background-color:#fff; border:1px solid #bbb; } input.text:focus, input.title:focus { border-color:#666; } input.text, input.title, textarea, select { margin:0.5em 0; } input.checkbox, input.radio { position:relative; top:.25em; } /* Fixes alignment of inline form elements */ form.inline div, form.inline p { vertical-align:middle; } form.inline label { position:relative;top:-0.25em; } form.inline input.checkbox, form.inline input.radio, form.inline input.button, form.inline button { margin:0.5em 0; } button, input.button { position:relative;top:0.25em; } Quote Link to comment Share on other sites More sharing options...
arbitter Posted March 24, 2010 Share Posted March 24, 2010 I really don't know why, but in IE( that site only shows the header with image and not the following: This is where recent matches will go! This is where other recent information will go! This is where our copyright information and small print will go and will be the end of our site . The pic does seem right though Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.