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 16
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Differing results in IE6 and Mozilla Firebird

    I loaded this page in both IE6 and Mozilla Firebird. How can I make them both look like the one in mozilla? Also, is this a valid doctype, because it won't validate at all.

    <?xml version="1.0" encoding="utf-8"?>
    <!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" xml:lang="en-gb">
    <head>
    <title>[Manic Pyro]</title>
    <style type="text/css">
    body {
    margin: 10px 10px 10px 10px;
    font: 10px/1 verdana, arial, helvetica, sans-serif;
    background: url("bgTest2.gif") repeat;
    color: #EEE;
    text-align: center;
    }
    div#title {
    width: 600px;
    padding: 5px;
    background: gray;
    border: 1px solid black;
    margin: 0 auto;
    text-align: left;
    }
    div#content {
    width: 600px;
    padding: 5px;
    background: gray;
    border: 1px solid black;
    margin: 0 auto;
    text-align: left;
    }
    /* replacement for buggy <hr>'s */
    .hr {
    background: url("hr.gif") repeat-x;
    height: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
    }
    /* implementation of a vertical rule (<vr>) object - Note height attribute may need to be added*/
    .vr {
    background: url("vr.gif") repeat-y;
    width: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
    }
    h1 {
    margin: 0;
    }
    /* hr-like object using pure css */
    .divider {
    background: orange;
    border-bottom: 4px solid red;
    height: 2px;
    width: 100%;
    }
    </style>

    </script>
    </head>
    <body>

    <div id="title">
    <div class="hr"></div>
    <h1>[Manic Pyro]</h1>
    <br />
    :Life sucks, that's why we have web design:
    <br />
    <div class="hr"></div>
    </div>

    <br />

    <div id="content" style="font-size='10px'">
    <div class="divider"></div>
    </div>

    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    Georgia
    Posts
    306
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok well it should look the same in IE and mozilla, if certain things arent working in mozilla like links and such then your header for your css is wrong. And as for the doctype i wouldnt know because i never have seen a use for them.
    ~Designer's Toolz~

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Doctypes are used for validation purposes via www.w3c.org. Which is a great way in my opinion, to check your work and make your work look more professional to the web designing community. Im not sure that I know what you're talking about when you say "css header". I expect that yoy mean type="text/css" and im pretty sure that that's not the problem. Thanks for your input.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Just another reason that we should all hate IE... Still need help.

  • #5
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Originally posted by DsgnrsTLZAdmin
    Ok well it should look the same in IE and mozilla, if certain things arent working in mozilla like links and such then your header for your css is wrong. And as for the doctype i wouldnt know because i never have seen a use for them.
    Perhaps you should learn xhtml.

    (sorry I can't quite help you right now antonio, the fact I'm up at 8am and can type after last night it amazing, still can't think though ... need coffee, I hope they didn't record the party ) ...
    Omnis mico antequam dominus Spookster!

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try loosing the <?xml> declaration at the top, this stops IE rendering in strict mode.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #7
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Originally posted by Antoniohawk
    Just another reason that we should all hate IE... Still need help.
    Quite so... check out: www.dasdua.org site isn't completely done but mostly.
    OracleGuy

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    @OracleGuy
    Amen to that Oracle. Whos idea was that? Kudos to them.

    @ReadMe.txt
    Still no go, but i kept it out anyways.

  • #9
    New Coder
    Join Date
    Jan 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a cleaner version of it. I played around with the background image being at 1px high, and I wasn't fond of it, hence the boder version. Also note that using 10px can cause some major issues because 10px is on the smaller side and px units can't be resized by IE users. You also need to look into getting some better colors.

    http://www.clagnut.com/blog/260/

    <!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" xml:lang="en-gb">
    <head>
    <title>[Manic Pyro]</title>
    <style type="text/css">
    body {
    margin: 10px;
    font: 10px/1 verdana, arial, helvetica, sans-serif;
    background: url("bgTest2.gif") repeat;
    color: #EEE;
    }
    div#title {
    width: 600px;
    padding: 5px;
    background: gray;
    border: 1px solid black;
    margin: 0 auto;
    margin-bottom: 10px;
    }
    div#content {
    width: 600px;
    padding: 5px;
    background: gray;
    border: 1px solid black;
    margin: 0 auto;
    }
    h1 {
    margin: 0;
    border-top:1px solid #000;
    padding-top:5px;
    }
    h2 {
    margin:15px 0 0 0;
    border-bottom:1px solid #000;
    padding-bottom:5px;
    font-size:0.92em;
    }
    hr {
    backgroundrange;
    colorrange;
    border-bottom: 4px solid red;
    height: 10px;
    width: 100%;
    }
    .bg {
    background-image:url(hr.gif);
    height:1px;
    }
    </style>
    </head>
    <body>
    <div id="title">
    <h1>[Manic Pyro]</h1>
    <h2>:Life sucks, that's why we have web design:</h2>
    </div>
    <div id="content" style="font-size='10px'">
    Text
    <hr>
    More text
    </div>
    </body>
    </html>

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Thanks alot for your help, i still would like to keep the border i had with the hr tho, because that effect cannot be created in ie so i had to use an image. If possible, I would like to know why this wont work. When i enter the following into my preexisting code, the size of the actual .hr element is visible, but i have already specified the height.

    .hr {
    ....
    background-color: orange;
    }
    Last edited by Antoniohawk; 01-16-2004 at 01:06 AM.

  • #11
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Originally posted by Antoniohawk
    @OracleGuy
    Amen to that Oracle. Whos idea was that? Kudos to them.
    http://www.codingforums.com/showthre...ght+against+ie
    OracleGuy

  • #12
    New Coder
    Join Date
    Jan 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Antoniohawk
    the size of the actual .hr element is visible, but i have already specified the height.
    That doesn't make any sense to me. Are you talking about your original code, or the one I gave you? Do you mean the .hr class you made, or the <hr> tag I used? To get a <hr> tag to use color correctly, you have to define the color for the color and background-color as the same to have it work in multiple browsers. You then define the height and borders as needed.

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    @Oracle
    Thx for the link

    @Spufi
    I was using a div originally and made it into a sort of <hr> due to bugs i had heard of with the actual <hr>. If your code works, then ill sure use that. Thank you.
    Last edited by Antoniohawk; 01-16-2004 at 09:23 PM.

  • #14
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I have solved my problem by doing a lil googling. It seems that this is not a fluke but actually ie bug. Check out http://kalsey.com/2003/07/css_dotted_borders_in_ie/

  • #15
    Regular Coder
    Join Date
    Dec 2003
    Location
    USA
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, this is pissing me off -- a lot.
    IE renders dotted borders fine as long as the width is above 1px. Granted, this is not full support, but it's more than people give credit for. Also, at about 2px when going down, IE screws up the dashed border.

    So, as long as you're above 1px in width, IE renders dotted borders just fine. As long as you're over 2px in width, IE renders dashed borders fine.


  •  
    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
    •