Welcome to WebmasterWorld Guest from 54.163.25.166

Forum Moderators: not2easy

Message Too Old, No Replies

CSS problem with images overlapping text

     
6:23 pm on May 2, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


I'm having a problem with images overlapping text.
The images are in <div id="pic_right>.
And <div id="pic_right> is within <div id="content">.

Heres most of the CSS. its probably something stupid, but I've been look at this all day and can't see the problem :(

body {background-color: #fff; background-image: url(images/navback.jpg); background-repeat: repeat-y;
color: #000000; font-family: Arial, Helvetica, sans-serif;
margin: 0 0 0 0; padding: 0 0 0 0;}

#pic_right {border: 1px solid #fff; float:right; margin: 0 0 9 9; }
#pic_left {border: 1px solid #fff; float:left; margin: 0 9 9 0; }
#masthead {width: 100%; height: 80px; background-color: #fff;}
#band { height: 20px; background-image: url(images/headband.gif);}

ul {list-style-image: url("images/bullet.gif")}
li {color: #000; text-align: justify; }

#content {background-image: url(images/page_back.gif); background-repeat: no-repeat;

background-attachment:fixed; background-position: 50% 80;
position: absolute; top: 100px; left: 180px;
padding: 2em 5% 2em 5%;
background-color: #fff; font-size: .8em;}
#content a:link { color: #F00;}
#content a:visited { color: #F00;}
#content a:hover { background-color: #c00; color:#fc0;}

#content P, #content td, #content ul, #content table ul {
color: #000; text-align: justify;
font-size: .9em; margin-top: .1em; margin-bottom: .6em;}

#leftnav { width: 180px; vertical-align: top; padding-bottom: 10em; }

#leftnav a { font-size: .8em; font-variant: small-caps;
display: block; padding: .4em .4em .4em 1em;
border-bottom: 1px solid #000; border-right: 1px solid #000; color:#fff; text-decoration: none;}
#leftnav a:link { color: #fff;}
#leftnav a:visited { color: #fff;}
#leftnav a:hover { background-color: #c00; color: #fc0;}

7:22 pm on May 2, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Kapow

#pic_right {border: 1px solid #fff; float:right; margin: 0 0 9 9; }
#pic_left {border: 1px solid #fff; float:left; margin: 0 9 9 0; }

not sure as this is only a quick look over code, as in not tested but 9 what? except for 0, you have to specify px, pt, %, em...

perhaps it's that?

Suzy

<added>

ul {list-style-image: url("images/bullet.gif")}

not related to your original question, but you should remove the quotes from this too as it can cause browser conflicts too..
</added>

7:41 pm on May 2, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


Suzy,

That was my first guess, so I removed px from a site I'm working on and it didn't change anything. Hmmm...strange

Maybe try only floating one of the divs and let the other fall to it's side without float.

One other thing I noticed, which probably has no bearing on this matter is this line:

#content P, #content td, #content ul, #content table ul {

I think you can remove the last "ul" after "table".

7:56 pm on May 2, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hmmm Birdman, thanks for that, can't find the original reference now.. I've got it somewhere but I need to do some "filing" ;)

Kapow is there any chance of posting your abbreviated HTML related to this problem..so we can try to narrow it down quicker?

Will have a look meantime

Suzy
<added> also what browser is it happening in, or is it them all?</added>

10:33 pm on May 2, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2003
posts:41
votes: 0


I'd say it probably has to do with your content being position: absolute;

That's the only time I ever get things overlapping each other (unless it's a floated image next to a ul in Mozilla).

12:18 pm on May 4, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


Thanks everyone.
The problem is on IE5. Its ok on IE6.
AbBreviated html:

<html>
<head>.......</head>
<body>

<div id="masthead">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td width="95">....Flash logo here....</td>
<td width="230"><img src="images/logo_2.gif" width="230" height="85" alt="....."></td>
</tr></table>
</div>

<div id="band"></div>

<div id="content">
<h1>....</h1>
<div id="pic_right"><img src="images/....jpg" width="185" height="280" border="1">
</div>
<p>....</p>
<p>....</p>
etc, etc....
</div>

