Question to all Webdesigners and computer folks!

Lillefot · **on:** April 30, 2008, 09:33:23 AM

Hiya!
First: The following will contain some HTML coding tags etc, so don't mind if you don't understand it, this is just a question to those familiar with webdesign.
(Ofcourse, feel free to read it anyway)

Ok, I need help with something.
I'm a quite good HTML (and XHTML) coding webdesigner who uses Notepad++ as my designing program. (I don't wanna hear anything about why I'm using this technique and not Dreamweaver etc, so leave that for later, ok?)

I can do most things with it, but now I have a little trouble:

In MSIE, it looks perfect, but I don't know about what it would look like in the other webbrowsers. (I'm getting Mozilla to my PC, and I'm taking the HTML files to a friend who has some other browsers) .

Now, if this shouldn't work, which I doubt it will, I'm told to write this tag into my HTML documents:
......................................................................................

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

................................................................................

BUT: This messes up how the HTML documents displays in MSIE!

Now for my question,

-Do you have ANY tips how to make them more or less sure to show same in the majority of webbrowsers?

NOTE: I'm not using any weird fonts or anything. This HTML documents are quite simple.

Thanks in advance!

/Lillefot

kjeldo · **Reply #1 on:** April 30, 2008, 10:01:39 AM

don't look at me, <_<

Lillefot · **Reply #2 on:** April 30, 2008, 10:34:05 AM

Ok, this soo freaking weird!
I tried to run the HTML documents in FireFox.. I've never seen aything soo screwed up! I tried to paste that code I told you about, but that made it even worse!!!! :mad
FireFox doesn't even want to show pictures!
What the heck is going on???!! :angry:

Lillefot · **Reply #3 on:** April 30, 2008, 11:37:36 AM

NOTE: I know that it is more or less impossible for browsers to show exactly thesame, but seriously, this differnt's HUGE!
And this code of mine... it couldn't be more simpler!

Petrie. · **Reply #4 on:** April 30, 2008, 10:10:43 PM

Opera has no idea what the hell that is.

And I have no clue what is wrong, but I don't think you need to really put that at the <head> of your code.

landbeforetimelover · **Reply #5 on:** April 30, 2008, 10:29:16 PM

I can't imagine why you'd need that in your HTML documents. Does your webhost demand you put that into your website code? I don't even know what that garbage is. I'm a professional web designer and I gotta say there is no way to create a decent web site with nothing but HTML. At the bare MINIMUM, you must know HTML and CSS. Knowing javascript would help you out a lot as well. Websites with nothing but HTML.......you don't see those anymore. Why would you suppose that is?

:

If you'd give me the entire source, I might be able to assist you, but I have no clue what that garbage you want to put into your website is and I doubt it'll do anything to most browsers. As for web browsers, firefox is the #1 most Universal web browser in the world right now. They're going to have support for CSS3 in less than a year, whereas IE might have it in 2-3 years.

If someone's forcing you to put that garbage into your website code, you need a different webhost.

I've been making websites from scratch in just notepad for many years now using HTML, CSS, and Javascript and I couldn't even guess at what that junk is supposed to be.

Quote

This messes up how the HTML documents displays in MSIE!

Live with it or junk up your script with unnecessary tags and crap. To make my projects website 100% compatible in IE and all other browsers, it took a lot of time and a lot of repetitive tags for each type of browser. Universal compatibility takes a long time to code. It took me 2 hours to make my website work in firefox......and an additional 9 hours to make it compatible in all browsers as well as firefox. Take a look at all of the irrelevant code I had to cram into my website to make it universal:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<style type="text/css">
.image2{
position:absolute;
Left:-5px;
Top:225px;
}
body
{
background-image: url('http://www.freewebs.com/Backgrounds/Sky/ss073.jpg');
}
.image{
position:absolute;
left:-5px;
top:100px;
}
h1{
font-size:35px;
color:red;
text-decoration:underline;
text-align:center;
position:relative;
top:-80px;
}
.maintext{
text-align:center;
color:blue;
}
.image3{
Position:absolute;
Left:-5px;
top:350px;
}
.text4{
color:white;
text-decoration:bold;
font-size:18px;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
top:120px;
}
.image4{
position:absolute;
left:-5px;
top:475px;
}
.image5{
position:absolute;
left:-5px;
top:600px;
}
.garbage{
text-align:center;
position:relative;
top:65px;
}
hr{
position:relative;
top:-85px;
}
.image6{
position:absolute;
top:100px;
left:85%;
}
.image7{
position:absolute;
top:225px;
left:85%;
}
.image8{
position:absolute;
top:615px;
left:85.3%;
}
.image9{
position:absolute;
top:475px;
left:85%;
}
.image10{
position:absolute;
top:350px;
left:85%;
}
</style>
</head>
<body>
<div class="image"><A HREF="http://www.google.com" onMouseOver="SwapOut()" onMouseOut="SwapBack()">
<IMG NAME="imageflip" SRC="http://i203.photobucket.com/albums/aa146/tlordame/homenolable.png"BORDER=0></A></div>

