...

View Full Version : Cross-Browser Issues.



TheSlink
08-30-2009, 10:15 AM
Hello,

I have created a website for my small business which i hope to get underway soon. However, im having some problems, through some research i've come to understand its whats known as Cross-Browser compatibility problems.

I have built the site in FrontPage, and in my internet explorer it is completely fine. No problems, if i open up my Mozilla many of the boxes ect.. dont display properly. We have this problem before, but i appealed on the forum and someone make a quick change. I have no experience in HTML, CSS or what not.. so im puzzled by this odd situation.

Would someone be able to possibly change the HTML to make it compatible on other browsers for me.

The URL = http://www.people-exchange.co.uk/testweb/PeopleX/index2.htm

Our old version which got changed is = http://www.people-exchange.co.uk/testweb/PeopleX/index.htm

Also, our introduction page is having the same problem = http://www.people-exchange.co.uk/testweb/PeopleX/teaser.htm

I would really really appreciate someone to step in here.. becuase i am just at wits end.

Thanks for you time!

drhowarddrfine
08-30-2009, 01:41 PM
I have built the site in FrontPageFrontPage is such a bad code generator even Microsoft dumped it. Throw that thing away.
in my internet explorer it is completely fine.That means little. IE is 11 years behind all other browsers in modern standards and practices and the worst browser on the planet. Always, always check your markup in a modern browser (that is anything but IE). Then look to see if/when IE screws things up. But the quirks and bugs of IE are well known, as are the hacks to fix it.

Your first major problem is your doctype is incorrect and puts IE into quirks mode making not attempt to perform like other more modern browsers. Replace yours with this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Then validate your html and css for those lists of errors.

TheSlink
08-30-2009, 01:51 PM
Thanks for the reply!

I added the document type into my HTML codeing like you told me to, thanks for helping me there.

i checked out a validotor.. and i notice some errors, however im clueless as too how i change them? Would you be able to help me!? I'll buy your a E-Beer :thumbsup: ..

Gosh, I need to use FrontPage.. as its simply and i know what to do!!

Thankss

drhowarddrfine
08-30-2009, 03:33 PM
I do not see the doctype on any of those pages, and one of them has none at all.

I made a mistake of suggesting the doctype above. Since FrontPage only outputs old, deprecated and non-standard markup, you'll have to use this doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That will help eliminate some of the errors reported by the validator but we still need to see what errors still exist and try and conform the rest to modern standards.

TheSlink
08-30-2009, 03:50 PM
I do not see the doctype on any of those pages, and one of them has none at all.

I made a mistake of suggesting the doctype above. Since FrontPage only outputs old, deprecated and non-standard markup, you'll have to use this doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That will help eliminate some of the errors reported by the validator but we still need to see what errors still exist and try and conform the rest to modern standards.

Thanks for helping me furhter with this!!

Ok, like you said i have added all of the ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I did this to EVERYPAGE that is on the website.

This still hasnt made the website viewable in my Mozilla, but i guess we are 1 step closer to accomplishing this!

I look forward to receiving your help further.

Kind Regards,
TheSlink

bazz
08-30-2009, 06:04 PM
Suggestion:

copy your home page and in the copy - let's call it working copy - remove all you css and those <!-- --> tags. This is so the page displays generically and we can get rid of the remianing validation errors.

I tried to validate your page with several doctypes and the 'best' one, in terms of making your page easier to validate, was this one:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


28 errors as opposed to 100 with the xthtml 1.0 trans.

However, you really should validate to xhtml 1.0 (transitional at least).

try to validate it with no css (styling) and then we can help with the css, I think.


To achive this, you will need to get at least a 'working knowledge of xhtml and css. Instead of frontpage, why not use notepad?? use firefox or safari or opera as your browser for testing in. right click on the page and see the source code. in Firefox, there is a plug in available which will let you edit the css 'live', from the actual page and you can see the effects immediately.

Perhaps other browsers have this functionality too but I only know about it in FF.

hth

bazz

bazz
08-30-2009, 06:07 PM
erm... I have just tried your second link and it validates to xhtml 1.0! Maybe you have found the solution already? let us know.

bazz

Apostropartheid
08-30-2009, 06:19 PM
@bazz: The document is written in SGML-style, so it should be validated to HTML 4.01 Strict, not XHTML. Transitional shouldn't be used for new documents.
@OP: Your webhost is reaaaaally slow.

TheSlink
08-30-2009, 06:40 PM
I appreciate your help..

But i really cant get my head around the "basics".
I suffer from learning difficulties, so learning new things isnt the easiest for me you see. However, i am trying!

Would anyone be able to maybe edit it for me?! I'lll buy them a drink! it would tick a HUGE box of my too do list!

I really really appreciate your help!

Thanks!

