1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS: Border difference in FF compared to I.E.

Discussion in 'CSS' started by joewills, Jan 25, 2006.

  1. #1
    Hi Guys,

    I'm still pretty new to CSS - but the most annoying thing I have not been able to solve at the moment is an issue with borders!!

    When I create a border for a div tag and view it in FF or I.E. I get different results. If I give the div tag a background colour it aligns to other div sections (for both FF and I.E.) as I want, But If I chose to give a div tag a border..... FF at times puts the border on the ouside of the div edge area and in I.E. puts the border on the inside of the edge. so if the border is 5px wide , it can at times be 10px difference.... from one another

    Here is the css code :

    #main {
    margin-right: 10%;
    margin-left: 10%;
    width:80%;
    background-color: #FFFBEA;
    height: 650px;
    position: absolute;
    top: 168.5px;
    border-top-width: 0px;
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
    border-left-width: 2.5px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #000099;
    border-right-color: #000099;
    border-bottom-color: #000099;
    border-left-color: #000099;
    padding-bottom: 0px;
    margin-bottom: 0px;
    }

    I reference this in a php file as </body>
    <div id="main"></div>

    </body>


    The php file is then called in a template php file.

    I hope this makes sense...

    Any help gladly appreciated!!
    SEMrush
    Joe
     
    joewills, Jan 25, 2006 IP
    SEMrush
  2. stuw

    stuw Peon

    Messages:
    702
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Your right - and as far as I am aware there is not much you can do about it apart from create seperate css rules for different browsers and get creative.

    If you want to make a style that ie will ignore do something like
    div.mystyle {color:red} <-- for ie
    body>html div.mystyle {color:blue} <-- for ff
     
    stuw, Jan 25, 2006 IP
  3. Perrow

    Perrow Well-Known Member

    Messages:
    1,306
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    140
    #3
    Or you can cheat and make a border from another div.
    
    <div style="padding:1px 1px 1px 1px; background-color:#FF0000;width:100px">
    <div style="background-color:#00FF00; height:98px;">
    Content
    </div>
    </div>
    
    Code (markup):
    ps. Haven't actually tried this but have had the above mentioned problem, this feels like it should solve it.
     
    Perrow, Jan 25, 2006 IP
  4. Perrow

    Perrow Well-Known Member

    Messages:
    1,306
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    140
    #4
    Same result in both ff and IE.

    Though both made the square 102 by 100 pixels! I thought that padding were supposed to go on the inside :confused:
     
    Perrow, Jan 25, 2006 IP
  5. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    IE and Firefox use a different box model. In Firefox the height and width define the dimensions of the content area. Margins, borders and padding are added on. In IE however the height and width define the max dimensions of the whole box.

    So a div specified to be 100px x 100px with a 5px border all round would render as a 110px x 110px box in FireFox but as a 100px x 100px box in IE.

    In order to render the same in both browsers you need Perrow's nested div solution. However you need to define the height and width on the inner div and the padding, borders and margins on the outer div, this simulates FF behaviour in IE. Switch the divs round and you simulate IE behaviour in FF.

    The box model used in FireFox is the W3C standard. Expect IE to switch to that in some future version.

    Therefore the divs as stated are prefered. This also ensures that the inner div completely fills the outer div.
     
    draculus, Jan 25, 2006 IP
    stuw likes this.
  6. joewills

    joewills Peon

    Messages:
    44
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Cheers everyone - for confirming the problem. In the end I used I.E. conditions and this seems to be working fine!! Are there any drawbacks to that?
     
    joewills, Jan 26, 2006 IP
  7. nate_king1

    nate_king1 Active Member

    Messages:
    951
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    70
    #7
    Quick question. Why is their so much difference between browsers for HTML and CSS? I'm just not understanding???
     
    nate_king1, Mar 15, 2006 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #8
    IE6 uses the w3 box model if it is in standards mode. For that, you must use a complete and proper DTD.

    Since there is no sane reason to use deprecated elements or attributes, there is no reason to use any but a strict doctype. Use html4.01 strict, and validate your markup as you go.

    cheers,

    gary
     
    kk5st, Mar 15, 2006 IP
  9. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    The difference is largely historical. IE when it was first introduced had to compete with netscape. Netscape had bugs and quirks, IE replicated them so that it rendered pages the same way. All browsers have there own bugs also.

    Firefox conforms pretty much to the W3C standards. It was written after the standards were introduced, as was Opera. IE6 however was written before the current standards were released. It therefore did not have the standards to define how it should behave, only the recommendations. IE also has to be backward compatible with older versions or people would consider that the new version had bugs. Firefox doesn't have this problem. Opera has only ever implemented W3C standards and therefore has no problems with backwards compatability.

    In addition the W3C standards do not specify all things. So there will always be differences between browsers. I.e. default fonts and sizes are not specified and how lists are implemented are not specified.

    With constantly changing standards, varying needs to be backwards compatible, the inevitable bugs and different release schedules, it is unlikely that there will ever be a time when all browsers render the same page in exactly the same way. At least not until the web has matured to a state were it doesn't need to improve.

    As a friend of mine is fond of saying "I love standards, there are so many to choose from".
     
    draculus, Mar 16, 2006 IP
  10. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10

    This is true for IE6, but not for previous versions. If you want to render the same in IE versions before IE6 then you still need the nested div solution.
     
    draculus, Mar 16, 2006 IP
  11. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Although I agree in principle, there are some very good reasons to use deprecated markup.

    A website with thousands of pages riddled with poor coding can take a year or more to change to current standards. Many companies wiil not invest in this if the current site still "works". Thus changes are made on a peacemeal basis. That is the reason for the transitional doctypes.

    Finally HTML 4.01 is an outdated standard. If you want to be fussy about such things (I am) use XHTML 1.1.
     
    draculus, Mar 16, 2006 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,499
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #12
    True. I should have, and usually do, further added 'for new documents'. I assumed, maybe wrongly, that the OP was talking about a new document.

    Not quite factual. HTML 4.01 is the current html recommendation. XHTML is html refactored as xml. XHTML 1.0 may be served as text/html. In that case the browser will treat it as html. XHTML 1.1 should be served as application/xhtml+xml, which IE does not support. IE7 will also fail to support it. Modern browsers do support xhtml 1.1 just fine.

    I use xhtml1.0 simply because I also use it in intranets where obsolete browsers are not in use. I can use the eXtensible part of xhtml to create new elements and attributes when served as application/xhtml+xml. Rather than risk syntax errors, I use the same DTD and serve as html to the internet.

    For a demonstration, see XHTML Doc for an application/xhtml+xml MIMEType. View source for the DTD extension. View the server response header for content-type (MIME).

    XML allows zero tolerance for faults. A single syntax error will cause the browser not to render the doc at all.

    An example, Broken XHTML Doc.

    View in a modern browser such as Firefox or Opera. Then, view in an obsolete browser such as IE.

    To sum up: Use a strict DTD, either html4.01 or xhtml1.0 for new documents. If you don't have the resources, time, eg., to refactor older docs, a transitional or loose DTD is ok. There are syntax differences. Don't use xhtml if you're not solid on the diffs. On older docs, you may not want to redo as xhtml, so stay with html.

    Do not use xhtml1.1. You are not valid if the MIME type is wrong, and if the MIME type is correct, IE can't render it.

    cheers,

    gary
     
    kk5st, Mar 16, 2006 IP
  13. Dekker

    Dekker Peon

    Messages:
    4,185
    Likes Received:
    287
    Best Answers:
    0
    Trophy Points:
    0
    #13
    my brain just exploded. uterus too
     
    Dekker, Mar 16, 2006 IP
  14. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Thanks kk5st I wasn't aware of the mime type differences. We live and learn. I think there are a few websites I run that need a DOCTYPE change, backtracking to XHTML 1.0.

    On a different theme, for some reason Yahoo has decided that digitalpoint emails are spam. Weird.
     
    draculus, Mar 21, 2006 IP