Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

I Cant's center my store in Iexplorer and Firefox


johnduo0007

Recommended Posts

Im trying to center a page but I can't get firefox browswer to center my page?

I have this in my css:

 

body

{

text-align: center;

}

 

.layout_index

{

margin-left: auto;

margin-right: auto;

text-align: left;

width: 50em;

}

 

 

It centers it good on IE but on Firefox is all the way to the right.

 

If I remove the "width:50em" it centers in Firefox but not in IE.

 

I have been trying to figure this out all day but I can't.

Link to comment
Share on other sites

As far as I can tell (and I'm by no means a CSS "expert"), "width" isn't an allowable property.

 

Look here:

 

CSS Margin

 

That would explain Firefox's bad attitude towrds it.

:lol:

If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you.

 

"Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice."

- Me -

 

"Headers already sent" - The definitive help

 

"Cannot redeclare ..." - How to find/fix it

 

SSL Implementation Help

 

Like this post? "Like" it again over there >

Link to comment
Share on other sites

.layout_index

{

margin-left: auto;

margin-right: auto;

text-align: left;

width: 50em;

}

 

i'm no css expert either, but i see a couple things that might be causing your grief: your body has text-align: center, but the layout_index class has text-align: left. ff is probably taking the property defined by the class before using the body's property. this is assuming that the text you're trying to get centered is inside a class='layout_index' area. also, the margin-left and margin-right properties might be confusing it. i've never tried setting both to auto before so i don't know what the behavior would be. i'd try removing those, along with the text-align: property and see where that gets you. or change the text-align: to 'center'.

 

oh, and width: is a valid property...so is height: for that matter. :)

Link to comment
Share on other sites

Ok…Width and height are both valid properties in CSS2. Height however is unnecessary in most cases and can be omitted. I'm not quite sure now, but I think height is not a valid property if used as part of HTML.

 

It is impossible to tell with a 100% certainty what is causing John’s issue just by looking at body style and one class. There are many more factors to be considered. The body class in CSS determines how a plain unformatted page <BODY></BODY> should behave and text-align: center; will simply change this behaviour from default left align to center align. Any class with a different align will override that setting.

 

Here is how a proper CSS stylesheet should begin to make IE and other browsers behave in almost the same way. Obviously, you will have to adjust and maybe even omit the font and left properties to achieve your desired outcome, but the general idea is the same:

body, body * {
position: relative;
left:0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: "Trebuchet MS","Times New Roman",Times,serif;
font-size:14px;
background-repeat: repeat-x;
}

Note, this is still not going to resolve all IE CSS issues, so workarounds and IE hacks may be needed to resolve them. B)

Link to comment
Share on other sites

This is how I did it.

 

Use a text editor with an extended search and replace function.

Search and replace every file in the the catalog folder.

You dont' need to do the files in the sub directories.

 

search for:

<!-- header_eof //-->

 

and replace with :

<!-- header_eof //-->
<div id="container">

 

Then

 

Search for:

<!-- footer //-->

 

and replace with:

</div>
<!-- footer //-->

 

Then add this to catalog/stylesheet.css

You can change the width to whatever you want.

 

#container {
text-align:left;
margin: 0 auto 0 auto; 
padding:0;
width:748px;
background: #FFFFFF;
border:solid black;
border-width:0 1px 1px 1px;
}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...