Fri, 2007-07-13 03:37
Hey Folks,
I have no idea why my CSS keeps breaking on different browsers.
I am on a MAC and like to use firefox so when I coded the CSS I was viewing the design in Firefox. I happened to ask a friend to check out my site and he told me it looks out of place on IE (PC)...
So here are the snapshots and hopefully someone can point me out how I can fix this problem please.
Here's how it should be (MAC - Firefox): http://i8.tinypic.com/5xnomsj.png
Here's how it's breaking
---
MAC
---
Safari: http://i18.tinypic.com/4qxp2l0.png
---
PC
---
IE: http://i13.tinypic.com/5z1bfvr.png
Firefox: http://i16.tinypic.com/63ufj1f.png
Is there a way to make sure the CSS is well received on all browsers? Or is there a way to at least minimize the chances of the design breaking???
Appreciate your help folks,
-Joey
Fri, 2007-07-13 09:38
#1
pumatalk wrote:So here are
pumatalk wrote:
So here are the snapshots and hopefully someone can point me out how I can fix this problem please.
Unlikely. We (mostly) need links to pages to be able to help.
pumatalk wrote:
Is there a way to make sure the CSS is well received on all browsers? Or is there a way to at least minimize the chances of the design breaking???
Yes. There isn't much I can say about your specific case (see above). These are a good start:
- use a doctype
- validate your html and css
- familiarise yourself with the common browser bugs (mostly IE) and the methods to avoid or counter them
-----
I visited pumatalk.com. Are your pages live? It certainly looks like the images in your screen shots.
(1) Firefox/Mac doesn't look like your image - excepting when the browser width is identical to the page width. The banner image hangs left if the browser is wider than the page, whereas the rest of the page is centered.
You can fix the banner centering issue by ...
- give the DIV that is a child of #header a class of "wrap". Its not a good idea to refer to a DIV in a descendant style. DIV is a generic element, it should always have a class or an id to ensure your CSS is only referring to that DIV not any other DIV that are its descendants. You should do the same for the DIV which is a child of #intro
- add a style of "margin: 0 auto" to .wrap styles. Having both margin-left and margin-right set to auto will ensure a block element is centered.
Fri, 2007-07-13 14:58
#2
Hi Chris,
Hi Chris,
Thank you so much for the quick reply mate, appreciate it! Yes i decided to go live with the design, I spent literally hours yesterday nite just editing it on WIndows IE... since most people use IE... now I just gotta fix the banner for all browsers.
I just pasted my header code and I am trying to figure out exactly where/what is it I need to edit when you say
1. the DIV that is a child of #header a class of "wrap"
2. add a style of "margin: 0 auto" to .wrap styles
from what i understand is that my banner is should refer to a specific div name right? and maybe that is why the banner is breaking? Because that's the only thing that is breaking right now is that banner... and I would totally appreciate it if you can guide me as to where/what needs to be modified.
Thanks so much,
-Joey
/*------------------------------------------------------------*
** Header
**------------------------------------------------------------*/
#header { background-color: #fff; border: 1px solid #fff; }
#header div {
width: 740px;
background: url(http://www.pumatalk.com/forum/templates/Olympic/images/header_ba.gif) no-repeat 100% 100%;
text-align: left;
padding: 0px 10 50px;
}
#header div h1 {
margin: 0;
padding: 0;
color: #FF1A21;
font-weight: normal;
text-indent: -5000px;
}
#header div h1 a { display: block; width: 170px; height: 138px; }
***update info***
I just checked my HTML index file and i think this is might be contributing to the problem... what do you think?
my best,
-JOEY
Fri, 2007-07-13 15:09
#3
<div id="header"><div
...
#header .wrap {
width: 740px;
background: url(http://www.pumatalk.com/forum/templates/Olympic/images/header_ba.gif) no-repeat 100% 100%;
text-align: left;
padding: 0px 10 50px;
margin: 0 auto;
}
Fri, 2007-07-13 15:27
#4
Chris..S wrote:<div
Chris..S wrote:
...
#header .wrap {
width: 740px;
background: url(http://www.pumatalk.com/forum/templates/Olympic/images/header_ba.gif) no-repeat 100% 100%;
text-align: left;
padding: 0px 10 50px;
margin: 0 auto;
}
Thank you so much mate! You're a genius and u been very helpful now I know if i run into the same issue that I need to specify the div.
Many thanks mate,
-Joey