Margin-top a negative

Have a page with copy on the left and a pic on the right in two different divs.In the dive on the left there is a policy statement that has one word and then an address to the right of that word. The way it is configured presently is in two seperate divs one floats left and the other floats right. However, the right div has a negative to margin, which may cause problems with some browsers. Here is a link: http://kellymaglia.com/test/contact.html
I would like to not use the negative top margin or use another method. thanks.

Using negative margins is almost always the poorest solution to a problem.
In the case of your page, I am not sure why you are using such a complex layout! Why not just use two adjacent divs, one containing all the content to the left of the (extremely large - 484K - image), and the other containing the image? Why do you need that 'returns_address' div at all? If you made all of that content inline, you would have no need for negative margins.

Similar Messages

AS3 TextField margin-top limitation

Hi, there!
It seens like Flash TextField have many format limitations, like margin-top or margin-bottom.
Is there a way to simulate it? I need that the hit area of the textfield start at y=0, but the text start at y=10. As I also need the text cursor, the current approach is: change the textfield Y when it receives focus. When the focus out, the textfield get back to the start positions and I insert a linebreak character at the start with a negative indent, to simulate the top margin... this is a very ugly solution... is there any best?
Thank you!
CaioToOn!

I think rob day's suggestion has merits too. Either way I
don't see any other way but inserting an extra element that adjusts
the spacing somehow.
Yes, it sucks that the majority of styling declarations are
not supported but, on the other hand, it is not such a big deal to
insert an element especially with the powerful XML tools in AS3.
You can create a function that will preprocess all XML "page"
nodes and insert an extra <p> tag after each <p> tag
(see attached code)
I did not check if code works - it is just a concept.
The same approach can be taken with rob's suggestion but
inside the <p> element that comes with the XML.

Hitting CR puts p style=margin-top: 0 in HTMLEditorKit, how to change?

Hello all, I notice that when I hit enter in my JTextPane, java puts in
<p style="margin-top: 0">some text</p> around the line of text.
this looks fine in the JTextPane, but if I save the contents and view
in a web browser (or other html viewers) I see what appears to be a line break between each line. I believe this is because there is no bottom margin. When I add bottm margin style, I see one line after another with no emtpy lines in between them.
so my question is, how
can I change the action associated with hitting CR to insert
<p style='margin-top:0; margin-bottom:0'>some text</p>
if so, can someone please point me to an example.
thank you

think I am on to something, but not sure this is the best way
Style mainStyle = document.getStyle(StyleContext.DEFAULT_STYLE);
Style bottomMarginPlusMainStyle = textPane.addStyle("p", mainStyle);
StyleConstants.setSpaceBelow(bottomMarginPlusMainStyle, 0.0f);
any other suggestions, after this I see a
<style>
p {margin-bottom: 0.0}
</style>
at the top of my source code for JTextPane

InD CS6, what happened to margin-top CSS property in EPUB?

I have been playing around with EPUB export in InDesign CS6. What surprised me the most is the missing CSS property. What's the reason to leave margin-top property out from the paragraph styles? Is this a feature, a bug or am I just doing something wrong? Others noticed this also?
Other thing which surprised me is the unit they use in margins. Earlier it was em but now it's pixel. Any way to change this?

@Steve,
When I turned the computer on this morning it said updates were available: CS6 2.02, I believe-although I can't remember for sure or find that version listed now on any "About" screen. I just clicked "Yes" to update. I'm not sure why they arrived for me but not you. I did have a problem with Acrobat X quitting yesterday (another CS6 bug) and had to deactivate and reactivate the package to get Acrobat to work. Don't know it that would affect updates though. I have never seen any availabe when I checked.
Anyway, the first thing I tested after the updates I received were installed was the epub export and nothing had changed regarding top spacing. Seems like we either have to add bottom spacing on previous paragraphs, use forced line breaks, edit CSS files, or create in CS5.5. For me, the latter still seems the easiest way to create an e-book after creating the print book.

Unwanted margin-top and margin-bottom styles

