Jump to content
Sign in to follow this  
lilmiss2die4

Fixed Width with CSS

Recommended Posts

It is driving me insane....I feel like I can't move on until I figure it out.

 

Also...If you look at the main text there seems to be alot of white space where the right column usually is.

 

Please!!!!!!!

Share this post


Link to post
Share on other sites
It is driving me insane....I feel like I can't move on until I figure it out.

Also...If you look at the main text there seems to be alot of white space where the right column usually is.

Please!!!!!!!

Differences between browsers is a big pain!

I centered a site recently after looking hard on the web for a similar fix to the problem between browsers.

You could try replacing your buggy CSS with the following... :)

 

body {
 background: #ffffff;
 background-image: url('images/back.jpg');
 color: #000000;
 margin: 0px;
}

#fixcenter {
 width: 958px;
 padding: 0px 0px 0px 0px;  /* top, right, bottom, left */
 margin-top: 20px;
 margin-right: auto;
 margin-bottom: 20px;
 margin-left: auto;
 border: 1px solid #000000;
 /* ie5win fudge begins */
 width: 958px; /* add padding right and left to this value */
 voice-family: "\"}\"";
 voice-family: inherit;
 width: 958px;
}

html>body #fixcenter {
 width: 958px;
 /* ie5win fudge ends */
}

I.e. Replace everything from your line starting "BODY {" down to (but not including) the line starting "A {" in your stylesheet.css file.

 

I don't thoroughly understand the fudge, but it seems to work. Notice that there are text-align statements in the CSS for centering.

I've put the padding statements in the above example because I use padding of 8px on my other site (not osCommerce), but for padding of 0px then probably some of the width adjustments for the IE fudge could be removed. Anyway, it's a start for you to play with that might fix your problem.

 

Cheers,

Failsafe

Edited by failsafe

Share this post


Link to post
Share on other sites

I obviously meant to say "Notice that there are no text-align statements in the CSS for centering". :)

Share this post


Link to post
Share on other sites

Thank you so much for replying

 

I wasn't able to fix with the code suggestion you gave me or by taking out the text-align code but I played with it for about 2 hours just trying different things and here is the code that didn't make it perfect but it helped considerably. I hope this helps anyone else having this trouble.

 

BODY {
 text-align: center;
background: #ffffff;
background-image:url('images/back.jpg');
 color: #000000;
 margin: 0px;
}

with:
-----

BODY {
 text-align: center;
background: #ffffff;
 color: #000000;
 margin: 0px;
}

.fixcenter {
 width: 958px;
 border: solid; border-width: 0px;
 background: #ffffff;
 color: #000000;
margin-auto;
 margin-top: 20px;
margin-bottom: 40px;
margin-left: 60px;
margin-left: auto;
margin-right: 20px;
margin-right: auto;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×