CSS problem in IE

[s_mccoy]

I know what you're thinking, IE sucks for CSS, but so far I've had few problems
and this is the biggest. I have a web site with two boxes, identical in every
way excep the graphics and copy. Each box consists of two divs. The outer one
has a one pixel high stretchable graphic to fill in the space should the box
get too big. The inside div starts with the header graphic followed by a
paragraph then a footer graphc to create the bottom edge of the border. This
div also has a graphic background that doesn't repeat. The top box works as
expected but the lower box doesn't. I've combed through the CSS and code and
can't figure out why this is happening. Firefox and Safari both render the
page as expected. I've attached the code for the relevant sections below. The
page with the problem is the home page for [url]http://www.metamatrix.com[/url].



HTML:

<div id="blue_stretch">
<div class="blue_bckgd" id="intro"><img
src="images/landing_pages/intro_mm_dimensions.jpg" />
<p>Create optimized, XML-schema-compliant Web services from relational
data sources.</p>
<p><a href="pages/mm5_announce.htm">learn more...</a></p>
<img src="images/landing_pages/intro_blue_bottom.jpg" />
</div>
</div>
<div id="orange_stretch">
<div class="orange_bckgd" id="intro"><img
src="images/landing_pages/intro_mm_query.jpg" />
<p>Java distributed query component accesses and federates data from
heterogeneous relational databases.</p>
<p><a href="pages/mm_query_announce.htm">learn more...</a></p>
<img src="images/landing_pages/intro_orange_bottom.jpg" />
</div>
</div>

CSS:

#intro {
margin-top: 17px;
}
#intro p {
padding: 9px 9px 0px;
font-size: 12px;
color: #ffffff;
line-height: 18px;
}
#intro.blue_bckgd {
background: url(../images/landing_pages/intro_blue_bckgd.jpg) no-repeat;
}
#blue_stretch {
background: url(../images/landing_pages/intro_blue_stretch.jpg) repeat-y;
}
#intro.orange_bckgd {
background: url(../images/landing_pages/intro_orange_bckgd.jpg) no-repeat;
}
#orange_stretch {
background: url(../images/landing_pages/intro_orange_stretch.jpg) repeat-y;
}
#intro.blue_bckgd a {
border: 1px solid #2d4c65;
padding: 4px;
background: #edf6ff;
color: #2d4c65;
font-size: 11px;
text-decoration: none;
margin-left: 88px;
}
#intro.blue_bckgd a:hover {
background: #2d4c65;
color: #edf6ff;
}
#intro.orange_bckgd a {
border: 1px solid #642a10;
padding: 4px;
background: #fff3ed;
color: #642a10;
font-size: 11px;
text-decoration: none;
margin-left: 88px;
}
#intro.orange_bckgd a:hover {
background: #642a10;
color: #fff3ed;
}

[Css Lover]

I need to reinstall firefox and opera, so cannot see the difference for myself.

Just visited the web site you link to and it looks good enough to me.

I'm using IE, latest version.

There are always little differences with the browsers and css, the idiots who
make the browsers need to settle on one standard, it is ridiculous that web
designers have to mess about with this grim battle of the browswers.

What frustrates me is that IE won't allow me to use css to make each first
letter of a paragraph a drop cap, I have to code each one manually.

In an ideal world a browser would be an open source standard.

Apple and Microsoft need their heads banging together.

[Murray *ACE*]

> What frustrates me is that IE won't allow me to use css to make each first

> letter of a paragraph a drop cap, I have to code each one manually.

Yes, it will. Try -

p { color:black; font-size:small; }
p.special:first-letter { color:red; font-size:large; }

<p class="special">The leading T in the text here will be styled
differently.</p>

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Css Lover" <webforumsuser@macromedia.com> wrote in message
news:dv99ot$bt2$1@forums.macromedia.com...

>I need to reinstall firefox and opera, so cannot see the difference for
>myself.
>
> Just visited the web site you link to and it looks good enough to me.
>
> I'm using IE, latest version.
>
> There are always little differences with the browsers and css, the idiots
> who
> make the browsers need to settle on one standard, it is ridiculous that
> web
> designers have to mess about with this grim battle of the browswers.
>
> What frustrates me is that IE won't allow me to use css to make each first
> letter of a paragraph a drop cap, I have to code each one manually.
>
> In an ideal world a browser would be an open source standard.
>
> Apple and Microsoft need their heads banging together.
>

[s_mccoy]

The problem, however, is the blue box works as intended while the orange box
beneath it does not. I've even copied the html and css code from the working
div and replaced it with the appropriate graphics and copy with the same
results. I don't get it. It should work. I can't even think of an IE CSS
hack that would fix this problem.

[s_mccoy]

update: to make thi san even more bizarre problem, I switched the styles for
the bottom box to be blue and the graphic appeared behind the text as it
should. It's only when I try to apply the orange background that this problem
occurs.

[Css Lover]

Sorry Murray, I meant to say Firefox won't show that css.

I have used the css for code to make the drop cap like you point to, but gave
up because it was not cross browser supported, so to speak.

Dropcaps are nice. Top tip - use Serif, font - give it a background colour
and colour the text and border. (only give the borders 1 px) It looks real
classy.

I still cannot see what the problem is in the web site linked to though. It
looks fine to me in IE.

However, what you build might not your design. I've never built a web site
commercially, so I guess those who do will be chasing petty little things some
boss has got it into his or her head to alter.

Mabe that's the case here!

[Murray *ACE*]

FF does show it. Go here -

[url]http://www.redwoodfs.com[/url]. Do you see 'drop caps'?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"Css Lover" <webforumsuser@macromedia.com> wrote in message
news:dvbpgr$r85$1@forums.macromedia.com...

> Sorry Murray, I meant to say Firefox won't show that css.
>
> I have used the css for code to make the drop cap like you point to, but
> gave
> up because it was not cross browser supported, so to speak.
>
> Dropcaps are nice. Top tip - use Serif, font - give it a background
> colour
> and colour the text and border. (only give the borders 1 px) It looks real
> classy.
>
> I still cannot see what the problem is in the web site linked to though.
> It
> looks fine to me in IE.
>
> However, what you build might not your design. I've never built a web site
> commercially, so I guess those who do will be chasing petty little things
> some
> boss has got it into his or her head to alter.
>
> Mabe that's the case here!
>

[s_mccoy]

Murray,

That's not a drop cap, that's in initial cap.

Css Lover,

The problem with the boxes was that IE was not displaying the orange textured
background. I discovered, through trial and error, that IE did not like the
#id.class declaration I was making so I simply made both #intro.blue_bckgd and
#intro.orange_bckgd classes, .blue_bckgd and .orange_bckgd, and the site works
as intended. I find it odd that IE had no problem with the first #id.class
declaration but it choked on the second one.

[Murray *ACE*]

Ahh - sorry.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"s_mccoy" <webforumsuser@macromedia.com> wrote in message
news:dvcv5b$j54$1@forums.macromedia.com...

> Murray,
>
> That's not a drop cap, that's in initial cap.
>
> Css Lover,
>
> The problem with the boxes was that IE was not displaying the orange
> textured
> background. I discovered, through trial and error, that IE did not like
> the
> #id.class declaration I was making so I simply made both #intro.blue_bckgd
> and
> #intro.orange_bckgd classes, .blue_bckgd and .orange_bckgd, and the site
> works
> as intended. I find it odd that IE had no problem with the first
> #id.class
> declaration but it choked on the second one.
>