SOLVEDPage displaying differently across different browsers

[davidliu]

Dear all,

http://www.daveatwork.com/pt_bpp/index.html

The page above displays differently on IE and Mozilla browsers and on different OS. In Mozilla (Windows and Mac), everything is fine. However with IE, both Mac and Win version displays them differently (and wrongly!).

IE gives a lot of problem:
1. Step-down menu but that has been fixed with Chris advice (although not updated yet in the server) (Mac IE and Win IE shows different things – its okay on Mac IE but step down on Win IE)
2. Content of index.html is not aligning properly like in Mozilla (Mac IE and Win IE shows different things)
3. Services.html is also not displaying properly (Mac IE and Win IE shows different things)

What are we missing here? I don’t understand what’s going on. Any advice is greatly appreciated!

Dave

[al_m473]

the "id" is used once per page, if you want to use it more than once, use "class"

are you using a "css reset" to standardize tag values between browsers? if not, you should.

Al

[al_m473]

on IE7, the content on the Contact page does not show up,
to see it, the clear div needs to be moved inside the content box

Code:

Tenggarong Office:

Jl. Belida No. 60
Tenggarong
East Kalimantan
Indonesia
Ph: +62 (811) 582748
Contact Person: Ir. Mardiono

when it is positioned outside the content box, it does not clear the floats inside the content box correctly.

good luck, I like the look of the site

Al

[davidliu]

Thank you for pointing them out Al, I appreciate your help!

I’ve made sure that id="list" is now class="list". Thank you also for pointing out the </div> that should’ve been outside the content box. It’s pretty obvious I’m new to CSS, I got no idea what a "reset css" is and after googling it up, I’ve grabbed Erics CSS (Thanks Eric!) Reset at http://meyerweb.com/eric/thoughts/2007/ … -reloaded/ :

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

But how exactly do I implement a CSS Reset? I just paste the code above in my stylesheet and all the elements changed! I thought it would just reset everything without affecting later-defined properties.

Ikthius, I will change the doctype to strict and pray! Thanks for the display:inline advice!

I have uploaded them and will only be able to view the changes on a Windows machine later on in the evening. By the way I notice the following are absolutely horrifying on IE (Mac):
1. Modal window does not work
2. Tables look like hell
3. Tons of alignment issues across every link
4. There’s a horizontal scrollbar at the bottom of index.html (no idea why).

Thanks again for your advice and comment guys! I will post updates in the evening after getting access of IE in Win.

Regards.

[davidliu]

So here’s the latest scoop, I just previewed the updated file in IE on a Win platform.
[attachment=2]index.gif[/attachment]
[attachment=1]index2.gif[/attachment]
[attachment=0]services.gif[/attachment]

I’m wondering what I’m doing wrong. I’ve specified display:inline for #nav but it’s still stepping down. It’s really confusing me :roll: They’re all set to strict html now by the way.

Thanks again guys for whatever advice/suggestions you can share with me.

[davidliu]

Hi Apostrophe,

Thank you for your advice.

I’ve included #nav li { to the stylesheet now but will only be able to preview it in a PC later on. I will post my observation here later on.

Regarding the reset CSS, I used Eric Meyers ( http://meyerweb.com/eric/tools/css/reset/index.html ) and paste his code at the very top of my stylesheet – but the result is unpredictable. It messed up the elements on my page.

Also tried using a separate stylesheet but the result also messed up tons of my elements (ie. h1, h2, space after, etc). Notice that all headers and spaces after/before text disappears even though there’s also set styles for those elements.
UPDATE: Okay my mistake, I think I just have to set those styles ‘manually’ now. Am I correct? Anyway I’ll be working on them soon and will post further progress here.

View the page with reset here: http://www.daveatwork.com/pt_bpp/index2.html (only the first page).

Thank you everyone for your suggestions/advice!

http://www.daveatwork.com/pt_bpp/index.html <-previewable here

[davidliu]

My mistake, thanks for pointing it out to me. Now I gotta look over the code a-z… quite tedious actually but it’s the only way.

[davidliu]

Hi again,

This is the latest preview:
http://www.daveatwork.com/pt_bpp/reset/index.html

Thank you for everyone’s advice and tips & tricks! Thanks to Chris too for this community as this wouldn’t be possible without him!

[Author]

Posts