IE7 Formatting Issue

HTML & CSS
1

Hi guys-

I’m relatively new to CSS/HTML and I’m not sure how to fix an issue I’m seeing on my client’s website with text spilling out of a box for IE7 Windows users.

You can see the site at http://broadhollowllc.com/test/ and if you’re using IE7 on Windows you’ll see how the copy on the front page spills out.

Here’s a screenshot of what we’re seeing in IE7, just in case you don’t have IE7 on your machine.

Also, my CSS is here.

Any help on how to edit CSS to accommodate IE7 would be great!

Thanks,
M

2

It works if I disable the width-value of your division .right{} via IE developer tools. Maybe just include a IE7-only CSS in that case.

But thats basic debugging and some playing around - so just try for yourself on further problems like that…

3

Hi, did you manage to fix this? My IE7 (and 6) are displaying nothing hanging out (there is padding on the right side which is preventing that :))

4

To me, looks like a margin doubling issue on your floats. IE will often double the width of margins on floats unless you set display:inline - it’s another of the oddball positioning quirks.

Though you’ve got a host of other issues - non-semantic markup (not EVERYTHING deserves a P around it), no headings with obvious headings (P + STRONG !== a heading), The same classes slapped on multiple items when it doesn’t look like ANY of them need classes, comment placement that could trip render bugs (you can thank that steaming pile of **** known as dreamweaver for those), if this is a new page what are you working in Tranny for? No media type on the CSS link, div doing the job of a UL for the menu, double breaks for what SHOULD be paragraphs, images with no image-off degradation on the navigation, declaration of px metric fonts on the body declaration (and below accessibility minimums to boot), use of underscore hacks for different padding when you shouldn’t need that (usually if paddings are not the same cross-browser you’re problem lies elsewhere - like haslayout), redundant declarations in the css, etc, etc, etc…

All that adds up to WHY you are having so many cross browser issues. As Dan used to say… well, it’s in my Signature.

Lemme show you what I mean. First I’ll rewrite the HTML how I’d approach it.


<!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
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Broad Hollow Partners LLC
</title>

</head><body>

<!--
	empty tags like SPAN and B below are image sandbags for
	sliding doors or glider-levin replacement - do not remove!!!
	
	Horizontal rules should be removed by CSS
	and are present for CSS off users only.
-->

<div id="pageWrapper">

	<h1>
		Broad Hollow Partners LLC
		<span></span>
	</h1>
	
	<ul id="mainMenu">
		<li class="home"><a href="index.html">Home<span></span></a><li>
		<li class="strategy"><a href="strategy.html">Strategy<span></span></a></li>
		<li class="partnership"><a href="partnership.html">Partnership<span></span></a></li>
		<li class="people"><a href="people.html">People<span></span></a></li>
		<li class="contact"><a href="contact.html">Contact<span></span></a></li>
	</ul><hr />
	
	<div id="fauxColumns">
		
		<div id="contentWrapper"><div id="content">
			<h2>Welcome to Our Company</h2>
			
			<div class="contentSubSection">
				<h3>About Us</h3>
				<p>
					Broad Hollow is a private equity investment firm focused on making investments in investment management firms. We provide equity capital to investment management firms to support growth strategies, management buyouts, internal ownership transitions and other recapitalizations.
				</p><p>
					Following our investment, we work in partnership with the management teams of our affiliates and provide guidance and support for organizational development, marketing initiatives, product development and strategic add-on acquisitions.
				</p><p>
					We offer an attractive capital solution to investment management firms who may benefit from our investment team&#8217;s experience partnering with, building and transforming investment management businesses.
				</p>
			<!-- .contentSubSection --></div>
			
			<hr />
		<!-- #content, #contentWrapper --></div></div>
		
		<div id="sideBar">
		
			<h2>News and Events</h2>
			
			<h3><span>Mar 28, 2010</span></h3>
	
			<div class="newsItem">
				<h4>Welcome to our new site</h4>
				<p>
					This site is under construction.
				</p>
				<div class="more_info">
					<a href="#">Read more</a>
				</div>
			<!-- .newsItem --></div>
			
			<hr />
		<!-- #sideBar --></div>
		
	<!-- #fauxColumns --></div>
	
<!-- #pageWrapper --></div>

<div id="footerWrapper"><div id="footer">
	<a href="#" class="copp_a">Terms of Use</a> / <a href="#" class="copp_a">Privacy Policy</a>
<!-- #footer, #footerWrapper --></div></div>

</body></html>

+/- 5% from what a final version from me would look like. It’s about 2/3rds the markup - and uses the PROPER tags for your various elements instead of abusing paragraph and strong. Has hooks in place for image replacements on the elements that warrant it - I would advise AGAINST the content H2 and sidebar h2’s being 100% graphic since that not only makes modifying the page a royal PITA, it’s also a miserable accessibility /FAIL/. You really want the images, I would NOT put them in the document as IMG tags since those are NOT content images, they are presentational affectations to your text.

I have time later I’ll do up the matching CSS that would go with that, and remaster all your images to work with my approach.

You may want to consider doing yourself a HUGE favor, and pitching that overpriced bloated pile of manure known as Dreamweaver in the trash. For nubes it does nothing but teach you the wrong way of doing things, and by the time you are an advanced developer it ends up being little more than dropping a grand or more on a overglorified copy of notepad.

5

… and here’s that rewrite up and running.

http://www.cutcodedown.com/for_others/userzero/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/userzero

is unlocked so you can grab the gooey bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a couple of IE and Mozilla specific properties like zoom and -moz, tested working IE 5.5, 6, 7 & 8, Opera 9.62 and 10.52, FF 2 and 3.6, and the latest flavors of Safari and Chrome.

I’ll do one of my traditional ‘section by section’ explanations of both the markup and the CSS so you can learn from it.

We’ll start out in the markup - follow along in the source. When writing a site I always write up my content and markup semantically first - BEFORE I even THINK about layout or graphics. HTML is for saying what things are - so that’s what I do. I might throw in a few standard wrapping elements so I have hooks on which to style things, but for the most part I try NOT to think about the final appearance when coding the HTML.

First up is a STRICT doctype. Tranny is for supporting old/outdated coding methods and using tags and attributes you shouldn’t be using in the first place - as such there is NO legitimate reason to be writing a new site in Transitional.

Also important are our language encodings, both for HTML and XML in the HTML tag, but also the content-language meta.

You’ll notice my CSS link includes MEDIA types - and I also have commented out links to other media types which should probably also be written for the page. There’s more to writing a website than just “1024x768 or larger screeen” - handheld, printers, etc. Sending a stylesheet designed for screen to “all” is bound to cause problems somewhere - it’s why we have the MEDIA attribute!

The first div wraps everything except our content. I’m going to use it not just for the outer width, but also to apply 100% min-height to your layout - that way on really large displays (like mine) your full-width footer will still be at the bottom of the page.

Your site logo I slap in a top level heading tag (h1) - since all other headings on the page need to be subsections of the h1. If we made “welcome to our company” the h1, that would force “news and events” to be a h2 subsection of it, and that makes no sense since really those are siblings.

The h1 contains the same text as your logo image. To me, logo’s and banners are typically presentational affectations to the text and NOT content - so they don’t belong in the markup in the first place. Your site is an excellent example of this in action. For now, we put the text in so CSS off and images off users have something meaningful to look at.

the empty span is called an ‘image sandbag’ and will be used for gilder-levin image replacement (google it) a powerful technique for using images as a presentational affectation to text.

A menu is a list of choices, so I made it (as the W3C recommends) a LIST. This makes it fairly apparent what it is when CSS is turned off/not available. The classes on each will be used for the presentational hooks for the images, and the spans are again sandbags for gilder-levin. The type of gilder-levin I’m going to apply here let’s us use just ONE image file for ALL of the menu buttons and their hover states… Oh, I’m adding hover states :wink:

Your use of IMG tags here could also have been a contributing factor to your layout issues.

You’ll see a few horizontal rules thrown in. I use horizontal rules to divide up sections for CSS off users - I set them to display:none in my screen.css since we have other styling applied for the same effect.

The columnWrapper div is fairly self explanitory. I don’t say what we’re using it for in the CSS at this point since it could be float clearing, it could be faux columns, it could be just adding some margins and padding, we don’t know yet, it’s just a good idea to have one.

#contentWrapper around Content is a fairly standard method of doing content first dynamic width columns. While your design doesn’t have dynamic width at the moment, I like to put the hook for it in anyways in case you change your mind later - one extra div and 30 bytes is not a big deal.

You’ll notice I put the content BEFORE the sidebar. This is both a structural and SEO thing - the content in the sidebar should not be as important as the main content, so get them into a useful order. It MAY help to throw in what’s called a ‘jumpto’ menu that is hidden for screen, but visible for handheld or CSS off to jump around the various sections - thankfully there are plenty of ID’s to do that with.

… and our first sub-heading. Numbered heading tags should fan out like a tree - you use a h3, it should be the subsection of the h2 before it. You use a h2 it should be a subsesction of the h1 before it… you have more than one h1 something is wrong with your document structure. (which you should be writing BEFORE you even THINK about layout!)

I slapped a div around the subsection with it’s h3 - there’s no real need stylistically on your page, but it might be nice to have the hook in the future.

Closing out our content we move on to the sidebar. I put the news section in a div since it’s possible you will have many different sections, and it means one class around it instead of targeted classes on everything.

The first heading is not a subsection of the content area, which is why it ends up h2 - kin to the h2 in the main column. I made the date a h3 since I THINK you are meaning to have multiple news items per date, so it’s a separate heading? This pushes each actual news item’s heading down to a h4. I put a ‘read more’ link into the ‘moreinfo’ DIV - you had a empty paragraph, I’m thinking that content is not document flow text and would instead be links/controls/etc and as such is not GRAMATTICALLY a paragraph. (It could be considered a paragraph for layout, but layout is presentation and as such has no place in the markup)

Close out all our div’s right down to the pagewrapper, and we set up the footerWrapper for the full width footer background, and the inner footer div for the restricted width area.

Across the whole thing you probably noticed I’m pretty zealous in my use of tabs and carriage returns. Do it by hand and not using some auto-formatting tool, and you not only develop good coding habits, you’ll prevent yourself from making silly mistakes (like failing to close an element) in the first place.

You can also see I use camelBacks for all my class and ID names. It’s what javascript says to use for variables and function names, I use it across my HTML, CSS and even PHP so that I have a consistent naming convention across ALL aspects of my web development.

… and that’s it for the markup. I’ll write up a CSS breakdown after lunch for you.

6

… and on to the CSS. Follow along with:
http://www.cutcodedown.com/for_others/userzero/screen.css

First thing in every screen.css I write is a reset. Nulling the margins and padding on various elements, and stripping the border off a images and fieldsets. There are bigger/fatter resets out there, but I’ve never needed more than this… there are smaller ones, but they tend to screw up form elements. This is a nice happy middle ground.

hr - As mentioned before, bye-bye for people who can use the screen.css

html, body - The height:100% allows our #pageWrapper to have a percentage height declared on it, or even a min-height. % heights on elements are auto-transformed into “auto” if the parent element doesn’t have a height on it. The position:relative is just to make opera ‘behave’ when it comes to the use of min-height.

body - the comment on the text align says it all. IE 5.x is permanantly ‘stuck’ in quirks mode. Adding this one line and simply avoiding declaring width the same time as padding/border anywhere in the stylesheet instantly makes IE6 compatible page work JUST FINE all the way back to IE5.5 and possibly 5.2 (though I don’t test for 5.2).

The font size is declared in %/em so that large font/120dpi users, Win7 125%/150%/larger users, and some handhelds that obey ‘screen’ (72 or 75dpi) all get fonts that scale up or down AUTOMATICALLY for the user - saving them the hassle of diving for the zoom. For content (your paragraphs) this is the preferred font sizing method as recommended by the WCAG. At the VERY least if you find % confusing use pt, at least pt obeys the ‘system metric’ (how large the OS says fonts should be) in most browsers. The only time to use px for font sizes is when an image interaction is going to cause layout issues - font gets bigger when the image does not - it blows out of the image. This is why behind our gilder-levin image replacements we WILL be using px metric fonts, but for all the paragraphs we’ll use %/em.

You were designing to 11px which is even worse. From an accessibility standpoint 12px should be considered minimum, and really anything less than 14px makes me twitchy.

The 85% works out to 14px at 96dpi, and 17px for large font/120dpi users… the ‘perfect’ size according to many accessibility studies.

You might want to have a look at a page I wrote that compares all the different font size declarations.

http://battletech.hopto.org/html_tutorials/fontCompare/template.html

… which also shows how px doesn’t auto-enlarge for LF/120 users, while pt and %/em do (in most cases - webkit doesn’t obey the system metric, FF doesn’t default to the larger size though you CAN manually set it).

Pretty much, the WCAG says use %/em - when the W3C makes a recommendation on how to make a page, might help to listen.

From there it’s just the background-color and the background-image.

Oh, you’ll notice I used a lot of .png - none of them use alpha transparency (the type of .png that doesn’t work in legacy IE) and have had their gamma correction lines stripped with tweakpng.exe

http://entropymine.com/jason/tweakpng/

For the types of images you had .png results in some real savings without significant image degradation. You had some NASTY artifacting on your menus that I fought hard to get rid of.

#pageWrapper,
#footer - these two share the same width and centering, so I declared them together.

#pageWrapper - The parts unique to the pagewrapper. I set overflow:hidden so it will wrap floats, and set up the background-color and font color. The min-height:100% will make it auto-expand to the full screen height if the content is shorter than the screen. Later on we’ll ride the footer up OVER #pageWrapper so that on tall screens with short content there are no scrollbars, but the footer is always at the bottom. I put our faux-column image here since it’s the only element that will stretch to the full height. This means we’ll need some trickery to ‘erase’ it in a couple spots later on.

* html #pageWrapper - IE6/earlier has no min-height, but will incorrectly treat height as such if overflow is set to visible. We use the “* html” hack to hide this from other browsers as an invalid target (since there should be no parent to html). The overflow:visible state undoes our float wrapping, but the height declaration trips ‘haslayout’ for IE, which just so happens to wrap floats.

h1 - The position:relative is so we can position our span in relation to the h1. I’m using zoom:1 as a haslayout trigger so that in IE the span positioning actually works right. The padding centers our text in the total area of the heading logo, and from there it’s fonts and colors. The 227px of top/bottom padding plus the 48px line-height == 275px, same as our re-mastered Logo image - the min-height made padding it down from the top difficult without adding more DIV - so I incorporated the gradient and spacing into the logo image instead.

h1 span - and this is gilder-levin - or at least my take on it. FF 3.6 and opera 9 both introduced problems with the putting the span first and allowing aboslute positioning to just ‘go where it should’ so I put the span after the text in the markup, and declare “top” and “left” removing that problem. Basically we absolute position the span over our text, and apply the banner as the background of the span erasing the text for screen.css users who have images turned on.

#mainMenu - since I’m going to float the anchors, we first set up some float wrapping behaviors. We toss the same margin on it to push it away from the faux-column background, and set up a background-color and the font. The text-align SHOULD inherit from body so we shouldn’t have to say it again, but for some reason IE6 ignores it. (That reason being IE6 is dumb as fried ****)

#mainMenu li - setting display:inline on the LI basically makes all the browsers pretend the LI don’t even exist. Since you don’t have any dropdown menus, this is the fastes/cleanest way to deal with them.

#mainMenu a - position:relative is for absolute positioning the nested spans. I float them so they have block-type behavior while all sitting on the same line, and the overflow:hidden chops off bits of our span we don’t want to see - we’ll get to that in a sec. Again, I avoid declaring a height on them, and instead use the 24px top/bottom padding added to our 18px line-height to total our 42px image height.

