css rendering different in IE/FF

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Xanthouos
Regular
Posts: 115
Joined: Wed Mar 02, 2005 7:59 pm
Contact:

css rendering different in IE/FF

Post by Xanthouos » Tue Jan 20, 2009 1:15 pm

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
If you can't be a missionary, you can support a missionary.
~~~~~~~~~~~~~~~~~~~~~
www.GetMepis.com

User avatar
yellowled
Regular
Posts: 7056
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: css rendering different in IE/FF

Post by yellowled » Tue Jan 20, 2009 1:19 pm

Xanthouos wrote:PCurrently I don't have it online, but I might have to in order for someone to debug :-D

Yes, please.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Xanthouos
Regular
Posts: 115
Joined: Wed Mar 02, 2005 7:59 pm
Contact:

Re: css rendering different in IE/FF

Post by Xanthouos » Tue Jan 20, 2009 3:14 pm

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. :-)
If you can't be a missionary, you can support a missionary.
~~~~~~~~~~~~~~~~~~~~~
www.GetMepis.com

User avatar
yellowled
Regular
Posts: 7056
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: css rendering different in IE/FF

Post by yellowled » Tue Jan 20, 2009 3:50 pm

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
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Xanthouos
Regular
Posts: 115
Joined: Wed Mar 02, 2005 7:59 pm
Contact:

Re: css rendering different in IE/FF

Post by Xanthouos » Tue Jan 20, 2009 3:59 pm

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
If you can't be a missionary, you can support a missionary.
~~~~~~~~~~~~~~~~~~~~~
www.GetMepis.com

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Tue Jan 20, 2009 4:00 pm

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.

Xanthouos
Regular
Posts: 115
Joined: Wed Mar 02, 2005 7:59 pm
Contact:

Post by Xanthouos » Tue Jan 20, 2009 4:03 pm

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....
If you can't be a missionary, you can support a missionary.
~~~~~~~~~~~~~~~~~~~~~
www.GetMepis.com

Xanthouos
Regular
Posts: 115
Joined: Wed Mar 02, 2005 7:59 pm
Contact:

Post by Xanthouos » Thu Jan 22, 2009 1:59 pm

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?
If you can't be a missionary, you can support a missionary.
~~~~~~~~~~~~~~~~~~~~~
www.GetMepis.com

Post Reply