SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: IE layout probs

  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE layout probs

    Hello

    was wondering if anyone could help me out with a site I'm working on where one of the page layouts isn't quite right in ie.

    The page is here

    ideally I'd like the text to be higher so the h2 heading is inline with the top of the image like in chrome and ff browsers...

    any ideas on how I can manage this?

    thanks in advance for any ideas

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Looks like you need haslayout on one element and not on the other.

    Code:
    * html #portfolio li{zoom:1.0}
    * html div#portfolio ul li p{width:auto}
    *+html #portfolio li{zoom:1.0}
    *+html div#portfolio ul li p{width:auto}

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh that's great thanks so much, hadn't heard of haslayout before...something new to look into

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Vicky985 View Post
    Oh that's great thanks so much, hadn't heard of haslayout before...something new to look into
    You can find all you need to know here.

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice one - thanks

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    While Pauls' silver bullet fix is "cute" -- your real problems run deeper than that. You've got endless DIV for nothing, spans for nothing, IE conditionals for nothing, and a layout that's broken here in every browser I look at it in. I've got a saying, "CSS is only as good as the HTML it's applied to" -- and your HTML, well...

    Everything I've come to expect from the people slapping the HTML 5 lip service doctype and the rest of it's nonsense into a layout.

    You have here a VERY simple layout, but at 7.8k of markup for 1.8k of plaintext it could use a bit of a trim.

    To show you what I mean, here's how I'd approach writing that same markup:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	rel="shortcut icon"
    	href="/wp-content/themes/child/favicon.ico"
    />
    
    <title>
    	Fourteen Design - Creative Web Design Guildford
    </title>
    
    <link
    	rel="alternate"
    	type="application/rss+xml"
    	title="Fourteen Design - Creative Web Design Guildford &raquo; Feed"
    	href="/feed"
    />
    
    <link
    	rel="alternate"
    	type="application/rss+xml"
    	title="Fourteen Design - Creative Web Design Guildford &raquo; Comments Feed"
    	href="/comments/feed"
    />
    
    <link
    	rel="wlwmanifest"
    	type="application/wlwmanifest+xml"
    	href="/wp-includes/wlwmanifest.xml"
    />
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		<a href="index.html">
    			Fourteen Design
    			<span><!-- image replacement --></span>
    		</a>
    		<small>
    			Creative - Web Design - Guildford
    		</small>
    	</h1>
    
    	<ul id="mainMenu">
    		<li><a href="/">Home</a></li>
    		<li><a href="/portfolio" >Portfolio</a></li>
    		<li><a href="/about">About</a></li>
    		<li><a href="/pricing" class="current">Pricing</a></li>
    		<li><a href="/contact">Contact</a></li>
    		<li><a href="/blog">Blog</a></li>
    	</ul>
    
    	<hr />
    
    	<div id="content">
    
    		<div class="services">
    			<h2>Services &amp; Pricing</h2>
    			<p>
    				As every website is bespoke I offer you a detailed quote after discussing your web design needs.
    	However, below are some services I offer and approximate costings.
    			</p>
    			<hr />
    		<!-- .services -->
    
    		<div class="features">
    
    			<div class="design">
    				<h2>Website Design</h2>
    				<p>
    					A bespoke website site of 5-10 pages with integrated CMS would cost between &#163;550 and &#163;750 depending on individual needs.
    				</p>
    				<hr />
    			<!-- .design --></div>
    
    			<div class="hosting">
    				<h2>Hosting</h2>
    				<p>
    					Uploading and hosting a site to make it live, costs &#163;40 per year
    				</p>
    				<hr />
    			<!-- .hosting --></div>
    
    			<div class="maintennance">
    				<h2>Maintenance</h2>
    				<p>
    					I offer a yearly contract of &#163;150 which includes website maintenance of an hour a month (on average over the year) or you can pay on an hourly basis at a rate of &#163;15 per hour.
    				</p>
    				<hr />
    			<!-- .maintennance --></div>
    
    			<div class="wordpress">
    				<h2>Wordpress</h2>
    				<p>
    					Wordpress is the Content Management system I use in sites which enable you to control your content by adding news posts. Integrated CMS into a bespoke site costs around &#163;200 and is included in the Website Design cost.
    				</p><p>
    					I can also set up a website using an existing Wordpress Theme (either a free one or one that you purchase) for &#163;150 (this includes hosting for the first year).
    				</p><p>
    					Any Wordpress prices quote include a free half hour lesson in using Wordpress (it's very easy).
    				</p>
    				<hr />
    			<!-- .wordpress --></div>
    
    			<div class="report">
    				<h2>SEO (Search Engine Optimisation) Reports</h2>
    				<p>
    					After a period of time (or if you have an existing site) you may wish to have a report detailing the effectiveness of your website.  For &#163;150 I can provide a detailed Search Engine Optimisation report analyzing whether your website is fullfilling it's potential.  For example is your site ranking highly in Google searches?	Where abouts are users visiting and leaving the site?
    				</p>
    				<hr />
    			<!-- .report --></div>
    
    		<!-- .features --></div>
    
    	<!-- #content --></div>
    
    <!-- #pageWrapper --></div>
    
    <div id="footer"><div>
    
    	<ul class="social">
    		<li>
    			<a href="#" title="Follow us on FriendFeed">
    				<img src="images/friendfeedIcon.png" alt="Friendfeed" />
    			</a>
    		</li><li>
    			<a href="http://www.twitter.com/FourteenDesign" title="Follow us on Twitter">
    				<img src="images/titterIcon.png" alt="Twitter" />
    			</a>
    		</li><li>
    			<a href="#" title="Follow Fourteen Design">
    				<img src="images/rssIcon.png" alt="RSS Feed" />
    			</a>
    		</li><li>
    			<a href="#" title="Follow us on Facebook">
    				<img src="images/facebookIcon.png" alt="Facebook" />
    			</a>
    		</li>
    	</ul>
    
    	<ul class="menu">
    		<li><a href="/">Home</a></li>
    		<li><a href="/portfolio">Portfolio</a></li>
    		<li><a href="/about">About</a></li>
    		<li><a href="/pricing">Pricing</a></li>
    		<li><a href="/contact">Contact</a></li>
    		<li><a href="/blog" class="last">Blog</a></li>
    	</ul>
    
    	Copyright 2011 Fourteen Design, All Rights Reserved
    
    </div><!-- #footer --></div>
    
    </body>	</html>
    I realize bending wordpress over the table to try and convince it to output GOOD HTML is a bit like trying to bench-press an aircraft carrier, but you seem to already have a decent handle on that given the amount of turdpress idiocy you already seem to have gutted out of there. (like how it vomits up endless pointless classes on menu code).

    your layout is very simple -- the HTML should reflect that. Oh, and if you're wondering why I pulled the list, it's because once you have major block level pairings (like h2 and P) to me there ceases to be a reason to stack extra meaning upon it.

    Though I have to ask, are all the h2 that are tabbed in SUBSECTIONS of that H2 which is not? They appear to be so, in which case those should be H3, not H2.

    When I'm back at my workstation (on the laptop right now) I'll toss together the CSS to show you what I mean on how with so simple a layout 99.9% of the extra nonsense like the IE conditionals and endless wrapping DIV you have in there is, well... to be brutally frank pointless bloat.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Here's what I came up with:

    Fourteen Design - Creative Web Design Guildford

    as with all my examples the directory:

    http://www.cutcodedown.com/for_others/vicky985

    is open for easy access to it's gooey drippy bits and pieces.

    Opened it up semi-fluid from 740px to 60em (that way large font users get even more screen used), changed the fonts to 100% since you're using serifs (which make things harder to read on screen), and in general redid how the entire layout works. Combined a lot of the similar images "down" to take advantage of png's generous encoding which while it didn't make a massive impact on file sizes (like maybe 5k saved?) it did reduce the number of handshakes for images from 16 to 8, which could shave anywhere from a second to a whole 24 seconds off the page load time depending on the user's connection, latency and server load.

    I also moved the images I didn't consider to be part of the content out of the HTML.

    Tested working just fine all the way back to IE 5.5, so IE is set... works fine in the latest incarnations of every other browser. It even works after a fashion in IE 5.01, the only issue there being IE 5.01 cannot handle font-family names with spaces in them...

    Some suggestions: Lose the serif fonts as they're difficult to read, ease up on the use of italic as if EVERYTHING is italic, nothing is... Darken up the menu text color a wee bit it's blurry and on the edge of usability, and ease up on the scripting...

    Though I realize that last one is basically Wordpress having it's way with you. I'm kind of surprised you were able to neuter it down as far as you did -- given the rubbish code it REALLY wants to force you into using for no good reason.

    Really though, you were overthinking things on the DIV and putting semantics around the wrong elements. I'd still give a hard look at whether the "big icon" h2's should be h3's (are those subsections of the not indented one or not?) and remember, if you choose a HTML element because of what it looks like, you're probably choosing the wrong element.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Good work Jason - as usual

    I notice one little bug in IE7 and you'll need to lose the zoom from here or IE7 packs all the menu items tightly together.
    Code:
    #mainMenu li {
        display:inline; /* don't even TRY to do more with these */
      /*  zoom:1;*/
    }
    The zoom makes it inline-block in IE7 and under and I guess that kills the percentage width on the anchor because the parent shrinkwraps. Strange that IE6 doesn't exhibit the same behaviour though.

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Odd, I'm not seeing that bug in IE7 -- either using 9's emu mode or real 7 under XP (in virtualBox) -- what 7 is doing that for you? Pulling that zoom completely shtups the menu here in 8, 7, 6 and 5.x here.

  10. #10
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the <div id="pageWrapper"> closed somewhere?

  11. #11
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Loving that Cut Down Code idea. Are you going to have tutorials when it's ready? Hopefully this century?

    I'll keep my eye out.

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdt76 View Post
    Is the <div id="pageWrapper"> closed somewhere?
    Before the footer. I did that to apply a 100% min-height layout. #pagewrapper gets 100% min-height, so if the page content is shorter than the display it still stretches to the height of the display. I then pad the bottom of the content area equal to the footer height to 'make room for it', then ride the footer up over #pagewrapper with a negative margin. This way if the content is too short, the footer stays at the bottom of the display, but if the content is taller the footer gets pushed down off screen.

    It's a very nice layout technique, even if it is a bit complex.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Odd, I'm not seeing that bug in IE7 -- either using 9's emu mode or real 7 under XP (in virtualBox) -- what 7 is doing that for you? Pulling that zoom completely shtups the menu here in 8, 7, 6 and 5.x here.
    Here's a browsercam screenshot in XP and vista to show its not just my version.

    I also get the same results on my XP running IEtester and IE8 in ie7 mode.

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ok, originally I was margining them instead of declaring widths - fixed that and while at it I centered the text in each of them. Just looks better than the flush left.

    Odd bug since I was unable to recreate it here... but ditching that zoom and changing things up a tiny bit did the job... Though since I was unable to recreate that problem here... Can you give that another check?

    P.S. Browsercam is meaningless to me, since their entire site is broken useless crap here.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes looking great in IE7 now Jason.

    It's a very odd bug and not one I would have expected. On testing it seems to be the percentage width is ignored in IE7 but works fine in IE6. A pixel width also works fine in IE7 so probably related to the old IE margin percentage bug where it doesn't know the width until the page is laid out but then it's too late to apply it.

  16. #16
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everso much for doing all that Jason, very impressive!

    Going to go through it all and learn from it all when I get some more time...very interesting stuff!

    Thanks!


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
  •