14 Replies - 1188 Views - Last Post: 09 April 2008 - 06:54 AM

#1 ellisgl  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 161
  • Joined: 10-November 07

IE 6 CSS issues.

Posted 07 April 2008 - 02:45 PM

Well I'm trying to make a fully compliant site template and I'm having an issue with my css. It works in FF and IE 7, but 6 is slamming my right side column content all the way to the left and behind my left column.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
 <head>
  <title>House of Ellis | Home</title>
  <base href="http://thehouseofellis.com/" />
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <meta name="description" content="A blog by Ellis." />
  <meta name="keywords" content="PHP,MySQL,Blog,Ellis,Geek,QuakeCon,QuakeJam" />
  <meta name="robots" content="index, follow" />

  <meta name="ICBM" content="33.01,-96.99" />

  <meta name="DC.title" content="House of Ellis" />
  <meta name="geo.position" content="33.01,-96.99" />
  <meta name="geo.region" content="US-TX" />
  <meta name="geo.placename" content="Lewisville" />
  <style media="screen" type="text/css">
   /* General styles */
   body
	{
	 margin:0;
	 padding:0;
	 border:0;
	 width:100%;
	 background:#fff;
	 min-width:600px;
	 font-size:90%;
	}

   /* Header styles */
   #header
	{
	 clear:both;
	 float:left;
	 width:100%;
	 text-align: center;
	}

   /* column container */
   .colmask
	{
	 position:relative;	/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	 clear:both;
	 float:left;
	 width:100%;	  /* width of whole page */
	 overflow:hidden;  /* This chops off any overhanging divs */
	}

   /* 2 column left menu settings */
   .leftmenu
	{
	}

   .leftmenu .colright
	{
	 float:left;
	 width:200%;
	 position:relative;
	 left:200px;
	}

   .leftmenu .col1wrap
	{
	 float:right;
	 width:50%;
	 position:relative;
	 right:225px;
	 padding-bottom:1em;
	}

   .leftmenu .col1
	{
	 margin:0 0 0 195px;
	 padding: 0 2px 0 0;
	 position:relative;
	 right:99%;
	 overflow:hidden;
	}

   .leftmenu .col2
	{
	 float:left;
	 width:170px;
	 position:relative;
	 right:198px;
	}

   /* Footer styles */
   #footer
	{
	 clear:both;
	 float:left;
	 width:100%;
	}

   #footer p
	{
	 padding:10px;
	 margin:0;
	}
	
   .menu_container
	{
	 width:			168px;
	 padding:		  0px;
	 margin:		   0px;
	 border:		   1px solid #000;
	 background-color: #fff;
	}

   .menu_container h1
	{
	 padding:		  0px 5px 0px 0px;
	 margin:		   0px;
	 background-color: #000;
	 text-align:	   right;
	 font-family:	  Georgia, "Times New Roman", Times, serif;
	 font-size:		18px;
	 font-weight:	  bold; 
	 color:			#fff;
	}
   
   .menu_container ul
	{
	 margin:			0px;
	 padding:		   0px;
	 list-style-type:   none;
	}
   
   .menu_container ul li
	{
	 margin:			0px;
	}

   .menu_container ul li:hover
	{
	 color:			 #fff;
	 background-color:  #333;
	 display:		   block;
	}
   
   .menu_container ul li a
	{
	 color:			 #000;
	}

   .menu_container ul li:hover a
	{
	 color:			 #fff;
	 text-decoration:   none;
	}
	
   .entry_container
	{
	 width:			100%;
	 border:		   1px solid #000;
	}
	
   .entry_container h1
	{
	 margin:		   0px;
	 padding:		  0 0 0 2px;
	 color:			#fff;
	 background-color: #000;
	 font-size:		14px;
	 font-weight:	  Normal; 
	}
   
   .entry_container p
	{
	 margin: 0px;
	 padding: 0 0 0 2px;
	}

   .entry_container h2
	{
	 margin:		   0 0 5px 2px;
	 padding:		  0px;
	 color:			#000;
	 background-color: #fff;
	 font-family:	  Georgia, "Times New Roman", Times, serif;
	 font-size:		12px;
	 font-weight:	  Normal; 
	}
 
   .entry_container h3
	{
	 margin:		   0px;
	 padding:		  0 2px 0 0;
	 color:			#fff;
	 background-color: #000;
	 font-family:	  Georgia, "Times New Roman", Times, serif;
	 font-size:		12px;
	 font-weight:	  Normal; 
	 text-align:	   right;
	}

   .entry_container h3 a
	{
	 color: #fff;
	}
	
   .entry_container h3 a:hover
	{
	 background-color: #fff;
	 color: #000;
	 text-decoration: none;
	}

  .tags
   {
	text-align: right;
	padding: 0 2px 0 0;
   }
  </style>
  <!--[if lt IE 7]>
	  <style media="screen" type="text/css">
	   .col1
		{
		 width:100%;
		}
	  </style>
	<![endif]-->
<link rel="stylesheet" type="text/css" href="/assets/snippets/jot/templates/jot.css" />
</head>
 <body>
  <div id="header">
   <img src="header.png" alt="Another blog" />
  </div>
  <div class="colmask leftmenu">
   <div class="colright">
	<div class="col1wrap">
	 <div class="col1">
	  <!-- Column 2 start -->
	  <div class="entry_container">
	   <h1>Personal</h1>
	   <h2>04-Apr-08 11:33</h2>
	   <p>
		oh so personal<br/>
		<a href="blog/personal.php" title="Read more...">Read more...</a>
	   </p>
	   <div class="tags">
		Tags: <a href="http://localhost/categories/personal">Personal</a>
	   </div>
	   <h3><a href="blog/personal.php#pageComments">4 comments. </a></h3>
	  </div>
	  <br/>
	  <div class="entry_container">
	   <h1>This is a test of the blog system</h1>
	   <h2>04-Apr-08 11:26</h2>
	   <p>
		Testing 1... 2... 3...<br/>
		<a href="blog/4.php" title="Read more...">Read more...</a>
	   </p>
	   <div class="tags">
		Tags: <a href="http://localhost/categories/personal">Personal</a>, 
		<a href="http://localhost/categories/misc">Misc</a>
	   </div>
	   <h3><a href="blog/4.php#pageComments">0 comments. </a></h3>
	  </div>
	  <br/>
	  <!-- Column 2 end -->
	 </div>
	</div>
	<div class="col2">
	 <!-- Column 1 start -->
	 <div class="menu_container">
	  <h1>Test</h1>
	  <ul>
	   <li>
		&nbsp;<a href="">Item</a>
	   </li>
	   <li>
		&nbsp;<a href="">Item</a>
	   </li>
	   <li>
		&nbsp;<a href="">Item</a>
	   </li>
	  </ul>
	 </div>
	 <br/>
	 <div class="menu_container">
	  <h1>Test</h1>
	  <ul>
	   <li>
		&nbsp;<a href="">Item</a>
	   </li>
	   <li>
		&nbsp;<a href="">Item</a>
	   </li>
	   <li>
		&nbsp;<a href="">Item</a>
	   </li>
	  </ul>
	 </div>
	 <!-- Column 1 end -->
	</div>
   </div>
  </div>
  <div id="footer">
  </div>
 </body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: IE 6 CSS issues.

#2 Sandi  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 18-November 07

Re: IE 6 CSS issues.

Posted 07 April 2008 - 04:07 PM

Assuming that your code is http://thehouseofellis.com/ I checked it here in IE6, IE7 and Firefox. They all look the same with no infringement by the right column content on the left.
Was This Post Helpful? 0
  • +
  • -

#3 ellisgl  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 161
  • Joined: 10-November 07

Re: IE 6 CSS issues.

Posted 07 April 2008 - 07:52 PM

View PostSandi, on 7 Apr, 2008 - 04:07 PM, said:

Assuming that your code is http://thehouseofellis.com/ I checked it here in IE6, IE7 and Firefox. They all look the same with no infringement by the right column content on the left.

You are right about the URL.
Here's what I see.

This post has been edited by ellisgl: 07 April 2008 - 07:52 PM

Was This Post Helpful? 0
  • +
  • -

#4 no2pencil  Icon User is online

  • Admiral Fancy Pants
  • member icon

Reputation: 5319
  • View blog
  • Posts: 27,225
  • Joined: 10-May 07

Re: IE 6 CSS issues.

Posted 07 April 2008 - 08:12 PM

   .leftmenu .col1
    {
     margin:0 77% 0 0;
     padding: 0 2px 0 0;
     position:relative;
     /*
     right:99%;
     overflow:hidden;
     */
    }


Helps it move around a bit, but trashes it for FireFox. Maybe you should write browser detection.
Was This Post Helpful? 0
  • +
  • -

#5 ellisgl  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 161
  • Joined: 10-November 07

Re: IE 6 CSS issues.

Posted 07 April 2008 - 08:35 PM

View Postno2pencil, on 7 Apr, 2008 - 08:12 PM, said:

   .leftmenu .col1
    {
     margin:0 77% 0 0;
     padding: 0 2px 0 0;
     position:relative;
     /*
     right:99%;
     overflow:hidden;
     */
    }


Helps it move around a bit, but trashes it for FireFox. Maybe you should write browser detection.

When I do that... Heres what I see.
Was This Post Helpful? 0
  • +
  • -

#6 no2pencil  Icon User is online

  • Admiral Fancy Pants
  • member icon

Reputation: 5319
  • View blog
  • Posts: 27,225
  • Joined: 10-May 07

Re: IE 6 CSS issues.

Posted 07 April 2008 - 08:47 PM

That's how it looks in Firefox for me, but it looked ok in IE6. *shrug* sorry man, I tried.
Was This Post Helpful? 0
  • +
  • -

#7 ellisgl  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 161
  • Joined: 10-November 07

Re: IE 6 CSS issues.

Posted 07 April 2008 - 08:50 PM

View Postno2pencil, on 7 Apr, 2008 - 08:47 PM, said:

That's how it looks in Firefox for me, but it looked ok in IE6. *shrug* sorry man, I tried.


It's cool man. Just something weird going on.. I'll / someone find it sooner or later...
Was This Post Helpful? 0
  • +
  • -

#8 Sandi  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 18-November 07

Re: IE 6 CSS issues.

Posted 07 April 2008 - 11:17 PM

I can't imagine why it looks fine in Firefox only for me and not the rest of you. I have FF 2.0.0.1.3 on Windows XP. I can try it later from Firefox in Linux.
Was This Post Helpful? 0
  • +
  • -

#9 no2pencil  Icon User is online

  • Admiral Fancy Pants
  • member icon

Reputation: 5319
  • View blog
  • Posts: 27,225
  • Joined: 10-May 07

Re: IE 6 CSS issues.

Posted 07 April 2008 - 11:28 PM

View PostSandi, on 8 Apr, 2008 - 02:17 AM, said:

I can't imagine why it looks fine in Firefox only for me and not the rest of you. I have FF 2.0.0.1.3 on Windows XP. I can try it later from Firefox in Linux.

His problem is with IE6. It is correct in Firefox.
Was This Post Helpful? 0
  • +
  • -

#10 Sandi  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 18-November 07

Re: IE 6 CSS issues.

Posted 08 April 2008 - 12:59 AM

View Postno2pencil, on 7 Apr, 2008 - 11:28 PM, said:

View PostSandi, on 8 Apr, 2008 - 02:17 AM, said:

I can't imagine why it looks fine in Firefox only for me and not the rest of you. I have FF 2.0.0.1.3 on Windows XP. I can try it later from Firefox in Linux.

His problem is with IE6. It is correct in Firefox.

I know. I have Firefox and IE7 on this computer, and my old computer with Win98 has IE6. But it looks the same there on IE6. The OS shouldn't matter.

This post has been edited by Sandi: 08 April 2008 - 01:00 AM

Was This Post Helpful? 0
  • +
  • -

#11 no2pencil  Icon User is online

  • Admiral Fancy Pants
  • member icon

Reputation: 5319
  • View blog
  • Posts: 27,225
  • Joined: 10-May 07

Re: IE 6 CSS issues.

Posted 08 April 2008 - 01:13 AM

View PostSandi, on 8 Apr, 2008 - 03:59 AM, said:

View Postno2pencil, on 7 Apr, 2008 - 11:28 PM, said:

His problem is with IE6. It is correct in Firefox.

I know. I have Firefox and IE7 on this computer, and my old computer with Win98 has IE6. But it looks the same there on IE6. The OS shouldn't matter.

Correct, the OS does not matter. However, the css code that he has posted does not produce the same web site in IE6 as it does in Firefox. Take a look at his attachments. When I view the code, I see what he is seeing, with IE6. However, the site is displayed correctly in Firefox.
Was This Post Helpful? 0
  • +
  • -

#12 ellisgl  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 161
  • Joined: 10-November 07

Re: IE 6 CSS issues.

Posted 08 April 2008 - 05:06 AM

Wait - I'm using XP with the IE Pack thing - Where I have 7 down to 3. I know that sometimes the OS can make a difference and I'm not sure about this pack. I'll have check the computer with XP and never had 7 on it..
Was This Post Helpful? 0
  • +
  • -

#13 ellisgl  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 161
  • Joined: 10-November 07

Re: IE 6 CSS issues.

Posted 09 April 2008 - 06:05 AM

XP with only 6 on it - never had 7, Looks jacked. Once I figure it out - I'll post the code.
Was This Post Helpful? 0
  • +
  • -

#14 kadarkarai  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 03-March 08

Re: IE 6 CSS issues.

Posted 09 April 2008 - 06:10 AM

.leftmenu .colright
	{
	 float:left;
	 width:160%;
	 position:relative;
	 left:200px;
	}

   .leftmenu .col1wrap
	{
	 float:right;
	 width:50%;
	 position:relative;
	 right:0px;
	 padding-bottom:0;
	}

   .leftmenu .col1
	{
	 margin:0 0 0 0;
	 padding: 0 2px 0 0;
	 position:relative;
	 right:100%;
	 overflow:hidden;
	}


Just change this Css and its work fine.........

** edit ** :code:
Was This Post Helpful? 0
  • +
  • -

#15 ellisgl  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 161
  • Joined: 10-November 07

Re: IE 6 CSS issues.

Posted 09 April 2008 - 06:54 AM

View Postkadarkarai, on 9 Apr, 2008 - 06:10 AM, said:

.leftmenu .colright
{
float:left;
width:160%;
position:relative;
left:200px;
}

.leftmenu .col1wrap
{
float:right;
width:50%;
position:relative;
right:0px;
padding-bottom:0;
}

.leftmenu .col1
{
margin:0 0 0 0;
padding: 0 2px 0 0;
position:relative;
right:100%;
overflow:hidden;
}

Just change this Css and its work fine.........


That did it! Awesome! Great work!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1