SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE CSS Alignment / Site Help Please

    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?

    www.getawaypackages.com

    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.

    Any assistance is appreciated! Thank you.
    Last edited by MCDEAN59; Jan 13, 2010 at 18:33. Reason: add site

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Header-you set a pixel height and you should remove that height, and set overflow:hidden; instead

    And..I don't see anything else?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    #header {
    height:91px;
    height:105px; /* 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?
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was puzzled by you saying it was ok in FF and didn't bother IE6 until you say it is the culprit.

    Is it IE6 you refer the other issues to?
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure of the version of IE - will check. I am on a Mac. No PC temporarily so am viewing on someone else's system.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still new to the forum. Can you advise what is the acceptable way to post images?

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Putting the screenshots online and link to them is the fastest. Posting them here, they need to be approved first.
    Happy ADD/ADHD with Asperger's

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Erik. I have put up a quick page here - hope this works: www.marthadean.com/getaway/getaway.html

    Apparently the problem is occurring in IE6.

    IE 7 and 8 are apparently displaying as desired.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you just need to constrain the parent to its' set height
    Code:
    .home_sec_lastt, .home_sect{overflow:hidden;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wouldn't the module be the parent?

    <div class="home_right_column1">
    <div class="module module1home">

    <div class="home_sect"> /* This is the top row of 3 imgs text */
    <a href="/packages/index/Attractions" class="attractions3">Attractions</a>
    </div>
    <div class="home_sect">
    <a href="/packages/index/HealthSpa" class="healthspa2">Health Spa</a>
    </div>
    <div class="home_sec_lastt">
    <a href="/packages/index/Romance" class="romance1">Romance</a>
    </div>

    <div class="home_secb"> /* This is the bottom row of 3 imgs text */
    <a href="/packages/index/Gourmet" class="gourmet6">Gourmet</a>
    </div>
    <div class="home_secb">
    <a href="/packages/index/Outdoor" class="outdoor5">Outdoor</a>
    </div>
    <div class="home_sec_lastb">
    <a href="/packages/index/Golf" class="golf4">Golf</a>
    </div>

    <div class="clear"></div>

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I meant the parent of the anchors lol . My code works if you try it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I said to remove the header height and set overflow:hidden; (also addd zoom:1; to be safe)

    Did you not read my first post?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did. Thanks for you suggestions. Two people posted different solutions.

    Are you viewing is IE6 and can you see all of the issues I have described?

    I'm testing now on sandbox.getawaypackages.com not the live server.

    Still learning, clearly...lol

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    sandbox.getawaypackages.com

    That link returns a 404?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://sandbox.getawaypackages.com/

    Changed the .header to what you suggested and no change - on Win2000, IE 6 still up into the blue band at the top.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    #content
    {
      zoom:1;
      overflow:hidden;
      margin-top:25px;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MCDEAN59 View Post
    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.
    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.
    Code:
    #leaderad {
    	margin:20px 0;
    	float:left; /* for IE to respect the bottom margin on the child */
    	width:100&#37;; /* 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.
    Code:
    	<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"><!-- N.b: id is already used -->
    		<ul>
    		<li><a href="/2010/01/04/hello-world/">Hello world!</a></li>
    		</ul>
    		</div>
    	</div>
    <!-- </div> remove -->
    Happy ADD/ADHD with Asperger's

  20. #20
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erik J. -
    Thank you. Thank you. Thank you.
    - 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.

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Giving both the #content and the #footer a 1px botrder, you will see they almost touch. The #content has 25px bottom padding thus it spaces it out a lot.

    The footer also has a few pixels of margin.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •