September 28, 201015 yr I'm a newbie and I've been designing a site for a school. Everything was cool until recently, and we were working toward a soft launch, but after attempting to show them the site on their computers, I found that the design displayed differently It's like the divs are all shifted down instead of sitting beside one another. Could this be a resolution issue? I've tried the site on a few different computers at home, and the design is fine. The school's monitors are quite low-res If anyone thinks they might be able to diagnose the problem, please get in touch via PM or on my email markhooson [at] gmail [dot] com and I can send you the HTML/CSS files Thanks guys
September 28, 201015 yr and what browsers are they using? same as you? different? Very unlikely to be a resolution issue.
September 28, 201015 yr Author It's not live so I can't (unfortunately) provide a URL. At home it works fine in FF, IE and Chrome At the school it's messed up in IE, not sure what version of IE they have though If anyone has the time, I can email the files over to them to take a look
September 28, 201015 yr What have you set the widths to? On your home computer try making your browser small and see if the "div" drops below. If so it'll be worth checking the container width and thta of the columns.
September 28, 201015 yr Author I'm currently in work, so I'll post some code this evening, if anyone wants to help?
September 28, 201015 yr It's not live so I can't (unfortunately) provide a URL. but it's online somewhere? I guess so if the school could see it. So much easier to help with a link.
September 28, 201015 yr but it's online somewhere? I guess so if the school could see it. So much easier to help with a link. He said it's not so maybe took it into the school on a pen drive or something?
September 28, 201015 yr Author Sorry to dump all this code, but here's the homepage html and the css file Again, I'm new to this, so please excuse sloppy coding in there. Tips are appreciated! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Rhyn Park School and Performing Arts College</title> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head> <body> <div id='container'> <div id='menu'> <ul> <li><a href="index.htm">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="curriculum.htm">Curriculum</a></li> <li><a href="facilities.htm">Facilities</a></li> <li><a href="students.htm">Students</a></li> <li><a href="parents.htm">Parents</a></li> <li><a href="hub.htm">The Hub</a></li> <li><a href="governors.htm">Governors</a></li> <li><a href="vle.htm">VLE</a></li> <li><a href="contact.htm">Contact us</a></li> </ul> </div> <div class='widgetbox'><script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script> <script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 295, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#7d2017' } }, features: { scrollbar: true, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('RhynParkNews').start(); </script> </div> <div class='newsbox'> <img src="bio.jpg" alt="Rhyn Park" align="right"> <h1>Welcome to Rhyn Park School</h1> <span class="subhead">and Performing Arts College</span> <br> <br> <p>At Rhyn Park we want all our students to be the best that they can be.</p> <p>We offer a school that promotes achievement for all our students in a vibrant, happy and caring environment and aim to improve the quality of life of all those in our community.</p> <p>We want all our students to excel in their academic achievements through high quality teaching and facilities at the school and encourage students to exceed their own expectations.</p> <p>We provide an exciting school that encourages personal development and achievement by individuals through their work in class and beyond it through extra-curricular activities and events and a strong pastoral system.</p> <p>We want to provide students with the confidence and knowledge to succeed beyond school and into the future</p> </div> <div id='wrapper'> <a href="http://rhynparkschool.wordpress.com/"><img src="button.png" border="0" alt="Click here for the Rhyn Park Blog" align="left"></a> <div class='img'><img src="jump.jpg" align="left" alt="Rhyn Park School"></div> <div class='img'><img src="bench.jpg" align="left" alt="Rhyn Park School"></div> <div class="clearer"> </div> </div> <div id='footer'> <ul> <li><a href="contact.htm">Contact us</a></li> <li><a href="http://www.shropshire.gov.uk">Shropshire Council</a></li> <li><a href="http://rhynparkschool.wordpress.com">News/Jobs</a></li> </ul> </div> </div> </body> </html> * { margin:0; padding:0;} body{background-image:url('banner2.jpg'); background-repeat:no-repeat; background-position: 63px 0px; font-family: Gill, Helvetica, sans-serif; background-color: #231F20; margin: 1em; padding: 3em; color: #ffffff; width:1150px; } p{margin:1; padding:5px; font-size:95%; line-height:1.3em; text-align: left;} a:link {color:#f8f8f8;text-decoration:none;} a:visited {color:#f8f8f8;text-decoration:none;} a:hover {color:#ffffff;text-decoration:underline;} a:active {color:#f8f8f8;text-decoration:none;} blockquote {margin: 0; padding: 5px; font-size: 190%; font-style: italic; color: #ffffff; text-align: left; display: block;} h1{font-size:30px; text-align: left; margin: 0px; color: #ffffff; font-weight: bold;} .subhead{font: bold 15pt Arial, sans-serif; letter-spacing:0pt; color:#ffffff;} #menu{width: 1150px; background: #7D1F17; margin-top: 180px; float: left; clear: both;} #menu ul{margin: 0; padding: 1px; float: left;} #menu ul li{display: inline;} #menu ul li a{float: left; text-decoration: none; color: #ffffff; padding: 1px 11px; background-color: #7D1F17;} #menu ul li a:visited{color: #f8f8f8;} #menu ul li a:hover {color:#ffffff} .widgetbox{width: 250px; background: #7D1F17; margin-top: 10px; margin-left: 10px; padding: 1px; display: block; float: left; clear: both;} .newsbox{display: block; background: #333333; width: 860px; margin-top: 10px; padding: 5px 5px 25px; margin-left: 18px; float: left; } .hubbox{display: block; width: 860px; margin-top: 10px; padding: 5px 5px 25px; margin-left: 18px; float: left; } .img{display: block; background: #333333; margin-top: 10px; padding: 5px; margin: 10px; float: left; margin-left: 16px; } #container{ margin:0 auto; width: 1150px; } .content{display: block; background: #333333; width: 340px; margin-top: 5px; padding: 5px; margin: 10px; float: left; margin-left: 18px; } .content2{display: block; background: #333333; width: 340px; margin-top: 5px; padding: 5px; margin: 10px; float: left; margin-left: 5px; } .quote {display: block; background: #231f20; margin-top: 10px; padding: 5px; margin: 10px; float: left;} #wrapper{ margin:0 auto; width: 1150px; margin-top: 5px; margin-left: 0px; } #wrapper2{ margin:0 auto; margin-top: 5px; margin-left: 0px; } .flex {display: block; background: #333333; margin-top: 5px; padding: 5px; margin: 5px; float: left; margin-left: 8px; } .crosshead {display: block; background: #333333; width: 350px; margin-top: 5px; margin: 2px; padding: 5px; } .left {display: block; width: 350px; margin-top: 5px; margin: 5px; padding: 5px; float: left; } #footer{width: 1150px; background: #333333; margin-top: 10px; float: left; clear: both;} #footer ul{margin: 0; padding: 1px; float: left;} #footer ul li{display: inline;} #footer ul li a{float: left; text-decoration: none; color: #ffffff; padding: 1px 11px; background-color: #333333;} #footer ul li a:visited{color: #f8f8f8;} #footer ul li a:hover {color:#ffffff} .clearer{clear:both;height:0;width:100%;} #about{height:345px;}
September 28, 201015 yr at a guess they are using IE6? Don't have it on my laptop but it works fine in IE9/IE7. You have coded for a width 1150px which would normally mean some scrolling if they had a 1024x768 display.
September 28, 201015 yr Ie6 double margin bug add display:inline to floats where margin is on the same side as the float eg .widgetbox{ width: 250px; background: #7D1F17; margin-top: 10px; margin-left: 10px; padding: 1px; display: inline;/*added display inline*/ float: left; clear: both;} .newsbox{ display: inline;/*added display inline*/ background: #333333; width: 860px; margin-top: 10px; padding: 5px 5px 25px; margin-left: 18px; float: left; }
September 28, 201015 yr Author So to be clear, the issue is caused by a bug in IE6, and can be rectified by adding display: inline; in the CSS to any div that has a margin the same as the float value eg, if it's floated left and has a left margin?
September 28, 201015 yr Author With some help from mteam, it looks to have been resolved. Thanks for the input everyone
Create an account or sign in to comment