Oh my, first post ever on these forums, scary. So, sorry about the length of this, but I'm long-winded like that.... D:

Anyways, I should start with a bit of back story in terms of my project. I'm designing a section of my high schools web page (the section for the technology department, to be specific). I was chosen, because I was the only one in my class that knew HTML (which is surprising, in a class in the technology department...). This said, when I learned HTML, people were still ranting to me how much IE4 sucked...and with this newfangled (a 17 year old shouldn't be using that word, should I?) XHTML stuff, it got annoying. I read a book or two, as well as a few web tutorials, and made a fairly simple webpage, and when I showed it to the "web admin" (22 year old art grad teacher D: ), she was happy.

However, I showed it to her in Firefox, and just for the purpose of testing, when I went back to my classroom, I tested a few more browsers. FF2, pass. Opera 9, pass. Safari [whatever version is new], pass. Chrome, pass. IE, D: Fail. Well, the easiest way to explain it, would be in pictures, so:

(for some reason, the screenshots look REALLY dark, sorry, but, not quite in the mood to re do them off of my laptop.)
This is what one of the pages looks like in FF:
http://img401.imageshack.us/img401/4890/foxfoxry7.png
And in Safari:
http://img165.imageshack.us/img165/5184/safariov8.png
And in IE:
http://img246.imageshack.us/img246/6382/ieng6.png
(paint FTW)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/html-transitional.dtd">
<html>
<head>
<title>Sachem North Tech Department Webpage</title>
<link rel="stylesheet" type="text/css" href="stdcss.css" />
</head>
<body>
<div id="header"><h1 class="title">Sachem North Technology Department</h1>
<h3 class="secondtitle">Homepage</h3>
</div>
<div id="welcome"><p class="welcomeboxtext">Welcome to Sachem North's Technology Department homepage. To begin your journey, click on one of the links below.</p></div>
<div id="links">
<ul>
<li><a href="WWW.MUFFIN.COM">Homepage</a></li>
<li><a href="">Teacher List D:</a></li>
<li><a href="">Course List</a></li>
<li><a href="">Useful Links</a></li>
<li><a href="">Sachem Robotics Webpage</a></li>
</ul></div>
<div id="hpmiddle">The video that would be showing a montage of the tech department would be here.</div>
<div id="staff"><p class="welcomeboxtext">Technology Education is the study of the human made world.
We live in a society that increasingly depends upon technology.
Citizens who understand and are comfortable with the concepts
and workings of modern technology will be better prepared for
the workplace and better able to participate fully in society and
in the global marketplace. Technologically literate
citizens employ systems-oriented thinking as they interact with
the technological world, cognizant of how such interaction affects
individuals, our society, and the environment.</p></div>
<div id="bottombox"><p class="welcomeboxtext">Current Chairperson:<br /><b>Eric Jorgensen</b></p></div>
<div id="version"><p class="welcomeboxtext">Placeholder Text...</div></body>
</html>

I really hope this is something simple to fix, I've already had it be recommended to write an entire new set of pages for IE alone, and then make the homepage a javascript redirect to go to the right page for IE or other browsers. I really don't want to do this, so I hope yalls can help D:

drhowarddrfine

11-22-2008, 12:33 AM

You're doctype is incorrect. Replace it with this one and see if IE rights itself:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Your CSS is correct and your html is, too, except for the doctype and the validator says you're missing a </p> somewhere.

Since it works in all the modern browsers, we can assume you wrote your markup correctly and IE is screwing up, as usual.

Muffin_Fox

11-22-2008, 12:42 AM

Nope still didn't fix the problem, but thanks for fixing my Doctype, it looked like two ll's on w3's webpage D:

Thanks for noticing the open p tag too D:

(fyi, I use "D:" too often, so it's used as happy AND sad for me.)

Sigh, I wish I could just make a script that tells IE users to get firefox, but the admin already said no to that ._.

abduraooft

11-22-2008, 06:33 AM

Well, the easiest way to explain it, would be in pictures, so: A small description of the problem also help us, so that we don't have to look all around there and guess it. I guess you are talking about the color of the links. If so, you need to give some thing in the href attribute to make it correct in IE, at least a #

Sorry, no, I just suck at describing things in under 4 paragraphs. Thanks for the welcome, though. I know I need something in the links for the color to change, just have to wait for the bloody order these people want me to make the website in, so I can have actual links...

Anyways, to word my problem in a....better way, on the FF version, there is a good padding between the end of the text and the border of the Div boxes, in the IE one, the div ends as soon as the text does. Now, I'm looking for a way to make the so called padding in FF appear in IE, without making a new css sheet/htmls, with JS to detect IE, and switch to it.

That sounded a bit confusing to me, but it's the only way I can put it into text.

abduraooft

11-22-2008, 08:23 AM

The output that you see is the effect of default margins/padding value of various elements in browser, which may vary from browser to browser. So, the designers usually reset these values by adding a CSS like
*{
margin:0;
padding:0;
}.

After that, we can explicitly set the required paddings and margins for the elements.

Muffin_Fox

11-22-2008, 08:33 AM

Well, it's a lot better then doing dual html sheets. Thanks.

Oh, while I have an open topic, the images that appear left of the URL in the address bar, I feel stupid asking, but assuming I have full control over the webserver the site is on, how would I do that for a site? Although, this falls out of the realm of html and css ._.

abduraooft

11-22-2008, 08:35 AM

It's called Favicon (http://en.wikipedia.org/wiki/Favicon)

Muffin_Fox

11-22-2008, 08:39 AM

Oh. Thanks again. While I'll have a LOT more questions before this bloody website is finished, but for now, I'm happy. -_-