I have redesigned my site http://www.financenewstoday.com. I have not fully rolled out the changes yet, only done so on a few pages. During the rollout I just found out the positioning on my CSS appears to be functioning fine in IE but is not doing the same in Firefox. Here is the link to the CSS file http://www.financenewstoday.com/css/teststyle.css
I will try that. Here are some other issues: 1) Footer Bar: The bar is showing at the top and links at the bottom. 2) In the center of the page, the left and right columns are overlapping the yellow box. The div id for the yellowish box is "insider" 3) Page is centered in IE but not in Firefox
Forget my previous catch. Navigation actually belongs to the bar and not the leftnav menu. Question - why do you have tables? CSS layers are like boxes. Imagine yourself having boxes inside boxes. Create an outer box (like a table) - this should be your container Create boxes for your header part (rows and columns) Create a box for your header bar Create a large box for (Leftnav, content, rightnav) Create a box for your footer bar Encapsulate above 4 in the outer box. IE is bit lenient when it comes to displaying HTML / CSS. You might have to do lot of playing - I will look at it later this evening to fix your code.
I had a non table version and a table version. The table version was the only one I could get to not overlap. I will reload the non table version for you to view. I have the following: #container (my outer box) Then all of these are in the container #header (my Logo and date code) #navigation (my top navigation bar) #content (the main content of the page) Within the #content I have #left and #right (floats for the two columns), #insider (yellow box), #titlebar (the dark blue bar, #titlebar2 (text under blue bar), etc. - See below note #sidenav (Left navigation bar) #foot-navigation (Footer bar) #foot-text (text under footer) For some reason in the content tags I have the 2 floating boxes #left and #right but they are overlapping the #insider box. Also the #foot-navigation is overlapping at the top as well but the text is at the bottom of the page. I also want #container to center in the page. It does so in IE but not in Firefox
Also just to let you know, the page template is setup like so: <?php include('inc/header.homepage.php'); ?> (#header info) <?php include('inc/top.nav.bar.php'); ?> (#navigation - Top navigation bar) <?php include('inc/home-page.php'); ?> (#content info) <?php include('inc/left.nav.bar.php'); ?> (#sidenav - Left navigation bar) <?php include('inc/footer.bar.php'); ?> (#foot-navigation and #foot-text info) I did it this way so I could move the text up higher in the code
I'd be tempted to make a new div in the css and call it content or something. Give it the attribute align=center then put it after the <body> tag and before the </body> tag, that will put all of the stuff in your website and align everything to the centre by default. You can then adjust the alignments if the individual things.