Jump to content

Page Content not getting Center Aligned

anks

By anks
in CSS Help

 Share

Recommended Posts

anks Member

anks

Posted
Posted

Folks,

 

http://terrygoodkind.co.uk

 

CSS:

 

http://terrygoodkind.co.uk/themes/ocean/style.css

 

The body content and sidebar are left aligned, I want em to be Center aligned in both the browsers IE n FF.

 

 

Link to comment
Share on other sites
jacko310592 Regular Member

jacko310592

Posted
Posted

try setting a width to the main container (the div which holds the entire webpage-  if you haven’t got one yet, try adding one)

then add the following margin property to your CSS

 

#mainContainer {
  width: 950px;   /*Or whatever*/
  margin: 0 auto  /*Centres div#mainContainer*/
}

 

then put this doctype at the top of your HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

..a valid doctype is mainly required by IE

Link to comment
Share on other sites
anks Member

anks

Posted
  • Author
Posted

try setting a width to the main container (the div which holds the entire webpage-  if you haven’t got one yet, try adding one)

then add the following margin property to your CSS

 

#mainContainer {
  width: 950px;   /*Or whatever*/
  margin: 0 auto  /*Centres div#mainContainer*/
}

 

then put this doctype at the top of your HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

..a valid doctype is mainly required by IE

 

Dear Jacko,

 

As you asked, i have added, may you have a look at site, post adding those codes:

 

Open in Firefox:

 

http://terrygoodkind.co.uk/

 

Observe the Not so good looking "Shop All Departments" Links, which are overlapping wiht the Post Content.

 

Any solution for that?

 

 

2- Open the site in IE and you can see that Content is Still Left Aligned.

 

Best Regards,

Anks

 

Link to comment
Share on other sites
jacko310592 Regular Member

jacko310592

Posted
Posted

your left align problem in IE is coming from javascript (niftycube.js), something to do with the javascript in there seems to be overriding the CSS property of margin: 0 auto.

 

what is this javascript for? is it needed?

 

 

with the department links:

  firstly, you need to put a <ul> </ul> around the <li>'s to make it valid HTML

  secondly, you could add some padding or a margin to move them away from the side.

 

eg:

HTML:
<ul id="departments">
   <li><a href='paintball-guns-for-beginners.htm'>Paintball Guns For Beginners</a></li>
   <li><a href='paintball-hose-line.htm'>Paintball Hose Line</a></li><li><a href='paintball-hopper-300.htm'>Paintball Hopper 300</a></li>
   (etc etc..)
</ul>

CSS:
#departments {
  margin: 0 10px;    /*Or what ever amount needed*/
}

 

regards

Link to comment
Share on other sites
anks Member

anks

Posted
  • Author
Posted

your left align problem in IE is coming from javascript (niftycube.js), something to do with the javascript in there seems to be overriding the CSS property of margin: 0 auto.

 

what is this javascript for? is it needed?

 

 

with the department links:

  firstly, you need to put a <ul> </ul> around the <li>'s to make it valid HTML

  secondly, you could add some padding or a margin to move them away from the side.

 

eg:

HTML:
<ul id="departments">
   <li><a href='paintball-guns-for-beginners.htm'>Paintball Guns For Beginners</a></li>
   <li><a href='paintball-hose-line.htm'>Paintball Hose Line</a></li><li><a href='paintball-hopper-300.htm'>Paintball Hopper 300</a></li>
   (etc etc..)
</ul>

CSS:
#departments {
  margin: 0 10px;    /*Or what ever amount needed*/
}

 

regards

 

I have renamed the niftycubes.js so that it can not be called, it seems still in IE its LEft aligned.

 

But, accept my sincere Thanks!!!  8)

Link to comment
Share on other sites
jacko310592 Regular Member

jacko310592

Posted
Posted

how strange, i did the same thing, but it stopped being left aligned for me

 

just to make sure, try removing all javascript to see if it starts being centred.

if it then works, one by one add the scripts back to see which is causing the problem.

 

just about to have my tea now, but ill also have a deeper look into this once im back (:

Link to comment
Share on other sites
jacko310592 Regular Member

jacko310592

Posted
Posted

unfortunately, after looking some more, the only problem i can find is with the 'niftycube.js' javascript; once i removed that from the test area (renamed it) it worked fine for me in IE (tested on IE8 + IE7)

 

sorry i couldnt be anymore help

 

best regards

Link to comment
Share on other sites
anks Member

anks

Posted
  • Author
Posted

Jacko,

 

Appreciate your reply.

 

Will try to remove the JS and retest.

 

One more thing,

 

http://terrygoodkind.co.uk/index.php?page=about

 

It slides down the Sidebar, any way that sidebar does not fall down?  :D

 

Hope you have a wonderful tea!!!

 

Link to comment
Share on other sites
anks Member

anks

Posted
  • Author
Posted

hmm, you could try adding to your CSS:

#footer {
  clear: both;
}

 

and thank you (:

 

 

Ok, as you asked, i added this code in existing #footer

 

#footer {

text-align: center;

padding: 0px 20px 27px 21px;

margin-top: 60px;



border-top-width: thin;

border-right-width: thin;

border-bottom-width: thin;

border-left-width: thin;

border-top-style: double;

border-top-color: #666;

border-right-color: #666;

border-bottom-color: #666;

border-left-color: #666;

clear: both;

}

 

 

Still.... No Luck..

 

http://terrygoodkind.co.uk/index.php?page=about

 

Rgrds

Link to comment
Share on other sites
anks Member

anks

Posted
  • Author
Posted

Ops..... IE if driving me Crazy..... IE should be Forbidden..  lol

 

Its looks so bad now in IE....

 

http://terrygoodkind.co.uk/index.php?kw=Paintball&p1=TIPPMANN-Low-Profile-Bulk-Cyclone-Hopper&p2=B000X04RJM

 

While it looks fine in FF... What the heck is going wrong?

 

Jacko, can you help please?

 

 

Link to comment
Share on other sites
jacko310592 Regular Member

jacko310592

Posted
Posted

it seems i cannot really help you anymore than i can..

 

once i copied your HTML and CSS documents to my local dir, all i had to do to get the page to display correctly within IE was to ad the following doctype to the very top of the HTML doc:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and remove that javascript file i said about before;  then for me,  it looked just like in FF.. (appart from in every other browser appart from IE, there is a broken HTML comment which shows up at the top of the page, which says  "TAGLINE")

 

sorry i couldnt be anymore help anks, hope you get it looking right as you want it soon  ;)

Link to comment
Share on other sites
anks Member

anks

Posted
  • Author
Posted

it seems i cannot really help you anymore than i can..

 

once i copied your HTML and CSS documents to my local dir, all i had to do to get the page to display correctly within IE was to ad the following doctype to the very top of the HTML doc:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and remove that javascript file i said about before;  then for me,  it looked just like in FF.. (appart from in every other browser appart from IE, there is a broken HTML comment which shows up at the top of the page, which says  "TAGLINE")

 

sorry i couldnt be anymore help anks, hope you get it looking right as you want it soon  ;)

 

 

Dear Jacko,

 

Thanks for the good words!

 

I have added the DOCTYPE code and removed the JS you mentioned (Niftycubes.js).

 

Seems like, IE is not happy with me, in person.  :D and its too stubborn to work as required. lol

 

I am PMing you the index.php for a quick look..

 

Best Rgrds,

Anks

Link to comment
Share on other sites
anks Member

anks

Posted
  • Author
Posted

it seems i cannot really help you anymore than i can..

 

once i copied your HTML and CSS documents to my local dir, all i had to do to get the page to display correctly within IE was to ad the following doctype to the very top of the HTML doc:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and remove that javascript file i said about before;  then for me,  it looked just like in FF.. (appart from in every other browser appart from IE, there is a broken HTML comment which shows up at the top of the page, which says  "TAGLINE")

 

sorry i couldnt be anymore help anks, hope you get it looking right as you want it soon  ;)

 

The index.php does not cosist only HTML Tags but PHP codes as well, which is why i PMed you the index.php Codes.

 

Another thing is, i can live up with the Left alignment of page in IE, but the right sidebar is sliding at the bottom in IE and works fine in FF.

 

Open in IE:

http://terrygoodkind.co.uk/index.php?kw=Paintball&p1=Paintball-Xtreme-Rage-Xray-Single-Lens-Anti-Fog-Mask&p2=B0014UWJJ0

 

Thanks Jacko!!!

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.