Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Programmed for Firefox but needs to work in IE

    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.


    Code:
    <!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 &amp; 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 &amp;
    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 />
    &nbsp;&nbsp;&nbsp;6105659898<br />
    FAX<br />
    &nbsp;&nbsp;&nbsp;6105659898<br />
    Address<br />
    &nbsp;&nbsp;&nbsp;405 blvd<br />
    &nbsp;&nbsp;&nbsp;Click <a href=
    "www.website.com">
    
    Here</a> for directions</div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    This code works the same in FF and IE. Is there a specific part you are referring to?

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The horizontal lines are not in the same place as Firefox which messes everything up.

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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 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.

  • #7
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello robster66,
    Like CyanLight is telling you
    There'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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So how should I code this? Just position the top and the navigation?

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Just throwing up something really quick...
    Code:
    <!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>
    <!--closes wrap--></div>
    </body>
    </html>
    You can see some hr examples I have here


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    834
    Thanks
    10
    Thanked 79 Times in 77 Posts
    I like to code my hrs this way which works ok in FF and IE for me:
    Code:
    <hr style="width: 50%; height: 1em; border: 1em ridge #f00;">
    Just my 2 cents. Carry on.
    ☠ ☠RON☠ ☠

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Major Payne View Post
    I like to code my hrs this way which works ok in FF and IE for me:
    Code:
    <hr style="width: 50%; height: 1em; border: 1em ridge #f00;">
    Just my 2 cents. Carry on.
    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;">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    834
    Thanks
    10
    Thanked 79 Times in 77 Posts
    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!
    ☠ ☠RON☠ ☠

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your HTML editor generates inline code??? What are you using?

    This markup:
    Code:
    <hr>

    with a couple lines in your CSS:
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <hr style="width: 63%; height: 1px; border: 1px ridge #000;"></hr>

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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •