Re: [css-d] FF & MSIE background positioning problem
thanks i did fix this i declared a margin-top on the UL element as 0
it seemed to be making it 10px or there abouts, i've moved on to a new
problem now, the navigation links are an UL and i'm trying to get them
lined up ontop of the background image (the tab menu) i need them to
align the same in all browsers but if i get it spot on in IE i'm a few
pixels out in safari / FF or vice versa... any ideas how to get cross
browser li spacing?
>
> Terry.
>
>
> On 7/26/06, Zoe M. Gillenwater <[EMAIL PROTECTED]> wrote:
> > Terry O'Leary wrote:
> > > Hi
> > >
> > > I've been working on my company site www.arcolectric.co.uk/index2.html
> > > and have designed it in pure CSS.
> > >
> > > I have a background img assigned to the body element with a slight
> > > fade, and a div that contains a background image of the menu bar along
> > > the top, i need the background of the menu bar to line up to the
> > > bodies background.
> > >
> > > I've discovered that i have a problem with the mast head being
> > > rendered differently in different browsers. On windows in IE the page
> > > displays perfectly, but in firefox/safari on a mac a top margin of
> > > around 7px appears in the div with the menu bar and so pushes the
> > > alignment of the backgrounds out.
> > >
> > > I currently have the following CSS for the menu and the body:
> > >
> > > #banner_Distribution{
> > > margin:auto;
> > > margin-top:0px;
> > > width:800px;
> > > height:90px;
> > > padding:0px;
> > > padding-right:2px;
> > > background:url(_images/banner_bg_agents.jpg) 0px 0px no-repeat;
> > > }
> > >
> > > body{
> > > margin:0px 0px;
> > > width:100%;
> > > background:url(_images/main_body_bg.jpg) 0px -18px repeat-x;
> > > padding:0px;
> > > }
> > >
> > > any one have any ideas, i've noticed if i surround the menu bar with a
> > > border the problem fixes itself and have tried various solutions to no
> > > avail HELP!
> > >
> > >
> >
> > Terry,
> >
> > The page appears identical to me in IE and FF. Did you fix it?
> >
> > However, I have a few suggestions for you.
> >
> > 1. If adding a border fixes a gap, you probably have margin collapsing
> > going on. Please read the resources on this page:
> > http://css-discuss.incutio.com/?page=CollapsingMargin
> >
> > 2. Always develop for a good browser like Firefox, Opera, or Safari
> > first, then worry about IE. 99% of the time, when something looks
> > "perfect" in IE and messed up in the others, it is IE that has it wrong
> > and the others who have it right. You'll spend a lot less time
> > developing and testing if you build for the standards and then tweak for
> > IE, since there is usually no way to make good browsers imitate IE's
> > random and perplexing bugs.
> >
> > 3. Validate your markup and CSS as a first step in debugging. Fixing
> > your markup will often fix the rendering issues that you see. If it
> > doesn't, at least you have valid markup now, and you can then move on to
> > asking for help from a list such as this.
> >
> > Best,
> > Zoe
> >
> > --
> > Zoe M. Gillenwater
> > Design Services Manager
> > UNC Highway Safety Research Center
> > http://www.hsrc.unc.edu
> >
> >
> > __
> > css-discuss [EMAIL PROTECTED]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > IE7b2 testing hub -- 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/
> >
>
>
> --
> Regards
>
> Terry O'Leary
> Web Developer @ The Elektron Group
>
> ~Online dating community ? www.d8-m8.com
>
--
Regards
Terry O'Leary
Web Developer @ The Elektron Group
~Online dating community ? www.d8-m8.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
Re: [css-d] FF & MSIE background positioning problem
Terry O'Leary wrote:
> Hi
>
> I've been working on my company site www.arcolectric.co.uk/index2.html
> and have designed it in pure CSS.
>
> I have a background img assigned to the body element with a slight
> fade, and a div that contains a background image of the menu bar along
> the top, i need the background of the menu bar to line up to the
> bodies background.
>
> I've discovered that i have a problem with the mast head being
> rendered differently in different browsers. On windows in IE the page
> displays perfectly, but in firefox/safari on a mac a top margin of
> around 7px appears in the div with the menu bar and so pushes the
> alignment of the backgrounds out.
>
> I currently have the following CSS for the menu and the body:
>
> #banner_Distribution{
> margin:auto;
> margin-top:0px;
> width:800px;
> height:90px;
> padding:0px;
> padding-right:2px;
> background:url(_images/banner_bg_agents.jpg) 0px 0px no-repeat;
> }
>
> body{
> margin:0px 0px;
> width:100%;
> background:url(_images/main_body_bg.jpg) 0px -18px repeat-x;
> padding:0px;
> }
>
> any one have any ideas, i've noticed if i surround the menu bar with a
> border the problem fixes itself and have tried various solutions to no
> avail HELP!
>
>
Terry,
The page appears identical to me in IE and FF. Did you fix it?
However, I have a few suggestions for you.
1. If adding a border fixes a gap, you probably have margin collapsing
going on. Please read the resources on this page:
http://css-discuss.incutio.com/?page=CollapsingMargin
2. Always develop for a good browser like Firefox, Opera, or Safari
first, then worry about IE. 99% of the time, when something looks
"perfect" in IE and messed up in the others, it is IE that has it wrong
and the others who have it right. You'll spend a lot less time
developing and testing if you build for the standards and then tweak for
IE, since there is usually no way to make good browsers imitate IE's
random and perplexing bugs.
3. Validate your markup and CSS as a first step in debugging. Fixing
your markup will often fix the rendering issues that you see. If it
doesn't, at least you have valid markup now, and you can then move on to
asking for help from a list such as this.
Best,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
[css-d] FF & MSIE background positioning problem
Hi
I've been working on my company site www.arcolectric.co.uk/index2.html
and have designed it in pure CSS.
I have a background img assigned to the body element with a slight
fade, and a div that contains a background image of the menu bar along
the top, i need the background of the menu bar to line up to the
bodies background.
I've discovered that i have a problem with the mast head being
rendered differently in different browsers. On windows in IE the page
displays perfectly, but in firefox/safari on a mac a top margin of
around 7px appears in the div with the menu bar and so pushes the
alignment of the backgrounds out.
I currently have the following CSS for the menu and the body:
#banner_Distribution{
margin:auto;
margin-top:0px;
width:800px;
height:90px;
padding:0px;
padding-right:2px;
background:url(_images/banner_bg_agents.jpg) 0px 0px no-repeat;
}
body{
margin:0px 0px;
width:100%;
background:url(_images/main_body_bg.jpg) 0px -18px repeat-x;
padding:0px;
}
any one have any ideas, i've noticed if i surround the menu bar with a
border the problem fixes itself and have tried various solutions to no
avail HELP!
--
Regards
Terry O'Leary
Web Developer @ The Elektron Group
~Online dating community ? www.d8-m8.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
