HighDots Forums  

Re: My Text Moves Position Depending on the Browser IUse

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)


Discuss Re: My Text Moves Position Depending on the Browser IUse in the Macromedia Dreamweaver forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
TC2112
 
Posts: n/a

Default Re: My Text Moves Position Depending on the Browser IUse - 12-09-2007 , 02:10 AM






Hello,

The reason is this:

</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="139" border="0" cellpadding="0" cellspacing="0">

You are using <p> tags to control spacing in your layout.
You have the table that contains your rollover images spaced 3 paragraphs
from the top table.
The trouble is, the paragraphs have different default margins in different
browsers. This is why you have the alignment issue.
Normally, you would use CSS to give all the <p> tags the same margin to give
lines of text the same spacing cross browser.
However, that won't help here because users have different text sizes in
their browsers. Different text sizes means different line height.
In browsers with text view set to "big text" your table with the images
will have a lot of space between it and the top table. In browsers with
small text, the table will be much closer to the top table.
All the while, your AP divs will stay in the same place on the page.
The text will only line upo ver the images for those people who have their
text size set exactly the same as yours.
This is why you shouldn't use <p> tags to control spacing between objects when
graphically the
objects must be in a specific place in the layout.

The solution is to get rid of the <p> tags and use CSS to give the table
with the rollover images in it a top margin.

First, get rid of the <p> tags and give the table below them a CSS class.
Change this:

</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="139" border="0" cellpadding="0" cellspacing="0">

To this:
</table>
<table width="139" border="0" cellpadding="0" cellspacing="0"
class="leftnav">

Then, define the class in your CSS. You can add it at the end, right after
your a:active link style:

Change this:

a:active {
text-decoration: none;
}
-->
</style>

To this:

a:active {
text-decoration: none;
}
.leftnav {
margin-top:150px;
}
-->
</style>


Adjust the margin as desired to line the table with the images up with your
AP divs.

I hope this helped.

Take care,
Tim




Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.