Internet Explorer/HTML issues.

Forum Moderators: open

Message Too Old, No Replies

Internet Explorer/HTML issues.

Explorer displaying content incorrectly but W3C valid

Jimbo123

12:56 pm on Jan 30, 2011 (gmt 0)

Hi there,

I wondered if anyone could help me resolve an issue I'm having with my website displaying wrong in Internet explorer.

My site is HTML valid and displays perfectly in Firefox, Safari etc but all the wording, pictures alignments are out in explorer, I'm aware it's an issue with the browser itself displaying differently as I understand they add extra padding to a webpage which is why it's pushing my content around.

I've been playing around for days now with the padding and ironicly when I locally tested the site in explorer (8) it fixed the issue but as soon as I uploded the site, the browser pushed it out again.

Does anyone know how to resolve this at all?

Cheers,

James

[edited by: tedster at 6:37 pm (utc) on Jan 30, 2011]
[edit reason] sorry, we don't accept signature links [/edit]

tedster

6:55 pm on Jan 30, 2011 (gmt 0)

As you've discovered, valid mark-up is not guaranteed to be cross-browser friendly. Maybe some day, but not quite yet.

At first, it sounds like you may be wrestling with a quirks mode/standards mode problem [webmasterworld.com]. If it really is just a padding issue, then declaring explicit padding numbers for the elements involved (sounds like <body> in this case) should fix it.

The peculiar part of your report is that the page renders the way you want locally but not from the server. If the server is not injecting more code, then I really don't know why that would happen. We have a lot of well-informed members here. I'm hoping one of them might chime in.

Fotiman

7:26 pm on Jan 30, 2011 (gmt 0)

Yeah, I would first make sure you have a DOCTYPE that takes the browser out of quirks mode. The HTML5 DOCTYPE is short and easy to remember:

<!DOCTYPE html>

If you have a valid DOCTYPE and it's still screwy in IE8, then use the Developer Toolbar in IE8 to inspect the items to see what padding/margin/border/width values IE thinks it is applying.

Jimbo123

9:15 pm on Jan 30, 2011 (gmt 0)

Thanks guys for your help, really appreciate it! I will have a look into the things you suggest and hopefully they will sort the issues out.

Will let you know how I get on!

gape11

4:43 pm on Feb 7, 2011 (gmt 0)

Hi there,

I have a similar problem with IE while displaying the web page.

< sorry, no personal links >

It works well in other browsers except in IE.
Can you help me please? Any instruction how to solve this is much apreciated :-)!

Regards,
Gape11

[edited by: tedster at 5:19 pm (utc) on Feb 7, 2011]

tedster

5:25 pm on Feb 7, 2011 (gmt 0)

Hello gape11, and welcome to the forums.

Sorry about the edit - we don't offer personal site reviews in the public areas of the forum, only in the paid Supporters area.

There are many reasons for cross-browser display problems. If you can give us a description of your problem using words and short HTML snippets, we can do a better job helping you.

The best place to start debugging your page is making sure your code is valid:

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

If you try to get non-valid mark-up to display the same in different browsers you can chase your own tail forever.

gape11

5:49 pm on Feb 7, 2011 (gmt 0)

ok thanks, I will do that first (validation). If I still need help I'll get back to you :-)

gape11

7:49 pm on Feb 7, 2011 (gmt 0)

both validations are fine.
The main problem i have is that cell background images are not positioned right in menu. I am using table to display menu navigation in HTML:
<tr>
<td class="button" style="height: 35px; width: 80px">
</td>
<td class="button" style="width: 136px; height: 35px;">
</td>
<td class="button" style="width: 5px">
</td>
<td class="button-text-active" style="width: 136px">
<a class="navigation" href="svetovanje.html" style="color: #8A7A67">Svetovanje</a></td>
<td class="button" style="width: 5px">
</td>
<td class="button-text" style="width: 136px">
<a class="navigation" href="racunovodske_storitve.html">Ra�unovodske storitve</a></td>
<td class="button" style="width: 5px">
</td>
<td class="button-text" style="width: 136px">
<a class="navigation" href="nepovratna_sredstva.html">Nepovratna sredstva</a></td>
<td class="button" style="width: 5px">
</td>
<td class="button-text" style="width: 136px">
<a class="navigation" href="index.html">Domov</a></td>
</tr>

CSS:
.button {
text-align : center;
background-image : url('images/button_div.gif');
background-position : bottom;
}

.button-text {
font-family : Arial, Helvetica, sans-serif;
font-size : 9pt;
color : #ffffff;
text-align : center;
background-image : url('images/button.gif');
background-position : bottom;
}

.button-text-active {
font-family : Arial, Helvetica, sans-serif;
font-size : 9pt;
color : #8A7A67;
text-align : center;
background-image : url('images/button_active.gif');
background-position : bottom;
}

Is this right?