www.webdeveloper.com
Results 1 to 6 of 6

Thread: IE shows nothing correctly!

  1. #1
    Join Date
    Dec 2011
    Posts
    55

    IE shows nothing correctly!

    So I tested my site on Firefox...Google Chrome, Safari, it shows up fine in all of them. But then I get to IE8. Much of the CSS doesn't seem to do what it's supposed to, many things including the body size are different, and every image I have on any page has a random blue border around it. Anyone have any idea why this is happening and how to fix it? I know the latest version of IE is 9, but I'd imagine 8 should be able to handle at least most of the rather simple code I have written.

  2. #2
    Join Date
    Dec 2011
    Posts
    32
    This is just the horrific reality of web development.

    And you are getting a taste of what it's like.

    Try not to rely on IE, however these two tips may help:

    1) Create a CSS resetter file
    This is a custom CSS file you will include into your website from now on
    It includes a style "reset" for most common elements
    Example below:

    Code:
    body,div,td { position: relative; padding:0; margin:0; }
    p { line-height: 20px; margin-top: 16px; }
    ...modify to your needs and include it in your main CSS file.
    There are many versions of CSS resetters you can come up with based on your needs. For example, if you don't have position: relative in the parent element, then the children with "position: absolute" will not be aligned based on parent's position, but rather the position of the BODY tag. So, applying position: relative to everything will solve that problem, since it's a good default value for most starting elements.

    2) Try to change the way you write code. Use less tags. Don't try using the entire arsenal of HTML tags, rather... learn the details of 1 tag (such as DIV) very well, and how it behaves under different conditions. And learn what the real difference is between IE and the good browsers, and either use a reset for that or avoid doing that completely.

  3. #3
    Join Date
    Dec 2011
    Posts
    55
    Well the main reason for even trying it in IE was because I always hear it's good practice to make sure you're web site works correctly in multiple browsers, so it's simply more of a test thing.

    Though I'll certainly research and take your advice, I appreciate it, thank you.

  4. #4
    Join Date
    Dec 2011
    Posts
    55
    Quote Originally Posted by html-tutorials View Post
    This is just the horrific reality of web development.

    And you are getting a taste of what it's like.

    Try not to rely on IE, however these two tips may help:

    1) Create a CSS resetter file
    This is a custom CSS file you will include into your website from now on
    It includes a style "reset" for most common elements
    Example below:

    Code:
    body,div,td { position: relative; padding:0; margin:0; }
    p { line-height: 20px; margin-top: 16px; }
    ...modify to your needs and include it in your main CSS file.
    There are many versions of CSS resetters you can come up with based on your needs. For example, if you don't have position: relative in the parent element, then the children with "position: absolute" will not be aligned based on parent's position, but rather the position of the BODY tag. So, applying position: relative to everything will solve that problem, since it's a good default value for most starting elements.

    2) Try to change the way you write code. Use less tags. Don't try using the entire arsenal of HTML tags, rather... learn the details of 1 tag (such as DIV) very well, and how it behaves under different conditions. And learn what the real difference is between IE and the good browsers, and either use a reset for that or avoid doing that completely.
    I'm sorry I was hoping you could clarify this for me real quick. The concept of a reset CSS file is completely new to me (But thanks so much for informing me about it!). So I basically take most common used elements (headings, img, p, html, body, div (or section for HTML5), etc etc), and set them to a sort of default as far as borders, margins, padding, position, etc go? Like mostly setting them to 0, dependig on what they are?

    This is done and then linked to the new web page I would make. And then what? Do I take that same file, and begin to alter that same file as I add elements into my HTML file? Or does this get replaced by another file altogether? Don't need a huge explanation (I don't think), just some clarification and thanks once again.

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Set up an IE only CSS file and use IE's Conditional Statements to load it for IE browser users. Check out some of the IE bugs:

    IE8 RTW (69 CSS, 5 HTML, 2 DOM, 1 Javascript) Bugs

    May also help:

    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    Introduction to Responsive Web Design: http://www.linkedin.com/news?actionB...3Z-fJK7fpockY1
    http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/

    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html

    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

  6. #6
    Join Date
    Dec 2011
    Posts
    32
    @JustWhatever:

    Well the entire reason I became aware of CSS reset is when I was working on a website builder. My website builder had the ability to "resize" a DIV block visually, by dragging around at the borders of the div.

    Let's say I resized the height of a DIV, which contains some text, to 200px. Now, if we compare screenshots of what the results look like, with pixel precision, we would spot that some (not sure .. if not all?) versions of IE have the default line-height of a paragraph slightly off than all other normal browsers.

    So, even though my DIV was 200px in height, the text inside the P tag within that DIV, had different line height in IE, than in Firefox or Chrome, etc.

    Since it was a website builder, I obviously had to have the website being created look by the user exactly alike in all browsers, down to every pixel.

    There are other implications to this - for example, images aligned to text looked slightly off because of different line-height.


    IE also handles padding differently and "style=position: relative|absolute" behaves different, not to mention IE also has different z-index rules.

    So... to avoid at least some of the IE's issues, you reset P line-height, padding and margin. I also like to apply position: relative to all tags, as their default values.

    It seems like a little nothing but if you really do care about pixel-level precision of what your site looks like in IE and others, then it's a nice thing t be aware of.
    Last edited by html-tutorials; 12-16-2011 at 03:14 PM.
    Did you do your website html homework today? make french toast bora Stanley Kubrick's 2001 dvd kubrick on DVD.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles