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.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question IE=OK, FFOX=bad - adjascent divs, fixed width, center alignment, possible?

    I hate cookies... typed whole post; "please log in"; *logged in*; error; back button; post gone.

    Gah! I'll haver to write it all out again I suppose -.-, so here it goes:

    Hi, I'm reletively new to css, and html without tables. I created a layout that works on IE but not in Firefox (oh firefox how we love thee </sarcasm>).
    My whole page layout could be so easy with tables, it would simply be:
    Code:
    <table align='center' width='700'>
    <tr><td width='100%' height='50' colspan='2'> Banner </td></tr><tr>
    <tr><td width='100%' colspan='2'> Header </td></tr><tr>
    <tr><td width='200' height='400'> Sidebar </td> <td width='500' height='400'> Main </td></tr>
    <tr><td width='100%' colspan='2'> Footer </td></tr>
    </table>
    Of course, that's hugely simplified, but you can see the general idea. The page(s) I'm reffering to are here and the CSS file is here for refference.

    The thing is, it worked in IE but not in firefox, however I'm told that infact Firefox shows it properly and IE is wrong, but because my code is wrong aswell, and two wrongs make a right, it works in IE, or such.

    So my question is possibly quite a frequently asked on:
    Is it possible to have two adjascent boxes (DIVs or SPANs) with fixed, different widths, but togeather are centrally aligned on a webpage?
    IE, can I make the above table layout with just CSS and no tables?

    Many thanks for anyone who can help,
    Rich.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Sure it is. But something you probably haven't realized yet is padding DOES count for overall width and height. If you use this for your .page CSS the content moves next to the nav.
    Code:
    .page {
             height:445;
             width:553px;
             padding-left:4px;
             padding-right:4px;
             font-family:Arial, Helvetica, sans-serif;
             font-size:12px;
             color:58789F;
             position:relative;
             float:left; 
             margin-left:5px;
             display:inline;}
    Your HTML is a bit bad. Add this in between your head tags
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    then validate your page at this site http://validator.w3.org it will tell you all of your coding errors. Word of advice. If you page looks right in IE but not FF good chance your code is wrong some how. Firefox for the most part displays what you code. IE displays what it thinks you want to see.
    Last edited by _Aerospace_Eng_; 04-30-2006 at 04:46 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    In addition, without a proper doctype, you will never get IE to display the same as modern browsers. See my link below. Use html4 strict.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    With regards to the character encoding, your page is being displayed by default as UTF-8 which is incompatible with several characters as demonstrated by a page validation (default UTF-8):

    Regard&#233; and clich&#233;: small letter e with acute
    &#169;: copyright sign

    Both Internet Explorer and Firefox, using an encoding auto-detect feature (if it's enabled), are able to change the encoding to whatever they see fit since you haven't specified one, hence why the characters appear correctly. IE6 displays as Western European (Windows) and Firefox 1.5 as Western (Windows-1252). You can see the problem with the characters not displaying correctly in either browser if they're served as UTF-8 by changing the encoding settings:

    Firefox: View > Character Encoding (displays question marks)
    Internet Explorer: View > Encoding (displays Asian characters)

    So you need to fix that problem; Aerospace's content-type meta tag, provided above, should do the trick. To show what errors your page has, I went ahead and overrode the default settings; the errors are are shown in this page validation (ISO-8859-1). If you want to be even safer, you can encode your characters using character entities as listed on Wikipedia.

    And yes, you also need to add a Document Type Declaration (DTD) as mentioned since your page is being displayed in quirks mode in both browsers without one; this means that your code will be unpredictable and make it difficult to create cross-browser compatible pages. For a look at what DTDs initiate which modes, you can take a look at the table on the page Activating the Right Layout Mode Using a DTD.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, brilliant, thanks.
    You were right, I had assumed that padding didn't affect overall dimensions. Whoops!
    I guess it'll be something similar to why the header and footer text are in a strang place, I'll have a go at it myself and post again if I can't make it work.

    Thanks for you help guys!
    -Rich.

    EDIT: Excuse me while my brain slowly frazzles Arbitrator... I think I sort of understand, but like I said, I'm a little new to this... so, I haven't specified an encoding type, so both IE and Firefox are guessing, as it were. So I need to specify character encoding. Also, I take it I should follow steps in the page validation, and then it should work correct? Right, I'll give it a go, thanks.

    EDIT2: most of the errors target the >s is that because I should use /> instead? so <br /> instead of <br> ?
    Last edited by noodles355; 04-30-2006 at 09:00 PM.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Heh, that's called the CSS box model; width specifications only covers the width of the content area, not padding, borders, or margins.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for reviving an old topic, but it's easier for me to have everything in one place and it's nice to have the past problems as refference.

    Ok, so I ran the page through, did all that was needed to make it nice, it's now strict xhtml 1.0, and both the page and the css file have been validated.

    The problem now lies in internet explorer not displaying it properly. It turns up in firefox looking just how I wanted it, but not in IE anymore? Is there anything I can do?

    The page in concern is: here
    and the css file for the page is: here

    Thanks again guys!


  •  

    Posting Permissions

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