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:
Here is the HTML for the page in the pictures above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/html-transitional.dtd">
<title>Sachem North Tech Department Webpage</title>
<link rel="stylesheet" type="text/css" href="stdcss.css" />
<div id="header"><h1 class="title">Sachem North Technology Department</h1>
<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>
<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>
<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>
Last edited by Muffin_Fox; 11-22-2008 at 07:41 AM..
Reason: Fixed a dead link D:
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"
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.
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.
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
After that, we can explicitly set the required paddings and margins for the elements.
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
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 ._.