Forum Moderators: not2easy
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;}
#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>
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".
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>
That's the only time I ever get things overlapping each other (unless it's a floated image next to a ul in Mozilla).
<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]
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?
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.
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
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?
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 smacks himself silly
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).
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).
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
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.
