...

View Full Version : Right-hand column is shifted down in IE, doesn't display alongside left-hand column.



jwhittlestone
07-22-2008, 11:59 AM
Hi All.

There is some strange behaviour here where in Internet Explorer 7, the content of the right-hand column does not appear alongside the left hand column.

This only renders in this way in IE, and is fine in Firefox.

http://www.barbaryonline.com/jw/mirror_rss/help.php

If anyone could shed any light on this, it would be greatly appreciated, cheers!


jon

HTML 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" xml:lang="en" lang="en">
<head>
<title>Your Page Title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!-- add your meta tags here -->

<link href="style/my_layout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="style/patch_my_layout.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="wrapper"><img src="images/homepage/tj_head_left.gif" /><img src="images/homepage/tj_head_phr_h.jpg" /><img src="images/homepage/tj_head_right.gif" />
<div id="page_margins">
<div id="nav">

<!-- main navigation: #nav_main -->
<ul>
<li id="current"><a href="#">Home</a>
</li><img src="images/homepage/tj_nav_divider.gif" class="pipe" align="absmiddle" />
<li><a href="#">Menu Item</a></li> <img src="images/homepage/tj_nav_divider.gif" class="pipe" align="absmiddle"/>
<li><a href="#">Menu Item</a></li><img src="images/homepage/tj_nav_divider.gif" class="pipe" align="absmiddle"/>
<li><a href="#">Menu Item</a></li><img src="images/homepage/tj_nav_divider.gif" class="pipe" align="absmiddle"/>
<li><a href="#">Menu Item</a></li><img src="images/homepage/tj_nav_divider.gif" class="pipe" align="absmiddle"/>
<li><a href="#">Menu Item</a></li>
</ul>

</div>
<div id="main">
<div id="col1">
<div id="col1_content" class="clearfix">
left col
</div>
</div>
<div id="col3">
<div id="col3_content" class="clearfix">
<img src="images/homepage/tj_main_phr_h.jpg" />
</div>
<!-- IE Column Clearing -->
<div id="ie_clearing"> &#160; </div>
</div>
</div>
<div id="footer">Layout based on <a href="http://www.yaml.de/">YAML</a>
</div>
</div>
</div>
</body>
</html>





CSS code




@charset "UTF-8";
/**
* "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
* (en) stylesheet for screen layout
* (de) Stylesheet für das Bildschirm-Layout
*
* @creator YAML Builder V1.0.1 (http://builder.yaml.de)
* @file basemod.css
*/

@media screen, projection
{
/*-------------------------------------------------------------------------*/

/* (en) Marginal areas & page background */
/* (de) Randbereiche & Seitenhintergrund */
body { background: #f04aab url("../images/homepage/tj_bg_slice.jpg") repeat-x ; margin:0px }
ul {margin:0px; padding:0px}
#wrapper {margin:0 auto; width:1026px; background:url("../images/homepage/tj_bg_splat.jpg") repeat-x 0 175px;}
/* Layout Alignment | Layout-Ausrichtung */
#page_margins { margin: 0 auto; }

/* Layout Properties | Layout-Eigenschaften */
#page_margins { width: auto; min-width: 941px; max-width: 941px; background: #fff; }
#nav { overflow:hidden; height:31px; border-left:1px solid #FFF; border-right:1px solid #FFF}
#nav_main { }
#main { background: #663799 url(../images/homepage/tj_main_slice.jpg) repeat-x; min-height: 637px;border-left:1px solid #FFF; border-right:1px solid #FFF }
#footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }

/* (en) navigation: horizontal adjustment | (de) horizontale Ausrichtung */
#nav ul { margin-left: 20px; }

/*-------------------------------------------------------------------------*/

/**
* (en) Formatting content container
* (de) Formatierung der Inhalts-Container
*
*/

#col1 { float: left; width: 203px}
#col2 { display:none}
#col3 { width: auto; margin: 0 0 0 203px}
#col1_content { margin:12px 0px 0px 12px; background:#6e3fa1 url(../images/homepage/tj_slice_left.jpg) repeat-x;min-height:625px}
#col3_content { padding: 0 20px 0 10px }

/*-------------------------------------------------------------------------*/

/* nav */
#nav {background: #663799 url(../images/homepage/tj_nav_slice.gif) repeat-x; text-align:center; }
#nav li {display:inline}
#nav ul {padding:4px 0px 0px;margin-left:-5px}
#nav .pipe {padding:0px 28px 0px 30px}
#nav ul a {color:#FFF; text-decoration:none;font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:smaller}
#nav ul a:hover {text-decoration:none; text-decoration:underline}




}

abduraooft
07-22-2008, 01:01 PM
Try adding display:inline; to your floated left column (to get rid of IE's 3px bug). BTW, there are some markup errors (http://validator.w3.org/check?uri=http&#37;3A%2F%2Fwww.barbaryonline.com%2Fjw%2Fmirror_rss%2Fhelp.php&charset=%28detect+automatically%29&doctype=Inline&group=0) in your page. Fix them first.

Candygirl
07-22-2008, 08:26 PM
Try adding display:inline; to your floated left column (to get rid of IE's 3px bug). BTW, there are some markup errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.barbaryonline.com%2Fjw%2Fmirror_rss%2Fhelp.php&charset=%28detect+automatically%29&doctype=Inline&group=0) in your page. Fix them first.

The display:inline can fix the double margin bug, not the 3px jog. Both of the bugs are only in IE6-, not in IE7 in standards mode where the problem occures ;)

It seams more to be a width problem. We have a 941 width container. Inside #main with 2px as border. Then #col3 with 203px left margin and finally #col3_content with 30px padding:

941-2-203-30=706px left for the content.

tj_main_phr_h.jpg is 707px width, 1px too width. IE7 decides there is no room for it and put it down.

abduraooft
07-23-2008, 03:20 PM
Candygirl, thanks for the correcting me. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum