« 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.
19 Comments | Leave a comment
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
I didn't like IE 7, and replaced it. The webpage looks fine on 6 in my laptop.
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.
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
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...
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.
Looks good from here. Always appreciate a way to pay by check!
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.
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.
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
Looks fine with the latest version of Firefox. 2.0.0.14
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".
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 ...
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.
You are correct, type overlap using IE7
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.
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.
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
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