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

noodles355 · 04-30-2006, 04:33 PM

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.

_Aerospace_Eng_ · 04-30-2006, 04:39 PM

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.

drhowarddrfine · 04-30-2006, 05:07 PM

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.

Arbitrator · 04-30-2006, 08:23 PM

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é and cliché: small letter e with acute
©: 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.

noodles355 · 04-30-2006, 08:24 PM

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

Arbitrator · 04-30-2006, 08:29 PM

Heh, that's called the CSS box model; width specifications only covers the width of the content area, not padding, borders, or margins.

noodles355 · 05-06-2006, 02:55 PM

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!