SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Arizona
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container centers in Firebird but not IE??

    ..
    I am redoing the site I had posted last week because i thought i read up a bit on CSS and i wanted to clean it up now i am stumped again.
    the difference between firebird and IE is really confusing me.. now it looks great in firebird but the container is not centered in IE. the links are all dead right now because i am redoing the whole site.

    Also the middle hyperlinks, i was trying to figure out a good way to space them above the pics. They are spaced differently in IE and firebird also. Should I slice the banner pic into three pics and then put the hyperlink abover the pic?

    link
    http://answer1.ahiconsulting.com

    CSS
    http://answer1.ahiconsulting.com/A1.css

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Arizona
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexanderAZ
    ..
    I am redoing the site I had posted last week because i thought i read up a bit on CSS and i wanted to clean it up now i am stumped again.
    the difference between firebird and IE is really confusing me.. now it looks great in firebird but the container is not centered in IE. the links are all dead right now because i am redoing the whole site.

    Also the middle hyperlinks, i was trying to figure out a good way to space them above the pics. They are spaced differently in IE and firebird also. Should I slice the banner pic into three pics and then put the hyperlink abover the pic?

    link
    http://answer1.ahiconsulting.com

    CSS
    http://answer1.ahiconsulting.com/A1.css

    Thanks in advance guys.. you rule

    A

  3. #3
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure of this but doesn't the HTML 4.01 Transitional DTD DOCTYPE leave IE in quirks mode still. In quirks mode IE6 doesn't do centering properly (and IE5.x never does).

    Try using the XHTML 1.0 Transitional DTD DOCTYPE (easily available by looking at the source for the site point forums page).

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I'm not sure of this but doesn't the HTML 4.01 Transitional DTD DOCTYPE leave IE in quirks mode still
    Nearly right!! It's leaving the uri off the doctype that puts it into quirks mode and IE will then use the broken box model and also not understand margin:auto (among other things).

    However, whether you use standards or quirks mode IE5 and 5.5. (and ie6 in quirks mode) don't understand margin:auto anyway so you need to fix this.

    Luckily we can exploit another ie bug that centres nested content. Text-align:center will not only centre text it will also centre nested content in IE. Therefore we can use this to apply centring for ie5 etc.

    The text-align:center needs to be in the parent so in AlexanderAZ 's page we can use the body.
    Code:
    body {
     margin: 0;
     padding: 0;
     text-align:center;
    }
    Then to combat the centring of the text which you may not want we use text-align:left in the container element.
    Code:
    #Container{
    margin: 40px auto auto;
    width: 740px;
    text-align:left;
    }
    This container element has margin auto which compliant browsers understand but will have no effect on ie 5 etc. The layout will now centre in all these browsers. That's all there is to it

    Your second problem with your services link not being in the same place in ie and mozilla is another ie bug (yes another one).

    On a float that is nearest the windows edge IE will double the margin on the side of the float that is closes to the window. This only happens on the outer floats and other floats are unaffected.

    The solution is to supply IE with its own margin (approximately half the size of other browers on this single element).

    Here we use the star selector to give the code only to IE (another bug).

    Code:
    H1.HistoryLink{
    margin: 0px 0px 0px 80px;
    font-size: 18pt;
    float: left;
    }
    *html h1.HistoryLink {margin-left:40px}
    So mozilla gets 80px and ie gets 40px which it then promptly doubles. This should even the display up.

    Lastly, as benanfa pointed out it is best to work in standards mode because ie6 will then use the correct box model. If you don't use standards mode and apply the box model hacks then ie5 and 5.5. will be correct (because they don't understand the hack) but ie6 will be wrong because it can't hide the code from itself.

    Even though IE6 has a broken box model it is fixed in more places than ie5 and 5.5. is and feeds itself back the wrong values.

    This is another valid reason for not using hacks as they often come back to bite you, but sometimes there is no other way.

    Hope that all makes sense.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Arizona
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow Paul thanks for your help. I understand the hack to text-align: center in the body. Makes sense to me. With how CSS handles inheritance.

    I didn't quite follow you on the second IE bug concering the margin doubling Should just not do the second hack then with the IE bug with the margin and just leave it the way it is?

    When you mean standars mode? you mean not using any hacks for IE? would the text-align: center: be considered a back then?

    is there a good thread with all the IE bugs discussed.


    Thanks again for pointing me in the right direction. Learning CSS layout is tricky to me right now, i am hoping it is worth it after doing a few more sites..

    Alex

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    When you mean standards mode? you mean not using any hacks for IE
    Standards mode is when you specify a doctype for your page and the browser goes into what is called standards mode. This means the browser will interpret the code according to standards and not to what it thinks fit.

    Without a doctype (or a doctype with no uri) IE will revert to quirks mode and will display things according to its own standards (i.e. not according to specs).

    Some people call quirks mode "this designer doesn't know what he's doing mode" but I think that's a bit harsh lol.

    For beginners quirks mode in ie often makes their sites display correctly even when they've used incorrect code and badly constructed mark-up. You may think this is a good thing but ultimately it leads to bad coding practices and unreadable code and (cross browser compatability goes out of the window).

    Therefore I advocate using standards mode (unless there is a good reason no to) as it will make it easier to make your pages more compatible with other browsers.

    When I'm designing a page I will check the layout in different browsers every step of the way. This makes it simple to spot any differences and find a solution before you build on an incompatability.

    CSS isn't that difficult if you are methodical in your approach. Don't build a page in ie then go and look in firebird and start crying because it doesn't display. You should check every new element in at least ie6, mozilla/firebird and opera7. If you can get these three to siplay correctly then it's likely your code is correct.

    Once you've got this working you can sort IE5 and 5.5. usually quite easily ( or good enough to go). If you design with the broken box model in mind you can avoid using the hacks by specifying padding and borders on inner elements and not on the same element that height and width has been specified.

    [quote
    I didn't quite follow you on the second IE bug concering the margin doubling Should just not do the second hack then with the IE bug with the margin and just leave it the way it is?
    [/quote]
    Use the code I gave you which will equal the display out. The hack will have no effect on other browsers.
    Code:
    H1.HistoryLink{margin: 0px 0px 0px 80px;font-size: 18pt;float: left;}*html h1.HistoryLink {margin-left:40px}
    Mozilla will get 80px for this element and ie will get 40px which it doubles in error.

    The margin bug only happens on floated elements when the element is next to the windows edge (or the element nearest the widows edge). If there is only one float in a line then that float will be affected on both sides. If there are two floats in a line the left margin of the left float will be affected and the right margin of the right float will be affected.

    If there are three floats in a line then the middle float will be unaffected.

    I know it sounds complicated but in practice it doesn't usually cause that many problems. I think its a problem in ie's margin algorithm because margins of floats are not collapsed unlike other elements and something goes wrong with the calculations.

    is there a good thread with all the IE bugs discussed.
    The best thing is to do a search and you will find more than enough info. Take a look at PIE (position is everything) for some good tips.

    CSS is worth it in the end even with all the anomalies. Stick with valid code and avoid too many hacks and your pages will fare better in the future and as browsers adopt and fix their code pages that didn't display befotre will start displaying better.

    Look at pages that didn't display in Opera6 but now display fine in opera7. If you'd put in hundreds of hacks for opera6 then you may well have a page that doesn't display in opera7.

    Hope you can make sense of all of that.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Arizona
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,
    For now on I will use
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    in the top of my page correct? instead of

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    When i started this page i was using DreamweaverMX2004 but promptly switched to just using Notepad,, went quicker.. Does dreamwear by default use
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    ?


    Thanks again.. i just got educated big time

    hahaha

    A


Bookmarks

Posting Permissions

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