Editing a template-based page in Contribute CS3, there is no
List Properties option (Help file says "Note: This option is not
available for template-based pages or in tables.")
So how do I specify a class for a <ul> entry?
If I create the text first with a chosen class, then convert
to "Bulleted List", I end up with:
<ul style="margin-top: 0;">
<li><span class="reversed" style="margin-top: 0;
margin-bottom: 0;">
- which is not what I want (I want to set a non-zero bottom
margin, for example).
I am using an external CSS file, and there is no UL or LI
entry in the list of HTML styles that can be chosen in Contribute.
Should there be?
Is there some way of setting default styles for these tags in
the dwt template?
John Geddes

From what I know, in Contribute their is some tag users can't
apply style on.
Typical are <div> and <ul>, mainly because you
can't create them or select them. Only the CSS can give style to
these elements and have to be defined by the website
admin/designer.
If their is no style, default will apply (and margin depends
from browser). And if the way paragraph are marked (see
Admin>Users>Modify, Space between paragraphs either one line
using CSS and will ad inline styles to your tag <ul
style="margin: 0 0;" or two line using <p> which let
everything be controlled by the CSS.
A trick is to have a class style defined in the CSS and a
template element where users can apply the style.
For exemple putting a div in a table cell (I know this is
hell) in your editable region in your Template will allow users to
apply the class style to the selection (the table) and the cascade
will apply the style to the div or your list.
CSS:
table div, table ul {
margin: 0 0 2em 0;
or
td div , td ul {
margin: 0 0 2em 0;
But again, you need to be or have a very kind webmaster.
Usually, list are already design in the CSS by the webmaster
depending the region you are, exemple:
#content ul {
margin: 0 0 2em 0;
#head ul {
margin: 0.5em 0 1em 0;
Hope it helps.

Twitter api and $("#Stage").css("margin","top") issue

I put the twitter api from commonedge.org into my web project.
But I couldn't get it to work until i removed this from my stage:
$("#Stage").css("margin","top").
Once it was removed, the twitter api worked fine...
when I put it back in, it stops working again.
I'm puzzled why this is?
Anyone have an idea?

Ok,... so I figured out this was a line from hell... and I dont even know where I got it from
(as I've been juggling learning edge's actions/codes and messing things up).
Not only the twitter, but nothing else worked, symbols, actions, mouse and touch functions until I removed this line.
Once I deleted $("#Stage").css("margin","top") from the stage... it's all happy again
(until I put something else in that i have no clue what does)
it would be interesting though, if anyone knows if there EVER would be a reason to have this line?
And why it would/could kill all other functions?

Dreamweaver CS6 footer and sidebar positioning

On my dreamweaver page, it shows my sidebar all the way to the left, and the footer all the way at the bottom. However, online the sidebar is far away from the left, and the footer far from the bottom. How can I change this? I'd appreciate if someone could give me a step by step procedure, as I am new to dreamweaver.

OK, let me offer a few suggestions based on what I see.
First, you have a very attractive page.
Second, you have decided to put all of your styles in the page. That's going to be bad over the long haul, as you seem to have 7 web pages and, if you're going to do a good gallery, you could have 20 or more. You need a system that will allow you to crank out web pages easily and efficiently and have them load fast. A separate style sheet that sets things up for all pages will speed up page loads and allow you to concentrate on styles separately from your HTML.
Third, your flash website does not load as tested by Google's Chrome 28.0.1500.71. It works in Firefox 23.0.1. It works in Safari 5.1.9. Don't know why.
As to changing the viewport, simply drag the right edge of your web browser towards your left. You have not made a "responsive" website here, so your columns won't "stack" for mobile devices if that is what you are concerned about.
As to making a footer stay on the bottom, that's simple. Keep it outside your main container:
<div id="wrap">
<header>
</header>
          <div id="main">
          </div>
</div>
<footer>

</footer>
You see here that the footer is outside the "wrap" container. Now we need to style the stuff.
html, body {
   height: 100%;
#wrap {
   min-height: 100%;
#main {overflow:auto;
          padding-bottom: 150px; /* must be same height as the footer */
footer {
position: relative;
          margin-top: -150px; /* negative value of footer height */
          height: 150px;
          clear:both;
/*Opera Fix*/
body:before {
          content:"";
          height:100%;
          float:left;
          width:0;
          margin-top:-32767px;/
Then on each HTML page, put this in the <head> section:

DW CS3 crashing due to negative margin CSS?

I have a simply CSS layout with an element I'm positioning with a negative top margin.
Every time I input the margin attribute when in either Design view or Split view Dreamweaver throws the spinning beachball of death and I have to force quit.
I inched my way up to -100px just fine. As soon as I hit -200 pix I'm toast. I have replicated this over and over. I've tossed preferences, I've rebooted. I've opened other pages. I successfully input the proper value in Code view. But as soon as I toggle to Design or Split, same thing.
I'm using DW CS3, on a Mac G5 tower with loads of RAM, hard drive space. I'm running the current OS X update for my G5.
Insanely, the file will also crash DW CS3 on my MacBook Pro.
What could be so bad about one CSS entry that DW cannot display the page?
I don't recall ever seeing a CSS rule limiting negative margin...

8k exactly? As in 8192 bytes? If so, then you've been lucky to not see it crash. Try adding a comment line to the file just to bump it out of that 8K figure. Although I seem to recall that the 8k bug would crash DW without even getting the chance to open the file. There might be a chance that embedded CSS in an HTML file equals that number of bytes, too. If so, add a comment line there, too.
FWIW, the following causes no troubles on my CS3 Vista box.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
      #neg {
        margin-top: -212px; /* or any large number. Tried it up to 1024*/
    </style>
</head>
<body>
    <div id="neg">This is my negative margin content</div>
    <p>Here is my body content.</p>
</body>
</html>
Mark A. Boyd
Keep-On-Learnin' :-)

Negative Margin Alternative??

Hello, I know negative magins are not good practice and you want to avoid using them.
I was wondering if you can help me with this situation.
I am using a DW premade layout fixed, 1 column, header and footer.
I have a footer image that fades up into the content area. I want the content area to overlap the footer image a little. Now I am able to do it with a negative margin and it looks good. But what would be an alternative so I did not have to use negative margins? any ideas?
Thanks

Have a look at the following document which validates as HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {width: 980px; margin: auto;}
#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}
ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */
</style>
</head>
<body>
<div id="content">
    <h1>Main content in here</h1>
<ul>
    <li class="col1">Eggs</li>
    <li class="col1">Ham<li>
    <li class="col2 top">Bread<li>
    <li class="col2">Butter<li>
    <li class="col3 top">Flour<li>
    <li class="col3">Cream</li>
</ul>
</div>
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>
</body>
</html>
Gramps

Need help-confused on top margin space with div in sidebar div

Hello,
I have tried for hours to figure out what is affecting the margin of the top right div #first_ad which is contained in #sidebar2. Right now I have that div first nav with 10px top that looks like 30 in IE7 and 40px in iIE8 (chrome, firefox are fine). I have tried 0 margin on p and h tags and other things to lord only knows what else. I just cannot see what is affecting this.
If I could understand this it would be of great help as I seem to run into this alot with placing a div in a sidebar. I start out by using the dreamweaver templates in cs4 as my base.
Here is the link to the page.
http://www.hanovertypocraft.ca/test2/index3.html
Thank you for any assistance you may give me!!
below is the css
@charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000;
background-image: url(../images/hantypbg2.jpg);
background-repeat: no-repeat;
.thrColFixHdr #container {
width: 900px;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(../images/container_bkgd.png);
background-repeat: no-repeat;
.thrColFixHdr #header {
padding: 0;
height: 110px;
margin: 0px;
clear: none;
float: left;
width: 740px;
.thrColFixHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 165px; /* padding keeps the content of the div away from the edges */
display: inline;
.thrColFixHdr #container #sidebar1 p {
margin: 0px;
padding: 0px;
#header #head_logo_text {
height: 110px;
width: 355px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 225px;
color: #FFF;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
clear: none;
float: left;
margin-right: 0px;
padding: 0px;
#header #head_logo_text a {
color: #FFF;
#header #head_logo_text p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 21px;
margin: 0px;
padding: 0px;
.thrColFixHdr #container #header img {
margin: 0px;
padding: 0px;
#nav_home {
width: 135px;
padding: 0px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
height: 320px;
margin-top: 10px;
.thrColFixHdr #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 140px; /* padding keeps the content of the div away from the edges */
margin-right: 10px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #00F;
.thrColFixHdr #container #sidebar2 h1 {
margin: 0px;
padding: 0px;
.thrColFixHdr #container #sidebar2 p img {
margin: 0px;
padding: 0px;
.thrColFixHdr #container #sidebar2 p {
margin: 0px;
padding: 0px;
#mainContent {
margin-top: 10px;
margin-right: 160px;
margin-bottom: 0;
margin-left: 175px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
#mainContent p {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 20px;
margin: 0px;
padding: 0px;
#mainContent #flash_div {
width: 353px;
margin-right: auto;
margin-left: auto;
border: 3px solid #000;
height: 265px;
overflow: hidden;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#sidebar2 #first_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;
#sidebar2 #second_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;
#sidebar2 #third_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;
#sidebar2 #fourth_ad {
height: 140px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000;

Thank you.
I am relatively new at this and you guided me to google the patch and how to overrice it using - padding 10px !important; on my css which let me override the fixes padding.
I was under the misconception that the IE fix being in grey was only for information not actually pertinent.
Again thanks and I will try to research more regarding the implimentation of these patches

Can't seem to eliminate top margin of page

Page is here:
http://www.innerkids.net/tgf-odg2/
The wrapper is an outer table
Relevant CSS us:
<style type="text/css">

</style>
I've tried every CSS variation posted here with no success.
Sure would appreciate a hand here

that's really weird. i just recreated your page, and it looks
fine! i
didn't even have to change anything. i have no idea if this
will work,
but maybe you could try replacing your code with mine (it's
worth a
shot, at least):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tina Felluss, LCSW - Home page</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">

</style>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body
onLoad="MM_preloadImages('images/Navpink_01.jpg','images/Navpink_02.jpg','images/Navpink_ 03.jpg','images/Navpink_04.jpg','images/Navpink_05.jpg','images/Navpink_06.jpg','images/Na vpink_07.jpg')">

<table width="846" border="0" align="center"
cellpadding="0"
cellspacing="0">
<tr>
<td width="22" rowspan="2"
background="images/22x22_shadow_left.jpg"></td>
<td colspan="3"><div align="center"><img
src="images/Header.gif"
width="800" height="154"
border="0"></div></td>
<td width="22" rowspan="2"
background="images/22x22_shadow_right.jpg"></td>
</tr>
<tr>
<td width="132" align="right" valign="top"><div
align="center">
<p> </p>

<table width="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td><a href="index.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('home','','images/Navpink_01.jpg',1)"><img
src="images/Navgrey_01.jpg" alt="Home" name="home"
width="128"
height="15" border="0"></a></td>
</tr>
<tr>
<td><a href="mission.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('mission','','images/Navpink_02.jpg',1)"><img
src="images/Navgrey_02.jpg" alt="Mission" name="mission"
width="128"
height="18" border="0"></a></td>
</tr>
<tr>
<td><a href="practice.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('practice','','images/Navpink_03.jpg',1)"><img
src="images/Navgrey_03.jpg" alt="Practice" name="practice"
width="128"
height="19" border="0"></a></td>
</tr>
<tr>
<td><a href="workshops.html"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Workshops','','images/Navpink_04.jpg',1)"><img
src="images/Navgrey_04.jpg" alt="Workshops" name="Workshops"
width="128"
height="18" border="0"></a></td>
</tr>
<tr>
<td><a href="testimonials.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('testimonials','','images/Navpink_05.jpg',1)"><img
src="images/Navgrey_05.jpg" alt="Testimonials"
name="testimonials"
width="128" height="17" border="0"></a></td>
</tr>
<tr>
<td><a href="faq.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('FAQ','','images/Navpink_06.jpg',1)"><img
src="images/Navgrey_06.jpg" alt="FAQ" name="FAQ" width="128"
height="18"
border="0"></a></td>
</tr>
<tr>
<td><a href="contact.htm"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('contact','','images/Navpink_07.jpg',1)"><img
src="images/Navgrey_07.jpg" alt="Contact us" name="contact"
width="128"
height="20" border="0"></a></td>
</tr>
</table>
</div></td>

<td width="474" class="contentcell">
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec
molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
Vestibulum
condimentum facilisis nulla. In hac habitasse platea
dictumst. Nulla
nonummy. Cras quis libero. Cras venenatis. Aliquam posuere
lobortis
pede. Nullam fringilla urna id leo. Praesent aliquet pretium
erat.
Praesent non odio. Pellentesque a magna a mauris vulputate
lacinia.
Aenean viverra. Class aptent taciti sociosqu ad litora
torquent per
conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris
magna
eros, semper a, tempor et, rutrum et, tortor. </p>
</td>
<td width="190" valign="top">
<p> </p>

<table width="90%" height="364" border="0" align="center"
cellpadding="0" cellspacing="0" bordercolor="#00FFFF"
background="images/brown_boxbulletin.gif">
<tr>
<td height="91"> </td>
</tr>
<tr>
<td height="91"> </td>
</tr>
<tr>
<td height="91"> </td>
</tr>
<tr>
<td height="91"> </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p></td>
</tr>
<tr>
<td width="22"><img
src="images/22x22_corner_left.jpg" width="22"
height="22"></td>
<td colspan="3"
background="images/22x22_shadow_bottom.jpg"></td>
<td width="22"><img
src="images/22x22_corner_right.jpg" width="22"
height="22"></td>
</tr>
</table>
</body>
</html>
Ken Binney wrote:
> Page is here:
>
http://www.innerkids.net/tgf-odg2/
>
> The wrapper is an outer table
>
> Relevant CSS us:
> <style type="text/css">
> 
> </style>
>
> I've tried every CSS variation posted here with no
success.
> Sure would appreciate a hand here
>
>
>

IE8 adds extra top margin to li tag

I am noticing that IE8 adds more vertical space (top/bottom margin) between bulleted line items than in Firefox. I am pretty much just controlling this vertical space with the following CSS:
ul {padding-left: 8px;
margin-left: 7px;
margin-top: 0px
li {font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 0px;
margin-bottom: 4px;
color: #666666;
My example of using these tags is:
<li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li>
                                 <li>Ample foam support grips for maximum safety of various exercise positions.</li>
                                 <li>Wheels for easy moving.</li>
                                 </ul>
Does anyone know why IE8 & Firefox display this differently, and how to fix?

Okay, I'll build for FF, and use a conditional comment for IE only. But I'm still not sure how exactly. I'm actually pretty new at this, so a lot of the code that you originally supplied is a mystery to me. So to keep things simple, let's say hypothetically, that I wanted a conditional comment for IE so that the color looks different in IE only. I tried the following and it didn't work. What am I doing wrong? hopefully won't require replacing a ton of code?
<HTML>
<HEAD>
<TITLE>VB588 Pro Vibration Exerciser for Home or Commercial Use</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META name="keywords" content="VB588">
<META name="description" content="The">
<META content="MSHTML 6.00.2900.2523" name=GENERATOR>
<style type="text/css">

</style>
</HEAD>
<BODY class="BodyBackground">
<ul>
<li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li>
<li>Ample foam support grips for maximum safety of various exercise positions.</li>
<li>Wheels for easy moving.</li>
<li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li>
<li>Ample foam support grips for maximum safety of various exercise positions.</li>
<li>Wheels for easy moving.</li>
<li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li>
<li>Ample foam support grips for maximum safety of various exercise positions.</li>
<li>Wheels for easy moving.</li>
<li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li>
<li>Ample foam support grips for maximum safety of various exercise positions.</li>
<li>Wheels for easy moving.</li>
</ul>
</BODY></HTML>

IE9 top margin problem

Hi All,
I know this topic has been done to death but I still can't find a fix after many trawling the net.
The layout consists of a background swf file with html on top of that. The html has a centred div and inside that a floating div that I wanted to contain a horz nav bar.
I can position where I want by using top margin, looks correct in FF4 Safari Chrome but IE9 positions it at a different height from the top ie in IE9 the nav bar is higher up the page than it should be, have tried all sorts of tweaks but no luck, could someone have a look at this please.
Thanks in advance
Pete
HTML
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlashID">
    <param name="movie" value="construction-background.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="8.0.35.0" />
    
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <param name="SCALE" value="exactfit" />
    
    
    <object data="construction-background.swf" type="application/x-shockwave-flash" width="100%" height="100%">
      
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="8.0.35.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <param name="SCALE" value="exactfit" />
      
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      
    </object>
    
</object>
</div>
<div id="wrapper">
    <div id="navbar"></div>
</div>
CSS
body {
    margin: 0px;
#flash {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    overflow: hidden;
#wrapper {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
#navbar {
    height: 50px;
    width: 750px;
    position: relative;
    background-color: #666;
    margin-top: 450px;

In it's simplest form, a menu is merely a CSS styled list. Copy & paste the following code into a new, blank document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#navbar {
background:#999;
min-height: 75px;
_height: 75px; /**for pre-IE7**/
width: 750px;
overflow:hidden; /**float containment**/}
#navbar ul,
#navbar li {
margin:0;
padding:0;
list-style:none;
float:left;
font-size: 28px;}
/**links**/
#navbar li a {
display:block;
color: #FFF;
text-decoration:none;
/**space between links**/
padding: 25px;
#navbar li a:visited {color: #CCC;}
#navbar li a:hover,
#navbar li a:active,
#navbar li a:focus {
color: #FFCC00;
text-decoration:underline}
</style>
</head>
<body>

<div id="navbar">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div id="footer">
<p>your footer text goes here</p>
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Desk top and all graphics in negative

After a small inquisitive child (perhaps a future Apple user) fiddled with the key board, the desk top turned negative. I can't find the appropriate system preference to revert to normal graphics. Example: my firefox background is black etc.

There is a setting in Universal Access, where you can
reverse the black/white back to normal; and there is a
keyboard combination which can be used without this
system preference panel open; and that may be how
the situation occurred in the first place.
So, open System Preference 'universal access' panel to
change the setting back to normal, re-set to black on
white, from white on black.
Hopefully you can set up a second account for young
users with limits on their access of the system settings.
And if you run the computer in a non-Admin account as
your 'daily user' and reserve a main Admin account for
maintenance and upgrading the OS, a child or guest
user can't readily mess up the main OS X installation.
Good luck & happy computing!

[CS3][JS] How to turn negative number in array into string

Hello,
I have a script that compares the array of the geometric bounds of all text frames to the margins for a document (all pages having the same margins). Any frames that do not match the margins are flagged.
In order to compare the array of text frame geometric bounds to two arrays of margins (because they are facing pages), I have to convert the numbers to strings.
My problem is that in the following snippet of code that creates the two margin arrays, the negative of the variables become numbers again. This would not be too difficult to solve except that all the numbers have to be 4 decimal points before converted to strings.
Thanks,
Tom
var myDoc = app.activeDocument;
var marginY1 = myDoc.pages.item(0).marginPreferences.top.toFixed(4);
var marginX1 = myDoc.pages.item(0).marginPreferences.left.toFixed(4);
var marginY2 = (myDoc.documentPreferences.pageHeight - myDoc.pages.item(0).marginPreferences.bottom).toFixed(4);
var marginX2 = (myDoc.documentPreferences.pageWidth - myDoc.pages.item(0).marginPreferences.right).toFixed(4);
var marginsRHand = [marginY1, marginX1, marginY2, marginX2];
var marginsLHand = [marginY1, -marginX2, marginY2, -marginX1];

Well, I think I have solved it. But I don't know why this solves it.
I would think that in the above script all the variables would be numbers and not strings. But the data browser says they are strings.
The solution is:
var marginsLHand = [marginY1, Number(-marginX2).toFixed(4), marginY2, Number(-marginX1).toFixed(4)]
If someone can explain why now all variables in the arrays are strings and not numbers, I'll be happy.
Tom

Margin-top a negative

Similar Messages

Maybe you are looking for