drhowarddrfine
08-30-2009, 07:38 PM
@bazz: The document is written in SGML-style, so it should be validated to HTML 4.01 Strict, not XHTML. Transitional shouldn't be used for new documents.He's using deprecated markup so he must use transitional. There were a lot of XML errors so I thought xhtml would be the way to go but I really didn't look any further than all that frontpage stuff thrown in.

@OP: Your webhost is reaaaaally slow.I wasn't going to say anything but....yes it is.

Scriptet
08-30-2009, 09:47 PM
So do you want
http://www.people-exchange.co.uk/testweb/PeopleX/index2.htm
to look like
http://www.people-exchange.co.uk/testweb/PeopleX/index.htm

Also what's this http://www.people-exchange.co.uk/testweb/PeopleX/teaser.htm
actually meant to look like do you have a visual representation.

TheSlink
08-30-2009, 10:04 PM
So do you want
http://www.people-exchange.co.uk/testweb/PeopleX/index2.htm
to look like
http://www.people-exchange.co.uk/testweb/PeopleX/index.htm

Also what's this http://www.people-exchange.co.uk/testweb/PeopleX/teaser.htm
actually meant to look like do you have a visual representation.

Hey,

No i was simply showing you what we had previous to this. I made the old index.html and someone changed the codeing for me so it worked across ALL browsers. But now we decided to jazz it up a little we need it done again, problem is the person who done it as gone away.

I need it so it shows in Mozzile AND IE.. Becuase on a Laptop IE. It's not correctly alligned ect.. Mozilla, the boxes are not showing.. rather frustrateing!

I would appreciate someone with some knowledge

Scriptet
08-30-2009, 10:18 PM
Oh right, I can give you an example if I know what the page is meant to look like. Maybe you could show a visual representation or explain of what you are intending the page to look like.

TheSlink
08-30-2009, 10:35 PM
Oh right, I can give you an example if I know what the page is meant to look like. Maybe you could show a visual representation or explain of what you are intending the page to look like.

Huh!?

Have you read through my initial question?

Im asking for someone to help fix th HTML so the website + teaser page works on ALL browsers! At the moment it isnt working in Mozilla. the index.html is the OLD/EXISTING one which got changed to work correctly on different browsers, i simply showed it there for reference.

Wheres as the index2 AND teaser are the pages im asking to be changed.

Scriptet
08-30-2009, 10:58 PM
Yes I understood that but i'm saying the index.htm does not look correct in my Firefox, IE 8 or Opera, so I can't tell what you are intending it too look like for me to correct it.

As for your teaser page, you do realise that by just having a huge flyer (http://www.people-exchange.co.uk/testweb/PeopleX/leaflet%20page.jpg), that the browsers cannot read the text on images, therefore you're not giving them much information on what your page is about.
By all means this is fine if you don't not mind. If you did want to give a bit more information to the search engine then you could just chop the image up into the header content and footer, and use an image-replacement technique (http://css-tricks.com/css-image-replacement/) so the image shows up for the user, but the text is still inside the HTML code for search engines to see.

Also for the 7-8 images on each side of the flyer, personally i'd create one big image or 2 (one for each side) containing all the images, placed in their correct positions. This saves having to position each individual image where you want it.
It also has the added bonus that we could just add the 1/2 images as a background image inside the CSS. As really we don't want to add images inside our HTML just for presentation purposes. (Because modern website development states we should keep just the plain page information inside the HTML, and all the presentation stuff inside the CSS.)

I'd do the same for your content page also where you want the images on either side of the content, create one big image containing the little images in their correct positions, rather than 5/6 little images.

Scriptet
08-30-2009, 11:17 PM
Here to elaborate further on my point, here is a basic example of your "teaser" page.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
body{
margin:0;
background:url('http://www.people-exchange.co.uk/testweb/PeopleX/leaflet%20page.jpg') no-repeat top center;
}
#content{
background:#0CF;
width:632px;
margin:650px auto 165px auto;
height:50px;
text-align:center;
}
#content a {
display:block;
text-decoration:none;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:38px;
line-height:50px;
}
</style>
</head>

<body>
<div id="content">
<a href="#">Click Here to Enter Site</a>
</div>
</body>
</html>


Note how there's no actual content, other than "click here to enter site". But if you are happy with this then this example will work.
You just need to add the side images, as I said I would add them as one big background image. But you can position them absolutly individually like you did before if you want, but this has many disadvantages.

TheSlink
08-31-2009, 01:50 AM
Hi Scriptlet,

Would you possibly be able to fix the current HTML to what it should be.
PLEASE IGNORE index.html ~ I said this was the OLD site.

The one's i want addressing are index2.htm and the teaser..
I want them exactly how they are now, althought i do like your idea of making the images into 1 image per side. And this is definately what i will be doing!!.

Again, can you try and fix the code, becuase all this CSS/HTML business is just mumbo jumbo tome.. i have honestly no idea what im doing, looking at the re-code you done just confuses me!.

I'll buy you a drink or two!

TheSlink!

Scriptet
08-31-2009, 02:00 AM
I did an example on my P.C i'll post it up tommorow, on the laptop right now sorry!!

It's all confusing at first but it's pretty basic once you learn the tips and tricks!

The only problem you are having is the same as when I started out, I was using Dreamweaver which was WYSYWIG, but it's much easier to code yourself.

If you learn the proper techniques from the start you can move much quicker, but be careful because there's a lot of old articles online (like using tables and position:absolute for layouts).

Anyway i'll post up the example tommorow with an explanation on how to go about creating web-pages. Because by me just posting it up does you no good as you're not learning for the future, and will just have to ask for help again.

Scriptet
08-31-2009, 04:06 PM
OK here it is just copy and paste it all and save it as index3.html or something.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
body{
margin:20px 0;
background:#7b1128;
color:#000;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
}
h1{
width:792px;
height:270px;
border:2px solid #000;
border-bottom:none;
margin:0 auto;
padding:0;
text-indent:-9999em;
background:#FFF url('http://img38.imageshack.us/img38/6900/pplxchng2.jpg') no-repeat center center;
}
#menu{
width:792px;
margin:0 auto;
background:#FF9900;
border:2px solid #000;
text-align:center;
}
#menu ul {
display:inline-block;
margin:0;
padding:0;
height:39px;
}
#menu ul li {
margin:0;
padding:0;
display:inline;
}
#menu ul li a{
line-height:39px;
float:left;
color:#FFF;
padding:0 7px 0 7px;
border-right: 1px solid #FFF;
font-size: 14px;
}
#menu ul li:first-child a{
border-left: 1px solid #FFF;
}
#menu ul li a:hover{
background:#CF6;
color:#000;
}
#content {
background:#FFF url('http://img171.imageshack.us/img171/1840/lftbars.jpg') no-repeat top left;
width:556px;
margin:0 auto;
padding:50px 128px 50px 108px;
border: 2px solid #000;
border-top:none;
border-bottom:none;
overflow:auto;
position:relative;
}
.bar { display:block; width:792px; margin: 0 auto; height:75px; background: #FF9900; border: 2px solid #000; }
#content p{
margin:0;
padding:10px;
}
#content p:last-child {
font-weight:bold;
}
.rightbar {
display:block;
width:108px;
height:518px;
background:url('http://img43.imageshack.us/img43/1326/rightbar.jpg') no-repeat top right; position:absolute;
top:0;
right:0;
}
#footer{
background:#FFF url('http://www.people-exchange.co.uk/testweb/PeopleX/handshake.PNG') no-repeat top center;
text-align:center;
height:30px;
padding-top: 110px;
width:792px;
margin:0 auto;
border:2px solid #000;
border-top: none;
}
#footer p { margin:0; padding:0; text-align:center; border-top:2px solid #000; font-size:12px; line-height:26px;}
iframe{padding:10px; border: 2px solid #7B1128;}
</style>
</head>

<body>
<h1>People Exchange</h1>
<div id="menu">
<ul>
<li><a href="http://www.people-exchange.co.uk/testweb/PeopleX/Home.htm" target="Frame">Home</a></li>
<li><a href="http://www.people-exchange.co.uk/forum">Member Forum</a></li>
<li><a href="http://www.people-exchange.co.uk/testweb/PeopleX/service.htm" target="Frame">Our Service</a></li>
<li><a href="http://www.people-exchange.co.uk/testweb/PeopleX/subs.htm" target="Frame">Subscription</a></li>
<li><a href="http://www.people-exchange.co.uk/testweb/PeopleX/contact.htm" target="Frame">Contact Us</a></li>
<li><a href="http://www.people-exchange.co.uk/testweb/PeopleX/furinfo.htm" target="Frame">Further Information</a></li>
</ul>
</div>
<div id="content">
<span class="rightbar"></span>
<iframe name="Frame" width="556" height="418" src="http://www.people-exchange.co.uk/testweb/PeopleX/Home.htm" border="0" frameborder="0">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div>
<span class="bar"></span>
<div id="footer"><p>Copyright 2006 -2009 People-Exchange.</p></div>
</body>
</html>


I added a hover to the menu because I wanted to test something out, this can be removed, but I left it in just to show it you anyway.
Note I joined the images up on the left and the right. I also changed your header a bit cause you had it stretched and it was losing it's quality. I wasn't sure the size and width you were aiming for.
I kept the iframes in there cause it's what you were using although i wouldn't use them personally.

That's basically it but let me know if you want any other changes and then i'll tidy it up a bit more for you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum