What could be causing the layout to be different on Firefox but work fine on other browsers?
this:
http://validator.w3.org/check?uri=http%3A%2F%2Fsguawareness.com%2Fblog%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
invalid html code of often the cause for cross-browser inconsistency.
btw:
to me, it looks better in firefox3.6 than in IE7
background images do not resize with the current version of css;
there are some tricks available; do a websearch for ‘resize background image’
Is there anything in the CSS that could fix people having issues with it?
For example someone on a 1280×800 resolution laptop running Firefox 3.6 sees the blog like this: http://img833.imageshack.us/img833/1751/layoutjb.jpg
Have heard for some others on particular resolutions its worse.
Here is the 2 pieces of code that have been used for the position of the main area and the sidebar;
.item {
padding: 10px;
background-color: #FFFFFF;
background-image: url(/);
background-repeat: repeat;
text-align:left;
border: 0px #1A1A1A;
margin-bottom: 1em;
border: 0pt solid #000000;
width:608px;
position:relative;
bottom:18px;
left:25.7px;
color:#3F3F2F;
#secondary, #third{
background-color: #FFFFFF;
background-image: url(/);
background-repeat: repeat;
width:151px;
text-align:left;
padding: 5px 0px 0px;
border: 0px #1A1A1A;
SP_GRADIENT
position:relative;
bottom:18px;
right:25px;
}
Here is a link to my full CSS: http://tinypaste.com/a5a944
I have tried a few times to fix the issue but whenever I manage to fix the positioning on Firefox it messes it up on all the other browsers.
Is there any changes to the CSS you would make that should make the layout the same on all browsers?
i can’t help, because this is what i see on a 1280*800 laptop in firefox3.6: http://img41.imageshack.us/img41/7984/ff36.jpg
