Page 1 of 1

css rendering different in IE/FF

Posted: Tue Jan 20, 2009 12:15 pm
by Xanthouos
Probably the most common or problems... looks different in FF/IE :cry:

I'm working on top of the bulletproof theme, customizing it to suit a project need.
I added a div for an extra BG image across the top of the page. Then 2 separate images at the top of each sidebar, which should line up with the top BG image.
The problem is either they line up in IE or FF, but not both with the same definition.
Currently I don't have it online, but I might have to in order for someone to debug :-D
I'll post the css and a screenshot, to see if it makes sense to anyone. :)

Code: Select all

#serendipityLeftSideBar{
	background: url(img/tfi/sil-left.gif) no-repeat;
    padding-top: 220px;
	margin-top: 7px;
}

#serendipityLeftSideBarRight,
#serendipityLeftSideBarLeft,
#content{
	background: #fff ;
	margin-top: 7px;
}
#serendipitySideBarContent_header{
    padding-top: 40px;
	background: #fff url(img/tfi/maptop.gif) no-repeat;
	margin-top: 0px;
	}

#serendipityRightSideBar {
	background: url(img/tfi/sil-right.gif) no-repeat;
    padding-top: 220px;
	margin-top: 7px;
}
Image

Re: css rendering different in IE/FF

Posted: Tue Jan 20, 2009 12:19 pm
by yellowled
Xanthouos wrote:PCurrently I don't have it online, but I might have to in order for someone to debug :-D
Yes, please.

YL

Re: css rendering different in IE/FF

Posted: Tue Jan 20, 2009 2:14 pm
by Xanthouos
yellowled wrote:
Xanthouos wrote:PCurrently I don't have it online, but I might have to in order for someone to debug :-D
Yes, please.

YL
OK, here it is: http://support.diefamilie.org/
Thank you for having a look. :-)

Re: css rendering different in IE/FF

Posted: Tue Jan 20, 2009 2:50 pm
by yellowled
Xanthouos wrote:Thank you for having a look. :-)
Hmmm. I see your problem, but it's kind of hard to tackle. Maybe I just don't have the patience to concentrate on this right now. I'll take a look at it later (praying that Don will have solved this in the meantime :wink:).

Rule of thumb, however, is to make sure it works in standards compliant browsers and then maybe add additional IE fixes to the IE-specific stylesheets in BP.

YL

Re: css rendering different in IE/FF

Posted: Tue Jan 20, 2009 2:59 pm
by Xanthouos
yellowled wrote:
Xanthouos wrote: Rule of thumb, however, is to make sure it works in standards compliant browsers and then maybe add additional IE fixes to the IE-specific stylesheets in BP.

YL
What exactly would that be? Some time back I made some changes to another template, trying to accomplish the same thing, and was doing all the previews in FF. The at the end, I happened to remember that some (a lot of unfortunate souls ), us another browser.....

Anyway, it's a simple matter of changing "margin-top: 7px;" to "margin-top: 5px; "
and then it looks great in FF....
So I don't know who to cater to..... :roll:


....and I just noticed that in Chrome it's fudged too.... but I guess I won't worry about that

Posted: Tue Jan 20, 2009 3:00 pm
by Don Chambers
I think you are going to have a real problem trying to do this in a fluid width layout... the images are not going to line up even if you get the css corrected in all possible viewport sizes.

Posted: Tue Jan 20, 2009 3:03 pm
by Xanthouos
Don Chambers wrote:I think you are going to have a real problem trying to do this in a fluid width layout... the images are not going to line up even if you get the css corrected in all possible viewport sizes.
Fixed width is great....I'd actually prefer....

Posted: Thu Jan 22, 2009 12:59 pm
by Xanthouos
Don Chambers wrote:I think you are going to have a real problem trying to do this in a fluid width layout... the images are not going to line up even if you get the css corrected in all possible viewport sizes.
I modified the "default_style.css" to fixed width:

Code: Select all

#wrapper {
    font-size: 80%;
    color: #333;
    margin: 0px auto;
    width: 960px;
}
But that didn't fix the Hight issue. Is there somewhere else (or an IE only insert) to change?