<div class="image2"><a href="http://www.google.com" onMouseOver="SwapOut2()" onMouseOut="SwapBack2()">
<img name="imageflip2" src="http://i203.photobucket.com/albums/aa146/tlordame/button1.png"BORDER=0></a></div>

<div class="image3"><a href="http://www.freewebs.com/landbeforetimeprojects/LBT%20Icons.htm" onMouseOver="SwapOut3()" onMouseOut="SwapBack3()">
<img name="imageflip3" src="http://i203.photobucket.com/albums/aa146/tlordame/button2.png"BORDER=0></a></div>

<div class="image4"><a href="http://www.google.com" onMouseOver="SwapOut4()" onMouseOut="SwapBack4()">
<img name="imageflip4" src="http://i203.photobucket.com/albums/aa146/tlordame/button5.png"BORDER=0></a></div>

<div class="image5"><a href="http://www.google.com" onMouseOver="SwapOut5()" onMouseOut="SwapBack5()">
<img name="imageflip5" src="http://i203.photobucket.com/albums/aa146/tlordame/button6.png"BORDER=0></a></div>

<div class="image6"><a href="http://www.google.com" onMouseOver="SwapOut6()" onMouseOut="SwapBack6()">
<img name="imageflip6" src="http://i203.photobucket.com/albums/aa146/tlordame/button3.png" BORDER=0></a></div>

<div class="image7"><a href="http://www.google.com" onMouseOver="SwapOut7()" onMouseOut="SwapBack7()">
<img name="imageflip7" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button7.png" BORDER=0></a></div>

<div class="image8"><a href="http://www.google.com" onMouseOver="SwapOut8()" onMouseOut="SwapBack8()">
<img name="imageflip8" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button10.png" BORDER=0></a></div>

<div class="image9"><a href="http://www.google.com" onMouseOver="SwapOut9()" onMouseOut="SwapBack9()">

<img name="imageflip9" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button4.png" BORDER=0></a></div>

<div class="image10"><a href="http://www.google.com" onMouseOver="SwapOut10()" onMouseOUt="SwapBack10()">
<img name="imageflip10" src="http://i203.photobucket.com/albums/aa146/tlordame/second%20album/button9.png" BORDER=0></a></div>

<div class="garbage">
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_mirrorblack.js">
</script></div>
<h1>Austin's Land Before Time Projects</h1>
<hr>
<center><div class="text4" style="position:relative; overflow:hidden; width:537px; height:317px; z-index:3">Hello and welcome to my land before time projects
website. The main purpose of this website is to catalog and index all of the most important land before time projects I complete as well as enable other land before time
fans to view and use these projects to their benefit. Please, have a look around and if you like something don't hesitate to download it. The images on the sides of this text (the one's with red circles around them) are actually links. You may follow them in order to view the main pages of this website and the projects that are indexed. The links will take you to other places where you can view and download the projects I have completed. Thank you for your consideration
and for taking the time to read this message. You may now proceed to download anything you wish from this website.</div></center>
<script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";_uff=false;urchinTracker();}</script><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";_uff=false;urchinTracker();}</script></body>

</html>

I did this all manually in notepad and here is the end result:

www.freewebs.com/landbeforetimeprojects

It's not done by far, but I've got the template done, which was like most of the work. This site will work in any browser in the world, but it took a long time to code this properly.

For example, IE wouldn't recognize the CSS element that told it to center an image, so I had to center it three different ways in CSS and two different ways in HTML just to make sure it always centered. Alignment is very difficult when it comes to making it look perfect in all web browsers. One bad site is my school website:

www.austindame.co.nr

The width and height of the boxes change with each resolution. It's 100% compatible with all browsers, but not all resolutions. -_-

Making a website that's 100% compatible with every browser and every resolution is currently possible, but if you're not willing to spend countless hours manually coding everything, I would suggest using a cheat program that will generate HTML code or use a provided template that's already got all the hard work done. I would not recommend ever using Dreamweaver. That's a B**** of a program and it writes crap all over the place. Don't worry though. With the release of CSS3, there will be enhanced features such as background-size="100%" so that the background will stretch depending on the user's resolution. I can't wait until that day, but until it comes, we'll have to suffer with CSS2, HTML, and Javascript 2.0

Lillefot · **Reply #6 on:** May 01, 2008, 05:44:54 AM

To answer question one: Don't look at me! My @ teacher told me to add it!
Your code is very Interessting...