<div id="leftnav">
<a href="index.html">Home</a>
<a href="....htm">Blah blah blah</a>
<a href="....htm">Blah blah blah</a>
etc, etc....
</div>

</body>
</html>

[edited by: Nick_W at 2:44 pm (utc) on May 4, 2003]
[edit reason] abtiviated further ;-) [/edit]

9:39 am on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


Did the html help anyone? I'm still lost :(
10:55 am on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Hey kapow,

I'm unable to recreate your problem... to reiterate Suzy's question, what browser are you seeing this in?

Have you tried adding position: relative to your pic_right div?

1:06 pm on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


Hi

The problem is on IE5. Its ok on IE6.

Re. Have you tried adding position: relative to your pic_right div?

- Ermmm, not quite sure what you mean. Can you give me an example and I'll try it.

1:53 pm on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


kapow...really sorry for not getting back to you..

I've now tried your code (as it is, no changes) and I cannot recreate the "overlap"..I've tested in IE5.5 too...

This was all tested with no DTD (doctype) are you using one?

so I can't think what it could be...

Suzy

2:36 pm on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Key kapow,

Apologies, I saw that you answered the browser version well after I posted my question.

You say that you've left some of the CSS out - I wonder if there is anything there that could be the culprit.

I have IE6, and I pasted your CSS and HTML verbatim into a page (with an HTML4.01 transitional Doctype) and was unable to recreate the problem. I then stuck in position:relative in to the pic_right div and it still worked fine:


#pic_right {position: relative; border: 1px solid #fff; float:right; margin: 0px 0px 9px 9px; }

I don't have IE5 (5.0 or 5.5 BTW?) so can't test on this one... but could there be an issue with the float: property and IE5?

3:59 pm on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


kapow...my apologies again..

Now I'm going to give myself a preverbial slap ;)

The very first thing we should have done and advised you to do was to run your CSS through a validator [jigsaw.w3.org].

Well I just did and guess what there's 2 parse errors!


* Line: 5 Context : #pic
Parse Error - #pic_right {border: 1px solid #fff; float:right; margin: 0 0 9 9; }

* Line: 6 Context : #pic
Parse Error - #pic_left {border: 1px solid #fff; float:left; margin: 0 9 9 0; }

removing the underscores from the ID names corrects the parse error

If the validator's is "choking" there's a chance that that's what is causing IE5 to do the same..

So I'm sorry, should have suggested this in the first place and I hope it helps the "overlap" problem too..

;)
Suzy

<added> let us know if this does help </added>

4:59 pm on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Excellent spot Suzy, I totally missed the underscore and (for shame) the validation....

BlobFisk smacks himself silly

5:57 pm on May 7, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


I seem to be the cause of much self inflicted slapping. Hope I'm not required to follow suit, I would be due much bigger ones I'm sure :)

Will get to test your recommendations later (probably tomorrow). Thankyou all for your excellent guidence. That validator is billiant (have added it to my hottest links).

12:04 pm on May 8, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


Sorry, I still have the problem :(

I can only see the problem on my laptop (win 98 and IE 5.0). When I first saw it I thought it was a local bug (as the laptop is a bit old) and ignored it. But I have received 3 complaints from visitors about the problem, its not a very popular site - its about a very speialist industrial subject. The site averages 300 pages views per week so 3 complaints seems like a lot to me.

I tried the following on the laptop:
- removed the _ (underscore).
- added px to margin numbers.
- added position:relative; to #picright

= no change.
Interestingly: if I change the div to float:left; instead of right the overlap goes (but I need the pics on the right).

1:51 pm on May 8, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


hmmm..

did a bit more digging then and found that

In the case of 'margin', support is pretty good on block-level elements in IE4/Win and IE5/Win, while with inline elements, IE4/Win and IE5/Win ignore this property completely.

so try adding display: block; to the pic divs, it might help

Suzy

1:58 pm on May 8, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2001
posts:1281
votes: 0


Tried everything suggested so far, without success.

I have another site with a similar layout that doesn't produce this problem. I can't see the difference - but I am thinking now of starting again with the other site/css as a basis and building up bit by bit to see if I can make it work and hopefully figure out what is causing it.