jools

Fantastic. As you said, I removed the $i reset (i.e. took out $i = 0;) and then the second row behaved as the first. Many thanks justsomeguy!

thanks justsomeguy, As you suggested, for the second bit of code, I used $userTilesBottom and changed the following code: $userTiles = getAssocArr('SELECT DISTINCT autonumber, photoid, prefecture, firstname, nationality, language, teachingexperience,private_price FROM `TestTable` WHERE display = 1 AND date > date_sub(now(), interval 2 month) ORDER BY RAND() LIMIT 0,12'); $userTilesTop = array_slice($userTiles,0,6); $userTilesBottom = array_slice($userTiles,6,12); This worked. Many thanks. Also, I've located the code moving the tiles up and down - not php. I'm not sure why it's not flipping back up to the picture for the second row of images after the cursor moves off....? <!--This java script is what allows the tiles to move up and down--><script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript" src="http://www.orangutanjapan.com/jquery.easing.1.3.js"></script><script type="text/javascript"> var userTileStates = {}; jQuery(document).ready(function(e) { /* W Ver */ jQuery('.box6').mouseenter(function(x) { //console.log("enter..."); //console.log(window.userTileStates); window.userTileStates[jQuery(this).attr('id')] = true; jQuery(".box6Inner",this).animate({'margin-top':'-116px'},500,'easeOutQuint',function(){ }); }).mouseleave(function(y) { // console.log("exit..."); //console.log(window.userTileStates); var id = jQuery(this).attr('id'); window.userTileStates[jQuery(this).attr('id')] = false; setTimeout(function(){ if (!window.userTileStates[id]){ jQuery(".box6Inner",jQuery('#' + id)).animate({'margin-top':'0'},100,'easeOutQuint',function(){ }); } },300); }); });</script><!--Here ends the JavaScript--> thanks for your help.

Many thanks for the reply. Okay - code for the user tiles I think... $userTiles = getAssocArr('SELECT DISTINCT autonumber, photoid, prefecture, firstname, nationality, language, teachingexperience,private_price FROM `TestTable` WHERE display = 1 AND date > date_sub(now(), interval 2 month) ORDER BY RAND() LIMIT 0,10'); $userTilesTop = array_slice($userTiles,0,6); $userTilesBottom = array_slice($userTiles,6,6); And the CSS for the rollovers,... }.box6:hover { cursor:pointer; }.box6 .box6Inner { position:absolute; top:0; left:0; width:136px; height:272px;}.box6 .slide { width:136px; height:136px; color:#333; text-align:left; font-size:16px; background-color: #FF6600;font-family: Meiryo;}.box6 .imageslide { }.box6 .imageslide .image {background:#FEFEFE; height:140px; margin-bottom:5px}.box6 .textslide { text-align:justify;}.box6 h3 { font-family: Meiryo; font-size: 13px; font-weight: bold; text-align: center; vertical-align: middle; margin:0px; padding:0px; padding-top: 2px; color:#FFF;}.box6 .textslide ul { background:#FFF; margin-bottom: 2px; padding-top:1px; padding-bottom:4px;}.box6 .textslide ul li { font-size: 13px; font-weight: normal; color: #000; margin-left: 3px; margin-top: 4px; margin-bottom: 2px; font-family: Meiryo;}.userTileView { font-weight: bold; color: #FFF; background-color: #F60; height: 20px; width: 134px; text-align:right}

Hello all, I have a piece of code (created by a developer, not myself) which displays images stored on a php / mySQL database. When the cursor goes over the images they 'flip' to display some information relating to that image. The original purpose of this code was to display just one line of images. However, I would now like to display two lines of images. When I repeat the code, a couple of things happen which I don't want to happen. The second line of images don't flip back to the original image when the cursor is removed from them. The second line uses the same images as the first line. I would like separate images from the database to be chosen. The problem can be seen here in this page: http://www.senseiconnect.com/responsive%20design%20tutorial/%20OrangutanJapan%202014/OJ_template2_FlipONLY_HOME.php As you can see, both rows are pulling the same random images (these change upon refresh) and the second (lower) row of images doesn't flip back to the image like the top row. The code (not including CSS - let me know if that would help) is below: <div class="boxLine"> <!--boxLine STARTS--> <?php $i = 0; if (count($userTilesTop) > 0) foreach ($userTilesTop as $userTile){ $i++; ?> <!--box6 STARTS--> <div class="box6" id="userTile<?php echo $i; ?>"<?php if (!empty($userTile['autonumber'])) { ?>onclick="javascript:window.location='http://www.orangutanjapan.com/newsearch/Ddetails_jp.php?pageNum_m=&language=&prefecture=&recordID=<?php echo $userTile['autonumber']; ?>';return false;"<?php } ?>> <div class="box6Inner"> <!--***********box6Inner STARTS**************--> <div class='slide imageslide'> <!--slide imageslide STARTS--> <img src="http://www.orangutanenglish.com/upload/<?php echo $userTile['photoid']; ?>" alt="英会話レッスンの先生" width="136" height="116" /> <h3><?php echo ucwords($userTile['firstname']); ?> (<?php echo ucwords(eng2japPrefectures($userTile['prefecture'])); ?>)</h3> </div> <!--slide imageslide ENDS--> <div class='slide textslide'> <!--slide textslide starts STARTS--> <ul> <li>国籍: <?php echo $userTile['nationality']; ?></li> <li>対象言語: <?php echo $userTile['language']; ?></li> <li>教師経験（年）: <?php echo $userTile['teachingexperience']; ?></li> <li>授業料: <?php echo $userTile['private_price']; ?>Y</li> </ul> <!-- userTileView STARTS--><div class="userTileView"><a href="<?php if (!empty($userTile['autonumber'])) { ?> http://www.orangutanjapan.com/newsearch/Ddetails_jp.php?pageNum_m=&language=&prefecture=&recordID=<?php echo $userTile['autonumber']; } ?>"><img src="http://www.orangutanjapan.com/user-profile-arrow.png" alt="View <?php echo ucwords($userTile['firstname']); ?>'s profile"></a></div><!--slide userTileView ENDS--> </div> <!--slide textslide starts ENDS--> </div> <!--***********box6Inner starts ENDS **************--> </div> <!--box6 ENDS--> <?php } ?> </div> <!--boxLine ENDS--> Many thanks for taking time to read this post.

Thank you both for 2 working solutions. I used the second one (avoiding an encapsulating Div) and it worked a treat. Many thanks!

Hello, I have a master div ID element which contains smaller class elements (boxes) which are currently set to float left. I would like these class elements to be centred within my master div and remain centred when the windowm scales. There also needs to be a space between the class elements (boxes) and there are two class elements positioned next to each other. My master div ID element which encapsulates the smaller classes has the following CSS #master { border: none; width: 100%; height:auto; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; overflow: hidden; } I tried to text-align: centre but it didn't centre the class elements, rather just the text within the boxes (class divs). The class elements which I want to centre have the following CSS: .profilebox{ border: 1px solid #FFCC99; height: auto; width: 390px; float: left; margin-top: 14px; margin-right: 0px; margin-bottom: 10px; margin-left: 20px; border-radius: 5px; overflow: hidden;/*this togther with the height auto ensures this parent div encapsulates all child divs*/ } I tried to remove float: left and set margin right and left to auto but then then instead of having two of these boxes side by side, I had just one (and the other moved underneath). Many thanks for reading this post:)

Many thanks. Worked perfectly.

Yes, they all use float.

Hello, I have a master div ID in which I have a number of other divs: <div id="master"> <!--This is the open master div--><div id ="namestrip"></div><div id ="basicsbox"></div><div id ="videobox"></div><div id ="experiencebox"></div><div id ="teachingstylebox"></div></div> <!--This is a closes the master--> I have set the height of the master DIV ID to auto hoping it resizes to accommodate whatever is in it: #master /*the box we work in*/ { width: 1024px; height: auto; } However, as you can see from the screenshot, this doesn't appear to work (I have highlighted the master ID border in black) Any ideas as to why this isn't working. If I set the height to fixed then everything is contained in the master tags and the footer sorts itself out, but I wanted to use the auto height function. Many thanks

Many thanks for your quick reply. I tried these option quickly dsonesuk and option 1 worked to an extent but there seems to be a bit of overlap Option 2 worked also to an extent but I still had a problem with the third element dropping down below the first. However, I will play about with these variations and see if I can get something working and then post my results (if successful). Many thanks

Hello, Sorry for the delay - more detail on the problem after some more head-scratching... I have three columns of text and images and have them placed within three elements (#contentbox_left, #contentbox_middle, #contentbox_right). With respect to padding these elements are slightly different which is why I created three different elements and did not use the same one three times (actually, the one in the middle only differs with padding...). #contentbox_left {/*three content boxes*/ max-width: 325px; width: 100%; margin: 0; padding: 0; float: left; background-color: #096; } #contentbox_middle { max-width: 325px; width: 100%; margin-right:13px; margin-left:13px; float: left; background-color: #066; } Between the range of 800 and 1023 px. I want these elements to behave in a certain way; I want them to remain as three columns on the screen side by side (i.e. not be positioned below each other element). As a starting point I have sized the elements so that they fully occupy the screen when it is at the high end of the defined screen size giving them a width of 325px . Shown below: However, when I minimize the screen size down to the 800px range, the element on the left drops down below the element on the right as shown. What I would like to happen in this case is the elements just to reduce in size to fit onto the screen so that regardless of the size of the screen, there are still three column (elements) which have been scaled according to screen size. At the moment I have these elements floating left, which explains why the left one drops below the right one when the screen gets smaller, but I am not aware of another method to get the three elements to position next to each other. I am happy with the CSS commands only responding within certain ranges using: @media only screen and (min-width : 800px) and (max-width : 1023px) but it's within that range that I want the re-sizing to occur. I need some kind of command which specifies with max width in pixels but allows scaling below that. I tried using max width and also width = 100% but that doesn't seem to work. Many thanks for reading.

Hello all, I am trying to resize an image, so that it fits when viewed on a screen with a resolution size of between 800 and 1023px. I would like the size of the image to change depending on the size of the screen - i.e. bigger when 1023 and smaller when 800. As such, I have tried to use the max-width: % command and the max-width: auto command hoping that the image will re-scale when I reduce the screen size but I have had no success. A problem seems to be when I reduce the size of the window, my right element which has property float: left moves down beneath the left element when the screen is reduced in size instead of reducing in size itself. I use the following code. I further specify img and p and have tried also changing their max width to a % but this has not proven successful. #contentbox_left {/*three content boxes*/max-width: 70%; margin: 0; padding: 0; border: 0; float: left; } Can anybody tell me what I'm not doing right? Many thanks for reading this post.

Yes, sorry about that. Noted: no such long code posts in future. dsonesuk, your suggestion worked perfectly. Many thanks.

Hello all, I'm trying to create a site in CSS which uses the @media only screen command to display an output depending on the size of the screen which the site is being viewed from - i.e dynamic response. I am altering a tutorial to suit my needs and in the initial tutorial there are three size specifications which were set up: @media only screen and (max-width : 480px)@media only screen and (min-width : 481px) @media only screen and (min-width : 1024px) I wanted to add to this and create a fourth rule for screen sizes between 800 and 1024 and so added the following command and set up CSS rules under it: @media only screen and (min-width : 800px) To see that this was 'working' under the CSS rules for the command I set it up so one image wouldn't display under these settings: #slideshow { display: none; } This appeared to work with the image disappearing at what I guessed was about 800px (I am testing be just resizing my browser). However, the problem is that it doesn't come back when the browser size is then extended above 1024px. It seems like the rule applied for @media only screen and (min-width : 800px) is affecting the preceding @media only screen and (min-width : 1024px) CSS styles. I appear to have noticed something similar when I was sizing images for certain @media commands, but that's perhaps another post for another day (although hopefully related). Any advice or suggestions would be much appreciated. Many thanks for reading. I will post all the CSS for that I've put under the @media commands below in case there's something in there causing a prob: nav ul { padding: 0px; }/* low resolution 480 px and below for smart phones*/@media only screen and (max-width : 480px) { p {color: rgb(0,0,0);} body {background: rgb(244,244,244);} #master { width: 100%; margin: 0 auto; background: rgb(255, 255, 255); border: 0; overflow: hidden; /* add to the parent element, to crop out anything that would otherwise exceed its size.*/ } header { height: 70px; padding-left: 10px; padding-top: 10px; background-color: #F60; } header img{ height: 100%; width:auto; } nav { text-align: center; padding: 10px 5px ; border: thin solid #F60; font-family: Meiryo; background-color: #F96; } nav * {font-size:12;} /*remove spacing produced by display: inline-block; between li */ nav li { display: inline; margin-left: 10px; font-size: 100%; line-height:160%; font-family: Meiryo; } nav li a { color: #000; text-decoration: none; line-height: 10px; /* matches height of nav*/ } #slideshow { width: 100%; margin: 0px auto; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } #slideshow img { width: 100%; border: none; } /* #slideshow {display: none;} this is basically saying don't display the slideshow div for the low resolution screen*/ #contentbox_left {/*three content boxes*/ width: 100%; margin: 0px auto; border: none; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; text-align: center; } #contentbox_left p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; margin-top: 0px; margin-left: 0px; padding-top: 0px; padding-left: 0px; } #contentbox_left img { max-width: 100%; height: auto border: none; margin-top: 0px; margin-left: 0px; padding-top: 0px; padding-left: 0px; text-align: center; } #contentbox_left h2 { font-family: Arial, Helvetica, sans-serif; color: #F30; font-size: 110%; } #contentbox_middle { width: 100%; margin: 0px auto; border: none; padding-top: 10px; padding-left: 0; padding-right: 0; padding-bottom: 10px; border: 0; text-align: center; } #contentbox_middle p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_middle img { max-width: 100%; height: auto border: none; } #contentbox_middle h2 { font-family: Arial, Helvetica, sans-serif; color: #F30; font-size: 110%; } #contentbox_right { width: 100%; margin: 0px auto; border: none; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; text-align: center; } #contentbox_right p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_right img { max-width: 100%; height: auto border: none; } #contentbox_right h2 { font-family: Arial, Helvetica, sans-serif; color: #F30; font-size: 110%; } .widebox{/*put in a slider or other image here in here*/ width: 100%; margin: 0px auto; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px;; } .widebox img{ width: 100%; border: none; } article{width: 95%; margin-left: 10px; margin-bottom: 60px; } .news{margin-bottom: 20px;} .news h2 {font-size: 120%; margin-bottom: 5px;} .news h2 a {text-decoration: none; color: rgb(189,30,44); } .news p {line-height: 160%;} .newsmeta {font-size:70%; margin-top: 10px; float:right; font-family: verdana;} .newsmeta a {color: rgb(189,30,44);} footer { height: 50px; margin-bottom: 0px; margin-top:0px; padding-bottom: 0px; padding-top:0px; background-image: url(footer_background.jpg); margin-top:0px; background-repeat: repeat-x; color: #FFF; } #lowerfooter { height: auto; padding-top: 0; margin-top: 0; background-color: #F60; padding-left: 20px; font-family: Meiryo; font-size:80%; overflow: hidden; padding-bottom: 100px; } .lowerfooter_innerbox { float: left; margin-top: 0px; padding-right: 12px; font-size: 90%; color: #FFF; margin-right: 12px; } .lowerfooter_innerboxright { float: left; margin-top: 0px; font-size: 9px; color: #FFF; font-size: 90%; } }/* medium resolution 481 px and above until 800px*/@media only screen and (min-width : 481px) {*{/* for better control over the defaults and ensuring there are no spaces.*/ margin:0; padding:0; } p {color: rgb(0,0,0);} body {background: rgb(255,255,255); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /*the actual background*/ header { height: 80px; background-image: url(2_HeaderBG.jpg); padding-left: 10px; padding-top: 10px } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav { height:30px; font-family: Meiryo; background-color: #F96; border: thin solid #F60; vertical-align: middle; text-align: center; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav li { display: inline-block; margin-left: 10px; font-size: 110%; line-height: 160%; } nav li a { display: inline-block; color: #000; font-size: small; text-decoration: none; line-height: 10px; /* matches height of nav*/ } #master { border: none; width: 100%; height:auto; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: rgb(255,255,255); overflow: hidden; /* add to the parent element, to crop out anything that would otherwise exceed its size.*/ } #slideshow { width: 100%; margin: 0px; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } #slideshow img { width: 100%; background-color: none; border: none; } #contentbox_left {/*three content boxes*/ padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_left p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_left img { max-width: 100%; height: auto border: none; } #contentbox_left h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_middle { padding-top: 10px; padding-left: 0; padding-right: 0; padding-bottom: 10px; border: 0; float: left; } #contentbox_middle p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_middle img { max-width: 100%; height: auto border: none; } #contentbox_middle h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_right { padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_right p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_right img { max-width: 100%; height: auto border: none; } #contentbox_right h2{ font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #photostrip{/*this could be removed if we decide to use single image photos - this would have the advantage of being able to specify how many per row and also allow them to be able to be shrunk to fit*/ width: auto; height:auto; border: none; padding-bottom: 10px; padding-top: 10px; float: left; } .widebox{/*put in a slider or other image here in here*/ width: 100%; margin: 0px auto; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px;; } .widebox img{ width: 100%; border: none; } article{ width: 95%; margin-left: 10px; float: left; } .news{ margin-bottom: 20px;} .news h2{font-size: 120%; margin-bottom: 5px;} .news h2 a {text-decoration:none; color: rgb(189,30,44);} .newsmeta {font-size: 70%; margin-top:5px; float: right; font-family: verdana;} .newsmeta a {color: rgb(189,0,44);} footer { height: 50px; margin-bottom: 0px; margin-top:0px; padding-bottom: 0px; padding-top:0px; background-image: url(footer_background.jpg); margin-top:0px; background-repeat: repeat-x; color: #FFF; } #lowerfooter { height: auto; padding-top: 0; margin-top: 0; background-color: #F60; padding-left: 20px; font-family: Meiryo; font-size:80%; overflow: hidden; padding-bottom: 100px; } .lowerfooter_innerbox { float: left; margin-top: 0px; padding-right: 12px; font-size: 100%; color: #FFF; margin-right: 12px; text-align: left; } .lowerfooter_innerboxright { float: left; margin-top: 0px; font-size: 9px; color: #FFF; text-align: right; } }/* larger medium resolution 800 px and above until 1023px*/@media only screen and (min-width : 800px) {*{/* for better control over the defaults and ensuring there are no spaces.*/ margin:0; padding:0; } p {color: rgb(0,0,0);} body {background: rgb(255,255,255); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /*the actual background*/ header { height: 80px; background-image: url(2_HeaderBG.jpg); padding-left: 10px; padding-top: 10px } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav { height:30px; font-family: Meiryo; background-color: #F96; border: thin solid #F60; vertical-align: middle; text-align: center; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav li { display: inline-block; margin-left: 10px; font-size: 110%; line-height: 160%; } nav li a { display: inline-block; color: #000; font-size: small; text-decoration: none; line-height: 10px; /* matches height of nav*/ } #master { border: none; width: 100%; height:auto; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: rgb(255,255,255); overflow: hidden; /* add to the parent element, to crop out anything that would otherwise exceed its size.*/ } #slideshow { display: none; } #slideshow img { width: 100%; background-color: none; border: none; } #contentbox_left {/*three content boxes*/ padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_left p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_left img { max-width: 100%; height: auto border: none; } #contentbox_left h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_middle { padding-top: 10px; padding-left: 0; padding-right: 0; padding-bottom: 10px; border: 0; float: left; } #contentbox_middle p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_middle img { max-width: 100%; height: auto border: none; } #contentbox_middle h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_right { padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_right p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_right img { max-width: 100%; height: auto border: none; } #contentbox_right h2{ font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #photostrip{/*this could be removed if we decide to use single image photos - this would have the advantage of being able to specify how many per row and also allow them to be able to be shrunk to fit*/ width: auto; height:auto; border: none; padding-bottom: 10px; padding-top: 10px; float: left; } .widebox{/*put in a slider or other image here in here*/ width: 100%; margin: 0px auto; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px;; } .widebox img{ width: 100%; border: none; } article{ width: 95%; margin-left: 10px; float: left; } .news{ margin-bottom: 20px;} .news h2{font-size: 120%; margin-bottom: 5px;} .news h2 a {text-decoration:none; color: rgb(189,30,44);} .newsmeta {font-size: 70%; margin-top:5px; float: right; font-family: verdana;} .newsmeta a {color: rgb(189,0,44);} footer { height: 50px; margin-bottom: 0px; margin-top:0px; padding-bottom: 0px; padding-top:0px; background-image: url(footer_background.jpg); margin-top:0px; background-repeat: repeat-x; color: #FFF; } #lowerfooter { height: auto; padding-top: 0; margin-top: 0; background-color: #F60; padding-left: 20px; font-family: Meiryo; font-size:80%; overflow: hidden; padding-bottom: 100px; } .lowerfooter_innerbox { float: left; margin-top: 0px; padding-right: 12px; font-size: 100%; color: #FFF; margin-right: 12px; text-align: left; } .lowerfooter_innerboxright { float: left; margin-top: 0px; font-size: 9px; color: #FFF; text-align: right; } }/* high resolution 1024 px and above*/@media only screen and (min-width : 1024px) { *{/* for better control over the defaults and ensuring there are no spaces.*/ margin:0; padding:0; } p {color: rgb(0,0,0);} body {background: rgb(255,255,255); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } /*the actual background*/ header { height: 80px; padding-top: 10px; padding-left: 160px; background-image: url(2_HeaderBG.jpg); background-repeat: repeat-x; } nav ul, nav li {margin: 0; padding: 0; text-indent:0; list-style-type: none;} nav { height:30px; font-family: Meiryo; background-color: #F96; color: #000; border: thin solid #F60; vertical-align: middle; text-align: center; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } nav * {font-size:0;} /*remove spacing produced by display: inline-block; between li */ nav li { display: inline-block; padding-top: 10px; } nav li a { display: inline-block; color: #000; font-size: small; text-decoration: none; line-height: 10px; /* matches height of nav*/ padding: 0 15px; /*text-decoration: none;*/ } #master /*the box we work in*/ { border: none; width: 1024px; height:auto; background-color: rgb(255,255,255); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #slideshow{ width: 100%; margin: 0px; border: none; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } #slideshow img {/*image goes in here - this is the main image at the top*/ width: 100%; background-color: none; border: none; } #contentbox_left {/*three content boxes*/ width: 328px; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border: 0; float: left; } #contentbox_left p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_left img { margin-bottom: 10px; border: none; } #contentbox_left h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_middle { width: 328px; padding-top: 10px; padding-right: 20px; padding-left: 20px; padding-bottom: 10px; border: 0; float: left; } #contentbox_middle p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_middle img { margin-bottom: 10px; border: none; } #contentbox_middle h2{ font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #contentbox_right { width: 328px; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right:0; border: 0; float: left; } #contentbox_right p { font-family:verdana; font-size:80%; line-height:140%; text-align: justify; } #contentbox_right img { margin-bottom: 10px; border: none; } #contentbox_right h2{font size: 70%; font-family: Arial, Helvetica, sans-serif; color: #F30; } #photostrip{/*this could be removed if we decide to use single image photos - this would have the advantage of being able to specify how many per row and also allow them to be able to be shrunk to fit*/ width: auto; height:auto; border: none; padding-bottom: 10px; padding-top: 10px; float: left; } .widebox{/*put in a slider or other image here in here*/ width: 100%; margin: auto; border: none; padding-bottom: 10px; } article { width: 940px; margin-left: 10px; margin-bottom: 50px; } .news {margin-bottom: 20px;} .news h2 {font-size:120%; margin-bottom: 5px;} .news h2 a {text-decoration:none; color: rgb(189,30,44);} .newsmeta {font-size:70%; margin-top: 5px; float: right; font-family:verdana; } .newsmeta a {color: rgb(189,0,44);} footer { height: 50px; margin-bottom: 0px; margin-top:0px; padding-bottom: 0px; padding-top:0px; background-image: url(footer_background.jpg); margin-top:0px; background-repeat: repeat-x; color: #FFF; } #lowerfooter { height: 200px; padding-top: 0; margin-top: 0; background-color: #F60; padding-left: 160px; font-family: Meiryo; font-size:80%; overflow: hidden; padding-bottom: 100px; } .lowerfooter_innerbox { float: left; height: 300px; width: 300px; margin-top: 20px; padding-right: 12px; font-size: 100%; color: #FFF; margin-right: 12px; text-align: left; } .lowerfooter_innerboxright { float: left; height: 300px; width: 380px; margin-top: 20px; font-size: 9px; color: #FFF; text-align: right; } }

Many thanks to both of you.Both of these worked perfectly.