Programmed for Firefox but needs to work in IE

robster66

11-21-2008, 10:38 PM

It works fine in Firefox and I need it to work in Internet Explorer as well. What am I doing wrong that IE is not reconizing? I changed the websites and some links for this thread but the rest of the coding is the same.

<!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" lang="en" xml:lang="en">
<head>

<style type="text/css">
body {
background-image:url(bgimage.jpg);
}

#title {position: absolute; top: 0in; right: 5.8in;font-size:2.0em;}
#picture {position: absolute; top: 2.2in; left: 4in;}
#links {position: absolute; top: 1.3in; left: 0in; border-style: none; font-size:16; font-weight:bold;}
#ourmission {position:absolute;top:4.7in;left:2.8in;font-size:1.6em;}
#text1 {position:absolute;top:5.2in;left:2.8in;}
#hours {position:absolute;top:5.7in;left:2.8in;font-size:1.6em;}
#text2 {position:absolute;top:5.9in;left:2.8in;}
#contact {position:absolute;top:7.3in;left:2.8in;font-size:1.6em;}
#text3 {position:absolute;top:7.7in;left:2.8in;}

hr {
color: #9E9E9E;
background-color: #9E9E9E;
}

</style>
<title>title</title>
</head>
<body>
<div id="title">title</div>
<a href=
"https:website"><img src="log.gif"
border="0" style="position:absolute;top:3.4in;left:3in;" alt=
"#########" /></a>
<div id="picture"><img src=
"picture"
alt="#########" /></div>
<div id="links">
<ul>
<li><a href="/newstips.html">News & Tips</a></li>

<li><a href="/staff.html">Staff</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="/emergencies.html">Emergencies</a></li>
<li><a href="/yy.html">Pet Info &
Links</a></li>
<li><a href="/yyy.html">Picture Gallery</a></li>
<li><a href="/yyyy.html">Forms</a></li>
<li><a href="/yyyyy.html">Employment</a></li>
</ul>

</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<hr style="width:63%;height:1px;position:relative;"></hr>
<div id="ourmission">text</div>
<div id="text1">texttexttext</div>
<br />
<br />
<br />
<br />
<hr style="width:63%;height:1px;position:relative;"></hr>
<div id="hours">texttext</div>

<div id="text2"><br />
text<br />
<br />
text<br />
<br />
text<br />
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<hr style="width:63%;height:1px;position:relative;"></hr>
<div id="contact">Contact Information</div>
<div id="text3">Telephone<br />
   6105659898<br />
FAX<br />
   6105659898<br />
Address<br />
   405 blvd<br />
   Click <a href=
"www.website.com">

Here</a> for directions</div>
</body>
</html>

GardenGnome2

11-21-2008, 10:57 PM

This code works the same in FF and IE. Is there a specific part you are referring to?

robster66

11-21-2008, 11:12 PM

The horizontal lines are not in the same place as Firefox which messes everything up.

Muffin_Fox

11-21-2008, 11:32 PM

I hope you don't mind, but I saved the HTML into a file, so I could see what you meant. I don't know how to fix the problem myself, but perhaps I can describe things so that someone else can help better.

In FF, the bottom of the webpages is split into 3 parts, 2 with place holder text, and a third with a fake address, the three areas are split with horizontal rules. In IE, the rules cut into the text in the first and second sections.

Hope that helped to those trying to help.

robster66

11-21-2008, 11:38 PM

thats fine it's just the hr's I put other information in the coding just for posting it here. the hr's don't align

Apostropartheid

11-22-2008, 12:37 AM

Oh God. Wow. Inches. We're going to have to start from the bottom up.

You're using inches to position elements. Why? Monitors are a screen medium. I'm unsure on the exact rendering of inches, but the very sound doesn't really bode well for me. Why aren't you using pixels?

