PDA

View Full Version : IE6 CSS Layout Problem



mobile
Aug 11th, 2007, 07:16 PM
Hi all,

I'm a relative newbie to CSS coding and would appreciate some help in confirming if a fix I have found for a problem I'm having is good or not.

I have some IE6 layout problems with a page I have at http://www.hydro-culture.net. It displays fine in Firefox, Opera, Safari and IE7 but not in IE6. The problem is that the right margin of the main frame (.conteneur) is getting pushed out to the right in IE6. I'm using two style sheets, 'styles.css' for the main styling and a conditional 'stylesie.css' for IE.

IE specific styling (hacks) are called up using:

<link rel="stylesheet" type="text/css" href="styles.css" /><!--[if IE]>
<link rel="stylesheet" type="text/css" href="stylesie.css" />
<![endif]-->
and I was hoping to be able to add somethings to the sylesie.css code to fix this problem.

styles.css:

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#182801;
}

.conteneur {
margin-top: 10px;
position: absolute;
width: 740px;
left: 50%;
margin-left: -370px;
border:0px solid #182801;
color: #182801;
background-color:#7A9431;
}

.conteneurnarrow {
margin-top: 10px;
position: absolute;
width: 490px;
left: 50%;
margin-left: -245px;
border:0px solid #182801;
color: #182801;
background-color:#7A9431;
}

.header {
background-image: url("images/header.jpg");
background-repeat: no-repeat;
height:160px;
padding-left:50px;
padding-top:40px;
max-width:490px;
border-bottom:1px solid #182801;
color: #F5F8EF;
}

.menu {
float:right;
margin: 0px;
padding:0px;
margin-left:20px;
border-left:1px solid #182801;
}

.centre {
padding:20px;
padding-left:40px;
}

.pied {
height: 25px;
text-align:right;
padding-right:10px;
padding-top:3px;
border-top:1px solid #141B0B;
}

.pfooter {
height: 60px;
text-align:center;
color: #7A9431;
background-color:#182801;
padding: 15px;
}

.pcentre {
text-align:center;
padding:5px;
}

.menu-list {
list-style-type: none;
margin:0px 0px 0px 0px;
padding:0px;
}

.menu li {
margin:0px;
border-bottom:1px solid #182801;
color: #D9CEB8;
font-size: 1.1em;
text-decoration: none;
background-color:#748F02;
padding:0px;
width:199px;
}

.menu li a {
margin:0px;
display: block;
color: #F5F8EF;
font-size: 1.1em;
text-decoration: none;
border-left:5px solid #F5F8EF;
padding:5px;
}

.menu li a:hover {
text-decoration: none;
background-color:#90A000;
}

.p{

}

h2{
margin-left:-20px;
margin-top:15px;
padding-left:5px;
font-size: 1.3em;
color: #F5F8EF;
font-weight:normal;
}

h1{
margin-left:-30px;
margin-top:5px;
padding-left:5px;
font-size: 1.6em;
color: #F5F8EF;
font-weight:normal;
}

.header-title {
font-size:2.3em;
border-top:2px solid #F5F8EF;
}

.header-title-two {
font-size:1.1em;
position: relative;
text-decoration: none;
background: url('images/underline.gif') repeat-x 0 100%;
padding-bottom: 4px;
z-index: 1;
}

.header-title-three {
font-size:1.1em;
padding-bottom:3px;
}

a{
color:#F5F8EF;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

blockquote{
background-color:#8EA845;
padding : 3px;
border-left:2px solid #F5F8EF;
}

div.center {
text-align: center;
}

div.center img {
display: block;
margin: 0 auto;
}

img.left {
float: left;
padding-left: 0px;
padding-right: 10px;
}

table.center {
margin-left:auto;
margin-right:auto;
background-color:#8EA845;
border-left:3px solid #F5F8EF;
}

td {
border-style: none;
padding: 3px 3px 3px 3px;
}

p.boldit {
font-size: 1.0em;
text-align:center;
margin: 0;
padding: 0;
font-style: italic;
font-weight: bold;
}

p.centeredh2{
margin-left:-20px;
margin-top:15px;
padding-left:5px;
font-size: 1.3em;
text-align:center;
color: #F5F8EF;
font-weight:normal;
}
p.ad{
margin-left:-35px;
margin-top:15px;
border-left:2px solid #F5F8EF;
}
p.adsmall{
margin-left:-8Px;
margin-top:0px;
border-left:2px solid #F5F8EF;
}

stylsie.css:

.menu {
margin-left: 0px;
}

* html .menu {
margin-left: -3px;
}

.menu li {
margin-bottom:-3px;
}I have experimented with a few ideas and adding the following to the stylesie.css seems to work but I don't understand why and not sure if it will cause any other problems:
p.ad{
margin-right:-17.5px;
}Any help would be very much appreciated.

Thanks in advance to anyone who reads this.

koyama
Aug 12th, 2007, 01:17 AM
I have some IE6 layout problems with a page I have at http://www.hydro-culture.net. It displays fine in Firefox, Opera, Safari and IE7 but not in IE6. The problem is that the right margin of the main frame (.conteneur) is getting pushed out to the right in IE6.
Try to add this to your style sheet and you'll clearly see what is the problem:


p.ad{
margin-left:-35px;
margin-top:15px;
border-left:2px solid #F5F8EF;
border-top: 10px solid red;
border-bottom: 10px solid red;
}

As you can see p.ad holds content that is wider than its own width.

While Firefox and IE7 correctly let the too wide content stick out on the right side of p.ad then IE6 instead expands the container. This bug is known as the expanding box problem (http://www.positioniseverything.net/explorer/expandingboxbug.html).

The solution in your case is to make sure that the content of p.ad is not wider than itself.


I'm using two style sheets, 'styles.css' for the main styling and a conditional 'stylesie.css' for IE.

IE specific styling (hacks) are called up using:

<link rel="stylesheet" type="text/css" href="styles.css" /><!--[if IE]>
<link rel="stylesheet" type="text/css" href="stylesie.css" />
<![endif]-->
While this method may generally be good, then, as you can see, one is very often able to work around the problems if one has an understanding of the most common bugs in IE6/7. In this case IE6 did not even need separate styles.

Sometimes IE6 and IE7 do need additional styles on top of the styles for Firefox, Opera etc. in order to display correctly. But even in many of these cases the additional styles needed for IE6 or IE7 do not necessarily break rendering in Firefox, Opera etc. In other words multiple browsers can very often be brought to render the web page in the same way using the same style rules.

Only when all other attempts have been exhausted should you consider style branching through CSS hacks or IE conditional comments.

mobile
Aug 12th, 2007, 07:37 PM
Thank you for your reply koyama.


The solution in your case is to make sure that the content of p.ad is not wider than itself.

p.ad is used to insert an AdSense banner and this banner is supposed to be 728px wide. .conteneur is 740px wide so I don't understand why the banner will not fit without expanding .conteneur?

Also, it seems quite strange that adding
p.ad{
margin-right:-17.5px;
} fixes the problem as 17.5px is exactly half of the specified left margin margin-left:-35px;

I've tried some of the examples detailed on the link you supplied but unfortunately I can't get them to work in this instance.

koyama
Aug 13th, 2007, 09:27 PM
p.ad is used to insert an AdSense banner and this banner is supposed to be 728px wide. .conteneur is 740px wide so I don't understand why the banner will not fit without expanding .conteneur?

Effectively, you have this:


.conteneur {
margin-top: 10px;
position: absolute;
width: 740px;
left: 50%;
margin-left: -370px;
border:0px solid #182801;
color: #182801;
background-color:#7A9431;
}
.centre {
padding:20px;
padding-left:40px;
background: blue;
}
p.ad{
margin-left:-35px;
margin-top:15px;
border-left:2px solid #F5F8EF;
}



<div class="conteneur">
<div class="centre">
<p class="ad">[Google Ad]</p>
</div>
</div>

Looking at the above, the content width of .centre becomes 740px - 20px - 40px = 680px
Similary, the content width of p.ad is 680px -(-35px) - 2px = 713px.

If the Goggle ad is 728px then p.ad is short of 15px.


Also, it seems quite strange that adding
p.ad{
margin-right:-17.5px;
} fixes the problem as 17.5px is exactly half of the specified left margin margin-left:-35px;
This seems to be a coincidence. The above calculations suggest that 15px should suffice, but I didn't try.


I've tried some of the examples detailed on the link you supplied but unfortunately I can't get them to work in this instance.
I just wanted to point out the bug that was causing IE6 to render the page incorrectly. I didn't mean to suggest that you should try those fixes mentioned in the article. The best solution for you is to either make the Google ad narrower or make p.ad wider.

mobile
Aug 14th, 2007, 08:04 AM
Once again, thank you for your help koyama.

I'm a newbie to CSS and still trying to get familiar.

I think you are correct in that IE6 does not require additional styling to fix this particular problem and I will experiment with it later to see if I can change p.ad to work with IE6 plus the others I mentioned.

UPDATE:

I've added the following code to styles.css and it seems to work in all my browsers


p.ad{
margin-left:-35px;
margin-right:-15px;
margin-top:15px;
border-left:2px solid #F5F8EF;
}