#mainMenu a span - the nested spans get positioned just like our h1 span did, but you’ll notice I sized them the TOTAL size of our mainMenu.png. The overflow:hidden will hide the unwanted bits, letting us just slide the background OR the span around to make our hover states and to show each ‘section’ of buttons. Oh, I also tweaked the spacing on that menu a bit as they weren’t evenly spaced.

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover - just set a background-color change for people browsing with images disabled.

#mainMenu a:active span,
#mainMenu a:focus span,
#mainMenu a:hover span - sliding the span up reveals it’s bottom half - our hover states.

#mainMenu .buttonClass a - how wide each button is.

#mainMenu .buttonClass span - the upper left corner on the image of each button. We just slide the background-image over to show each button.

#columnWrapper - the holly hack (height:1%:wink: is typically used as a haslayout trigger - basically an IE specific bugfix. In this case it fixes the min-height footer positioning when resizing the screen in IE7… AND Opera. Damned if I know why it fixes Opera - but it works. Margin is again just to ‘push off’ that faux column’s side bits, and finally a text-align to undo the text-align:center we set way back on body for IE5.

#contentWrapper - the method I use for making columns is a bit complex and involves some trickery. First, we make the outer wrapper on the main column float to one side at 100% width. At 100% wide that leaves 0px free for a column to fit. The bottom padding is to make sure the footer cannot ride up over Content.

Content - we set a large left padding to make room VISUALLY for the side column. This has no effect on actually PLACING that side column though… I also set up some padding for the content and by using one less px on the left and one extra px on the right for the margins, we can use border-top instead of padding-top to erase that top bit of the fuaxColumns.png

#sideBar - and here’s that trickery. We float it the same direction, set it’s width, and then apply a NEGATIVE margin the same direction. Negative margins reduce the width of an element as used when calculating it’s positioning (but not how large it renders). In this case by doing width:228px margin-right:-228px we’ve made it 0px wide so far as positioning is concerned. 0 can fit next to that 100% on #contentWrapper.

I wrote a page that explains that in more detail.
http://battletech.hopto.org/html_tutorials/3coldiv/template.html

On sidebar you can also see a bottom padding - same reason as #contentWrapper, to make sure that when we ride #footer up over #pageContent, the text in #sideBar doesn’t get hidden behind it.

Content h2,
#sideBar h2 - these share a lot in common, so style them together. The left padding makes room for that bullet image, the bottom margin is just to make the formatting pretty, fonts and colors are nothing too fancy though the image interaction means we should use px fonts (boo!) so it doesn’t break cross browser. Finally we just position that bullet image as a background.

Content h3 - just fonts and padding. Nothing fancy.

Content p - I use a EM bottom padding instead of margin because padding is more predictable (no collapse issues) and EM will enlarge with the 85% font we declared on body.

#sideBar h2,
#sideBar h3,
#sideBar h4,
#sideBar p - these all share the same margins, so set them together.

#sideBar .news h3 - The date. I use some trickery here to add that striped background. First, we set the font size/style and that background stripe.

#sideBar .news h3 span - setting this to inline-block makes it scale to the same size as the parent h3… a little right padding and a white background color erases that stripe behind this element. This way as the date changes width you don’t have to sweat using a different image or worry about the image riding down under it.

#sideBar .newsItem - a little extra indent.

#sideBar .newsItem h4 - strip the bottom margin, just make it bold and the same size as the paragraph that follows.

#sideBar .moreInfo - I aligned it right so it wouldn’t be mistaken for part of the content.

#footerWrapper - the position:relative makes certain it will depth sort OVER #pageWrapper hiding the bottom of it. Set the height, and a negative top margin reduces it to zero height for flow, but it will render full height over the element before it.

#footer - we already set it’s width up top, so we just set some top padding to push the text down. I apply the bottom of the content area image as the background here, and give it a hint of height so that the whole image will render. We don’t want that height plus padding taller than 90px, so I used 64 as a nice safe value.

#footer a and psuedosates - just your links color and behaviors.

… and that’s it for the CSS.

I know I probably left you with more questions than answers, but hopefully you’ll be able to come away from this with a bit more CSS knowledge than you had at the start.

Hope this helps.