By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,960 Members | 990 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,960 IT Pros & Developers. It's quick & easy.

div positioning - firefox/ie

P: 4
hi everyone

i got into the old browser compatability issues because i wanted to make my site centred. now i dont know a great deal about html and css to be quite honest but i found what i needed from the iternet and got the page centred in explorer. but there are some pretty big differences when the site is viewed in firefox.

ok so here is the website not centred: www.princelee.co.uk/gecko
and here is my centred messy version: www.princelee.co.uk/gecko/central

to make it central i went from absolute div positioning to relative and then changed the left value to 50% and altered a margin-left value accordingly.

there now appears to be two problems...
1) the width of the div layers increase by about 15 pixels in firefox.
2) the background colour of the navigation pane stops halfway through in firefox

any help would be appreciated
thanks
james
Nov 2 '06 #1
Share this Question
Share on Google+
8 Replies


dswethar
P: 65
hi everyone

i got into the old browser compatability issues because i wanted to make my site centred. now i dont know a great deal about html and css to be quite honest but i found what i needed from the iternet and got the page centred in explorer. but there are some pretty big differences when the site is viewed in firefox.

ok so here is the website not centred: www.princelee.co.uk/gecko
and here is my centred messy version: www.princelee.co.uk/gecko/central

to make it central i went from absolute div positioning to relative and then changed the left value to 50% and altered a margin-left value accordingly.

there now appears to be two problems...
1) the width of the div layers increase by about 15 pixels in firefox.
2) the background colour of the navigation pane stops halfway through in firefox

any help would be appreciated
thanks
james
Hi James,

You can try this:
body
{
text-align:center;
margin:0px;
padding:0px;
width:100%
}

div
{
text-align:left;
margin:10px auto;
width:780px;
}

I've tried this, it worked for me. Please let me know if it did not work for you.
Nov 2 '06 #2

drhowarddrfine
Expert 5K+
P: 7,435
First quick observations:
Browsers use their own default margins and padding on some elements so it is always better to set all to zero and set each element to what you want as needed.

Most of your problems now and later are caused by IE. IE incorrectly expands divs to enclose absolutely positioned and floated elements. This is a bug in IE. Firefox and all other browsers are performing correctly. To get modern browsers to enclose the elements, add overflow:auto; to the css of the containing element.

You are not using a doctype. Without one, IE goes into quirks mode and doesn't attempt to perform like modern browsers do. Add this to your first line:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

IE will now work in standards mode, as any other browser would normally do, but may change what you have now, unfortunately. This is why we professional coders never test using IE until we get it working in Firefox or Opera first.

You should also validate your html and css and correct any errors there.
Nov 2 '06 #3

P: 4
First quick observations:
Browsers use their own default margins and padding on some elements so it is always better to set all to zero and set each element to what you want as needed.

Most of your problems now and later are caused by IE. IE incorrectly expands divs to enclose absolutely positioned and floated elements. This is a bug in IE. Firefox and all other browsers are performing correctly. To get modern browsers to enclose the elements, add overflow:auto; to the css of the containing element.

You are not using a doctype. Without one, IE goes into quirks mode and doesn't attempt to perform like modern browsers do. Add this to your first line:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

IE will now work in standards mode, as any other browser would normally do, but may change what you have now, unfortunately. This is why we professional coders never test using IE until we get it working in Firefox or Opera first.

You should also validate your html and css and correct any errors there.

ok so i tried the doctype thing and you were right it caused loads of changes. if this was an important site or going to be visited loads then maybe i would use that but for now im going to leave it as it is i.e. with no doctype.

i hope you can still help me even if i dont do this??

i only have one problem now....and that is that ie and firefox read the div widths differently.
so i want ie to see the main panel div width as 517 and the navigation panel as 230
and i want firefox to have the main panel as 497 and the navigation panel as 210

is there any sort of quick cheaty way to get the two to read this value differently??

thanks
Nov 3 '06 #4

drhowarddrfine
Expert 5K+
P: 7,435
They don't read them differently. You are now seeing IEs broken 'box model' which is one of the reasons IE is the worst browser on the planet. It is why it's called 'quirks mode' and is created by the lack of a doctype.

I know of no way around this except, perhaps, "conditional comments" which allow you to target IE with one set of values but I'm not sure you can make IE ignore the values given to other browsers. You'll have to google for that.
Nov 3 '06 #5

Expert 100+
P: 1,892
You need to use a DOCTYPE in your (X)HTML pages
Nov 3 '06 #6

P: 4
You need to use a DOCTYPE in your (X)HTML pages
ok ok i am using a doctype

here is the doctype version: www.princelee.co.uk/gecko/doctype

and now its a complete mess in both browsers. can anyone help me sort this layout

i have 7 div layers setup

one for the banner,
one for the image just below the banner
one for the main panel
one for the navigation panel
one for the curved bottom under the main panel
one for the curved bottom under the navgation panel

it all worked smoothly when i had it left aligned. all i want to do is have it centred.
any ideas???
Nov 3 '06 #7

drhowarddrfine
Expert 5K+
P: 7,435
Now that all browsers are using the same set of 'rules' (the doctype), you can start on all the errors in your html and css I mentioned earlier. Validate for both to find your errors. You are using a lot of deprecated code. You can't expect browsers to work with invalid pages.

Don't worry about the 'alt' errors for now. And your invalid, IE-only, scroll bar stuff can be ignored, too.

I'm going out of town and won't be back for at least three days.
Nov 3 '06 #8

P: 4
Now that all browsers are using the same set of 'rules' (the doctype), you can start on all the errors in your html and css I mentioned earlier. Validate for both to find your errors. You are using a lot of deprecated code. You can't expect browsers to work with invalid pages.

Don't worry about the 'alt' errors for now. And your invalid, IE-only, scroll bar stuff can be ignored, too.

I'm going out of town and won't be back for at least three days.
ok i'm on it
thanks for the help
Nov 5 '06 #9

Post your reply

Sign in to post your reply or Sign up for a free account.