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.
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:
...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.
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.
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:
...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.
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.
Reply With Quote
Originally Posted by html-tutorials
Bookmarks