mort

Thanks for the tip Need to find a way to get IE7 installed under linux now As 5, 5.5, and 6 all work under wine these days but 7 is still a bit dodge I think. Fixed a few bits, had to go multi browser stylesheets. Now only really got 2 major errors, and reckon I can sort those as they are the top / bottom margin issues

Hi First off, I am a PHP dev so pretty new to the whole XHTML / CSS scene. I am determined to learn properly, but in the past due to time restrictions and demanding designers I have had to resort to table layouts to get things to do what was wanted. Anyways I have made a start on my first PROPER table-less layout, and I am already in a state of panic. http://antimac.meloncreative.co.uk/ebusiness/index.php I have it up and running in Firefox, Safari, IE 5, 5.5, and 6. So far Safari and Firefox have been pretty good and have got it looking as it should, but IE has managed to break every page in a different way, which again is totally different over the 3 different versions. Now I know you should post all the source, but literally there are so many things broken over the whole site that I dont really know where to start! Its a centered layout, with a floating div on either the left OR right as a skyscraper, and a css rounded corners container for the content. Some pages the skyscrapers are broken, others the rounded corner container bits are all over the place, plus the whole wrapper container which is a block colour sometimes works, sometimes distorts and is too big, but I am convinced thats because of something inside it going wrong. I am going to start on the "whatwedo" page, as that seems most broken, so : HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html lang="en"> <head> <title>The Event Business</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="wrap" class="pagecolor_o"> <div id="header"><img src="images/banner_logo_big.gif"></div> <div id="nav"> <a href="index.php"><img src="images/buttons/home.gif" border="0"></a><a href="index.php?view=whatwedo"><img src="images/buttons/whatwedo_on.gif" border="0"></a><a href="index.php?view=about"><img src="images/buttons/about.gif" border="0"></a><a href="index.php?view=clients"><img src="images/buttons/clients.gif" border="0"></a><a href="index.php?view=theteam"><img src="images/buttons/theteam.gif" border="0"></a><a href="index.php?view=contact"><img src="images/buttons/contact.gif" border="0"></a> </div> <div id="sidebar_left" style="background: url(images/sides/whatwedo.gif) no-repeat; height: 347px; width: 79px;"></div><br> <div id="main_center"> <div class="corners_wrapper size_b position"> <div class="top_left"><img src="images/container/left_top_corner.gif" width="20" height="20" alt="" /></div> <div class="top size_b"><img src="images/container/top.gif" width="100%" height="20" alt="" /></div> <div class="top_right"><img src="images/container/right_top_corner.gif" width="27" height="20" alt="" /></div> <p class="clear" /> <div class="innerdiv size_b"> <img src="images/container/left.gif" width="20" height="1000px" class="insidePNG_left" /> <img src="images/container/right.gif" width="27" height="1000px" class="insidePNG_right" /> <div class="content"> <script language="JavaScript"> <!-- Hide from old browsers wwd_1aon = new Image(126, 122); wwd_1aon.src = "images/rollovers/live_on.jpg"; wwd_1aoff = new Image(126, 122); wwd_1aoff.src = "images/rollovers/live.jpg"; wwd_2aon = new Image(126, 122); wwd_2aon.src = "images/rollovers/bespoke_on.jpg"; wwd_2aoff = new Image(126, 122); wwd_2aoff.src = "images/rollovers/bespoke.jpg"; wwd_3aon = new Image(126, 122); wwd_3aon.src = "images/rollovers/incentive_on.jpg"; wwd_3aoff = new Image(126, 122); wwd_3aoff.src = "images/rollovers/incentive.jpg"; // FUNCTIONS function img_act(imgName) { imgon = eval(imgName + "on.src"); document [imgName].src = imgon; } function img_inact(imgName) { imgoff = eval(imgName + "off.src"); document [imgName].src = imgoff; } // END HIDING FROM OLDER BROWSERS --></script> <img src="images/whatwedowords.gif" style="padding-top: 8Px; padding-left: 15px; padding-right: 40px; float: left;"> <a href="index.php?view=whatwedo_live" onmouseover="img_act('wwd_1a')" onmouseout="img_inact('wwd_1a')"><img src="images/rollovers/live.jpg" border="0" name="wwd_1a"></a> <a href="index.php?view=whatwedo_bespoke" onmouseover="img_act('wwd_2a')" onmouseout="img_inact('wwd_2a')"><img src="images/rollovers/bespoke.jpg" border="0" name="wwd_2a"></a> <a href="index.php?view=whatwedo_incentive" onmouseover="img_act('wwd_3a')" onmouseout="img_inact('wwd_3a')"><img src="images/rollovers/incentive.jpg" border="0" name="wwd_3a"></a> </div> </div> <p class="clear" /> <div class="bottom_left"><img src="images/container/left_bottom_corner.gif" width="20" height="27" alt="" /></div> <div class="bottom size_b"><img src="images/container/bottom.gif" width="100%" height="27" alt="" /></div> <div class="bottom_right"><img src="images/container/right_bottom_corner.gif" width="27" height="27" alt="" /></div> </div> </div> </div> <div id="footer"> <span class="footer_left">Copyright the event business ltd. 2007</span> <span class="footer_center">call 01295 268111</span> <span class="footer_right">email. info@theeventbusiness.co.uk</span> </div> </body> </html> CSS body, html { font-family: helvetica; margin:0; padding:0; background-color : #ffffff; color : #000000; text-align : center; margin-top : 20px; margin-bottom : 20px; vertical-align : middle; } body { min-width:750px; } #wrap { margin:0 auto; width : 800px; max-width : 800px; min-width : 800px; height : 100%; margin-right : auto; margin-left : auto; margin-top : 0px; margin-bottom : 30px; text-align : left; display: table; /* border: 1px black solid; */ } .pagecolor_o { background-color : #f47c31; } .pagecolor_p { background-color : #49176d; } .pagecolor_g { background-color : #bec0c2; } #header { width: 800px; background-color : #ffffff; text-align: right; padding:0; padding-bottom: 40px; } #nav { width: 100%; height: 36px; background-color : #ffffff; text-align: center; /* border: 1px black solid; */ } #footer { width: 800px; padding:5px; background-color : #ffffff; border: 1px #ffffff solid; margin-right : auto; margin-left : auto; position: relative; font-size: 12px; } #main_left { float:left; margin-right: auto; margin-left: 25px; margin-top: 50px; margin-bottom: 50px; } #main_right { float:right; margin-left: auto; margin-right: 50px; margin-top: 50px; margin-bottom: 50px; } #main_center { float:right; margin-left: auto; margin-right: 140px; margin-top: 50px; margin-bottom: 50px; } #main_full { margin-left: 30px; margin-right: 30px; margin-top: 50px; margin-bottom: 50px; } #sidebar_left { background-color : #f47c31; float:left; width:79px; height: 508px; margin-top: 50px; margin-left: 25px; /* background: url("images/side_banner.gif") no-repeat; */ } #sidebar_right { background-color : #f47c31; float:right; width:79px; height: 508px; padding: 10px; margin-top: 50px; /* background: url("images/side_banner.gif") no-repeat; */ } .footer_left { padding-right: 50px; color: #f49031; } .footer_center { color: #f49031; } .footer_right { padding-left: 50px; color: #602969; } .corners_wrapper { position: relative; padding-left: 20px; padding-right: 27px; } .size_a { width: 580px; } /* -47px for padding */ .size_b { width: 470px; } /* -47px for padding */ .top_left { position: absolute; top: -20px; left: 0px; width: 20px; height: 20px; } .top { position: absolute; top: -20px; height: 20px; } .top_right { position: absolute; top: -20px; right: 0px; width: 27px; height: 20px; } .bottom_left { position: absolute; bottom: -27px; left: 0px; width: 20px; height: 27px; } .bottom { position: absolute; bottom: -27px; height: 27px; } .bottom_right { position: absolute; bottom: -27px; right: 0px; width: 27px; height: 27px; } .insidePNG_left { position: absolute; left: 0px; } .insidePNG_right { position: absolute; right: 0px; } .innerdiv { position: relative; overflow: hidden; margin-right: -27px; margin-left: -20px; padding-left: 20px; padding-right: 27px; } .content { background-color: #ffffff; } .position { top: 0px; } .clear { font-size: 0; line-height: 0; height: 0; padding: 0; margin: 0; clear: both; } /* form */ input.input_contact { border: 1px solid #918f90; width: 216px; height: 20px; } textarea.tarea_contact { border: 1px solid #918f90; width: 216px; height: 80px; } /* font styles */ .orange_header { font-weight: bold; font-size: 11px; color: #f47c31; text-decoration: none; } .purple_header { font-weight: bold; font-size: 11px; color: #49176d; text-decoration: none; } .purple_label { font-size: 12px; color: #49176d; text-decoration: none; vertical-align: top; } I realise that its a lot to go through, but if anyone can point me in the right direction then I would be mucho grateful! as literally dont know where to start at the mo lol damnit i HATE ie Why cant everyone just use a proper browser?

images are not fixed size, just the containers they are in, so dont think what you mean would work

Hey all, am making a picture gallery, and have laid it out in 4 columns for images, given each image a container using list items etc. Anyways its fixed size, and the image will either be max height or width as 150px so at least one dimension of the thumbnail will fit the container. Basically at the mo I can only get the horizontal alignment working on portrait pictures. The landscape pictures are at the top of the container. (Link at bottom of post) HTML <ul class="gallery"> <li><a href="index.php?view=view_image&img=25"><img src="thumbimage.php?img=25" width="150" height="120" border="0"></a></li> </li> CSS .gallery{ margin:0; padding:0; overflow:hidden; width:100%; list-style:none; } .gallery li{ float:left; display:inline; width:23.8%; margin:0 0 10px 1%; padding:10px 0; height:158px; position:relative; } .gallery a, .gallery img{ display:block; } a img{ border:none; } .gallery a:link, .gallery a:visited, .gallery a:focus, .gallery a:hover, .gallery a:active{ padding:3px; background:#eeefef; width:150px; height:150px; border:1px solid #c2c3c3; margin: auto auto auto auto; } .gallery a:hover{ border-color:#ff0000; } .gallery{ border-bottom:2px solid #000; padding-bottom:10px; margin-top:10px; } Can someone point me in the right direction? My brain is dead from coding layout + image database stuff today Link Below : - http://mort.86degrees.com/sites/gallery/in...p?view=gallery2