Problems In Firefox but not IE

[misty16]

Hello,

These problems may have been posted before but if you could please point me in the right direction to where I can fix these 2 problems.

All appears fine in IE... In Firefox my website is to the right (where in IE it is Perfect) how would I center this? I know it would be a CSS problem any clue on the right code to use and where to use it?

Also if you click on the Log in section the background changes to a darker colour. How do I get this back to white. Again this would be another CSS problem.

If you could please check out my site in both IE and Firefox so you will know what I mean.

http://www.bizzybecscardmakingscrapbooking.com.au

[Website Rob]

Whenever you have these type problems it is always best to run your code thru a Validator.

http://validator.w3.org - make sure select "Show Source" as well.

You have some coding errors which is why your site appears as it does.
Also, the input boxes on the right (Login) are too wide. They need to be shorter.

[misty16]

Thank you for your reply. I will run it through that validator..

Also you had about the input boxes. Where abouts do I go to change these and what is it good to be set at?

[Website Rob]

Off the top of my head I would 16px - 18px wide should be enough.

Whatever you use will show about 1/3 wider on Mac / Safari which is something to remember.

[rstevenson]

Whatever you use will show about 1/3 wider on Mac / Safari which is something to remember.

Hi Rob,

I just did some tests here. I have a rare environment. I can run Win XP inside a window on my Mac, so I can compare on the same size screen (with of course the same pixel density) both Mac and Windows browsers. And I have a widget which allows me to measure the pixel dimensions of anything on screen. I just checked the log-in screen of my retail site (below), the password field in particular. The widths are...
XP Firefox - 271 px
XP IE 7 - 271 px
Mac OS X Firefox - 301 px
Mac Safari - 267 px
Mac Opera - 304 px

Hope this clarifies and reassures you about what people using Macs actually see.

Rob

[misty16]

I just wanted to post as I have worked out the issue after sitting here for 6 hours. Below are the settings that helped fix my issue. I hope it helps someone else.

To center the website in FireFox In the CSS Style Sheet_New around line 322

I took out the Auto and replaced it with 0em.. That centered it right away.

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: 0em;

I also worked on these sections, this is what I have there now..

body {
margin: 0px;
font-family: verdana, arial, helvetica, sans-serif;
/*font-size: 62.5%;*/
color: #;
background-color: #498992;
}


Also the Main Wrapper sections this is what I have there...

#mainWrapper {
background-color: #cad791;
text-align: left;
width: 500px;
vertical-align: top;
border: 1px solid #cad791;
margin-left: 0.5em;
margin-right: 0.5em;
}

FIELDSET {
padding: 0.4em;
margin: 0.5em 0em;
border: 1px solid #498992;



I had done the same with the Stylesheet_Original.css

BODY {
background-color: #cad791;
color: #;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 8px;
font: 12px Verdana, Arial, sans-serif;
}
.centershop {
padding: 0px;
margin: 1px auto;
background-color: #ffffff;
color: #;
border-bottom: 0px solid #ffffff;
/*position: relative;*/
text-align: left;
width: 700px !important;


I am so happy I have fixed it. I really hope that this helps someone else. Make sure you make backups of the files first before changing anything. That way you can always upload the original file again and start again till you get it right.