CSS layout issues in IE 5.5, 6 and 7 (only)
by Anne Elliot
on
Aug 12, 2009 at 11:24:36 am
Hi
I wonder if you terrific saviours of many web designer can help me find a fix for IE 5.5, 6 and 7 showing the main content of my new website incorrectly. In the 3-column layout in CSS the middle div drops below the two side bars. I have tested the CSS and no errors were found by Dreamweaver. I tried it in http://browsershots.org/ and that was how I discovered the versions of IE that create problems.
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Richard Williams on Aug 12, 2009 at 8:57:27 pm
Hi Anne,
Welcome back to the Cow, we have missed you.
OK, obviously, i am not fernando, so what i say here might not be totally correct, but from my understanding of CSS, i would do this a little differently.
1. You have a left margin, and then you have inserted a left box, but it is wider than the left margin.
Your left column is 182px, but your left box is 156px wide, plus 10px padding left, plus 10px padding right, plus 12px margin right plus 12px left.
This is because you are using the rules margin and padding. If you want to insert a rule for padding or margin specifically for one area, use margin-left, right, top etc. OR... Remember to add the 0's in.
for instance, margin 10px 0 0 0 would be margin top 10px. to type in margin 10px will create a margin every side, and to create a margin 10px 12px will also do a similar thing, you need to enssure you inclde the extra 0's
i changed the settings in
#maincontent padding 0 20px to padding 0 20px 0 0
and
~leftBox settings to margin 10px 12px 0 0, padding 10px 0 0 0 and instantly in IE7 it lined up again, but not in IE6 or 5.5
If you look at the form on the right column, again in lower versions, the alignment is out of some of the boxes too. I am pretty sure that this will all sort itself out if you go through the CSS one by one and correct all the settings where you have missed some of the instructions out of padding or margins. I believe the problem is that the earlier versions simply render it or translate what you are attempting to do differently, once you spell it out it means there is no room for them to interpret what you mean, it will just know. :o)
Let us know if not, Hope this helps
Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Fernando Mol on Aug 12, 2009 at 9:04:38 pm
Try this:
Remove the padding-right from your #mainContent
In your "fieldset ol" add "margin-left: 0;"
Remove the .clearfloat from the ul you want to be at the right of your picture
I hope this helps
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Richard Williams on Aug 12, 2009 at 9:10:46 pm
lol... Didn't this happened last time... We always end up fighting over Anne :o).
Anne, you could have tidied up your desk before taking your picture for your site!
Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Anne Elliot on Aug 13, 2009 at 12:11:41 am
Thank you, Fernando and Richard!
I am always amazed that when I have an unsolvable problem, I ask for help and wake up to find a fix in my inbox (time difference). I don't know what I would do without your help!
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Anne Elliot on Aug 13, 2009 at 12:53:35 pm
Hi folks
Can you help me once more?
The issue is a problem on hover over an img used as a link in the above browsers PLUS IE8 and only on the PC. Hovering causes the bottom edge of the image to extend as if I had a border or text-decoration but I don't.
It happens in two completely different websites but is not surprising as I "recycle" CSS. Same as before but different page:
a:hover, and one of the instructions in this is to add a bottom border style. Now, when you add a link to an image, it puts the image inside <a> tag. Thus, this rule is also trying to apply itself to your images on hover. of course, you probably missed this, because you have another rule, #leftNav a:hover, which means that if you delete the bottom border style in the a:hover rule, your text down the left, since they have this class applied to them, will still underline. Unfortunately, the links to the galleries will not underline.
So, what we need to do is apply a rule to the images.
The best way to approach this, is to click on the container of the image, then go to the CSS window, and in the top right corner, there is a picture of a bulleted list. Click on this, and click new. This should then automatically give you the code for that container... then just add an a:hover to the instruction, and then press OK.
The rule is...
#container #navImg p a:hover {
border: 0px;
border-style: none;
}
Just thought i would explain how you can get there yourself.
Now you try the other page and let us know how you get on. :o)
Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Matthew Redding on Sep 3, 2009 at 2:24:23 pm
Hi Richard or Fernando,
I have a similar issue to Anne's CSS layout problem that she originally posted and was hoping you could suggest what I am doing wrong.
I have tried to change the padding and box size for my maincontent and sidebars but the problem still happens in IE 6 & 7 (and probably 5.5).
It's fine in FF, Chrome and Opera but in IE 6 the MainContent jumps up, Sidebarleft jumps down and Sidebarright jumps left & down. It's not as bad in IE 7, MainContent jumps up and sidebars only jump down.
Here is my 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fairfax & Bond</title>
<div id="image">
<div id="imagetxt">
<h4>CLASSIC CHAUFFEUR<br />
DRIVEN CARS</h4>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<!-- end #imagetxt --></div>
<!-- end #image --></div>
<div id="main">
<div id="sidebar1">
<h3>PACKAGES</h3>
<p><img src="images/image_brideandgroom.png" alt="Wedding Packages" width="167" height="99" class="thrColFixHdr" />The background color on this div will only show for the length of the content.</p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>QUOTE</h3>
<p><img src="images/image_bentleylogo.png" alt="Quote" width="167" height="99" class="thrColFixHdr" />The background color on this div will only show for the length of the content. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1>WELCOME</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #main --></div>
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Fernando Mol on Sep 3, 2009 at 4:52:50 pm
Try placing the images outside the paragraphs.
<p><img src="images/image_bentleylogo.png" alt="Quote" width="167" height="99" class="thrColFixHdr" />The background color on this div will only show for the length of the content. </p>
Change to:
<img src="images/image_bentleylogo.png" alt="Quote" width="167" height="99" class="thrColFixHdr" /><p>The background color on this div will only show for the length of the content. </p>
Also, look at the definition of the problem in the adobe page:
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Matthew Redding on Sep 3, 2009 at 9:25:36 pm
Hi Fernando,
Thanks so much for replying.
Your suggestion of placing the image outside the paragraph worked so that the sidebarright in IE 6 doesn't jump left now but both sidebars still both jump down slighly and the Maincontent jumps up in IE 6.
Any other suggestions as to why this happens?
I looked at the Adobe link for Expanding box issue but think what you suggested has sorted this out on the Rightsidebar expanding to the left. Does this relate to the Sidebars jumping down and the Maincontent jumping up in IE 6/7? Sorry found the article a bit confusing.
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Matthew Redding on Sep 4, 2009 at 10:00:00 am
Hi,
I have tried changing the layout like you said and also tried lots of different variations but still no luck. Although what you suggested did make the 3divs line up better between DW and FF. In IE 6 & 7 though the 3divs are still really offset. The maincontent div still jumps up and the sidebar divs still jump down!
Do you think this is an issue with the padding, box width, etc of the 3divs or maybe something different? I did adapt this website from a 3 column fixed preset but added the #image div above and then below this I added a #main div to hold the sidebars and maincontent divs? Does this seem right to you? I mean it works ok except these 3 divs lining up.
I do have another issue with my spry submenu dropdown box not lining up in some browsers but thats not as important as this IE layout issue to be honest?
Sorry to keep asking but I am pretty stuch here & really appreciate your help.
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="file:///C|/Documents and Settings/Matt/Desktop/test_site/thrColFixHdr.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Fernando Mol on Sep 4, 2009 at 1:04:23 pm
The problem is the divs are not consistent. That's why they render different.
Also, you should reset all of your headers padding and margin to 0, then give each one the margin you need for your design. Different browsers have different default margins for HTML elements. If you really want to be consistent in all of them you shouldn't let any of them to the default.
Try this: measure the width of each column in your BG image, then give each div the same width. They are not. Remember that the actual width of your div is the width plus the paddings.
The problem here is the math.
I hope this helps
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Matthew Redding on Sep 4, 2009 at 3:22:59 pm
Hi fernando,
I have measured my 3 columns and made the widths of the 3divs (sidebar1, maincontent, sidebar2) equal the total width including the padding. My sidebars are 198px and my maincontent is 554px which totals 950px. But when tested in IE the layout is still the same!
I didn't understand what you meant when you said...
'you should reset all of your headers padding and margin to 0, then give each one the margin you need for your design'
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Matthew Redding on Sep 4, 2009 at 6:52:51 pm
Thanks ever so much for your responses to this Fernando, I really appreciate it.
Definately getting there becuase what you suggested has sorted out the Maincontent in IE now, so thats excellent, it is all positioned well. Although the sidebars still jump down out of position in IE but I will carry on fiddling around and hopefully get them posotioned properly!
I have given all my divs a margin and padding of 0px based on what you said, so take it this is a good tip to building sites with CSS then? Nice one, I am learning.
Thanks again for all your help, especially as found out today you guys do it for our benefit and your not paid! I will def come back and tick this as solved when I get it.
Re: CSS layout issues in IE 5.5, 6 and 7 (only) by Matthew Redding on Sep 8, 2009 at 12:20:12 pm
Hi fernando,
I have played around with this some more and did what you suggested (made all 3divs use the same heading) but still no luck. The sidebars still jump down out of position in IE.
I was wandering if you could maybe suggest anything else?
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fairfax & Bond</title>
<link href="fairfaxandbond.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal_FandB.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
body,td,th {
font-family: Palatino Linotype;
color: #FFFFFF;
font-size: 100%;
}
body {
background-color: #BDCAB3;
}
a:link {
font-weight: bold;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
h1 {
color: #E9DDA7;
margin: 20px 0;
padding: 0px;
font-size: 100%;
}
h3 {
color: #E9DDA7;
margin: 20px 0;
padding: 0px;
}
h4 {
color: #E9DDA7;
}
-->
</style>
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body class="thrColFixHdr" onload="MM_CheckFlashVersion('8,0,0,0','Content on this page requires a newer version of Adobe Flash Player. Do you want to download it now?');">
<div id="container">
<div id="header">
<h1>Fairfax & Bond</h1>
<img src="images/header.png" alt="Fairfax & Bond" width="950" height="95" />
<!-- end #header --></div>
<div id="image">
<div id="slideshow">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','607','height','310','title','cars slideshow','src','slideShow','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','slideShow', 'wmode', 'opaque' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="607" height="310" title="cars slideshow">
<param name="movie" value="slideShow.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="slideShow.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="607" height="310" wmode="opaque"></embed>
</object></noscript>
<!-- end #image --></div>
<div id="imagetxt">
<h1>CLASSIC CHAUFFEUR<br />
DRIVEN CARS</h1>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<!-- end #imagetxt -->
</div>
<!-- end #image -->
</div>
<div id="main">
<div id="sidebar1">
<h1>PACKAGES</h1>
<img src="images/image_brideandgroom.png" alt="Wedding Packages" width="167" height="99" class="thrColFixHdr" /><p>The background color on this div will only show for the length of the content.</p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h1>QUOTE</h1>
<img src="images/image_bentleylogo.png" alt="Quote" width="167" height="99" class="thrColFixHdr" /><p>The background color on this div will only show for the length of the content. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1>WELCOME</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #main --></div>
Note that I embedded the CSS for testing purposes so the code is not exactly the same you have on line.
So my guess is the problem could be in some display bug with the movie. Old browsers don't fully support PNG files, but I don't think that's the problem here. No harm changing them to GIF or JPG, anyway.
I hope this helps
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
