SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    In Internet Explorer 7 part of the content doesn't display at all...

    I have tested my client's website in Internet Explorer 7, and the part of the content didn't display at all. Also the Map heading only displays partially, in Internet Explorer 7. Please see this image to get an idea of what I am talking about: http://i41.tinypic.com/2jb2sme.jpg. Could someone please help me fix this? Thanks in advance.

    Here is the html:
    HTML Code:
    <div id="contentWrapper">
    		<div class="headings">
    			<div class="contentLeft">
    <h2>Facilities</h2>
    <div class="row">
    <ul>
    <li>5 Artesian Thermal Pools on site for guests to use (1 cold pool during summer months)</li>
    <li>New spacious 1 &amp; 2 bedroom villas</li>
    <li>Basic Ensuite Cabins</li>
    <li>Tennis Court</li>
    <li>Kiosk (Meals available daily)</li>
    </ul>
    <p><a title="Read more about our facilities" href="#">Read more…</a></p>
    </div>
    </div>
    <div class="contentMiddle">
    <h2>Attractions</h2>
    <div class="row">
    <h3>Public Transport</h3>
    <p>Local bus service picks up 3 times per day at the entrances of the park.</p>
    <p>Is accessible by train and coach travel and we are happy to provide transfers to/from the local station terminal.</p>
    <p><a title="Read more about our attractions" href="#">Read more…</a></p>
    </div>
    </div>
    <div class="contentRight">
    <h2>Map</h2>
    <div class="row"><a href="#" rel="lightbox"><img class="alignnone size-full wp-image-26" title="Map small" src="http://domainname.com/website/wp-content/uploads/2011/10/map-small.jpg" alt="Map small" width="220" height="167" /></a></div>
    <p>&nbsp;</p>
    </div>
    			<noscript>It appears that your web browser does not support JavaScript, or you have disabled scripting. If you have Javascript enabled in your browser, you will be able to view our slideshow. Please enable Javascript in your browser.</noscript>
    		</div>
    </div>
    Here is the css:
    Code:
    #contentWrapper {
    	width: 100%;
    	overflow: hidden;
    	margin-top: 10px;
    	color: #025c90;
    	margin-bottom: 1em;
    }
    
    #contentWrapper p {
    	margin-bottom: 1em;	
    }
    
    #contentWrapper a {
    	color: #025C90;
    	text-decoration: underline;	
    }
    
    #contentWrapper a:visited {
    	color: #A9D0E6;
    	text-decoration: none;	
    }
    
    #contentWrapper a:hover {
    	text-decoration: underline;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some how the css didn't display the my post. So here it is again:
    Code:
    #contentWrapper {
    	width: 100%;
    	overflow: hidden;
    	margin-top: 10px;
    	color: #025c90;
    	margin-bottom: 1em;
    }
    
    #contentWrapper p {
    	margin-bottom: 1em;	
    }
    
    #contentWrapper a {
    	color: #025C90;
    	text-decoration: underline;	
    }
    
    #contentWrapper a:visited {
    	color: #A9D0E6;
    	text-decoration: none;	
    }
    
    #contentWrapper a:hover {
    	text-decoration: underline;
    }
    
    .headings {
    	background: url('images/titlebar.gif') no-repeat;
    	width: 850px;
    	height: 40px;
    }
    
    h2 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 22px;
    	float: left;
    	width: 30%;
    }
    
    #textWrapper {
    	width: 100%;
    	overflow: hidden;
    }
    
    .contentLeft {
    	float: left;
    	width: 30%; /* 283px */
    	margin-left: 10px;
    	margin-top: 10px;
    	margin-right: 25px;
    }
    
    .contentLeft ul {
    	margin-left: 30px;
    	margin-right: 10px;
    	margin-bottom: 1em;
    }
    
    .contentLeft li {
    	list-style: disc;
    }
    
    .contentMiddle {
    	float: left;
    	width: 30%;
    	margin-top: 10px;
    	_margin-right: 5px;
    }
    
    h3 {
    	font-weight: bold;
    	font-size: 12px;
    }
    
    .contentRight {
    	float: right;
    	width: 30%;
    	margin-top: 10px;
    	line-height: 0.8em;
    }
    
    .contentRight p {
    	background: url('images/click-to-enlarge.gif') no-repeat;
    	width: 220px;
    	height: 24px;
    }
    
    .row {
    	width: 283px;
    	margin-top: 3em;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    75 views and still no answer, surely someone knows the solution to the problem by now.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Ensure that anywhere you have a <p>, <h1,2,3,4,5,6>, <span>, <div> etc... that it has a line-height with at least a 2px greater height then the font size as IE7 doesn't automatically understand font sizes unlike in IE8 and modern browsers.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by !designer! View Post
    75 views and still no answer, surely someone knows the solution to the problem by now.
    Posting a link will increase your chances of a reply.

    The 40px fixed height on .headings looks a good candidate for content concealment.

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Victorinox View Post
    Posting a link will increase your chances of a reply.

    The 40px fixed height on .headings looks a good candidate for content concealment.
    You can see the problem in the image he supplied, like i explained in my previous post he needs to set line heights as IE7 doesn't respect the font size automatically.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  7. #7
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    You can see the problem in the image he supplied, like i explained in my previous post he needs to set line heights as IE7 doesn't respect the font size automatically.
    If you follow the link to the site the OP supplied in a previous thread, and view in IE7, you'll see that the child divs of .headings are hidden by the fixed height.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,822
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You're both right

    Remove the height from .headings and then increase the line-height in contentRight to 22px (at least).

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys for replying. I did remove the height from .headings and increased the line-height in .contentRight. I haven't tested it in Internet Explorer 7 as yet, because now the titlebar.gif from .headings is missing. Could someone please tell me how I can bring titlebar.gif back?

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have another problem with the same website. The problem is a gap between .mainMenu and #slider/#welcome. I have decided to add the website to this reply, so here it is: http://gwydircarapark.com.au/website/.

    Here is my css:
    Code:
    #mainWrapper {	
    	overflow: hidden;
    	display: block;
    	width: 850px;
    	height: 432px;
    	margin-bottom: 1em;
    }
    
    #mainWrapper img {
    	display: block;
    	vertical-align: top;
    }
    
    .mainMenu {
    	list-style: none;
    	background: url('images/navbar.gif') no-repeat;
    	width: 850px;
    	height: 36px;
    	padding-top: 4px;
    }
    
    .mainMenu li {
    	display: inline;
    }
    
    .mainMenu a, .mainMenu a:visited {
    	color: #FFF;
    	text-decoration: none;
    	margin-left: 20px;
    }
    
    .mainMenu a:hover {
    	color: #FFF;
    	text-decoration: underline;
    	margin-left: 20px;
    }
    
    #slider {
    	float: left;
    	width: 558px;
    	background: #719fba;
    }
    
    #welcome {
    	float: right;
    	width: 292px;
    	color: #FFF;
    	background: #265B8E;
    	padding-top: 25px;
    	line-height: 27px;
    	margin-bottom: 1em;
    	vertical-align: top;
    }
    
    #welcome p {
    	margin-bottom: 1em;
    	padding-left: 12px;
    	margin-top: 16px;
    	font-size: 14px;
    	margin-right: 6px;
    }
    
    h1 {
    	padding-left: 12px;
    	font-size: 32px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    }
    Here is my html:
    HTML Code:
    <div id="mainWrapper">
    	<div class="mainMenu">Main menu goes here</div>
    
    <div id="slider">
    	Slideshow is here
    </div>
    
    <div id="welcome">
    	<h1>Welcome</h1>
    	<p>Welcome text goes here</p>
    </div>
    </div>

  11. #11
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    On your mainMenu class change the height from 36 to 32
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks SgtLegend that fixed the gap. I just have to solve the other problem now, which was mentioned earlier in this post.

  13. #13
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The .headings class background-repeat is set to no-repeat, simply change it to repeat-x and it will show up fine again.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  14. #14
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that SgtLegend, but unfortunately your suggestion didn't work. Could you please suggest something else?

  15. #15
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Because .headings contains only floated elements, it collapses. To allow it to clear the floats, give it overflow:auto;

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,822
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You haven't cleared the floats. Add overflow:hidden to .headings.

    Code:
    .headings {
        background: url("images/titlebar.gif") repeat-x  0 0;
        overflow: hidden;
        width: 850px;
    }

  17. #17
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wonderful that worked. Thank you Victorinox.

  18. #18
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I have read what you said and have changed my code.

  19. #19
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now .contentRight appears down the page in Internet Explorer 6, not where it is supposed to be.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,822
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Its probably the ie6 double margin bug on contentLeft. Add display:inline to cure it (see css faq on floats).

    Code:
    .contentLeft {display:inline}
    If that doesn't fix then check your measurements of the three floats and make sure they all fit. Remember that percentages usually get rounded up in IE6 and therefore can be too big to fit.

  21. #21
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I have added display: inline to .contentLeft, and have changed the percentages to pixels, and still nothing has changed in Internet Explorer 6. So can someone please tell me some other way of solving this? Thank you for everyones help so far. These problems make me wish my clients' website users don't use Internet Explorer at all.

  22. #22
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about this, I am just not going to support IE6 anymore.

  23. #23
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Edit - thought I had it fixed, but seems not.

  24. #24
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Victorinox.

  25. #25
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Let's try again...

    This has been tested for consistency in IE6, IE7, Firefox and Safari.

    You'll need to replace the separate .contentLeft, .contentRight, .row and .contentLeft ul with the relevant rules below.

    New rules have been added to target .headings h2 and the contentLeft p (to align the Read more link).

    Code CSS:
    .headings h2 {
        line-height: 40px;
        vertical-align: top;
        float: none;
        width: auto;
    }
     
    .contentLeft, .contentMiddle, .contentRight {
           float: left;
           margin: 0 0 0 15px;
           width: 260px;    
    }
     
    .contentLeft ul {
           margin: 0 0 1em 25px;
    }
     
    .contentLeft p {
           margin-left: 25px;
    }
     
    .row {
    margin-top: 1em;
    }


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
  •