I seem to be coming up against a number of issues in IE7 which I just can’t get to the bottom of - didn’t want to start a new thread for each of these, in fact I think some may be related. Essentially, everything is okay in all modern browsers (Firefox, Safari, I8 etc.) however in IE7 I’m getting different results.
Issue 1: Text alignment in search box (top-right)
The top margin used to align text appears to be much larger in IE7 than in other browsers, pushing the text down noticably further than it should be.
Issue 2: No bottom padding on text in left-hand column (Why buy…)
The text fits tight to the dividing line between each section, with no padding at the bottom.
Issue 3: The width of the main content area is too small
The width of the main content area is too small, meaning that the two columns which should appear side-by-side do not and the layout is broken.
Issue 1: Text alignment in search box (top-right)
The top margin used to align text appears to be much larger in IE7 than in other browsers, pushing the text down noticably further than it should be.
[/QUOTE]
Try floating the input to kill the whitespace that IE7 gets.
The larger gap under “more deals” is the hr". In IE7 and under you cannot collapse the margins of an hr and it takes up more space than other browsers. It is such an issue that I never use the hr at all and neither do most designers.
Just use the bottom border on the div of an existing element instead.
If you need it for accessibility when css is switched off then most people wrap the hr in a div and then set the hrit to display:none and apply the border to the div instead.
It looks like you’ve solved issue three already now.
On a slightly related note, I’m also seeing a small amount (maybe 2 - 3px) of padding on the bottom of any small images on the page in IE7. Any idea what this is?
Make sure images are set to display:block or if they need to remain inline then set their alignment to vertical-align:top. (Or alternatively remove any whitespace in the html around the image and its parent opening and closing tags.)
Given that in any browser the page is an accessibility train wreck - illegibly undersized fonts, color contrasts (or more specifically lack therin) making the text eye-strain hell, I shudder to even peek under the hood for problems like this…
Where I see endless IE conditionals on a layout not doing anything fancy enough to warrant their use, SIFR nonsense further explaining the illegible text, endless DIV for nothing, clearing DIV like it’s still 1998, pointless classes (first_line for example), pointless ID’s and classes, spans for nothing, nonsensical heading orders (like the H5 with no preceeding headings, h1 doing h2’s job, h2 doing small inside that h2’s job), attributes that have no business even being in modern markup (target,cellpadding,cellspacing), invalid/improper form structures, image maps for christmas only knows what… and thirteen validation errors. (and a hell of a lot more errors if one were to switch it to a MODERN doctype instead of slapping a Tranny one on HTML 3.2)
It’s not exactly shocking I’m seeing four different appearances in four different browsers! Layout issues? It’s begging for it.
It NEEDS to be thrown away and started over clean – easing up on the classes, easing up on the use of tables, and getting rid of everything I just outlined. With only 7.5k of actual text content, you’ve 41k of markup – EASILY more than twice what should be neccessary, and that’s before we talk jquery bloat (when NOTHING on the page looks like it should even be using javascript)… or even poke our heads into the CSS used to build the layout.
Baffling? Uhm… no. Throw it out and start over, there’s NOTHING worth trying to salvage there.
Nothing you’ve raised there is a surprise to me; I’m aware of it and it will be dealt with in time. The development was outsourced, and although the HTML / CSS is not really where it should be I have more pressing issues right now in bringing the site to market.
Nevertheless, thanks for taking the time out to provide your feedback. It narks me too…
