Tweet
The Information below I found in a different forum but it is in regards to the code on a specific Blue voda site.
What is being addressed, also applies to my site and I was wondering about the Div problem specifically
that is being talked about.
Are the "position:absolute" and the "Z-index for the Divs a problem as he is saying???
Thanks Much,
Randy
Just looking really quickly, here are some things I saw:
You haven't specified a doctype at the top of your page. If IE can't find a doctype (basically a set of rules for your page, telling it what type of HTML you're writing it in) it'll display things in "quirks" mode. "Quirks" for IE means "I'll do whatever I want, I don't care." Unfortunately, if you're designing in quirks mode to begin with (as you would have been) you'll find that the page displays weirdly once you get it into the "proper" browsers, who read things correctly.
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Specifically: You're using a lot of DIVs which aren't interpreted the same between browsers (without a doctype specified.) You've also got these DIVs positioned with absolute positioning. Things like this:
Code: <DIV style="position:absolute;left:437px;top:1246px;wid th:494px;height:19px;
z-index:3" align="left">
To interpret a little: "position:absolute" means "this is it's position relative to the top left edge of the page". It's overriding the normal position of the content.
The z-index is like a layer. Things with a z-index of 4 are "on top" of things with a z-index of 3. Normally the content of a page can't sit on top of other content unless it's a background image, or something. Z-index allows you to pile things on top of each other, and they all pretend the other thing isn't there.
You've also got H1 and H2 tags without margins specified, and there might be a difference between IE and Firefox in their default margin values for headings. A good idea is to create a stylesheet that sets all your heading margins to 0 to begin with.
You've also specified one big background image to be the container for your text. What happens if you write more text than fits inside the box, or if your reader is hard of sight and increases the font size? Your text is going to overflow the box. Then it runs into the content at the bottom of the page which is absolutely positioned, a certain number of pixels from the top and left of the page!
If I were you, I'd either ditch as much of the absolute positioning and z-indexing as I could, and put it inside a table (they're old-fashioned, but the browsers read them roughly the same way.) Or else try specifying a doctype and see what that does. (It will probably screw things up to begin with.) And ditch the background box.
What is being addressed, also applies to my site and I was wondering about the Div problem specifically
that is being talked about.
Are the "position:absolute" and the "Z-index for the Divs a problem as he is saying???
Thanks Much,
Randy
Just looking really quickly, here are some things I saw:
You haven't specified a doctype at the top of your page. If IE can't find a doctype (basically a set of rules for your page, telling it what type of HTML you're writing it in) it'll display things in "quirks" mode. "Quirks" for IE means "I'll do whatever I want, I don't care." Unfortunately, if you're designing in quirks mode to begin with (as you would have been) you'll find that the page displays weirdly once you get it into the "proper" browsers, who read things correctly.
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Specifically: You're using a lot of DIVs which aren't interpreted the same between browsers (without a doctype specified.) You've also got these DIVs positioned with absolute positioning. Things like this:
Code: <DIV style="position:absolute;left:437px;top:1246px;wid th:494px;height:19px;
z-index:3" align="left">
To interpret a little: "position:absolute" means "this is it's position relative to the top left edge of the page". It's overriding the normal position of the content.
The z-index is like a layer. Things with a z-index of 4 are "on top" of things with a z-index of 3. Normally the content of a page can't sit on top of other content unless it's a background image, or something. Z-index allows you to pile things on top of each other, and they all pretend the other thing isn't there.
You've also got H1 and H2 tags without margins specified, and there might be a difference between IE and Firefox in their default margin values for headings. A good idea is to create a stylesheet that sets all your heading margins to 0 to begin with.
You've also specified one big background image to be the container for your text. What happens if you write more text than fits inside the box, or if your reader is hard of sight and increases the font size? Your text is going to overflow the box. Then it runs into the content at the bottom of the page which is absolutely positioned, a certain number of pixels from the top and left of the page!
If I were you, I'd either ditch as much of the absolute positioning and z-indexing as I could, and put it inside a table (they're old-fashioned, but the browsers read them roughly the same way.) Or else try specifying a doctype and see what that does. (It will probably screw things up to begin with.) And ditch the background box.