Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

centering webpage

Posted on 2011-09-18
22
Medium Priority
?
258 Views
Last Modified: 2012-05-12
A client is having problems getting part of their webpage to center in Firefox and IE9. The domain is www.kloomis.com - The top section is on the left and the body is centered. They want the whole page centered. Could you look at the code and see what's beeing missed. I believe it was designed using frontpage.
0
Comment
Question by:cnmgt
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
  • 4
  • +2
22 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36558203
you have given margin-left for below div a 241px, but not for table above (which is the header)

please give the margin-left:241px for table as well.

table
{
  margin-left:241px;
}
0
 

Author Comment

by:cnmgt
ID: 36558216
I don't see it in the div tag, what line is it on? Is this what it should look like.

<table
{
  margin-left:241px;
} width="780" height="25" cellspacing="0" cellpadding="0">
0
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 2000 total points
ID: 36558217
You have two <body> tags, the second one should be moved up to replace the first one.   Then <div id="mainbody" style="width: 780px"> should be moved up to right after the <body> tag.
0
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36558223
i mean add that style to the css.
table
{
  margin-left:241px;
}

looks like you have never touched css and html before...lolz
0
 

Author Comment

by:cnmgt
ID: 36558227
Please tell me what line numbe the body tags are on. I only see one at line 99
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36558230
or you can even update the line number 103 as

<table width="780" height="25" cellspacing="0" cellpadding="0" style="margin-left:241px">
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36558231
Line 99 and 101.  The one at 101 needs to move up and replace the one at 99.  Yes, all of this is a body tag with attributes and javascript added:

<body style="text-align:center;" onload="FP_preloadImgs(/*url*/'original%20html/psd/index-b/banner03.gif', /*url*/'original%20html/psd/index-b/banner04.gif', /*url*/'original%20html/psd/index-b/banner05.gif', /*url*/'original%20html/psd/index-b/banner06.gif', /*url*/'original%20html/psd/index-b/banner07.gif', /*url*/'original%20html/psd/index-b/banner08.gif')">
0
 

Author Comment

by:cnmgt
ID: 36558235
Gurvinder I added that text to the index page and in IE8 it's on teh right and IE9 & Firefox it's on the left
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36558237
let me have a look at the link itself here. Have you updated the code there also?
0
 
LVL 1

Expert Comment

by:aswinandaswin
ID: 36558239
Hi i checked the HTML source and css thoroughly. All you need is to modify two css class which makes the magic.

body{
      padding:0; margin:0; background:#8F9370;
      margin-left:242Px;
      }
#mainbody{
      width:823px; background:#D5D8BB;
}
0
 

Author Comment

by:cnmgt
ID: 36558240
0
 

Author Comment

by:cnmgt
ID: 36558242
I'll try Dave
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36558244
I don't see margin-left style updated for table there. did you tried my suggestion #36558230?
0
 

Author Comment

by:cnmgt
ID: 36558251
I put it back, try now. Also Dave moving 101 to 99 didn't work
0
 

Author Comment

by:cnmgt
ID: 36558288
any ideas?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36558295
Okay, it comes on IE8 and chrome too, but not on FF
instead try this

<table width="780" height="25" cellspacing="0" cellpadding="0" style="position:absolute;left:241px">

0
 

Expert Comment

by:savsoft
ID: 36558313
just give margin-left in style then it will work fine......
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36558321
<<just give margin-left in style then it will work fine......>>
@savsoft: I have suggested that already in #36558230, but it didn't work for FF.

0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 36558466
The overall div needed to be moved so that all of the elements would move together when the page is resized.  Putting the left-margin on one element causes it to not reposition with the rest when the page is resized.  An edited version is attached.  @cnmgt, try this version.
Kurtis-Loomis.html
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36558472
One other thing, putting the "Revisit-After" is ignored by Google and the other search engines.  They get around to you on their schedule which isn't nearly so often.  If your content never changes, then they will only look at your site every few months.
0
 

Author Comment

by:cnmgt
ID: 36569732
I'll try the changes above shortly. As of right now it appears to align right if the screen is maximized, but it's offset if the screen is minimized.
0
 

Author Comment

by:cnmgt
ID: 36571340
I've made the changes and I'm testing now.
0

Featured Post

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question