« Bloomberg lawsuit heading for trial | Main | Car Dealership offering guns »
Techno-bleg
I've got a webpage for selling my 2A documentary. It shows up OK on every browser I use. But I'm getting reports that when accessed by some (I think IE 7, with fonts set at a certain size) the type overlaps. If you could take a look at it and tell me what it looks like in your browser, it'd be appreciated. So would ideas on how to make it work properly.
Comments
David,
On my desktop it looks fine. On my laptop the last section "with this dvd, you can:" the lines overlap. xp sp3 ie6 on both computers. on the laptop the test is set very large
Chuck
Posted by: Chuck at May 22, 2008 11:55 AM
Lokks ok except the portion where he price is highlighte. The overlap is slight but cannot tell whether the price is 24 or 34.
Tom
Posted by: Tom at May 22, 2008 12:06 PM
I didn't like IE 7, and replaced it. The webpage looks fine on 6 in my laptop.
Posted by: W. Bailey at May 22, 2008 12:14 PM
Ok, in Firefox. Not so good in IE7. From where it says "Purchase the DVD now" through "Saturday, too" I get four lines that overlap. In addition other multi-line paragraphs while not overlapping have lines crowded together. My fonts are Times New Roman for Webpage font. And Courier New for Plain Text font. View text size is medium. If I switch to smallest it gets better.
Posted by: David, Chandler, AZ at May 22, 2008 12:22 PM
I see the same thing as Chuck, XP SP2 IE 6 SP2, but on a desktop with a huge screen and the fonts set to be quite large. Old Firefox 1.5.0.12 is just fine.
Good luck fixing this, it's an example of why I avoided outward facing web page design like the plague....
- Harold
Posted by: hga at May 22, 2008 12:34 PM
A quick check at http://validator.w3.org/ turns up 77 errors in the page. Just go there and enter the url and it lists the lines with errors.
Good luck - I can't offer any suggestions as I generally stick with plain vanilla html and avoid css and xml...
Posted by: Diogenes at May 22, 2008 12:50 PM
I do have a suggestion. It looks like most of the errors are tags missing the closing ">" - including table tags. Improperly formed tables can cause the overlap you're seeing in some browsers. I'd fix all these first and see if that improves the display problem.
Posted by: Diogenes at May 22, 2008 12:59 PM
Looks good from here. Always appreciate a way to pay by check!
Posted by: The Mechanic at May 22, 2008 01:43 PM
I think the layout could be a bit more modern/visually pleasing (particularly the navigation), but everything looks OK on my Firefox 2.0.0.14 browser.
Recommend you make the font slightly larger.
Posted by: Scott at May 22, 2008 02:16 PM
It looks like crap in MSIE, but that doesn't surprise me. Everything looks bad in that browser. This is because MSIE doesn't conform to standards - its a rogue browser. It's also accounts for 70% of browsers used by internet surfers, so you *must* accommodate it.
It looks like you are using tables to format content, mixed with XHTML and CSS. Ideally you should abandon tables for everything except tabulated data that you want to present on your web pages. Div tags are designed to format content and work well with CSS classes.
The text-size issue in MSIE can be solved by using H4 rather than H3 or larger. On my screen the font is so big that it overlaps. H4 is readable on MSIE and looks well on firefox. Really the Hx tag is for headings. You should define a CSS class for your fonts that specifies their font face (ie Arial, Helvetica), size, style, etc. and then link that CSS class from within a P tag or a SPAN tag. You are doing this already in parts of your webpage - so you should do it with your text as well.
If you make these changes your page will look much better. That is, except for the Supreme Court Special - the yellow overlaps in MSIE, again because that browser doesn't properly implement CSS. You are using a Highlight class to define a yellow background. Consider changing that so that it doesn't define a yellow background, but instead defines that the Supreme Court text be bold and yellow. That looks better to me anyway, and it will eliminate the overlap in MSIE.
Good luck with your page and email me if you have more questions.
Posted by: Patrick at May 22, 2008 02:31 PM
Everything is formatted perfectly under Linux/Firefox v.3.0b5
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9b5) Gecko/2008050509 Firefox/3.0b5
Posted by: Anonymous at May 22, 2008 02:52 PM
Looks fine with the latest version of Firefox. 2.0.0.14
Posted by: Justin at May 22, 2008 02:58 PM
You have a lot of line-heights specified by pixel in your CSS. Those won't fluctuate properly with the font sizes in Internet Explorer 7. They overlap on everything but the "smaller" text size. Try removing the line-heights or using "em" specs instead of "px".
Posted by: Travis at May 22, 2008 03:17 PM
Dave,
... Nice to have met you at the NRA by the way ...
There is overlap in IE7 fonts are too large and all appears bold.
Here's a screenshot as of 5:20PM CDT
In Search Of ...
Posted by: USCitizen at May 22, 2008 04:26 PM
Looks fine in Safari 3.1.1, unless you set the default font display above somewhere around 20pt text.
If you bump up the displayed text size, eventually the headings on the left under "Main Menu" start to extend to the right outside their box, and "Viewer Reviews" at the top of the page begins to dive under the empty white box to its right.
Posted by: steveH at May 22, 2008 04:42 PM
You are correct, type overlap using IE7
Posted by: Phillip A. Smith at May 22, 2008 09:59 PM
Safari and Firefox are great because they use different default fonts. In IE 7 the font is bold and heavy and overlaps.
Suggestion: change your base font on the page.
Posted by: Trevor at May 23, 2008 10:59 AM
As noted the style sheet specifies leading (line spacing) which allows some (more than just IE but IE is the most common) browsers to go with a larger character size in the same line size - often when the viewer has a high resolution monitor so that anything defined by pixel is too small - that is on screen size in pixels for a 1600x1200 monitor is smaller than on screen size in pixels for a 1280x1024 display - then the user will set the browser to display letters larger - page text size selection in IE.
Either disallow changing text size or allow leading to fall where it may.
I suggest allowing leading to fall where it may and suggest that too many people have a print orientation such that they try to control everything to look like a print advertisement rather than allowing users to optimize for their own equipment.
Posted by: Clark at May 23, 2008 12:14 PM
IE 7 with Lsrge Fonts set on Vista - and yep, the fonts are squished. Not the first place I've seen it. Probably (as noted) an interaction between the Large Fonts setting and the tight control of the display size of the website
Posted by: Ian Argent at May 26, 2008 03:04 PM
