Cross-browser frustrations
I'm working on a layout for my site, and am having a cross-browser display problem that's becoming really frustrating.
The world would be a better place if all browsers makers were forced by law to restrict their browsers functionality to industry standard behavior. I am SO tired of developing web applications that work fine in one browser, but don't work in another, then making changes and having it work in the other browser, but then not work in the one that it originally worked in. gggrrrrrrr!!!
Basically, the page that I'm having problems with displays properly in Internet Explorer, but in Mozilla (in which case I'm assuming it will work fine in NS6.x+), the panel on the right side of the page is displayed approximately 10 pixels higher than it is displayed in IE. Nothing that I change in the stylesheet seems to be able to correct this behavior. Can somebody see what's wrong, or what I need to change to get them to display at the same place in *both* browsers???
http://yexley.net/yexleyDotNet.php
The stylesheet can be found by viewing the source. Thanks for your help.
::YEX::
<)))><
John 16:32-33
Suzanne posted this at 18:15 — 6th January 2003.
She has: 5,507 posts
Joined: Feb 2000
http://yexley.net/style/yexley.net.css for reference.
IE has a broken box type, try using Tantek's box model hack?
Suzanne posted this at 18:18 — 6th January 2003.
She has: 5,507 posts
Joined: Feb 2000
hmm... see you are using that elsewhere. which id is the problem?
ryexley posted this at 18:38 — 6th January 2003.
They have: 7 posts
Joined: Dec 2002
sidebarRight is the one that's having the problem.
Suzanne posted this at 22:07 — 6th January 2003.
She has: 5,507 posts
Joined: Feb 2000
#sidebarRight{position: absolute
;top: 107px
;margin: 0px
;right: 0px
;padding: 10px 10px 50px 10px
;width: 165px
;height: auto
;background-color: #dda /* #cc9 */
;border-top: 1px solid #000
;border-bottom: 1px solid #000
;border-left: 1px solid #000
;voice-family: "\"}\""
;voice-family: inherit
;width: 165px}
I assume you've validated your code and fixed all errors?
Here's what I think the problem is -- the margins and padding. First off, margin should be margin: 0; not margin: 0px;, but that shouldn't affect things. I think that the issue is maybe the way IE adds padding?
I do everything in my power to avoid doing things that require precise pixel precision, but try checking out css-discuss.org for similar problems, and glish.com/css/ for template samples (and links to more) that may resolve your problem.
#sidebarRight is absolutely positioned, but it's compatriot, #weblogEntriesDiv, isn't...
#weblogEntriesDiv /* This is the mainpanel that displays weblog entries, all
inclusive. */
{margin: 10px 195px 20px 0px
;padding: 10px
;background-color: #ffe
;border: 1px solid #000}
Have you tried using float instead of absolute positioning? I find it more cross-browser.
Renegade posted this at 23:05 — 6th January 2003.
He has: 3,022 posts
Joined: Oct 2002
Well 2 tips that I find usefull
1, design for mozilla nad opera because if it looks good there then chances are it'll look good anywhere
2, it also helped me by setting
body {
margin:0;
padding:0;
}
that way it gets rid of the default page margins and padding (that IE sets)
Abhishek Reddy posted this at 06:08 — 7th January 2003.
He has: 3,348 posts
Joined: Jul 2001
Be careful with that. The majority of surfers still use IE, so don't just forget it entirely. What you want is to design first for Moz/Opera (standards-compliant), then fix the code to work with IE's quirks too.
dk01 posted this at 20:42 — 7th January 2003.
He has: 516 posts
Joined: Mar 2002
Yes especially remember the problems with adding borders, padding, and margins for IE5. Renegade I noticed that since you designed for version 6 browsers your site looked distorted in ie5. This can be helped by putting a div inside a div.
-dk
Renegade posted this at 07:51 — 8th January 2003.
He has: 3,022 posts
Joined: Oct 2002
It does? doh! damn, i'll fix it when I have time
thanks 
Spiffu posted this at 09:12 — 9th January 2003.
They have: 17 posts
Joined: Jan 2003
A lot of things changed in Netscape 7. Many css problems I had before disapeared. Still, it still won't do custom scroll bars. >_<
Renegade posted this at 22:43 — 9th January 2003.
He has: 3,022 posts
Joined: Oct 2002
I don't really se the point in custom scroll bars do they actually serve any REAL purpose?
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.