Dreamweaver - CSS Headache!

Author

CSS Headache!

rydershabs

2004-04-29, 10:32 pm

Please could someone solve this problem for me? I've got CSS problems; I
hope I can explain this correctly.

Basically, I have a 250px x 150px image in the top left corner of a div
(which is about 500px wide), and a small amount of text on the right side
that doesn't extend all the way down to the bottom of the image (called
"photo1.jpg"). The problem is, the image extends down beyond the white
background onto my patterned background and the white background stops
horizontally just below the text, which is about halfway down the image.

Here's some code:
-------------------
<div class="feature">
<img src="../Images/photo1.jpg" alt="" width="250" height="150">
<h3>Feature Title </h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie... </p>
</div>
-------------------

Here's some "feature" CSS:
-------------------
..feature{
padding-right: 5px;
padding-left: 5px;
background-color: #FFFFFF;
height: 178px;
z-index: 101;
}

html>body .feature {
height: auto;
}

..feature img{
padding: 0px 0px 10px;
float: left;
margin-top: 5px;
margin-right: 10px;
margin-left: 5px;
}
--------------------

The height: 178px doesn't seem to have any effect on the height, and
z-index: 101 doesn't seem to make a difference. The CSS is messing up in
IE5.0 and NS7.0 among other browsers...
Thank you!

darrel

2004-04-29, 10:32 pm

A couple shots in the dark:

Give the DIV a min-height attribute as well.

Floating the image takes it 'outside' of the DIV, so that's an issue. Trying
adding a div after the image:

<div style="clear: both"></div>

and see what that does.

-Darrel

Murray *TMM*

2004-04-29, 10:32 pm

Change your code to this -

<div class="feature">
<img src="../Images/photo1.jpg" alt="" width="250" height="150">
<h3>Feature Title </h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie... </p>
<div style="clear:left"></div>
</div>

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"rydershabs" <webforumsuser@macromedia.com> wrote in message
news:c6rqmf$875$1@forums.macromedia.com...
> Please could someone solve this problem for me? I've got CSS problems; I
> hope I can explain this correctly.
>
> Basically, I have a 250px x 150px image in the top left corner of a div
> (which is about 500px wide), and a small amount of text on the right side
> that doesn't extend all the way down to the bottom of the image (called
> "photo1.jpg"). The problem is, the image extends down beyond the white
> background onto my patterned background and the white background stops
> horizontally just below the text, which is about halfway down the image.
>
> Here's some code:
> -------------------
> <div class="feature">
> <img src="../Images/photo1.jpg" alt="" width="250" height="150">
> <h3>Feature Title </h3>
> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec
> molestie... </p>
> </div>
> -------------------
>
> Here's some "feature" CSS:
> -------------------
> .feature{
> padding-right: 5px;
> padding-left: 5px;
> background-color: #FFFFFF;
> height: 178px;
> z-index: 101;
> }
>
> html>body .feature {
> height: auto;
> }
>
> .feature img{
> padding: 0px 0px 10px;
> float: left;
> margin-top: 5px;
> margin-right: 10px;
> margin-left: 5px;
> }
> --------------------
>
> The height: 178px doesn't seem to have any effect on the height, and
> z-index: 101 doesn't seem to make a difference. The CSS is messing up in
> IE5.0 and NS7.0 among other browsers...
> Thank you!
>
>

rydershabs

2004-04-30, 5:31 pm

The image still overlaps in Netscape7.0. I tried "clear:left" and
"clear:both". What else should I try?

"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:c6rrme$9j9$1@forums.macromedia.com...
> Change your code to this -
>
> <div class="feature">
> <img src="../Images/photo1.jpg" alt="" width="250" height="150">
> <h3>Feature Title </h3>
> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec
> molestie... </p>
> <div style="clear:left"></div>
> </div>
>

Murray *TMM*

2004-04-30, 5:31 pm

Show me the page, please.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"rydershabs" <webforumsuser@macromedia.com> wrote in message
news:c6ts6r$22s$1@forums.macromedia.com...
> The image still overlaps in Netscape7.0. I tried "clear:left" and
> "clear:both". What else should I try?
>
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:c6rrme$9j9$1@forums.macromedia.com...
> Donec
>
>

rydershabs

2004-04-30, 5:31 pm

I would but it's not live. E-mail?

"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:c6tt8s$3nr$1@forums.macromedia.com...
> Show me the page, please.