homepage Welcome to WebmasterWorld Guest from 54.226.191.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS problem with images overlapping text
kapow




msg:1218457
 6:23 pm on May 2, 2003 (gmt 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;}

 

SuzyUK




msg:1218458
 7:22 pm on May 2, 2003 (gmt 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>

Birdman




msg:1218459
 7:41 pm on May 2, 2003 (gmt 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".

SuzyUK




msg:1218460
 7:56 pm on May 2, 2003 (gmt 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>

antidote45




msg:1218461
 10:33 pm on May 2, 2003 (gmt 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).

kapow




msg:1218462
 12:18 pm on May 4, 2003 (gmt 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]

kapow




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

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

BlobFisk




msg:1218464
 10:55 am on May 7, 2003 (gmt 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?

kapow




msg:1218465
 1:06 pm on May 7, 2003 (gmt 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.

SuzyUK




msg:1218466
 1:53 pm on May 7, 2003 (gmt 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

BlobFisk




msg:1218467
 2:36 pm on May 7, 2003 (gmt 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?

SuzyUK




msg:1218468
 3:59 pm on May 7, 2003 (gmt 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>

BlobFisk




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

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

BlobFisk smacks himself silly

kapow




msg:1218470
 5:57 pm on May 7, 2003 (gmt 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).

kapow




msg:1218471
 12:04 pm on May 8, 2003 (gmt 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).

SuzyUK




msg:1218472
 1:51 pm on May 8, 2003 (gmt 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

kapow




msg:1218473
 1:58 pm on May 8, 2003 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved