I am making changes to a site that I did not create and running into some issues with the CSS. I know this is often an issue, but I am having difficulty getting the site to display correctly in IE on Windows platform. I could use some assistance and another (fresh) pair of eyes to help me see how to correct things. Can someone help please?
Mac + Firefox - looks ok
Mac + Safari - looks ok
Windows + Firefox - looks ok
Windows + IE - not displaying as it should
Home Page
The red box top left is too high and into the blue band at top.
The area to the right of that with six images and text is into the blue band and has a white line running between the top and bottom row of images.
There should be a white line between the blue band and the two areas below it.
The image HOT DEALS is displaying too low. The top of it should be level with the top line of text.
the AHLA logo, bottom right, should be in line with the FB, twitter, Wordpress text/imgs
Secondary Pages - Left Columns
An orange band (like the ones behind the text Select a State, etc.) is displaying behind the six packages, (Attractions, Golf, etc.) In a different place if you are displaying search results or About Us or another page.
I have screen shots if you are unable to see what I have described.
What puzzles me is that it to me looks the same in FF and IE on WinXP, can’t see much difference. But then I’m late here.
The left and right boxes are into the blue stripe.
There should be a white line between the blue band and the two areas below it. :
Because the blue stripe background is 120px and the header total is only 106px to push the boxes down so there is the difference, the same in FF and IE (and should be in Mac too). Increasing the header height would solve the issues.
#header {
height:91px;
[COLOR="Red"]height:105px;[/COLOR] /* levels with the blue background height */
padding:10px 0 5px 0;
margin-bottom:0px;
}
The image HOT DEALS is displaying too low. The top of it should be level with the top line of text.
A top padding on its container, the “hotdeals2”, would align it with the text, e.g. 23px. It is now floated in level with the h4 heading.
the AHLA logo, bottom right, should be in line with the FB, twitter, Wordpress text/imgs.
By the top padding on “socmedia” it seems you want them all vertical centre aligned, and they seems to be. To align bottom you could change that padding.
An orange band (like the ones behind the text Select a State, etc.) is displaying behind the six packages,
The only orange band I can see is the background image applied to the box?
Thanks for these. I’ll take a look. I am viewing in Windows 2000. Would that make a difference? Also, can post screen shots or put them somewhere to view if that would help to see what I am seeing.
Well, I no longer have the white line between the images, but all of the other issues are still there.
I changed the header height to 105px and on Windows 2000, IE6 all the elements described above are still in the wrong place. The elements below the blue bar are still in the blue bar.
Thanks for the help, just not sure what to do at this point. Frustrating.
Hi, IE is actually correct with this. The boxes below the header shouldn’t actually be that far down, however because hte Content is collapsed in height the floated elements are pushing up on the header.
You can make FF behave like IE in this example by giving it overflow:hidden;. zoom:1; wouldn’t hurt here either (gives IE6 haslayout which can’t hurt here)
Then just give a top margin to whatever value looks nice
I looked at your “sandbox”-link. You have a few IE bugs in your css and a few other issues.
The space the content had below the header in good browsers was caused by a 20px collapsing margin, but IE does not collaps margins when the box has hasLayout.
This changes should fix all issues I think. Explaining comments added.
#leaderad {
margin:20px 0;
float:left; /* for IE to respect the bottom margin on the child */
width:100%; /* avoid the float shrink wrapping the content */
display:inline; /* Double-Floated-Margin bugfix IE6 */
}
#leaderboard {
width:728px;
height:90px;
float:left;
margin: 5px 0 5px 40px; /* bottom margin 5px not resp replaced when parent is not floated */
}
#header {
height:105px; /* height plus padding now matches the 120px blue stripe background, (was 91px) */
padding:10px 0 5px 0;
}
#content {
padding:5px 25px 25px 25px; /* 5px top padding (0px) to restore the space that was caused by the collapsing 20px margin in good browsers */
height:1%; /* clear floated content in IE6 (works by giving the box hasLayout, also in IE7) */
overflow:hidden; /* avoid collapsing margins and clear floated content in good browsers (also trips hasLayout in IE7) */
}
#getaway {
color:#02243D;
margin:0;
padding:0 0 0 3px;
height: auto;
width:210px;
float:left;
overflow:hidden; /* for IE6 to respact the set width */
}
#hotdeals2 {
float:right;
width:90px;
margin:0px 0 0 15px;
padding:0;
text-align:right;
overflow:hidden; /* for IE6 to respact the set width */
}
.module1home div{
overflow:hidden; /* for IE6 to respact the set height */
}
#ahla {
width:85px;
margin:0 110px 0 0;
float:right;
text-align:right;
display:inline; /* Double-Floated-Margin bugfix IE6 */
}
.socmedia {
width: 430px;
height: 35px;
float:left;
padding: 20px 0 0 0px;
text-align:right;
vertical-align:baseline;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
margin:0 0 0 100px;
display:inline;/* Double-Floated-Margin bugfix IE6 */
}
Your start and end comments in the source comes between floats and causes the Duplicate Characters Bug in IE6 resulting in some extra vertical space. There are fixes, but I suggest you indent the code consistently, making the tag comments redundant.
The float drop is caused by the erroneous extra end tag ,interrupting the content div.
<div class="left_column home2">
<div class="lcoltop">
<div id="getaway">
<a href="/widepages/headlines" title="Getaway Vacation Headlines"><h4>Getaway Headlines</h4></a><br><br>
<ul>
<li><a href="/2010/01/04/drive-to-hawaii-really/">Drive to Hawaii REALLY</a></li>
<li><a href="/2009/10/21/wicked-scary-halloween-getaway/">Wicked Scary Halloween Getaway</a></li>
<li><a href="/2009/08/28/labor-day-hotel-deals-and-steals/">Labor Day Hotel Deals and Steals</a></li>
<li><a href="/2009/02/01/stone-mountain-attraction/">Stone Mountain Attraction</a></li>
<li><a href="/2009/02/01/sixflagsmagicmountai/">Magic Mountain Valencia California</a></li>
</ul>
</div>
<div id="hotdeals2">
<a href="/packages/index/HotDeals"><img src="img/hotdeals.gif" height="90" width="90"></a>
</div>
</div>
<div id="getaway">[COLOR="Red"]<!-- N.b: id is already used -->[/COLOR]
<ul>
<li><a href="/2010/01/04/hello-world/">Hello world!</a></li>
</ul>
</div>
</div>
[COLOR="Red"]<!-- </div> remove -->[/COLOR]
For taking the time to look at my code (I know it is a bit of a mess, but was working with what I had) and what it was doing.
For being so thorough in your solution and explanation
And helping me understand what was happening and why
I am happy to report that I made the changes you suggested (I corrected someone else’s double use of getaway id) and in IE6 now - it looks GREAT! I now have too much white space between the Google ads and the footer when viewed in Windows2000 / FF, but am looking at the code and what I’ve learned and hoping to figure it out myself.
I should also have a very happy client.
Again - thank you and thanks to all of you who viewed my problem and gave advise.
