Rendering issues, Float drop

JCOMPANYDESIGN · 05-28-2009, 05:19 PM

Hello all,

I seem to be having an issue with rendering in a couple different browsers. Of course IE 6 and below are giving me my biggest headache. I believe it to be a float drop issue, but my check on dreamweaver is not reporting any bugs so I am confused.

Here is the site http://www.amishcustom.com

It is also having some hicups in firefox, the text or padding of the text seems to be increasing in size, and there also seems to be an overall issue with margin and padding increasing.

The bottom line....IT LOOKS GREAT IN SAFARI!!! lol

Any help would be greatly appreciated.

Thanks in advance!

abduraooft · 05-29-2009, 09:22 AM

Fix the errors in your markup first, see http://validator.w3.org/check?uri=ht...Inline&group=0

JCOMPANYDESIGN · 05-29-2009, 02:17 PM

I am new to the coding side of things and I am trying to get better. Thanks for sharing the resource. I will validate all the pages and try to fix all the errors.

the problem is happening in IE 7 as well. The main image of the kitchen jumps all the way to the right. It appears to be a float drop issue, but my browser check in DW is not showing any errors. When I try to place the IECC in the head it doesnt seem to work, and the fact that it is happening in version 7 worries me.

Again, any ideas would be appreciated.

Thanks!

JCOMPANYDESIGN · 05-29-2009, 02:35 PM

I have looked at the validator in DW and the issues described in the link you included do not appear. This doesnt surprise me, but if being a noob I am confused. Also I am not sure that I understand ALL of those errors at the end of the doc...line 70.

I would appreciated any help or information.

Thanks again.

abduraooft · 05-29-2009, 02:46 PM

You don't have to use  comments inside your style or script tag any more. (One of such comment is not closed in your code)

Edit:
I'd suggest to use absolute positions for your logo, since it needs to be overlapped with other items. You may try the following styles

Code:

*{margin:0;padding:0;} #wrapper {/*amishcustom.css (line 206)*/ margin-left:auto; margin-right:auto; position:relative; padding-top:140px; width:1000px; } .logo {/*amishcustom.css (line 44)*/ left:0; position:absolute; top:-60px; z-index:1 } #main_content {/*amishcustom.css (line 10)*/ background-color:#E9E8CD; background-image:url(amishcustom_images/header_tile.gif); background-repeat:repeat-x; height:auto; margin-left:auto; margin-right:auto; position:relative; width:755px;z-index:10; }

JCOMPANYDESIGN · 05-29-2009, 03:01 PM

I am attempting to clean it up. Have I missed something? Everything seems to be closed. I appreciate your help, but I dont see how this markup fix will deal with the rendering issues. Again I am new to this and appreciate the learning experience.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Amish Custom</title>


<link href="amishcustom.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
	background-color: #e9e8cd;
}
.style2 {
	font-size: 5px
}

</style>
<script type="text/javascript">

var pix = ["pix0.jpg","pix1.jpg","pix2.jpg","pix3.jpg","pix4.jpg","pix5.jpg","pix6.jpg","pix7.jpg","pix8.jpg"];

function poppic( )
{
   var random = Math.floor( pix.length * Math.random() );
   window.open( pix[random], "POPUPPIX", "height=600,width=800" );
}
</script>

</head>

<body>



<div id="wrapper"><img src="amishcustom_images/amishcustom_logo.png" alt="Amish Custom Logo, Welcome to Amish Custom" width="500" height="250" class="logo" /><img src="amishcustom_images/amishcustom_excellencebanner.png" alt="Amish Custom, excellence in woodworking " width="379" height="113" class="excellence_image" />
  
  <div id="main_content">
  	
    
    <div id="navigation">
    <ul>
      <li class="current">home</li>
      <li><a href="homeowner.html">homeowner</a></li>
      <li><a href="contractor.html">contractor</a></li>
      <li><a href="whyamishcustom.html">why amish custom</a></li>
      <li><a href="gallery.html">gallery</a></li>
      <li><a href="contact_us.html">contact us</a></li>
    </ul>
</div>
  <img src="amishcustom_images/main_image.jpg" alt="image of beautiful kitchen design from Amish Custom" width="732" height="303"/>
  </div><div id="main_p">
    <div id="p_holder">
    <p> Amish Custom brings smarter kitchens to life through synergy, with slow fluid movements, stunning eye appeal and the efficiency that life demands.  Watch as doors open to display fully organized spaces; steps pull out to help your children reach the sink or as every opening is simultaneously shut in complete silence, the possibilities are truly endless.</p> 
  <p>Do you crave the clean lines of Glass and Maple, the warmth of a rich Sunrise Cherry or the rustic appeal of Country Hickory? Let your personality and style inspire our designer, share dreams, needs and lifestyle and truly transform your house into a home.</p>
  <p>Amish Custom is Southern Illinois' premium choice of custom wood finishings for your home. We invite you to take a look around our new website, and feel free to contact us with any questions at all.</p></div><img src="amishcustom_images/newest_kitchen.jpg" class="newkitchen" onclick="window.open('pix'+Math.floor(9*Math.random())+'.jpg',
                       'POPUP',
                       'width=800;height=600');
                       return false;"   />
  <div id="footer"><p class="footerp">© Amish Custom 2009 <a href="mailto:amishcustoms@gmail.com">info@amishcustom.com</a> 618 924 0029 </p>
  <p><a href="http://www.jcompanydesign.com" class="footer_jcompany">website by J Company</a></p>
  </div>
</div>
 
</div>  

</body>
</html>

abduraooft · 05-29-2009, 03:08 PM

Quote:

I am attempting to clean it up. Have I missed something? Everything seems to be closed. I appreciate your help, but I dont see how this markup fix will deal with the rendering issues. Again I am new to this and appreciate the learning experience.

See the updates in my above post.

JCOMPANYDESIGN · 05-29-2009, 05:28 PM

It dropped everything down behind the main image when i added the positioning etc.

do I need to get rid of float:left on .logo?

nope..that didnt do it.

JCOMPANYDESIGN · 05-29-2009, 05:58 PM

I guess I need the 2 images on the top to be independent of what is going on to #main_content. They need to be fixed on the top. I went back in and removed the tile image from #main content (which was a duplicate of the tiled image from the body), and added 140px of margin to it. It dropped down into position, but took the logo and "excellence" image with it. This is where I get confused as those images are not inside #main_content.

JCOMPANYDESIGN · 05-29-2009, 07:00 PM

So, after looking into some things and re-running my bowser compatibility check it appears that I am getting a 3 pixel text jog which appears to be the source of my problem. It is not appearing on the check in the index page, but it is appearing in all the other pages, (however the problem is rendering on all pages on the live site). I cannot tell if it is the nav which in inline content floated to the left that is the problem, or if it is a problem with the main image on the page.

Again, any help appreciated, and thanks!

JCOMPANYDESIGN · 06-03-2009, 04:21 PM

So I seem to have the problem almost taken care of in IE 7 and in IE6 if run on XP, but it appears that there is a difference between Windows 2000 and IE6. I was not aware that there were issues there.

In XP the graphics are rendering with transparency, but in 2000 the dreaded grey box is on my PNGs.

Also, in XP I was able to gain control over my float issues, but in 2000 the divs are all out of alignment still.

www.amishcustom.com

Any thoughts?!

Thanks

Edit.....

One more thing, there seems to be a lot of discrepancy regarding the margin of my "green" floated image. It renders correctly in some browsers, in others it is higher, and in others it is lower. I know it has to do with the different browsers makeup with concerns to margin etc, but not sure how to fix it across all of them.

SB65 · 06-03-2009, 05:38 PM

IE6 doesn't support transparency on PNGs - but there are fixes available.

Your div misalignment on IE6 is at least partly due to the IE6 doubled float margin bug. You should be able to fix this by applying display:inline to #main_p and #navigation.

Your green image looks OK to me in FF3, but doesn't in anything else (IE6, IE7, Chrome2, Opera). As a first thought, try putting the image at the top of your html in #main_p, rather than after all the p tags. Not sure that'll work, but worth a try.

If it doesn't then you could consider positioning the image absolutely within #main_p.

Finally, I noticed that your background image on #p_holder is fine in FF3 but not long enough in other browsers as above - because the font-size in FF3 is smaller. Can't immediately see why this is but will keep looking....EDIT: Ah, your css applies Helvetica Neue here. For reasons I don't understand, only FF3 for me actually applies this font, and the alternative fonts are larger. I doubt it's a font that will have universal coverage, you might want to rethink this one - Times New Roman perhaps, which looks almost identical at that size.

EDIT AGAIN: You are floating your green image and moving it up with a negative margin, didn't spot that the first time, so the point at which it starts will depend upon the end point of the text in #p_holder - so if p_holder is longer because the font size is bigger, that's why the green image is lower. So definitely worth putting the image at the top of #main_p as above, and removing the negative top margin.

JCOMPANYDESIGN · 06-03-2009, 07:05 PM

Thank you! I will give that a whirl and see. In theory this makes sense to me. I will let you know!

Thanks again.

JCOMPANYDESIGN · 06-04-2009, 12:22 AM

Now it appears that I still have a Gap between my nav and main image. It is supposed to have a "tab" effect using the background color and padding, but it appears that IE is adding extra to this as well.

Any thoughts?

Thanks!

SB65 · 06-04-2009, 08:14 PM

Summary of changes, further to PM:

Add #main_content img{clear:left} to your css - this brings the main image back in line in IE7.

Delete #header-wrapper from your html - it's causing an extra gap right at the top in IE.

Add #navigation ul {margin-top:0px} to your css - in the absence of this FF and IE are applying different default top margins which make the top of your #navigation tabs inconsistent across browsers.

Change margin-top on #navigation to -30px from -40px, because having sorted out the other stuff it's now too high.

To stop the header images chopping off, other than the top rays on .logo which you can't see anyway, I set margin-top on logo to -52px and on .excellence_image to 25px, but you'll want to amend these to your own design anyway.

With these changes I reckon it looks the same in FF3, IE7, IE6, Chrome2, Opera 9.63 and Safari.....

, apart from fonts:"Helvetica Neue" is still causing inconsistencies - FF is implementing TNR here but everything else is implementing Verdana.

Finally, because it seems a shame not to, if I were you I'd change the background image on #main_content so it lines up with the right hand side of the main kitchen image. It looks a bit odd nearly but not quite lining up as it is.