Hi,
First off, thank you all for helping me. I've read all your comments and
suggestions and I of course want to apply all of them in some way, and learn
along the way.
Let me see if I understoond this right (bare with me as I am still very much
a beginner)... So from Francky's solution, if I apply the border to the
outerwrapper only and then add the divs to clear, it will resolve the IE 6
problem of how it interprets the box-model. It makes sense to me that if
you put a border around the outside box it will be a consistent width. And
this worked in IE, so good news. However, I'm still having problems with
Firefox though. I looked at Francky's source code and i think i must be
misunderstanding what borders to omit and keep. Please clarify this for me.
I'm a bit still confused with this....
I also folllow Gunlaug's suggestions keeping the 'xml declaration' in place
and omiting the meta element instead. (your link helped me see the benefit
to maintaining this declaration). If i removed the XML Declaration in my
code as is, it still doesn't make Firefox work. I know it's got something
to do with the elements i should have borders around. I also fixed the
widths to be 885px on both #wrapperoutside and #contentWrapper.
again thanks for being patient with me.
http://www.thestudioformovement.com/index.htm
ps: with regards to the background colour and the text, that was great
information and the Web Accessibility Toolbar for IE or Opera is amazing. I
will definitely take your advice and make it accessibile after i get the
borders worked out in my slow head.
From: francky <[EMAIL PROTECTED]>
To: "hiptojive @hotmail.com" <[EMAIL PROTECTED]>
CC: css-d@lists.css-discuss.org
Subject: Re: [css-d] Border help - Browser compatibility issues
Date: Mon, 05 Feb 2007 09:52:28 +0100
hiptojive @hotmail.com wrote:
> Hi,
>
> I'm having a rought time here getting the borders to match up in all the
> browsers. Ideally I want the page to look like what it does in IE for
the
> PC. It's all wonky looking in Firefox (and i presume it's looking like
> this on the Mac. I have yet to test). I'v tried fudging borders in the
> image banner, but to no avail I can't get this to work. I've also tried
> adjusting the widths of my containers, but nothing seems to get this to
be
> consistent. I read that borders in Firefox display on the inside, and
in IE
> on the outside, so I presume this is part of the problem, but I'm sure
> there's something else happening here in my code.
>
> http://www.thestudioformovement.com/
>
> Any insight on how to solve this problem, or how to approach boarders
would
> be very helpful.
>
> Thanks in advance,
>
> mary
Hi Mary,
I guess it is a 3px hop of IE. The easiest way to get it crossbrowser
is, I think, to assign the borders to the outer wrapper. Then for
standards compliant browsers we need to add a "clearing" div just before
the end of the wrapper, so the border lines will extend to the bottom.
See source code of:
* testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-studio.htm>
Then you can omit the top and right border in the logo img itself.
Success and greetings,
francky
btw-1:
I should consider to give more contrast to the text and background color
in the content part. Now is is not obeying the accessibility rules. If
you give the background a color of for instance #C3A5A5 instead of #966
it will be alright.
btw-2:
An excellent Web Accessibility Toolbar for IE or Opera (with color
contrast analyzer) you can download from
http://www.wat-c.org/tools/index.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
_________________________________________________________________
Check out all that glitters with the MSN Entertainment Guide to the Academy
Awards® http://movies.msn.com/movies/oscars2007/?icid=ncoscartagline2
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