But okay, I read and I take this in. Hopefully it will lead me somewhere.

It's true that I could send you the codes, but I don't think that would lead us anywhere particular...

I soo need Internet on my PC, I'm *********!!!!!! tired of having to walk between my cottage and this family computer!
Which also means that I have to upload all my pictures from my computer, and not from my P-bucket.
Freaking b**ch I am! :blink:

Lillefot · **Reply #7 on:** May 01, 2008, 10:26:27 AM

Hm, opened all the documents in FrontPage 2003... (Thanks Littlefoot)
Changed some attributes and such, among them:

{
margin: 0;
padding: 0
}

as a standard.

I also re-designed it fully, and aimed for it too look good in FF at first.
It came out quite okay, the differnce is that IE suffers from extra thick borders and longer distances between boxes.
But in FF it looks kinda good now.

I'm cuurently doing the project all over again, and follow some guidelines.
Might do another design, but I'll keep my menu, as I like it

:

Tried some Javascript aswell, playin around some with it...

Clawandfang · **Reply #8 on:** May 01, 2008, 03:41:08 PM

I remember reading a book which told me to do that (or something similar).... if I was using XHTML or XML. HTML should work fine on its own...

landbeforetimelover · **Reply #9 on:** May 01, 2008, 06:08:13 PM

Here's a tip:

If you're wanting to design a good website using notepad, it would be easiest to use firefox ONLY at first because it's the most compatible with all websites and code. DO NOT use any of the obsolete HTML tags at first such as the <center>, <b>, <align="left>........ Use CSS to do ALL styles. Once you've got that done, open it in IE. It'll most likely look all messed up and look like crap. Then you can add in the irrelevant tags as necessary into the HTML so it'll look good in IE. That is the only way to make it look 100% compatible with all browsers and all resolutions when working manually.

Lillefot · **Reply #10 on:** May 02, 2008, 04:25:34 AM

Quote from: landbeforetimelover,May 1 2008 on 05:08 PM

Here's a tip:

If you're wanting to design a good website using notepad, it would be easiest to use firefox ONLY at first because it's the most compatible with all websites and code. DO NOT use any of the obsolete HTML tags at first such as the <center>, <b>, <align="left>........ Use CSS to do ALL styles. Once you've got that done, open it in IE. It'll most likely look all messed up and look like crap. Then you can add in the irrelevant tags as necessary into the HTML so it'll look good in IE. That is the only way to make it look 100% compatible with all browsers and all resolutions when working manually.

Hey,
I'm doing that right now, looks okay. (I do all my styles in CSS)
What are the neccesary irrelevant tags?

:
Thanks for your help mate! (and everyone)

Lillefot · **Reply #11 on:** May 02, 2008, 12:48:40 PM

Okay, I've re-designed the whole thing.
Designed for FF in the first place, and here the result...
And if I compare the small differneces between these two, it's HEAVEN compared to what the previous design looked like!
FIREFOX:

IE:

NOTE: This is NOT the final design! Just a test to make sure everything, like boxes menu links etc works okay in both browsers!

landbeforetimelover · **Reply #12 on:** May 02, 2008, 06:12:36 PM

I suggest you hold off on creating a background that's not solid. It will look really awful to those with higher resolutions. Just wait for CSS3 to come out. Then the background size will be able to stretch according to the users screen resolution.

Lillefot · **Reply #13 on:** May 03, 2008, 03:50:13 AM

Quote from: landbeforetimelover,May 2 2008 on 05:12 PM

I suggest you hold off on creating a background that's not solid. It will look really awful to those with higher resolutions. Just wait for CSS3 to come out. Then the background size will be able to stretch according to the users screen resolution.

Hi,
As I said, it's not the final design :^.^: I'm gonna give everything the final touches later on.

Well now that I've more or less "got ridd" of this issue, I'm on my way again!
Coding is freaking fun, casue in many ways, you can do anything you like with it!
Can't wait for my new computer!

landbeforetimelover · **Reply #14 on:** May 03, 2008, 08:55:41 AM

I suppose you're using content boxes instead of images for the white boxes? Just make sure to position them using the "Position:relative" element and make sure to specify their width and height in percentages instead of pixles for those with other resolutions.

Absolute positioning is the devil.

Lillefot · **Reply #15 on:** May 03, 2008, 02:58:30 PM

Quote from: landbeforetimelover,May 3 2008 on 07:55 AM

I suppose you're using content boxes instead of images for the white boxes? Just make sure to position them using the "Position:relative" element and make sure to specify their width and height in percentages instead of pixles for those with other resolutions. Absolute positioning is the devil.

I've read, I've learned, I've done it! :^.^:
Thanks matey, you're a great help!

/Lillefot