Welcome to WebmasterWorld Guest from 54.226.32.234

Forum Moderators: not2easy

Message Too Old, No Replies

CSS problem with images overlapping text

     

kapow

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

WebmasterWorld Senior Member 10+ Year Member



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;}

SuzyUK

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

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



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>

Birdman

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

WebmasterWorld Senior Member 10+ Year Member



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".

SuzyUK

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

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



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>

antidote45

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

10+ Year Member



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).

kapow

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

WebmasterWorld Senior Member 10+ Year Member



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]

kapow

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

WebmasterWorld Senior Member 10+ Year Member



Did the html help anyone? I'm still lost :(

BlobFisk

10:55 am on May 7, 2003 (gmt 0)

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



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?

kapow

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

WebmasterWorld Senior Member 10+ Year Member



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.

SuzyUK

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

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



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

BlobFisk

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

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



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?

SuzyUK

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

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



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>

BlobFisk

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

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



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

BlobFisk smacks himself silly

kapow

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

WebmasterWorld Senior Member 10+ Year Member



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).

kapow

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

WebmasterWorld Senior Member 10+ Year Member



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).

SuzyUK

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

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



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

kapow

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

WebmasterWorld Senior Member 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month