Browser compatibility issue

wombleUK · September 1st, 2006, 10:52 AM

Hi all,

I am having a spot of bother with a design that I've created it works fine in Firefox but is all screwed in IE6.

It can be viewed here. The problem that I have is that the left hand div (the grey one) extends as I want it to in firefox but stays underneath the left div in IE.

I like to think that I am fairly okay with CSS but this issue has obviously proved that I'm not, so any help would be greatly appreciated.

Thanks in advance...

Womble

minute44 · September 1st, 2006, 11:07 AM

Right. I've seen this behaviour before! I'm not 100% sure on what to do to solve it but hopefully I can point you in the right direction.

The problem is with your various Floats. Sometimes I find IE goes bat-sh*t when you ask it to handle two divs side by side. It pushes one below. I have a similar problem on my own site where I have little floating images in a block of text. FF handles them beautifully but IE acts a damn fool! I'll watch this thread to see if a solution arrises.

wombleUK · September 1st, 2006, 11:09 AM

Cool thanks. I have a feeling it was float related, it's reassuring to know that I am not a complete dumb ass and missed something obvious.

moojoo · September 1st, 2006, 11:25 AM

Not sure but I would remove clear:right; from the left column and give the right column a left margin equal to or greater than the width of the left column. Also you could try floating the right column right and placing its HTML above the left columns html.

ukgeoff · September 1st, 2006, 05:32 PM

There are a number of issues that you need to address in your css and your html structure.

First, re-sequence these divs into the sequence given:

#div_rightborder
#div_right
#div_menu
#div_left

Float the first two right.

Remove the float from #div_menu and the clear: right from #div_left. If you have set their widths correctly, they should pfloat up into the space left on the left hand side.

Do these first and then lets see what you have.

wombleUK · September 4th, 2006, 04:59 PM

Okay, thanks for all your help, I have made these changes and it's almost there. The page now renders fine in IE but the right columun appears to far to the right in FF. It appears to be aligning to the right of the content div in FF and butt up to the right border div in IE!!!

If I make the right margin of the right div equal to the width of the right border div then it looks fine in FF but wrong in IE as it leaves a gap at the right hand side.

heres the url again

http://www.angel-cakes.net/designs/

I am begining to wonder whether I would have been better not using floats... Any suggestions?

Cheers

moojoo · September 6th, 2006, 10:58 AM

Maybe this will help you towards a solution. Just whipped it up and it works in FF and IE. The CSS is in the HTML and everything is commented so you can see where it is. Not quite the same as your layout but the same basic principles.

Sample Link

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>
<!--[if lte IE 6]>
<style type="text/css">
#rightcolumn {
    float:right;
    width:340px;
    padding:5px;
    margin:18px 0 0 0;
    }
</style>
<![endif]-->
    <title>Basic Layout</title>
    <style type="text/css">
    body {
    padding:0;
    margin:0;
    }
    
    .clearing {
    height:1px;
    clear:both;
    }
    
    #container {
    width:700px;
    margin:12px auto 12px auto;
    border:solid #CCCCCC;
    border-width:1px;
    }
    
    #masthead {
    padding:8px;
    border-bottom:1px solid #CCCCCC;
    text-align:center;
    }
    
    #leftcolumn {
    padding:5px;
    margin:0 350px 0 0;
    border-right:1px solid #CCCCCC;
    }
    
    #rightcolumn {
    float:right;
    width:340px;
    padding:5px;
    }
    
    #footer {
    text-align:center;
    font-weight:bold;
    padding:4px;
    border-top:1px solid #CCCCCC;
    }
    </style>
</head>
<body>
<!-- begin #container -->
<div id="container">
<!-- begin #masthead -->
<div id="masthead">
<h1>Masthead</h1>
</div>
<!-- end #masthead -->
<!-- begin #rightcolumn -->
<div id="rightcolumn">
<h3>This is the right column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse augue enim, tempor vitae, aliquam et, vulputate ut, nunc. Pellentesque id metus id odio pellentesque viverra. Integer tempus nunc eu ligula. Pellentesque dolor quam, consectetuer in, sollicitudin vitae, feugiat quis, magna. Nullam condimentum. Nam eu nisl in nisi aliquet vehicula. Fusce faucibus iaculis diam. Nulla sapien nulla, elementum sed, rutrum eu, bibendum ut, ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Proin sagittis ligula non ante volutpat suscipit. Praesent pede turpis, dictum eget, suscipit pulvinar, vehicula non, mi. Donec massa ligula, eleifend et, suscipit non, consequat nec, nibh. In hac habitasse platea dictumst. Sed fringilla, sapien sit amet imperdiet mollis, nibh odio vulputate mauris, id faucibus nisi erat quis felis. Maecenas ultrices tortor non lacus. Nullam eu diam tristique est pretium eleifend. Nunc dignissim nibh vitae arcu. Duis vestibulum orci id sem.</p>
</div>
<!-- end #rightcolumn -->
<!-- begin #leftcolumn -->
<div id="leftcolumn">
<h3>This is the left column</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse augue enim, tempor vitae, aliquam et, vulputate ut, nunc. Pellentesque id metus id odio pellentesque viverra. Integer tempus nunc eu ligula. Pellentesque dolor quam, consectetuer in, sollicitudin vitae, feugiat quis, magna. Nullam condimentum. Nam eu nisl in nisi aliquet vehicula. Fusce faucibus iaculis diam. Nulla sapien nulla, elementum sed, rutrum eu, bibendum ut, ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Proin sagittis ligula non ante volutpat suscipit. Praesent pede turpis, dictum eget, suscipit pulvinar, vehicula non, mi. Donec massa ligula, eleifend et, suscipit non, consequat nec, nibh. In hac habitasse platea dictumst. Sed fringilla, sapien sit amet imperdiet mollis, nibh odio vulputate mauris, id faucibus nisi erat quis felis. Maecenas ultrices tortor non lacus. Nullam eu diam tristique est pretium eleifend. Nunc dignissim nibh vitae arcu. Duis vestibulum orci id sem.</p>
</div>
<!-- end #leftcolumn -->
<!-- begin #footer -->
<div id="footer">
<p>Footer</p>
</div>
<!-- end #footer -->
</div>
<!-- end #container -->
</body>
</html>