You've used so much un-needed absolute positioning that I'm terrified. There's a simple rule you need to remember: you don't have to position everything. Content will appear under content above it naturally. You don't need absolute positioning unless you want things to absolutely stay there, out of the flow of elements, which isn't really what you need here. Have a look at a two columned example (http://bonrouge.com/2c-hf-fluid.php) for methods on how to achieve this kind of layout.

As for the HRs, I have no idea. They're a pretty annoying thing which browsers very much disagree on.

robster66

11-22-2008, 01:52 AM

Thanks for the input I just needed to know about the hr's.. I understand what you said completely but that's just how I did it this time. I have just started coding again, it has been years.

Excavator

11-22-2008, 06:27 PM

Hello robster66,
Like CyanLight is telling youThere's a simple rule you need to remember: you don't have to position everything.

Those hr's would flow with the surrounding content fine without #text2, #contact, #hours and #text3 (more?) squishing them together.

What does a change in text size do when viewing in FF? I don't imagine it resizes well.

I understand what you said completely but that's just how I did it this time. I have just started coding again, it has been years.
I've just started again too. It has only been a few months - I work all summer and goof off in the winters but I seem to forget a lot of this stuff when at work.
Even though past experience will probably help your learning curve there are still going to be times that it's better to just start over.

robster66

11-23-2008, 06:57 PM

So how should I code this? Just position the top and the navigation?

Excavator

11-23-2008, 08:42 PM

Just throwing up something really quick...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="" content="authored by http://www.nopeople.com/Design/" />
<style type="text/css">
html, body {
text-align: center;
font: 100% "Comic Sans MS";
color: #333333;
text-decoration: none;
background: #99FFFF;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 1000px;
margin: 0 auto;
}
#site {
width: 560px;
height: 400px;
margin: 0 auto 20px auto;
background: #666;
border: 5px solid #F00;
}
hr.three {
width: 90%;
height: 8px;
color: #FF0000;
background: green;
border-top: solid 2px #cccccc;
border-bottom: solid 2px #000000;
border-left: solid 2px #888888;
border-right: solid 2px #333333;
margin-top: 25px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="site">a bunnch of website stuff would go here</div>
<hr class="three" />
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<hr class="three" />
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<hr class="three" />
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</body>
</html>

You can see some hr examples I have here (http://nopeople.com/CSS/hr/)

.

Major Payne

11-23-2008, 11:35 PM

I like to code my hrs this way which works ok in FF and IE for me:<hr style="width: 50%; height: 1em; border: 1em ridge #f00;"> Just my 2 cents. Carry on. :D

Excavator

11-24-2008, 01:32 AM

I like to code my hrs this way which works ok in FF and IE for me:<hr style="width: 50%; height: 1em; border: 1em ridge #f00;"> Just my 2 cents. Carry on. :D

Why code it inline? The whole purpose of CSS is external, or at least embedded, style sheets so that you get the most benefit of the cascade and inheritance.
It's a lot less code and easier to type <hr> than it is to type <hr style="width: 50%; height: 1em; border: 1em ridge #f00;">

Major Payne

11-24-2008, 05:36 AM

Because my HTML Editor places the entire code for me when I want an hr generated. Why use external or embedded CSS for only a few hrs. If you use a lot of them, then move the coding to where ever you want it. Just typing <hr> does not always produce the nice styles and <hr> results are not always the same in browsers. Styling them will at least give them some guidance on how I want them!

Excavator

11-24-2008, 07:06 AM

Your HTML editor generates inline code??? What are you using?

This markup:<hr>

with a couple lines in your CSS:
hr{
margin: 0 auto;
border-top-width: 4px;
border-top-style: groove;
border-top-color: #FF0000;
width: 400px;
margin-top: 75px;
}

is all I was suggesting. I did not mean for anyone to "just type <hr>" and not style it.

robster66

11-24-2008, 10:48 PM

<hr style="width: 63%; height: 1px; border: 1px ridge #000;"></hr>

thats the way I just tried and it's still the same outcome

robster66

11-25-2008, 07:35 PM

body {
background-image:url(bgimage.jpg);
}

hr {
width: 63%;
}

#title {position: absolute; top: 0in; right: 5.8in;font-size:2.0em;}
#picture {position: relative; top: 2.2in; left: 4in;}
#links {position: absolute; top: 1.3in; left: 0in; border-style: none; font-size:16; font-weight:bold;}
#test1 {position:relative; font-size:1.5em; font-weight:bold; left:260px; top:0px;}
#test2 {position:relative; font-size:1em; left:260px;}
#test3 {position:relative; font-size:1.5em; font-weight:bold; left:260px; top:0px;}
#test4 {position:relative; font-size:1em; left:260px;}
#test5 {position:relative; font-size:1.5em; font-weight:bold; left:260px; top:0px;}
#test6 {position:relative; font-size:1em; left:260px;}

thats my css now and it works

Major Payne

11-27-2008, 05:24 PM

Your HTML editor generates inline code??? What are you using?Using MSS Website Studio 2008. Evaluating and writing help file for the author so mine is a Beta release.