Forum Moderators: not2easy
i have beening working on a website [1 [fandm.edu]] and have recently found out that some of the positioning of page elements is off when viewing the site with netscape on a mac.
here are several other links that i know have problems: [2 [fandm.edu]] [3 [fandm.edu]] [4 [fandm.edu]] [5 [fandm.edu]]
i am using divs and style sheets.
apparently some of the divs that contain images (which are floated left or right) are covering up some text around the image divs. i am using margin and width tags for the image divs.
does anyone know of a way to design using divs and css for mozilla/netscape and IE on mac and windows?
thanks.
Perhaps if you could post some relevant code snippets of what you think is causing the problem, we may be able to track down the culprit.
ok now i understand that posting a link was "wrong" but it seems very difficult to figure out the context of the problem without links... but i'll remove links.
i know there are discrepancies in how different browsers handle css and divs and i was hoping someone would point me to a good reference for how to design for all browsers.
i also wanted to keep my post short and thought that providing links was good enough to reference what i was talking about since it is easy enough to "view source". it seems much more difficult for people try to answer questions tonot have the context that the code is in.
however, if this is not the correct protocol, then i'll post some code...
<table width="312" border="0" align="right" cellpadding="0" cellspacing="0" style="margin:5px; padding:5px;">
<tr>
<td width="372">
<img src="images/tucquan.jpg" width="312" height="208" class="pic">
</td>
</tr>
<tr>
<td><small>photo caption</small>
</td>
</tr>
</table>
lots and lots an lots of text...<br><br>
and
<table width="266" border="0" align="center">
<tr>
<td width="134" height="127"><a href="crystalrange/index.html"><img
src="crystalrange/images/CrystalRangeopening.jpg" alt="" width="134" height="125" border="0" class="pic"></a>
</td>
<td width="134" valign="top"><a href="costarica/index.html"><img
src="costarica/images/CostaRicaopening.jpg" alt="" width="134" height="125" border="0" class="pic"></a>
</td>
</tr>
<tr>
<td width="134" valign="top"> <p>Join student Karen Blair as she travels to beautiful <a
href="crystalrange/index.html">Crystal Range, CA</a>.</p>
</td>
<td width="134" valign="top"> <p>Follow students on their trip to tropical <a href="costarica/index.html">Costa Rica</a>.</p>
</td>
</tr>
<tr>
<td valign="top"><a href="Grandcanyon/index.html"><img src="Grandcanyon/images/Grand-Canyon-5.jpg" width="133" height="125" border="0" class="pic"></a>
</td>
<td valign="top"><a href="bahamas/index.html"><img src="bahamas/images/tn/coast.jpg" width="134" height="125" border="0" class="pic"></a>
</td>
</tr>
<tr>
<td valign="top">students visit the the southwest U.S. and the <a href="Grandcanyon/index.html">Grand Canyon</a>.
</td>
<td valign="top">A Caribbean Dream: <a href="bahamas/index.html">San Salvador, Bahamas</a>.
</td>
</tr>
</table>
the code you provided does not show any CSS so we can't recreate the problem.. well I couldn't anyway as I don't have a MAC ;)
Also your question is about overlapping divs, yet there are no divs in the code you posted either?
If you can recreate the problem with one or two table cells or divs, then re-post it with the CSS it would be easier for someone to have a look and at the same time it might actually help you solve the problem.. the first rule in correcting a layout issue is to strip the code to the bare minimum to see if you can isolate the relevant area that is causing the problem. If you can then it's much easier for yourself and others to diagnose and treat.
Most here, at WebmasterWorld, are busy professionals and unfortunately what you have in your first post is akin to a site review, which we don't do here.. and unfortunately most have just seen the links and moved on.
Then secondly this is the CSS forum and your second post, the code, doesn't contain any :( so anyone "skimming" is puzzled...
There is no golden rule as to how to design for all(most) browsers except TEST, TEST, TEST..
if it still doesn't work after all that then at the very least you should have some specific search terms to help you narrow your search for your "bug"
Suzy
i appoligize. i really feel as though i started off here on the wrong foot. i appreciate your patience and courtesy.
by posting the links i in no way was looking for a site review or something like that, i just thought that was the best way to share the code. its all there already.
i guess my question is about floating divs - which is, i guess, html (not css) and their rendering in different browsers.
i will post my question in the html forum.
again, sorry for my confusion and thanks for your patience.
erik.
