homepage Welcome to WebmasterWorld Guest from 54.197.111.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Internet Explorer/HTML issues.
Explorer displaying content incorrectly but W3C valid
Jimbo123




msg:4260143
 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




msg:4260214
 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




msg:4260225
 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




msg:4260276
 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




msg:4263674
 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




msg:4263707
 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




msg:4263723
 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




msg:4263822
 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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved