...

View Full Version : ie broken but firefox/chrome work fine (3-part header right broke)



thecssshack
07-29-2010, 11:19 AM
I'm working on a page and get it to work fine in firefox and chrome, only to find that ie isn't working properly.

I made a 3 column layout with a 3 part header. There is also a shortbar between the header and columns. It displays exactly like I want it to in the other browsers but ie is giving me a headache.

html:

<!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>untilted</title>

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

</head>

<body>

<div id="totalcontent">

<div id="headerright">
<h1>login</h1>
</div>

<div id="headermiddle">
<h1>search</h1>
</div>

<div id="headerleft">

<h1>header</h1>
</div>




<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start -->
<h2>&nbsp;</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<div id="ads">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<h2>&nbsp;</h2>
<p>right</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
<div id="footer">
<p>foooooooooooter</p>
</div></div>
</body>
</html>


css

@charset "utf-8";
/* CSS Document */

body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
}


#totalcontent
{
margin-left: 5px;
margin-right: 5px;
background:#fff
}

#shortbar
{
margin-right:28%;
margin-left: 28%;
top: 73px;
height: 20px;
}


#headerleft
{
position: absolute;
top: 0;
left: 0;
height:73px;
margin-right:75%;
border: ridge thin #777;


//margin-right:208px;
width: 25%;
}

#headermiddle
{
height:73px;
margin-left:25%;
margin-right:25%;
border: ridge thin #777;
}
#headerright
{
clear:none;
position:absolute;
top: 0;
right: 0;
height:73px;
border:ridge thin #777;
float: right;
width: 25%;
margin-left: 75%;
//width: 206px;
//right: 15px;
//top: 16px;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background:#eee; /* right column background colour */
}
.threecol .colmid {
right:25%; /* width of the right column */
background:#fff; /* center column background colour */
}
.threecol .colleft {
right:50%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */
}
.threecol .col1 {
overflow:scroll;
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}

abduraooft
07-29-2010, 12:44 PM
It's not a good practice to use too much absolute positions as they have some pitfalls (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/). I'd recommend you to check http://bonrouge.com/3c-hf-fluid.php

Seo-Services
07-29-2010, 01:42 PM
Hi,

Your coding is working good. I didn't found any mistake in that.

It was Opening exactly what you have designed.

Opening good in Firefox, Chrome, IE8.

Try it Again.


------------
internet marketing services (http://www.dsm-publishing.co.uk)
plr (http://www.ebooks-land.com)

eighthwonder
07-30-2010, 04:23 AM
Hi Seo-Services,

you are right.

This coding is working well.

I checked this coding with firefox 3.6.8, Chrome 5.0.3 and IE 8.

I am getting eaxct display in all of this three browsers.


----------
8th Wonder Income Marketing System (http://8thwonderincome.com)

thecssshack
08-01-2010, 04:10 PM
Hmm its strange cause I am still having the same problem in my ie, maybe it is a problem with my version or something that is wrong with it. Its good to know that it is working on others ie though. My ie is really buggy on vista so I think that might be the problem. Thanks for checking guys!

abduraooft
08-01-2010, 04:36 PM
Thanks for checking guys! They were just two spams :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum