Internet Explorer 8 vs web page coding

zappaDPJ · Mar 24, 2009, 21:08:58

An increasingly large part of my work is based on website design and build. In the past I've focused on the design, layout and quality assurance, leaving the coding to employees. Due in part to the recession and also my desire to learn something new I've recently started coding the sites myself. I've always been able to hand code in HTLM but I'm now using Dreamweaver to create HTLM/CSS based code. While it's far too early in the day to consider myself a particularly skilled coder I do know enough to recognise when there is a problem.

I'm sure everyone with any knowledge of web page coding will be aware of the need to validate their code across as many browsers as possible. I've just upgraded the browser on my workstation from IE7 to IE8 and I'm astounded at just how many websites are not displaying correctly including most of my own. I can even find graphical anomalies on IDNet's site.

Admittedly IE8 does contain a compatibility button which fixes some of the problems (all of them on IDNet's site) but I have to ask why on earth Microsoft has chosen to create a web browser that's incapable of resolving basic HTML/CSS coded websites correctly. It's particularly annoying that every single site I've viewed so far has a border placed around hypertext links on activation. That indicates a broken browser, not broken code. It also appears in many cases that certain information contained in one element is not being interpreted correctly in another if the second element is a child of the first.

The bottom line is why bother creating a browser that breaks almost every website ever written?

zappaDPJ · Mar 24, 2009, 21:13:36

Hmmm, why did I just quote myself?

[Quoted post deleted]

Actually I retract that, the compatibility button doesn't remove the borders around hyperlinks but it does play merry hell if clicked while make a forum post!

kinmel · Mar 24, 2009, 21:27:27

I.E. is the most used browser and most I.E. users are ignorant of the various web design codes.

By wilfully failing to adhere to the recognised protocols, Microsoft hope to browbeat website designers into making their sites IE compatible.

Once this is achieved, then to the masses it is the other browsers that are "broken" and not IE. Why would you then change to a browser that was not compatible with IE ?

World domination doesn't come east you know.

zappaDPJ · Mar 24, 2009, 22:15:57

Having just read some of the replies made by the IE development team to bug reports raised during the testing phase I'd say you are 100% right.

psp83 · Mar 24, 2009, 23:07:35

Personally i dont have many issues with IE7 or IE8.

My problem is IE6, i HATE that browser. You tell a div to have padding-right: 20px or margin-right: 20px and IE6 always adds half or double the pixels! so it breaks your design as IE6 thinks your divs are bigger than the container, bloody annoying.

We've tested all our sites at work and they work in FF2, FF3, IE6, 7, 8, Opera & Safari.

zappaDPJ · Mar 24, 2009, 23:59:00

Yeah that is really annoying, it took me a while to work out why some of my sites where breaking in IE6 and even longer to fix them.

I still can't work out why IE8 is rendering clicked hyperlinks with a border. I doesn't happen on every site and it's far more obtrusive on dark sites but it looks quite bad on any site imo.

I've attached a couple of examples.

[attachment deleted by admin]

Rik · Mar 25, 2009, 00:40:09

Fairly typical MS behaviour unfortunately. The pay lip service to standards, then enforce their own.

psp83 · Mar 25, 2009, 08:07:43

As Rik has said, the dotted border is a typical IE thing. A client asked us to remove it from IE and my response was "i would love to re code IE but i dont think you could afford the price" lol.

EDIT: You should only get that when you click on a link or hover over one.

Ann · Mar 25, 2009, 10:28:45

Dreamweaver is a nightmare.. WYSIWYG it is not.. I use it for our work website and often have to go into the HTML to see what's going on.

psp83 · Mar 25, 2009, 10:48:26

I use Zend mostly, But use dreamweaver (in source code viewer) when working on projects that have more than one person on it.

HTML view > Design View.

Sebby · Mar 25, 2009, 13:31:44

Quote from: Ann on Mar 25, 2009, 10:28:45
Dreamweaver is a nightmare.. WYSIWYG it is not.. I use it for our work website and often have to go into the HTML to see what's going on.

Surely that's the fault of the browser, though?

Ann · Mar 25, 2009, 13:47:23

Sometimes it's the coding. It adds heights into tables and things although they look as though they are fine but when you look in the browser there's a great empty space at the bottom. You then have to go into the HTML and delete the height tag and it resets. Sometimes it is the browser such as when it decides to centre things which Dreamweaver assumes will be left oriented in a table. Telling it to left things fixes that although it ought maybe to be unnecessary. Sometimes it also adds extraneous tags which are a mess and I don't like messes so I try to tidy it up.

psp83 · Mar 25, 2009, 15:10:14

Quote from: Ann on Mar 25, 2009, 13:47:23
Sometimes it's the coding. It adds heights into tables and things although they look as though they are fine but when you look in the browser there's a great empty space at the bottom. You then have to go into the HTML and delete the height tag and it resets. Sometimes it is the browser such as when it decides to centre things which Dreamweaver assumes will be left oriented in a table. Telling it to left things fixes that although it ought maybe to be unnecessary. Sometimes it also adds extraneous tags which are a mess and I don't like messes so I try to tidy it up.

Use notepad and type it all by hand = no problems then

zappaDPJ · Mar 25, 2009, 15:27:03

Quote from: psp83 on Mar 25, 2009, 08:07:43
As Rik has said, the dotted border is a typical IE thing. A client asked us to remove it from IE and my response was "i would love to re code IE but i dont think you could afford the price" lol.

EDIT: You should only get that when you click on a link or hover over one.

I general that does seem to be the case, a click on the hyperlink gives a guaranteed border but it also occasionally occurs under other circumstances that I can't quite pin down, perhaps a previously visited link after using the 'Back' button.

As for Dreamweaver, it serves a purpose but I'd agree that it doesn't always correctly rendering the code but then the same can be said for many of the browsers that are in use. I use it because it was the editor of choice for my employees but if I'm honest I don't like it enough to use it correctly. I still generally edit the source in HTML View and use Design View to check my container box parameters are doing what was expected. When I have some free time I'll look around for something more suited to the way I like to work, probably Notepad

[EDIT] I was just about to submit that and saw psp's new reply. It's agreed then Notepad IS the HTML editor of choice

Rik · Mar 25, 2009, 15:28:46

It can't make a mistake.

psp83 · Mar 25, 2009, 18:40:27

I use Zend Developer (not cheap) but its good for PHP and MySQL and not so good for (X)HTML unless you know what your doing with (X)HTML

The other editor i use is notepad++, its much better than the windows basic notepad and its free

I never use design view and i hardly use the "auto insert" features in most programs like dreamweaver, i like to have full control over how i format my code and what styles goes in my tables/divs etc.

Another tip is to use a program like "texter", basically its a program where you make shortcuts to code blocks your tend to use all the time, eg, contact form layout.. read more about it here : http://lifehacker.com/software/texter/lifehacker-code-texter-windows-238306.php

Rik · Mar 25, 2009, 18:46:11

Thanks, Paul.

Lance · Mar 25, 2009, 22:49:42

I think i know who to ask next time i need help with some coding for this place!

psp83 · Mar 25, 2009, 23:15:20

Quote from: Lance on Mar 25, 2009, 22:49:42
I think i know who to ask next time i need help with some coding for this place!

Who, Rik? lol.

Seriously though, if i'm not busy and you need(ed) help, i would lend a hand.

Been building websites for 11yrs.

Ann · Mar 25, 2009, 23:58:31

Notepad is what I use I for my own website but that's a fairly simple one. At work we have to use Dreamweaver and use the corporate template so we get no choice.

Cookie · Mar 26, 2009, 00:26:59

Quote from: zappaDPJ on Mar 24, 2009, 23:59:00
Yeah that is really annoying, it took me a while to work out why some of my sites where breaking in IE6 and even longer to fix them.

I still can't work out why IE8 is rendering clicked hyperlinks with a border. I doesn't happen on every site and it's far more obtrusive on dark sites but it looks quite bad on any site imo.

I've attached a couple of examples.

I'm fairly new to this web programming lark but I initially got borders around my link images when I clicked on them in Firefox and Opera as well IE7. I got rid of it by setting the border attribute for the image to zero, although a tidier way would be to use a CSS rule.

This is nothing more than a guess but 'border' is a deprecated attribute according to the W3C standards. Perhaps Microsoft have gone a bit overboard with their standards compliance and stopped supporting the border attribute in IE8 (assuming its been used in your code examples of course).

Or I might be barking up the wrong flag pole completely

I've got into the habit of running all my XHTML code through the W3C validators http://validator.w3.org/#validate_by_input and http://jigsaw.w3.org/css-validator/#validate_by_input. You'd be surprised at the number of sites that don't meet these standards.

Cheers

Martin

Sebby · Mar 26, 2009, 00:30:04

Good point, Martin. I firmly believe that all sites should conform to web standards, although it's not always possible as you have to hack you code so it works in IE!

psp83 · Mar 26, 2009, 08:17:32

Quote from: Sebby on Mar 26, 2009, 00:30:04
Good point, Martin. I firmly believe that all sites should conform to web standards, although it's not always possible as you have to hack you code so it works in IE!

It is possible, our sites at work pass w3c checks and thats with IE hacks.

Just use IE css file.

<link href="style/public.css" rel="stylesheet" type="text/css" media="screen" />




And you could also use _ (underscore) infront of your css for IE6, eg.

.blueBox {
width: 325px;
height: 325px;
border: none;
background-color: blue;
padding: 10px;
_padding: 5px;
}

But this way is old and i dont use it myself as i dont think it passes w3c validation anymore.

psp83 · May 12, 2009, 12:46:36

for the original poster.

try adding these styles to your stylesheet.

a {
outline: none;
}

:focus {
-moz-outline-style: none;
}

This should get rid of the dotted borders put around link

psp83 · May 12, 2009, 13:02:35

code above will work on all links, including this forum if you wanna use it.