IE 6/7 not displaying my h1, h2, h3 correctly - fix?

Internet Explorer Web Development

KB46

Hello

Been trying forever to get this css issue fixed on IE 6/7...Wondered if you could help me. My h1, h2, h3 are being read incorrectly by IE 6/7 though every other browser both PC/Mac work great...if you go to (or ANY page you choose from this site map)


and see the title "Company" upper left, above the left menu nav bar, all browsers except IE correctly place this text in the middle of that blue rectangle with the thin white line correctly underneath the blue rectangle, but IE "pushes" the text and white line down out of position...it's tagged with h2...my h1's (the large blue text at head of every page) are all pushed down too low also by IE...I did adjust the default margins in my css and this work s great on all but IE...any thoughts


Thanks much for your time

KB
Top

Re: Internet Explorer Web Development IE 6/7 not displaying my h1, h2, h3 correctly - fix?

IECUSTOMIZER

Hi,

Set the table cell align attributes to halign="left" valign="top".

You may also like to validate your pages with the w3c validator at http://validator.w3.org/check uri={replace with your web page uri}

You will find some cool debug tools on

The IE Developer Toolbar - http://www.microsoft.com/downloads/details.aspx FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Debugbar - http://www.debugbar.com

IEWatch - http://www.iewatch.com

Regards.





Top

Re: Internet Explorer Web Development IE 6/7 not displaying my h1, h2, h3 correctly - fix?

KB46

Thanks very much for helpful reply/links - I tried the h/v align bit, no change at all - IE 6/7 still pushing the h1, h2, h3 down for some reason...it must not be responding correctly to the css, though every other browser is...I've check various pages on the wc3 - the errors are primarily flash and alt tag related, though there are one or two </td> issues...but I've tried to fix those and no change to IE 6/7...thoughts

KB


Top

Re: Internet Explorer Web Development IE 6/7 not displaying my h1, h2, h3 correctly - fix?

IECUSTOMIZER

HI,

<TABLE cellSpacing=0 cellPadding=12 width="100%"><TBODY>

<TR>

<TD>

<H2>Company</H2></TD></TR></TBODY></TABLE>

Specify or remove the cellPadding from the table tag. eg 12px i/o just 12.

Other

CSS Validator

http://jigsaw.w3.org/css-validator/validator profile=css2&warning=2&uri=http://www.iwics.com/Company/siteMap.shtml

IE Developer Toolbar

http://www.microsoft.com/downloads/details.aspx FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Debug Bar - http://www.debugbar.com

IEWatch - http://www.iewatch.com

Regards.





Top

Re: Internet Explorer Web Development IE 6/7 not displaying my h1, h2, h3 correctly - fix?

KB46

Thanks again - your ideas seem like they'd work - but the IE issue is still there after trying the 12px amendment...before I made these headings h1, h2, h3 they were .heading, .subhead, .sectionhead and they worked fine on all browsers - since changing the css to h1, h2, h3 and changing each h tag margin to auto, only IE 6/7 have a problem with it...thanks for your thoughts - still need a fix though.

KB


Top

Re: Internet Explorer Web Development IE 6/7 not displaying my h1, h2, h3 correctly - fix?

KB46

Actually I'm just trying now to set the cellpadding to "0" for just the h2's cell and set the margin to 12 in the css - this works now for the h2 in the upper left on all browsers inluding IE...however I still need to figure out how to do a fix for the h1, h2, h3 on bigger cells with more text affected...any thoughts accepted.

KB


Top

Re: Internet Explorer Web Development IE 6/7 not displaying my h1, h2, h3 correctly - fix?

IECUSTOMIZER

Hi,

Tag style takes precedence over inline style which takes precedence over user stylesheets which takes precedence over external stylesheets. Don't forget that browser settings can alter the page layout. When I disable the external stylesheet link on your page there is no discernable change to the page layout..... indicates that tag style attributes are conflicting with your external stylesheet(this would explain your previous reply). If you want to force your uses to see your pages the way you design them you have to use tag style attributes.

My basic rules

1. Avoid styling - let the user decide how they want to see your pages. Why is Google.com so popular

2. Avoid hardwired font size, families. Use relative font sizes, don't use font families (again user settings can overwrite these, although google does specify Times Roman for english pages.)

3. Avoid absolute table widths.. let the tables expand and contract with user changes to the browser view-port dimensions. Follow the Gravity rule for layout. Users scan pages from left to right, top to bottom (except for some middle eastern languages). Use Bold to highlight keywords in your text. Users tend not to read word for word, but scan for keywords before focusing on a paragraph of interest.

4. KISS is best.

5. The User is KING.

I know that most web designers would disagree with me on these principles. It depends what you want to achieve with your web pages... to inform or to entice. Appearance is subjective.

Regards.





Top

Re: Internet Explorer Web Development IE 6/7 not displaying my h1, h2, h3 correctly - fix?

KB46

Thanks for all your help and thoughts on this - actually I know we should go 90% - 100% css, but not in the budget yet...so I may try some of your thoughts, see what happens - thanks again

KB


Top